<template>
  <div class="task-center">
    <avue-crud
      :data="tableData"
      :option="optionData"
      :page.sync="page"
      :table-loading="tableLoading"
      @size-change="sizeChange"
      @search-change="searchVal"
      @current-change="currentChange"
      @search-reset="searchReset"
    >
      <!-- 自定义搜索 -->
      <template slot="publishDateSearch">
        <el-date-picker
          v-model="publishDateTime"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
          @change="publishDateTimeChange"
        >
        </el-date-picker>
      </template>

      <!-- 自定义列 -->
      <template slot="scorePackageName1" slot-scope="scope">
        <el-tooltip
          class="item"
          effect="dark"
          :content="'积分包编号：' + scope.row.packageSn"
          placement="top-start"
        >
          <span>{{ scope.row.scorePackageName }}</span>
        </el-tooltip>
      </template>
      <template slot="taskTypes" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          icon="el-icon-view"
          @click="viewDetail(scope.row, scope.index)"
          >查看
        </el-button>
      </template>
      <!-- 右侧菜单 -->
      <template slot="menuRight">
        <el-checkbox
          v-model="toApproval"
          @change="toApprovalClick"
          class="checkbox"
          >只看待审核</el-checkbox
        >
        <el-button
          type="primary"
          :loading="exportFnLoading"
          icon="el-icon-download"
          size="small"
          @click.stop="exportFn"
        >
          导出数据
        </el-button>
      </template>
      <!-- 操作栏 -->
      <template slot="menu" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          icon="el-icon-view"
          @click="toView(scope.row, scope.index)"
          >查看
        </el-button>
      </template>
    </avue-crud>
    <!-- 表单-查看有效任务类型 -->
    <el-dialog
      title="有效任务类型"
      :visible.sync="taskTypedialog"
      width="50%"
      center
    >
      <div>
        <ul>
          <li v-for="(item, index) in taskTypes" :key="index">
            {{ item.code }}：{{ item.label }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskTypedialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { individualHandlesTasksOption } from "@/const/crud/csmpages/individualhandlestasks.js";
import { selectByScorePackageId } from "@/api/task/taskType";

import {
  getScorePackagePageForMahForBCApi,
  exportScorePackageMahForBcApi
} from "@/api/csmpages/index.js";
import { plist } from "@/const/crud/taskTypeTree/index";
export default {
  props: ["deptId"],
  data() {
    return {
      tableData: [],
      optionData: individualHandlesTasksOption,
      tableLoading: false,
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      publishDateTime: "",
      monthStart: "",
      monthEnd: "",
      toApproval: false,
      taskTypes: [],
      taskTypedialog: false,
      exportFnLoading: false
    };
  },
  watch: {
    deptId(val) {
      this.getList(this.page);
    }
  },
  mounted() {
    if (this.deptId) {
      this.getList(this.page);
    }
  },
  methods: {
    async getList(page, params) {
      this.tableLoading = true;
      const obj = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize,
          toApproval: this.toApproval,
          packageType1: "1",
          packageType2: "1",
          deptId: this.deptId
        },
        params,
        this.searchForm
      );
      const res = await getScorePackagePageForMahForBCApi(obj);
      this.tableData = res.data.data.records;
      this.page.total = res.data.data.total;
      this.tableLoading = false;
    },
    toApprovalClick() {
      this.page.currentPage = 1;
      this.getList(this.page);
    },
    async exportFn() {
      this.exportFnLoading = true;
      try {
        const obj = Object.assign(
          {
            deptId: this.deptId,
            packageType1: "1",
            packageType2: "1"
          },
          this.searchForm
        );
        const res = await exportScorePackageMahForBcApi(obj);
        let url = window.URL.createObjectURL(new Blob([res.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "导出数据.xlsx");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (err) {
        console.log("error", err);
      }
      this.exportFnLoading = false;
    },
    // 查看
    toView(row) {
      this.$router.push({
        path:
          "/admin/assignPoints/quota/taskAudit?id=" +
          row.id +
          "&type=look" +
          "&scorePackageStatus=" +
          row.scorePackageStatus
      });
    },
    downSuccess() {
      this.getList(this.page);
    },
    // 查看有效任务类型
    async viewDetail(row) {
      const res = await selectByScorePackageId({ id: row.id });
      console.log("res", res);
      this.taskTypes = res.data.data;
      this.taskTypes.forEach(item => {
        item.code = plist[item.code];
      });
      this.taskTypedialog = true;
    },
    // 查询栏-发布时间change
    publishDateTimeChange(val) {
      this.monthStart = val ? val[0] : "";
      this.monthEnd = val ? val[1] : "";
    },
    searchVal(form, done) {
      this.searchForm = form;
      this.searchForm.monthStart = this.monthStart;
      this.searchForm.monthEnd = this.monthEnd;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList(this.page);
    },
    currentChange(current) {
      this.page.currentPage = current;
      this.getList(this.page);
    },
    searchReset() {
      this.publishDateTime = "";
      this.monthStart = "";
      this.monthEnd = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.checkbox {
  margin-right: 15px !important;
}
</style>
