<template>
  <div class="work-platform-export">
    <el-container>
      <el-main class="container-white-no-padding">
        <div class="select">
          <el-container>
            <el-header>
              <span class="title">选择导出内容</span>
            </el-header>
            <el-main>
              <el-tree ref="tree" class="tree" :data="data" node-key="id" default-expand-all show-checkbox></el-tree>
            </el-main>
            <el-footer class="text-align_center">
              <el-button class="button" type="primary" :loading="btnLoading" @click="handleExport">导出</el-button>
            </el-footer>
          </el-container>
        </div>
        <div class="table">
          <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
            <el-table-column label="#" type="index" align="center" width="55"></el-table-column>
            <el-table-column label="状态" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.status === 0 ? '生成中' : '完成' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="文件大小" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.fileSize">{{ renderSize(scope.row.fileSize) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createName" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="!scope.row.url">等待中</span>
                <div v-else>
                  <el-link type="primary" @click.native="handleDownload(scope.row)" v-if="$permission('/workspace/folder/topicLibraryExport/download')">下载</el-link>
                  <el-link class="margin-left_10" type="danger" @click.native="handleDelete(scope.row)" v-if="$permission('/workspace/folder/topicLibraryExport/delete')">删除</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { downLoad2, getFileName, renderSize } from '@/utils'
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      projectId: this.$route.query.id,
      key: this.$route.query.key,
      data: [],
      customField: [],
      projectFile: [],
      btnLoading: false,
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        size: 10,
        current: 1,
        projectId: 0,
      },
    }
  },
  computed: {
    ...mapGetters(['webSocket', 'userinfo'])
  },
  async mounted() {
    this.queryParams.projectId = this.projectId
    this.getList()
    await this.getCustomField()
    await this.getProjectFile()
    this.data = [{
      id: '1',
      label: '专题库',
      disabled:!this.$r(this.projectId,[2]),
      children: [{
        id: '1-1',
        label: '基础信息',
        disabled:!this.$r(this.projectId,[2]),
      }, {
        id: '1-2',
        label: '报告',
        disabled:!this.$r(this.projectId,[2]),
        children: this.projectFile.filter(item => item.type === '1').map(item => {
          item.disabled=!this.$r(this.projectId,[2])
          return {
            id: `1-2-${item.id}`,
            label: item.name,
            disabled:item.disabled,
          }
        })
      }, {
        id: '1-3',
        label: '其他附件',
        disabled:!this.$r(this.projectId,[2]),
        children: this.projectFile.filter(item => item.type === '0').map(item => {
          item.disabled=!this.$r(this.projectId,[2])
          return {
            id: `1-3-${item.id}`,
            label: item.name,
            disabled:item.disabled,
          }
        })
      }]
    }, {
      id: '2',
      label: '专利',
      disabled:!this.$r(this.projectId,[2]),
      children: [{
        id: '2-1',
        label: '基础信息',
        disabled:!this.$r(this.projectId,[2]),
      }, {
        id: '2-2',
        label: '自定义栏位',
        disabled:!this.$r(this.projectId,[2]),
        children: [...this.customField.map(item => {
          item.disabled=!this.$r(this.projectId,[2])
          return {
            id: `2-2-${item.id}`,
            label: item.name,
            disabled:item.disabled
          }
        }), {
          id: '2-2-0',
          label: '标签',
          disabled:!this.$r(this.projectId,[2]),
        }]
      }, {
        id: '2-3',
        label: '附图',
        disabled:!this.$r(this.projectId,[2]),
      }, {
        id: '2-4',
        label: '说明书',
        disabled:!this.$r(this.projectId,[2]),
      }]
    }]
    this.webSocket.onmessage = (e) => {
      const { code, data, message } = JSON.parse(e.data)
      if (code === 902) {
        this.getList()
      } else if (code === 802) {
        this.$message.error(message)
      }
    }
    console.log(this.data)
  },
  methods: {
    renderSize,
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    handleDownload(row) {
      downLoad2(row.url)
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$api.deleteProjectExport({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.loading = false
          this.getList()
        }).catch(error => {
          this.loading = false
        })
      })
    },
    getList() {
      this.loading = true
      this.$api.getProjectExportList(this.queryParams).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleExport() {
      const selected = this.$refs.tree.getCheckedKeys()
      if (selected.length === 0) {
        this.$message.error('请选择导出内容')
        return false
      }
      let data = {
        key: this.key,
        projectId: this.projectId,
        projectInfo: selected.indexOf('1-1') !== -1,
        projectReport: selected.filter(item => item.substring(0, 4) === '1-2-').map(item => item.slice(4)),
        projectFile: selected.filter(item => item.substring(0, 4) === '1-3-').map(item => item.slice(4)),
        patentBase: selected.indexOf('2-1') !== -1,
        patentField: selected.filter(item => item.substring(0, 4) === '2-2-').map(item => item.slice(4)),
        patentImage: selected.indexOf('2-3') !== -1,
        patentInstruction: selected.indexOf('2-4') !== -1
      }
      this.btnLoading = true
      this.$api.exportProject(data).then(response => {
        this.btnLoading = false
      }).catch(error => {
        this.btnLoading = false
      })
    },
    async getCustomField() {
      let params = {
        size: 9999,
        current: 1,
        projectId: this.projectId,
      }
      const response = await this.$api.getProjectFieldList(params)
      this.customField = response.data.records
    },
    async getProjectFile() {
      let params = {
        size: 9999,
        current: 1,
        projectId: this.projectId,
      }
      const response = await this.$api.getProjectFileList(params)
      this.projectFile = response.data.records
    }
  }
}
</script>

<style lang="scss">
.work-platform-export {
  .select {
    width: 400px;
    height: 100%;
    float: left;
    border-right: 1px solid #d2d2d2;
    .button {
      width: 200px;
    }
    .title {
      padding-left: 20px;
      font-weight: bold;
    }
  }
  .table {
    float: right;
    width: calc(100% - 421px);
    padding: 10px;
  }
}
</style>