/**
*  @Author      LiuShaolong
*  @Description 附件列表
*  @CreateDate  2020/6/8
*/
<template>
  <el-dialog :visible="show" :title="title" width="800px" @close="close"
             :close-on-click-modal="false" :close-on-press-escape="false">
    <zy-page ref="page" :request="request" height="400px" :buttons="buttons" :searchable="false" :auto-load="false"
             :request-params="params"></zy-page>
    <zy-dialog :show="uploadShow" title="上传" :items="items" label-width="50px" width="400px"
               @close="uploadShow = false" @submit="bind">
      <zy-upload v-if="show" slot="after" :limit="9999" :multiple="true" @change="change"></zy-upload>
    </zy-dialog>
    <div slot="footer">
      <el-button @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import store from '../../../vuex/store'
  import {WebpageDataService} from "../../../assets/webpage";

  export default {
    name: 'ZyFile',
    components: {},
    props: {
      show: {type: Boolean, default: false},
      title: {type: String, default: '文件列表'},
      params: {
        type: Object, default: () => {
          return {ids: [], businessType: '', businessId: '', description: '', editable: true}
        },
      },
    },
    data() {
      return {
        request: WebpageDataService.webpage_data_file,
        buttons: [{
          name: '上传', click: this.upload, icon: "zytec icon-upload", disabled: () => !this.params.editable,
          hidden: () => !this.params.editable
        }, {
          name: '删除', click: this.delete, icon: "zytec icon-delete", buttonType: 'popover',
          disabled: (selection) => !this.params.editable || this.notSelect(selection),
          hidden: () => !this.params.editable
        }, {
          name: '预览', click: this.preview, icon: "zytec icon-view", disabled: this.notSingle
        }, {
          name: '下载', click: this.download, icon: "zytec icon-download", disabled: this.notSingle
        }],
        uploadShow: false,
        items: [{
          key: 'description', label: '描述', type: 'input'
        }],
        fileIds: []
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      show: {
        handler: function (nv) {
          nv && this.$nextTick(() => this.$refs['page'].loadData())
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      notSingle(selection) {
        return selection instanceof Array && selection.length !== 1;
      },
      notSelect(selection) {
        return selection instanceof Array && selection.length === 0;
      },
      close() {
        this.$emit('close')
      },
      upload() {
        this.uploadShow = true;
      },
      change(fileIds) {
        this.fileIds = fileIds;
      },
      bind(values) {
        let params = _.cloneDeep(this.params);
        _.merge(params, values);
        params.ids = this.fileIds;
        store.state.provider.service.FileService.attach(params, () => {
          this.$message.success('上传成功');
          this.$refs['page'].loadData();
          this.uploadShow = false;
        })
      },
      preview(selection) {
        store.state.provider.service.FileService.preview({id: selection[0].id})
      },
      download(selection) {
        store.state.provider.service.FileService.download({id: selection[0].id})
      },
      delete(selection) {
        store.state.provider.service.FileService.batch_delete(_.map(selection, 'id'), () => {
          this.$message.success('删除成功');
          this.$refs['page'].loadData();
        })
      },
    },
  }
</script>
<style scoped lang="scss">

</style>