
<!--
  使用方式：
  <Files :claimId="claimId" @count="(c)=>{this.filesCount = c}"></Files>

  属性   ： claimId
-->
<template>
  <div class="files-container">
    <Table
      ref="fileList"
      :columns="attachment"
      :data="fileList"
      stripe
      @on-selection-change="selectionFileChange"
      @on-select="selectionFileChange"
    ></Table>
    <div class="footer-btns">
      <!-- <Upload
        :action="uploadUrl"
        :data="{claimId: claimId}"
        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :on-success="getFiles"
        :on-error="getFiles"
      >
        <Button type="ghost" icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>-->
      <Button
        type="primary"
        :disabled="!!!selection.length"
        @click="batchDownLoadFile"
      >
        批量下载
      </Button>
      <FileUpload
        v-if="fileUploadAction&&isShowUpload"
        ref="fileUpload"
        :params="fileUploadParams"
        class="file-upload"
        :action="fileUploadAction"
        @UploadComplete="getFiles"
      ></FileUpload>
    </div>
  </div>
</template>
<script>
import util from '@paymentPlatformSrc/tools/util.js';
import extend from 'extend';
import FileUpload from './Upload.vue';
import Server from './server.js';

const urlParams = util.getUrlParams();
const server = new Server();
let vm;
export default {
  components: {
    FileUpload
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    claimId: {
      type: String,
      default() {
        return '';
      }
    },
    claimNo: {
      type: String,
      default() {
        return '';
      }
    },
    isShowUpload: {
      type: Boolean,
      default() {
        return false;
      }
    }
    // deleteShow: {
    //   type: Boolean,
    //   default() {
    //     return true;
    //   }
    // }
  },
  data() {
    return {
      isupload: '',
      selection: [],
      fileUploadParams: {},
      fileUploadAction: '',
      server,
      fileList: [],
      attachment: [
        {
          type: 'selection',
          align: 'center',
          width: 60
        },
        {
          title: this.$t('操作'),
          align: 'left',
          width: 120,
          render: (h, params) => {
            let tempData = [
              {
                type: 'text',
                text: '下载',
                handle: () => {
                  this.downLoadFile(params.row);
                }
              },
              {
                type: 'text',
                text: '删除',
                handle: () => {
                  this.deleteFile(params.row);
                }
              }
            ];
            // 如果是已办进来，则不许删除 注 : 跳转到本页的urlParams压根没有actionType
            if (urlParams.actionType === 'done') {
              tempData = [
                {
                  type: 'text',
                  text: '下载',
                  handle: () => {
                    this.downLoadFile(params.row);
                  }
                }
              ];
            }
            return h('RowTools', {
              props: {
                data: tempData
              }
            });
          }
        },
        {
          title: '附件名称',
          align: 'left',
          minWidth: 220,
          key: 'fileName'
        },
        {
          title: '创建人',
          align: 'left',
          width: 180,
          key: 'createUserName'
        },
        {
          title: '上传时间',
          align: 'left',
          width: 160,
          key: 'createTimeStr'
        }
      ],
      curassignee: '' // 当前审批人
    };
  },
  computed: {},
  watch: {
    claimId(newVal, oldVal) {
      this.fileUploadParams = { claimId: newVal, claimNo: this.claimNo };
      this.fileUploadAction = `?claimId=${newVal}&claimNo=${this.claimNo}`;
      this.claimId = newVal;
    }
  },
  created: function() {
    vm = this;
    this.getFiles();
    this.$emit('SetTitle', this.title);
  },
  beforeMount: function() {},
  mounted: function() {
    if (this.claimId != '') {
      this.fileUploadParams = { claimId: this.claimId, claimNo: this.claimNo };
      this.fileUploadAction = `?claimId=${this.claimId}&claimNo=${this.claimNo}`;
    }
    this.$emit('SetPageSize', window.innerWidth * 0.9);
    this.isupload = urlParams.isupload == 'open';
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    selectionFileChange(selection) {
      this.selection = selection;
    },
    batchDownLoadFile() {
      const idList = this.selection.map(item => {
        return item.fileId;
      });
      this.server.batchDownLoadFile({ idList: idList.join(',') });
    },
    getFiles() {
      if (!this.claimId) {
        return;
      }
      this.fileList = [];
      this.server.getFiles({ claimId: this.claimId, claimNo: this.claimNo }).then(response => {
        if (response.statusCode == -1) {
          this.$Message.error({
            content: response.msg || '操作失败',
            duration: 3
          });
        } else {
          this.fileList = [].concat(response);
          // 附件数量
          this.$emit('count', this.fileList.length);
        }
      });
    },

    deleteFile(data) {
      // 如果当前审批人不是登录人，也不是文件上传人，则不许删除
      // 起草节点curassignee为空
      /* 以下这段是完全没有用的 */
      // if (this.curassignee && (this.curassignee !== data.createUserId || this.curassignee !== urlParams.userCode) && urlParams.actionType !== 'start') {
      //   this.$Message.error({
      //     content: '仅允许删除自己提交的文件',
      //     duration: 3
      //   });
      //   return;
      // }
      /* 以上这段是完全没有用的 */
      if (!this.isShowUpload) {
        this.$Message.error({
          content: '不能删除',
          duration: 3
        });
        return;
      }

      new $confirm('确认删除？', this).then(() => {
        this.server.deleteFile({ fileId: data.fileId }).then(response => {
          if (response.statusCode == -1) {
            this.$Message.error({
              content: response.msg || '操作失败',
              duration: 3
            });
          } else {
            this.$Message.success({
              content: response.msg || '操作成功',
              duration: 3
            });
            this.getFiles();
          }
        });
      });
    },

    downLoadFile(data) {
      this.server.downLoadFile({ fileId: data.fileId });
    }
  }
};
</script>
<style lang="less" scoped>
.files-container .file-upload {
  display: inline-block;
  margin: 15px 0;
}
</style>
