<template>
  <div>
    <el-drawer
      size="46%"
      title="绩效指标"
      :visible.sync="isShow"
      direction="rtl"
    >
      <Button shape="circle"
              type="primary"
              :style="{
                'margin':'0 0 10px 20px'
              }"
              @click="isShowModal = true">
        目标选择</Button
      >
      <xy-table :list="list" :table-item="table">
        <template v-slot:btns> </template>
      </xy-table>
    </el-drawer>

    <el-dialog title="绩效指标列表" :visible.sync="isShowModal" width="54%">
      <Table
        :data="points"
        :columns="pointTable"
        :loading="loading"
        border
        size="small"
        :span-method="spanMethod"
        @on-selection-change="selectionChange"
      ></Table>
      <div style="display: flex; justify-content: center; margin: 10px 0">
        <Page :total="pointTotal"
              size="small"
              show-elevator
              show-total
              @on-change="e => {
                pointSelect.page = e;
                getPoints();
              }"/>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="evaluateForm.type === 1 ? '年中绩效目标' : '年末绩效目标'" :visible.sync="isShowEvaluate" width="54%">
      <el-input v-model="evaluateForm.result" type="textarea" :autosize="{minRows:6}" placeholder="请填写目标"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="submitEvaluate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { index, save, destroy } from "@/api/budget/planTarget";
import { index as pointIndex } from "@/api/achievements/points";
import { save as evaluateSave } from "@/api/achievements/evaluate"
import { resetSelect } from "@/utils"
export default {
  data() {
    return {
      isShow: false,

      list: [],
      table: [
        {
          label: "指标名称",
          prop: "target.name",
          minWidth: 200
        },
        {
          label: "半年（程）指标值",
          prop: "target.half_target",
          width: 180
        },
        {
          label: "全年（程）指标值",
          prop: "target.year_target",
          width: 180
        },
        {
          label: "创建时间",
          prop: "created_at",
          width: 200,
        },
        {
          label: "操作",
          align: "left",
          minWidth: 200,
          customFn: (row) => {
            return (
              <div style={
                {
                  'display':'flex',
                  'align-items':'center',
                  'flex-wrap':'wrap',
                  'justify-content':'flex-start'
                }
              }>
                <el-dropdown on={{
                  ['command']:command => {
                    this.evaluateForm.plan_target_id = row.id
                    this.evaluateForm.type = command
                    this.isShowEvaluate = true
                  }
                }}>
                  <el-button size="mini" type="primary">
                    绩效目标<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command={1}>年中目标</el-dropdown-item>
                    <el-dropdown-item command={2}>年末目标</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

                <el-popover
                  style="margin-left: .4em;"
                  placement="top"
                  width="160"
                  trigger="click"
                >
                  <p>确定删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text">
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      on={{
                        ["click"]: (e) => {
                          destroy({
                            id: row.id,
                          }).then((res) => {
                            this.$message({
                              type: "success",
                              message: "删除成功",
                            });
                            this.getList();
                          });
                        },
                      }}
                    >
                      确定
                    </el-button>
                  </div>

                  <el-button slot="reference" size="mini" type="danger">
                    删除
                  </el-button>
                </el-popover>
              </div>
            );
          },
        },
      ],
      select: {
        page: 1,
        page_size: 999,
        plan_id: "",
      },

      loading: false,
      isShowModal: false,
      pointSelect: {
        page: 1,
        page_size: 10,
      },
      points: [],
      pointTotal: 0,
      spanArr: [],
      spanArr1: [],
      pos1: 0,
      pos: 0,
      pointTable: [
        {
          type: "selection",
          width: 56,
          align: "center",
        },
        {
          title: "一级指标",
          key: "target_type",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.target_type_detail?.name);
          },
          minWidth: 180,
          align: "center",
        },
        {
          title: "二级指标",
          key: "target_type2",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.target_type2_detail?.name);
          },
          minWidth: 180,
          align: "center",
        },
        {
          title: "三级指标",
          key: "name",
          minWidth: 180,
          align: "center",
        },
        {
          title: "计算符号",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.symbol_detail?.value);
          },
          width: 160,
          align: "center",
        },
        {
          title: "半年（程）指标值",
          key: "half_target",
          width: 200,
          align: "center",
        },
        {
          title: "全年（程）指标值",
          key: "year_target",
          width: 200,
          align: "center",
        },
        {
          title: "单位",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.unit_detail?.value);
          },
          width: 160,
          align: "center",
        },
      ],
      selections: [], //已选择的全部计划

      isShowEvaluate: false,
      evaluateForm: {
        result: "",
        type: 1,
        file_ids: [],
        plan_target_id: ""
      }
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    getPlanId() {
      return this.select.plan_id;
    },
    setPlanId(plan_id) {
      this.select.plan_id = plan_id;
    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.key === "target_type") {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (column.key === "target_type2") {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    selectionChange(selection) {
      this.selections = Array.from(
        new Set(
          selection.map((item) => item.id)
        )
      );
      console.log(this.selections);
    },

    async getList() {
      this.pos = this.pos1 = 0;
      this.spanArr = [];
      this.spanArr1 = [];
      const res = await index(this.select);
      this.list = res.data;
    },

    async getPoints() {
      this.loading = true;
      try {
        const res = await pointIndex(this.pointSelect);
        let selectedIds = Array.from(new Set(this.list.map((item) => item.target_id)));
        this.points = res.data.map(item => {
          return {
            ...item,
            _checked: !!selectedIds.find(i => i === item.id) || !!this.selections.find(i => i === item.id),
            _disabled: !!selectedIds.find(i => i === item.id),
          }
        });
        this.pointTotal = res.total;

        for (let i in this.points) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
            this.spanArr1.push(1);
            this.pos1 = 0;
          } else {
            if (
              this.points[i]?.target_type_detail?.name ===
              this.points[i - 1]?.target_type_detail?.name
            ) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }

            if (
              this.points[i]?.target_type2_detail?.name ===
              this.points[i - 1]?.target_type2_detail?.name
            ) {
              this.spanArr1[this.pos1] += 1;
              this.spanArr1.push(0);
            } else {
              this.spanArr1.push(1);
              this.pos1 = i;
            }
          }
        }

        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },

    submit() {
      Promise.all(
        this.selections.map((target_id) => {
          return save({
            target_id,
            plan_id: this.getPlanId(),
          });
        })
      ).then((res) => {
        this.getList();
        this.isShowModal = false;
      });
    },
    submitEvaluate() {
      evaluateSave(this.evaluateForm).then(res => {
        this.$message({
          type: 'success',
          message: "保存成功"
        })
        this.isShowEvaluate = false;
      })
    }
  },
  computed: {},
  watch: {
    isShow(val) {
      if (val) {
        this.getList();
      } else {
      }
    },
    isShowModal(val) {
      if(val){
        this.getPoints();
      }else{
        this.selections = [];
        resetSelect(this.pointSelect);
        this.points = [];
        this.pointTotal = 0;
      }
    }
  },
};
</script>

<style scoped lang="scss"></style>
