<template>
  <ele-modal
    width="60%"
    :visible.sync="showEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    ref="Emodal"
  >
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      tool-class="ele-toolbar-form"
      :needPage="false"
      row-key="id"
    >
      <template v-slot:toolbar v-if="type != 'view'">
        <el-button type="primary" @click="fileEditOpen">本地上传</el-button>
        <el-button type="primary" @click="fileShow = true">
          关联文档库
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="browseOpen(row)"
        >
          浏览
        </el-link>

        <el-popconfirm
          v-if="type != 'view'"
          class="ele-action"
          title="确定要删除吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <template v-slot:footer>
      <el-button @click="showEditFlag = false">取消</el-button>
      <el-button type="primary" @click="addFile" v-if="type != 'view'">
        确认
      </el-button>
    </template>
    <fileEdit ref="fileEditRef" @done="done"></fileEdit>
    <ele-modal
      width="80%"
      :visible.sync="fileShow"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      append-to-body
    >
      <doc_template
        :disabledTableList="tableList"
        ref="doc_templateRef"
      ></doc_template>
      <template v-slot:footer>
        <el-button @click="fileShow = false">取消</el-button>
        <el-button type="primary" @click="addTemplate"> 确认 </el-button>
      </template>
    </ele-modal>
    <browse ref="browseRef"></browse>
  </ele-modal>
</template>

<script>
import doc_template from './doc_template.vue';
import fileEdit from './file-edit.vue';
import browse from './browse.vue';
import { queryIds } from './api';

export default {
  components: { doc_template, fileEdit, browse },

  data() {
    return {
      fileId: [],
      fileShow: false,
      showEditFlag: false,
      tableList: [],
      type: 'add',
      columns: [
        {
          label: '编码',
          prop: 'code',
          width: 180,
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'name',
          label: '文档名称',
          align: 'center',
          slot: 'name',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'storagePath',
          label: '文件名称',
          align: 'center',

          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (_row, _column, cellValue) => {
            return cellValue && cellValue[0]?.name;
          }
        },
        {
          prop: 'version',
          label: '版本',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },

        {
          prop: 'createUserName',
          label: '创建人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160
        },

        {
          prop: 'sizeUnit',
          label: '文档大小',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ]
    };
  },
  created() {},

  methods: {
    open(fileId, type) {
      //查看详情:view 新增:add
      this.showEditFlag = true;
      this.fileId = fileId || [];
      if (type) {
        this.type = type;
      }
      this.init();
    },
    fileEditOpen() {
      this.$refs.fileEditRef.open();
    },
    remove(row) {
      this.tableList = this.tableList.filter((item) => item.code != row.code);
      this.fileId = this.tableList.map((item) => item.id);
    },
    async init() {
      if (this.fileId.length > 0) {
        this.tableList = await queryIds({ ids: "'" + this.fileId + "'" });
      } else {
        this.tableList = [];
      }
    },
    done(id) {
      this.fileId.push(...id);
      this.init();
    },
    browseOpen(row) {
      this.$refs.browseRef.open(row);
    },
    addFile() {
      this.$emit(
        'success',
        this.tableList.map((item) => item.id)
      );
      this.showEditFlag = false;
    },
    addTemplate() {
      let list = this.$refs.doc_templateRef.getTableList();
      this.fileShow = false;
      if (list.length == 0) {
        this.$message.error('请选择一条数据');
        return;
      }
      this.tableList.push(...list);
    }
  }
};
</script>
