<template>
  <div class="page">

    <el-table border v-loading="loading" :data="tableData" max-height="500px">
      <el-table-column prop="title" label="标题" align="center">
      </el-table-column>
      <el-table-column prop="subjectName" label="主题分类" align="center">
        <template slot-scope="scope">
          <div v-for="(item,key) in themeClass" :key="key">
            <div v-if="scope.row.subjectId===item.id">{{item.name}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createdBy" label="创建人" align="center">
      </el-table-column>
      <el-table-column width="300" prop="createdDate" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="openDialog(scope.row.id)" v-if="showButtons.distribution" size="mini" type="text" style="font-weight:700">
            分配任务
          </el-button>
          |
          <el-popconfirm title="是否确认完成分配？" @confirm='onConfirm(scope.row)' v-if="showButtons.complete">
            <el-button slot="reference" size="mini" type="text" style="font-weight:700;color:#13ce66">完成任务
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>
    <transition>
      <catalog :userList="userList" :catalogueDia="catalogueDia" :treeData="treeData" :rowId="rowId" @cancel="cancel"
        @getTree="openDialog" />
    </transition>
  </div>
</template>
<script>
  import catalog from "./catalogueDia";
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  import {
    updateStateOne
  } from "@/api/archiveUtilize/compilationResearch/taskAllocation"
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => {},
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      themeClass: {
        type: Array,
        default: () => [],
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    components: {
      catalog,
    },
    computed: {
      ...mapState({
        treeData: (state) => state.taskAllocation.treeData,
        userList: (state) => state.taskAllocation.userList,
      }),
    },
    data() {
      return {
        catalogueDia: false,
        rowId: "",
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      openDialog(val) {
        this.rowId = val.toString();
        let data = {
          pId: -1,
          dataId: val,
        };
        this.$store.dispatch('taskAllocation/getTree', data).then(res => {
          this.catalogueDia = true;
        })
        // getTree(data).then((res) => {
        //   this.treeData = res.body.list;
        //   this.catalogueDia = true;
        // });
      },
      //取消任务分配弹框
      cancel() {
        this.catalogueDia = false;
      },
      onConfirm(val) {
        let data = {
          id: val.id,
        };
        updateStateOne(data).then((res) => {
          message("success", "完成分配成功", 2000);
          this.$emit("refreshTable");
        });
      },
      sumbit() {

      }
    }
  }

</script>
