<template>
  <div>
    <top-nav title="附件"
             :showQuery="false"
             :backFunc="returnLast"></top-nav>
    <div class="page-contain">
      <van-row style="border-bottom: 1px solid #e9e9e9; text-align: center">
        <van-col span="2">序号</van-col>
        <van-col span="14">名称</van-col>
        <van-col span="8"
                 v-if="dataList.length!==0&&param.isDelete">操作</van-col>
      </van-row>
      <div v-if="dataList.length!==0"
           :style="{fontWeight:'bold',overflow:'auto',height:contentHeight}">
        <van-row v-for="(item, index) in dataList"
                 :key="index"
                 style="font-size: 12px;padding: 5px 0px;border-bottom:1px solid #e9e9e9">
          <van-col span="2"
                   style="text-align: center">{{
        index+1
      }}</van-col>
          <van-col span="14"
                   @click="previewFile(item)"
                   style="color:#008cee">{{ item.fileName}}</van-col>
          <van-col span="8"
                   style="color: #0077fa;padding-bottom:5px">
            <span v-if="param.isDelete">
              <van-icon name="delete-o"
                        @click="delFile(item)" /> 删除
            </span>
          </van-col>
        </van-row>
      </div>
      <van-empty v-else
                 description="暂无数据！" />
    </div>
  </div>

</template>

<script>
export default {
  name: 'attachment',
  data () {
    return {
      contentHeight: window.innerHeight - 80 + 'px',
      param: {
        fileId: '', // 附件ID
        fileName: '', // 附件名称
        modelId: '', // 模块ID
        busId: '', // 业务ID
        uid: null, // 用户ID
        isDelete: false // 是否可以删除,boolean
      },
      dataList: []
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/attachment') {
        this.getFileList(this.param)
      }
    }
  },
  mounted () {
    if (this.$route.query) {
      for (let key in this.param) {
        if (this.$route.query[key]) {
          this.param[key] = this.$route.query[key]
        }
      }
      this.getFileList(this.param)
    }
  },
  methods: {
    returnLast () {
      this.$router.back(-1)
    },
    previewFile (row) { this.getFileUrl(row.fileId) },
    // 查询附件
    getFileList (param) {
      if (param['modelId'] === '' || param['busId'] === '') {
        console.log('查询附件的模块ID和业务ID不能为空！')
        return false
      }
      this.$axios.post({
        domain: 'crmUrl',
        url: 'attachFiles.getAttachFilelist',
        requestType: 'body',
        data: param,
        success: (res) => {
          if (res.success) {
            let data = res.data || []
            this.dataList = data
          }
        }
      })
    },
    // 删除附件
    deleteFile (row) {
      this.$axios.post({
        domain: 'crmUrl',
        url: 'attachFiles.getAttachFilelist',
        requestType: 'body',
        data: row,
        success: (res) => {
          if (res.success) {
            this.$toast.success('删除成功！')
            this.getFileList(this.param)
          }
        }
      })
    },
    // 获取文件地址
    getFileUrl (fileId) {
      let param = {
        fileId: fileId,
        busSystem: 'cloud-crm-project',
        busModel: 'cloud-crm-project',
        uid: this.param.uid || 'def'
      }
      this.$axios.post({
        domain: 'attachUrl',
        url: 'downLoadFile',
        requestType: 'form',
        data: param,
        success: function (res) {
          if (res.success) {
            longsysWebview.openReader({
              url: res.data
            })
          }
        },
        error: function (res) {
          this.$message.error(res.msg)
          this.finished = true
        }.bind(this)
      })
    }
  }
}
</script>

<style scoped  lang="scss">
.page-contain {
  padding: 100px 20px;

  .file-wrap {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 20px 0;

    .file-name {
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
    }
    .tool-btn {
      display: flex;
      > div {
        flex: 1;
        padding: 20px 0;
        text-align: center;
      }
      .left {
        border-right: 1px solid #ddd;
      }
    }
  }
}
</style>
