<template>
  <div>
    <Drawer title="查看详情" :closable="false" :width="54" v-model="isShow" class-name="upload-drawer__container">
      <div class="item">
        <div class="item__title">
          所属年份
        </div>
        <div class="item__value">
          {{ detail.year }}
        </div>
      </div>

      <div class="item">
        <div class="item__title">
          相关部门
        </div>
        <div class="item__value">
          {{ detail.department ? detail.department.name : '无' }}
        </div>
      </div>

      <div class="item">
        <div class="item__title">
          上传时间
        </div>
        <div class="item__value">
          {{ detail.created_at }}
        </div>
      </div>

      <div class="item">
        <div class="item__title">备注</div>
        <div class="item__value">{{ detail.remark }}</div>
      </div>

      <div class="item">
        <div class="item__title">附件</div>
        <div v-for="i in detail.files">
          <a @click="open(i)">{{ i.original_name }}</a>
        </div>
      </div>
    </Drawer>

    <Modal
      :width="76"
      transfer
      v-model="showModal"
      :footer-hide="true"
      title="预览"
    >
      <template>
        <iframe
          style="width: 100%; height: 57vh"
          :src="codeUri"
          border="0"
        ></iframe>
      </template>
    </Modal>
  </div>
</template>

<script>
import { show } from "@/api/budget/prePlan";
export default {
  data() {
    return {
      showModal: false,
      codeUri: '',

      id: '',
      isShow: false,
      detail: {},
    }
  },
  methods: {
    setId (id) {
      this.id = id
    },
    show () {
      this.isShow = true
    },
    hide () {
      this.isShow = false
    },
    async getDetail () {
      const res = await show({
        id: this.id
      })
      this.detail = res
      console.log(this.detail)
    },

    open(e) {
      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
        new Buffer(e.url).toString("base64")
      )}`;

      this.showModal = true;
    }
  },
  computed: {},
  watch: {
    isShow (newVal) {
      if (newVal) {
        this.getDetail()
      } else {
        this.id = ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .ivu-drawer {
  top: 51px!important;
}

.item {

  &__title {
    font-weight: 600;
    font-size: 15px;

    padding: 20px 0;
  }
  a {
    color: red;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>

