<template>
  <div class="basic-target ele-body">
    <el-card
      shadow="never"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255, 1)"
    >
      <tab @update:type="updateType($event)" />
      <search :type="1" @search:task="updateParams($event)" />
      <el-table
        :data="dataList"
        border
        highlight-current-row
        :height="tableHeight"
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column
          label="一级指标"
          min-width="80"
          align="center"
          prop="quota1"
          :key="1"
        ></el-table-column>

        <el-table-column
          label="二级指标"
          min-width="80"
          align="center"
          prop="quota2"
          :key="2"
        ></el-table-column>

        <el-table-column
          label="考核内容和计分细则"
          align="center"
          min-width="400"
          prop="content"
          :key="3"
        ></el-table-column>

        <el-table-column
          label="分值"
          min-width="60"
          align="center"
          prop="points"
          :key="4"
        ></el-table-column>

        <el-table-column
          label="预计扣分"
          min-width="80"
          align="center"
          v-if="type.type == 1"
          :key="5"
        >
          <template slot-scope="{ row, $index }">
            <div @dblclick="showText($index, true)" style="height: 100%">
              <el-input
                v-model="row.deptPoints"
                v-if="row.focus"
                @blur="
                  showText($index, false);
                  updatePoints(row, $index);
                "
              ></el-input>
              <span v-else>{{ row.deptPoints }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="区牵头单位"
          min-width="95 "
          align="center"
          prop="leaderUnit"
          :key="6"
        >
          <template slot-scope="{row}">
            <pre>{{row.leaderUnit}}</pre>
          </template>
        </el-table-column>

        <el-table-column
          label="牵头部门"
          min-width="80"
          align="center"
          :key="7"
        >
          <template slot-scope="{ row }">
            <span>
              <pre>{{ row.leaderDeptList | formatList }}</pre>
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="责任领导"
          min-width="80"
          align="center"
          :key="8"
        >
          <template slot-scope="{ row }">
            <pre>{{ row.leaderPrincipalList | formatList }}</pre>
          </template>
        </el-table-column>

        <el-table-column
          label="备注"
          align="center"
          min-width="100"
          prop="note"
          v-if="type.type == 1"
          :key="9"
        ></el-table-column>

        <el-table-column label="操作" width="125" align="center" :key="10">
          <template slot-scope="{ row }">
            <el-link
              slot="reference"
              icon="el-icon-setting"
              type="primary"
              :underline="false"
              @click="showLeaderDept(row)"
              >设置牵头部门</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page.sync="page.page"
        :page-size="page.limit"
        :total="count"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :pager-count="5"
        class="ele-pagination-circle"
        :flat="true"
        @current-change="getDataList()"
      />

      <el-dialog
        title="设置牵头部门"
        :visible.sync="showDep"
        width="400px"
        custom-class="ele-dialog-form"
        :lock-scroll="true"
        :destroy-on-class="true"
      >
        <treeselect
          :disable-branch-nodes="true"
          v-model="updateData.leaderDept"
          :flat="true"
          :options="formatDep"
          :multiple="true"
          placeholder="请选择牵头部门"
          :defaultExpandLevel="2"
          :normalizer="
            (d) => {
              return {
                id: d.id,
                label: d.name,
                children:
                  d.children && d.children.length > 0 ? d.children : undefined,
              };
            }
          "
        />
        <div slot="footer">
          <el-button @click="showDep = false">取消</el-button>&nbsp;
          <el-button type="primary" @click="updateLeaderDept">保存</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import tab from "./tab";
import search from "./search";
import api from "@/api/assessingTarget/basicTarget";
import { mergeSpan } from "@/utils/mixin";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect"; // 下拉树
import { mapGetters } from "vuex";
export default {
  components: {
    tab,
    search,
    Treeselect,
  },
  mixins: [
    mergeSpan([
      { name: "quota1", col: [1] },
      { name: "quota2", col: [2] },
    ]),
  ],
  data() {
    return {
      dataList: [],
      loading: false,
      count: 0,
      tableHeight: document.documentElement.clientHeight - 305,
      page: {
        page: 1,
        limit: Math.floor(
          (document.documentElement.clientHeight - 305 - 45) / 45
        ),
      },
      searchParams: {
        quota1: "",
        quota2: "",
        leaderDept: undefined,
        cooperateDept: undefined,
        quota: "",
        content: "",
        leaderUnit: "",
      },
      updateData: [],
      showDep: false,
      type: { type: 0 },
      preValue: "",
    };
  },
  created() {
    this.getDataList();
  },
  computed: {
    ...mapGetters(["formatDep"]),
  },
  filters: {
    formatList(val) {
      if (val) {
        return val.join("\n");
      }
    },
  },
  methods: {
    updateType(data) {
      this.type = data;
      this.resetCurrentPage();
      this.getDataList();
    },
    updateLeaderDept() {
      api
        .updateLeaderDept({
          itemId: this.updateData.id,
          leaderDept: this.updateData.leaderDept.join(","),
        })
        .then(() => {
          this.$message({ type: "success", message: "设置牵头部门成功" });
          this.showDep = false;
        })
        .catch(() => {
          this.$message.error("设置牵头部门失败");
        })
        .finally(() => {
          this.getDataList();
        });
    },
    showLeaderDept(row) {
      let data = JSON.parse(JSON.stringify(row));
      this.showDep = true;
      data.leaderDept = (data.leaderDept && data.leaderDept.split(",")) || [];
      data.leaderDept = data.leaderDept.map((item) => {
        return parseInt(item);
      });
      this.updateData = data;
    },
    updateParams(data) {
      this.searchParams = data;
      this.resetCurrentPage();
      this.getDataList();
    },
    resetCurrentPage() {
      let page = this.page;
      page.page = 1;
      this.page = page;
    },
    updatePoints(row, index) {
      if (row.deptPoints == this.preValue) {
        return;
      }
      if (
        row.deptPoints < 0 ||
        row.deptPoints > row.points ||
        !row.deptPoints.trim()
      ) {
        this.$message({
          type: "warning",
          message: "请输入数值0~" + row.points,
        });
        let data = this.dataList;
        data[index].deptPoints = this.preValue;
        this.dataList = data;
        return;
      }
      api
        .updatePoints({
          itemId: row.id,
          expectedPoints: row.deptPoints,
        })
        .then((res) => {
          this.$message({ type: "success", message: "修改成功" });
        })
        .catch(() => {
          this.$message.error("修改失败");
          this.getDataList();
        });
    },
    showText(index, bool) {
      let data = this.dataList;
      data[index].focus = bool;
      this.dataList = data;
      if (bool) {
        this.preValue = data[index].deptPoints;
      }
    },
    getDataList() {
      try {
        this.$refs.table.bodyWrapper.scrollTop = 0;
      } catch (e) {}
      this.loading = true;
      api
        .getList(Object.assign({}, this.type, this.searchParams, this.page))
        .then((res) => {
          let data = res.data.data.records;
          data = data.map((item) => {
            item.year = item.year + "";
            item.focus = false;
            item.selectFocus = false;
            return item;
          });
          this.dataList = this.reduceData(data);
          this.count = res.data.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.dataList = [];
          this.count = 0;
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
</style>