<template>
  <div class="page">
    <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="doExport"
        :disabled="isExport"
        >导出</el-button
      >
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        @click="setdialog(1)"
        >导出表格设置</el-button
      >
      <el-button
        type="primary"
        size="mini"
        slot="table-head-left2"
        v-if="showBtn"
        style="margin-left: 10px"
        @click="handleRefresh"
        :loading="btnFreshLoading"
        >手动更新</el-button
      >
      <span class="freshTime" slot="table-head-left2">
        <i class="el-icon-refresh"></i>
        <span
          >上次绩效汇总时间：{{
            tableData.dict.summaryTime ? tableData.dict.summaryTime : "--"
          }}</span
        >
      </span>
    </LayoutTable>

    <dialog-show ref="dialogform" @ok="getData" />
    <div class="mask" v-if="progress">
      <el-progress :stroke-width="26" :percentage="percent"></el-progress>
    </div>
    <el-dialog
      title="系统提示"
      :visible.sync="dialogOpen"
      width="500px"
      append-to-body
      @close="cancleFresh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="fresh_box" v-if="showContent">
        <div class="title_box" style="margin-bottom: 20px">
          仅支持手动更新月度绩效数据，请选择需要更新的月份：
        </div>
        <el-date-picker
          v-model="freshDate"
          type="month"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          placeholder="请选择月"
        >
        </el-date-picker>
      </div>
      <div class="fresh_box" v-else>
        <div
          class="title_box"
          style="margin-bottom: 20px; line-height: 30px"
          v-if="showTip"
        >
          请确认是否开始进行{{ freshDate }}的绩效数据重新汇总；此过程预计需要
          <span style="color: #ff0000">15</span> 分钟，请勿关闭或刷新页面
        </div>
        <div
          class="title_box"
          style="margin-bottom: 20px; line-height: 30px"
          v-else
        >
          正在进行{{ freshDate }}的绩效数据重新汇总；此过程预计还需要
          <span style="color: #ff0000">{{ restTime }}</span>
          分钟，请勿关闭或刷新页面
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="showTip">
        <el-button
          type="primary"
          @click="() => (showContent = false)"
          v-if="showContent"
          >确 定</el-button
        >
        <el-button
          type="primary"
          @click="submitFresh"
          v-else
          :loading="submitLoad"
          >确 定</el-button
        >
        <el-button @click="cancleFresh">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 导出表格设置 -->
    <el-dialog :visible.sync="isdialog" title="导出表格设置">
      <div class="tipsword">
        请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。
      </div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="(item, index) in setcolum"
          :key="index"
          :label="item.prop"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <div class="mt20" style="text-align: right">
        <el-button @click="handleCancel(1)">取消</el-button>
        <el-button type="primary" @click="handleSubmit(1)">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
export default {
  name: "StaffPerformSummaryList",
  components: {
    dialogShow,
  },
  mixins: [table],
  created() {},

  methods: {
    // 表格设置弹窗取消操作
    handleCancel(i) {
      if (i == 1) {
        this.checkList = [];
        this.isdialog = false;
      } else {
        this.setDialog = false;
      }
    },
    // 表格设置提交操作
    handleSubmit(i) {
      if (i == 1) {
        this.doExport();
        this.isdialog = false;
      } else {
        this.config.columns.forEach((v) => {
          v.prop && v.label ? (v.show = false) : (v.show = true);
          this.checkTableList.forEach((val) => {
            if (v.prop == val) {
              v.show = true;
            }
          });
        });
        this.$forceUpdate(this.config.columns);
        this.setDialog = false;
      }
    },
    //表格设置弹窗
    setdialog(i) {
      if (i == 1) {
        this.setcolum = this.config.columns.filter(
          (item) => item.label && item.prop
        );
        this.setcolum.forEach((v) => {
          v.prop == "attendScore"
            ? (v.label = `服务规范${
                "（考勤绩效/" +
                this.tableData.dict.weightPdu.attendWeight +
                "分）"
              }`)
            : v.prop == "reviewScore"
            ? (v.label = `群众评议${
                "（评价绩效/" +
                this.tableData.dict.weightPdu.reviewWeight +
                "分）"
              }`)
            : v.prop == "goworkScore"
            ? (v.label = `工作效能${
                "（办件绩效/" +
                this.tableData.dict.weightPdu.goworkWeight +
                "分）"
              }`)
            : v.prop == "effectScore"
            ? (v.label = `工作纪律${
                "（效能绩效/" +
                this.tableData.dict.weightPdu.effectWeight +
                "分）"
              }`)
            : v.prop == "complainScore"
            ? (v.label = `综合管理${
                "（自评绩效 *" +
                this.tableData.dict.weightPdu.selfWeight +
                "%）"
              }`)
            : v.prop == "otherScore"
            ? (v.label = `其他绩效${"（其他绩效）"}`)
            : "";
        });
        this.isdialog = true;
      } else {
        this.setDialog = true;
        this.setcolum = this.config.columns.filter(
          (item) => item.label && item.prop
        );
        this.setcolum.forEach((v) => {
          v.prop == "attendScore"
            ? (v.label = `服务规范${
                "（考勤绩效/" +
                this.tableData.dict.weightPdu.attendWeight +
                "分）"
              }`)
            : v.prop == "reviewScore"
            ? (v.label = `群众评议${
                "（评价绩效/" +
                this.tableData.dict.weightPdu.reviewWeight +
                "分）"
              }`)
            : v.prop == "goworkScore"
            ? (v.label = `工作效能${
                "（办件绩效/" +
                this.tableData.dict.weightPdu.goworkWeight +
                "分）"
              }`)
            : v.prop == "effectScore"
            ? (v.label = `工作纪律${
                "（效能绩效/" +
                this.tableData.dict.weightPdu.effectWeight +
                "分）"
              }`)
            : v.prop == "complainScore"
            ? (v.label = `综合管理${
                "（自评绩效 *" +
                this.tableData.dict.weightPdu.selfWeight +
                "%）"
              }`)
            : v.prop == "otherScore"
            ? (v.label = `其他绩效${"（其他绩效）"}`)
            : "";
        });

        this.checkTableList = this.config.columns
          .map((item) => {
            if (item.show && item.prop) {
              return item.prop;
            }
          })
          .filter((v) => v);
      }
    },

    countDown() {
      if (this.percent == 95) {
        if (this.selection.length > 0) {
          this.query["idList"] = this.selection;
        }
        if (this.checkList.length > 0) {
          this.query["properties"] = this.checkList;
        }
        this.$download(
          "/staff/perform/summary/exportExcel",

          {
            ...this.query,
            page: 1,
            size: -1,
          },
          { type: "excel", name: "绩效汇总" }
        )
          .then(() => {
            this.percent = 100;
            this.progress = false;
            this.isExport = false;
          })
          .catch((error) => {
            this.isExport = false;
            this.progress = false;
            this.$message.error(error.message);
          });
        return;
      } else {
        this.percent = this.percent + 1;
        let that = this;
        setTimeout(function () {
          that.countDown();
        }, 200);
      }
    },
    /** 导出Excel */
    doExport() {
      this.isExport = true;
      this.progress = true;
      this.percent = 0;
      this.countDown();
    },
    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row);
    },
    afterRender(data) {
      data.dict.sortKind = {
        2: "正序",
        1: "倒序",
      };
      this.config.columns.forEach((v) => {
        v.label == "服务规范"
          ? (v.label = (
              <p>
                <span>服务规范</span>
                <p>
                  {"（考勤绩效/" + data.dict.weightPdu.attendWeight + "分）"}
                </p>
              </p>
            ))
          : v.label == "群众评议"
          ? (v.label = (
              <p>
                <span>群众评议</span>
                <p>
                  {"（评价绩效/" + data.dict.weightPdu.reviewWeight + "分）"}
                </p>
              </p>
            ))
          : v.label == "工作效能"
          ? (v.label = (
              <p>
                <span>工作效能</span>
                <p>
                  {"（办件绩效/" + data.dict.weightPdu.goworkWeight + "分）"}
                </p>
              </p>
            ))
          : v.label == "工作纪律"
          ? (v.label = (
              <p>
                <span>工作纪律</span>
                <p>
                  {"（效能绩效/" + data.dict.weightPdu.effectWeight + "分）"}
                </p>
              </p>
            ))
          : v.label == "综合管理"
          ? (v.label = (
              <p>
                <span>综合管理</span>
                <p>{"（自评绩效 *" + data.dict.weightPdu.selfWeight + "%）"}</p>
              </p>
            ))
          : v.label == "其他绩效"
          ? (v.label = (
              <p>
                <span>其他绩效</span>
                <p>{"（其他绩效）"}</p>
              </p>
            ))
          : "";
        // if(||v.label='评价绩效分数'||v.label='办件绩效分数'||v.label='效能绩效分数'||v.label='自评绩效分数'){

        // }
      });
    },
    handleRefresh() {
      this.dialogOpen = true;
      this.btnFreshLoading = true;
    },
    submitFresh() {
      if (this.freshDate) {
        this.submitLoad = true;
        this.$post("/staff/perform/summary/summary", {
          checkTimeStart: this.freshDate + "-01",
          checkTimeEnd: this.freshDate + "-31",
        })
          .then((res) => {
            if (res.code == 1) {
              // this.$message.success(res.msg);
              this.showTip = false;
              this.btnFreshLoading = false;
              this.submitLoad = false;
              this.endTime = Date.parse(new Date()) + 15 * 60 * 1000;
              this.countdown();
            }
          })
          .catch((error) => {
            this.$message.error(res.msg);
            this.submitLoad = false;
            this.dialogOpen = false;
            this.btnFreshLoading = false;
            this.showContent = true;
            this.showTip = true;
            this.freshDate = "";
          });
      } else {
        this.$message.error("请选择需要更新的月份！");
      }
    },
    cancleFresh() {
      this.dialogOpen = false;
      this.btnFreshLoading = false;
      this.showContent = true;
      this.showTip = true;
      this.freshDate = "";
    },
    //倒计时
    countdown() {
      let now = Date.parse(new Date());
      let msec = this.endTime - now;

      if (msec < 0) return;

      // let day = parseInt(msec / 1000 / 60 / 60 / 24);
      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;
      this.restTime = min + "分" + sec + "秒";
      const that = this;
      if (min >= 0 && sec >= 0) {
        if (min == 0 && sec == 0) {
          this.submitLoad = false;
          this.dialogOpen = false;
          this.btnFreshLoading = false;
          this.showContent = true;
          this.showTip = true;
          this.freshDate = "";
          this.getData();
          return;
        }
        setTimeout(function () {
          that.countdown();
        }, 1000);
      }
    },
    handleCellClick(row, column, event, cell) {
      if (column.label == "备注1" || column.label == "备注2") {
        row.label = column.label;
        this.toEdit(row);
      }
    },
    // 表格内下拉选框得触发事件
    handleChange(v, row) {
      let obj = {};
      obj.id = row.id;
      obj.auditLevel = row.auditLevel;
      obj.recommend = row.recommend;
      this.$post("/staff/perform/summary/save", obj).then((res) => {
        const { code, msg } = res;
        code == 1 ? this.$message.success(msg) : this.$message.error(msg);
      });
    },
  },
  data() {
    return {
      // 是否展示弹窗
      isdialog: false,
      // 列表绑定值
      checkList: [],
      // 设置表头
      setcolum: [],
      // 表格选中列表
      checkTableList: [],
      setDialog: false,
      endTime: "",
      restTime: "15",
      freshDate: "",
      btnFreshLoading: false,
      sortList: "",
      dialogOpen: false,
      isExport: false,
      showBtn: true,
      showTip: true,
      showContent: true,
      submitLoad: false,
      progress: false,
      percent: 0,
      config: {
        isshowTabPane: true,
        showType: "tableSelect",
        search: [
          {
            name: "yearmonth",
            type: "month",
            label: "请选择月份",
            fuzzy: false,
          },
          {
            name: "sortKind",
            type: "select",
            label: "总分排序方式",
            fuzzy: false,
          },
          {
            name: "salaId",
            type: "selectSalaId",
            label: "大厅",
            fuzzy: false,
          },

          {
            name: "deptId",
            type: "selectDeptId",
            label: "部门",
            fuzzy: false,
          },

          {
            name: "staffName",
            type: "text",
            label: "员工姓名",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60, fixed: "left", show: true },
          {
            type: "index",
            label: "序号",
            width: 50,
            fixed: "left",
            show: true,
          },

          {
            label: "姓名",
            prop: "staffName",
            formatter: this.formatter,
            fixed: "left",
            show: true,
          },

          {
            label: "工号",
            prop: "workNum",
            formatter: this.formatter,
            width: 80,
            fixed: "left",
            show: true,
          },
          {
            label: "年",
            prop: "year",
            formatter: this.formatter,
            fixed: "left",
            show: true,
          },
          {
            label: "月",
            prop: "month",
            formatter: this.formatter,
            fixed: "left",
            show: true,
          },
          {
            label: "手机号",
            prop: "phoneNumber",
            formatter: this.formatter,
            show: true,
          },

          {
            label: "所属大厅",
            prop: "salaName",
            formatter: this.formatter,
            show: true,
          },

          {
            label: "所属部门",
            prop: "deptName",
            formatter: this.formatter,
            show: true,
          },
          {
            label: "所属中心",
            formatter: (row) => {
              return "宜宾市民中心";
            },
            show: true,
          },
          {
            label: "工作纪律",
            prop: "effectScore",
            width: 150,
            show: true,
            formatter: (row) => {
              return (
                row.effectScore - this.tableData.dict.weightPdu.effectWeight
              ).toFixed(2) < 0 ? (
                <span style="color:red">
                  {row.effectScore +
                    "（" +
                    (
                      row.effectScore -
                      this.tableData.dict.weightPdu.effectWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                  row.effectScore - this.tableData.dict.weightPdu.effectWeight
                ).toFixed(2) > 0 ? (
                <span>
                  {row.effectScore +
                    "（" +
                    "+" +
                    (
                      row.effectScore -
                      this.tableData.dict.weightPdu.effectWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                row.effectScore +
                `（${(
                  row.effectScore - this.tableData.dict.weightPdu.effectWeight
                ).toFixed(2)}）`
              );
            },
          },
          {
            label: "服务规范",
            prop: "attendScore",
            width: 150,
            show: true,
            formatter: (row) => {
              return (
                row.attendScore - this.tableData.dict.weightPdu.attendWeight
              ).toFixed(2) < 0 ? (
                <span style="color:red">
                  {row.attendScore +
                    "（" +
                    (
                      row.attendScore -
                      this.tableData.dict.weightPdu.attendWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                  row.attendScore - this.tableData.dict.weightPdu.attendWeight
                ).toFixed(2) > 0 ? (
                <span>
                  {row.attendScore +
                    "（" +
                    "+" +
                    (
                      row.attendScore -
                      this.tableData.dict.weightPdu.attendWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                row.attendScore +
                `（${(
                  row.attendScore - this.tableData.dict.weightPdu.attendWeight
                ).toFixed(2)}）`
              );
            },
          },
          {
            label: `综合管理`,
            prop: "complainScore",
            width: 150,
            show: true,
            formatter: (row) => {
              return (
                row.complainScore - this.tableData.dict.weightPdu.selfWeight
              ).toFixed(2) < 0 ? (
                <span style="color:red">
                  {row.complainScore +
                    "（" +
                    (
                      row.complainScore -
                      this.tableData.dict.weightPdu.selfWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                  row.complainScore - this.tableData.dict.weightPdu.selfWeight
                ).toFixed(2) > 0 ? (
                <span>
                  {row.complainScore +
                    "（" +
                    "+" +
                    (
                      row.complainScore -
                      this.tableData.dict.weightPdu.selfWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                row.complainScore +
                `（${(
                  row.complainScore - this.tableData.dict.weightPdu.selfWeight
                ).toFixed(2)}）`
              );
            },
          },
          {
            label: "群众评议",
            prop: "reviewScore",
            width: 150,
            show: true,
            formatter: (row) => {
              return (
                row.reviewScore - this.tableData.dict.weightPdu.reviewWeight
              ).toFixed(2) < 0 ? (
                <span style="color:red">
                  {row.reviewScore +
                    "（" +
                    (
                      row.reviewScore -
                      this.tableData.dict.weightPdu.reviewWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                  row.reviewScore - this.tableData.dict.weightPdu.reviewWeight
                ).toFixed(2) > 0 ? (
                <span>
                  {row.reviewScore +
                    "（" +
                    "+" +
                    (
                      row.reviewScore -
                      this.tableData.dict.weightPdu.reviewWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                row.reviewScore +
                `（${(
                  row.reviewScore - this.tableData.dict.weightPdu.reviewWeight
                ).toFixed(2)}）`
              );
            },
          },

          {
            label: "工作效能",
            prop: "goworkScore",
            width: 150,
            show: true,
            formatter: (row) => {
              return (
                row.goworkScore - this.tableData.dict.weightPdu.goworkWeight
              ).toFixed(2) < 0 ? (
                <span style="color:red">
                  {row.goworkScore +
                    "（" +
                    (
                      row.goworkScore -
                      this.tableData.dict.weightPdu.goworkWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                  row.goworkScore - this.tableData.dict.weightPdu.goworkWeight
                ).toFixed(2) > 0 ? (
                <span>
                  {row.goworkScore +
                    "（" +
                    "+" +
                    (
                      row.goworkScore -
                      this.tableData.dict.weightPdu.goworkWeight
                    ).toFixed(2) +
                    "）"}
                </span>
              ) : (
                row.goworkScore +
                `（${(
                  row.goworkScore - this.tableData.dict.weightPdu.goworkWeight
                ).toFixed(2)}）`
              );
            },
          },

          {
            label: `其他绩效`,
            prop: "otherScore",
            width: 150,
            formatter: this.formatter,
            show: true,
          },

          // {
          //   label: "累计异常分数",
          //   prop: "errorScore",
          // },

          {
            label: "绩效分数",
            prop: "totalScore",
            sortable: true,
            width: 120,
            show: true,
          },

          {
            label: "备注1",
            prop: "remark",
            formatter: (row) => {
              return row.remark && row.remark != "" ? (
                row.remark
              ) : (
                <span style="color:#409eff">添加备注1</span>
              );
            },
            width: 240,
            show: true,
          },
          {
            label: "备注2",
            prop: "remarkAddDesc",
            formatter: (row) => {
              return row.remarkAddDesc &&
                row.remarkAddDesc != "" &&
                row.remarkAddDesc != "(0);" ? (
                row.remarkAddDesc
              ) : (
                <span style="color:#409eff">添加备注2</span>
              );
            },
            width: 240,
            show: true,
          },
          {
            label: "政务服务管理科审核等次",
            prop: "auditLevel",
            width: 120,
            show: true,
            formatter: (row) => {
              const options = [
                {
                  label: "好",
                  value: "好",
                },
                {
                  label: "较好",
                  value: "较好",
                },
                {
                  label: "一般",
                  value: "一般",
                },
                {
                  label: "不合格",
                  value: "不合格",
                },
                {
                  label: "不确定",
                  value: "不确定",
                },
              ];
              return (
                <el-select
                  v-model={row.auditLevel}
                  placeholder="请选择"
                  clearable
                  onChange={(v) => this.handleChange(v, row)}
                >
                  {options.map((item) => (
                    <el-option
                      key={item.value}
                      value={item.value}
                      label={item.label}
                    />
                  ))}
                </el-select>
              );
            },
          },
          {
            label: "服务明星推荐",
            prop: "recommend",
            width: 120,
            show: true,
            formatter: (row) => {
              const options = [
                {
                  label: "服务明星",
                  value: "服务明星",
                },
              ];
              return (
                <el-select
                  v-model={row.recommend}
                  clearable
                  placeholder="请选择"
                  onChange={(v) => this.handleChange(v, row)}
                >
                  {options.map((item) => (
                    <el-option
                      key={item.value}
                      value={item.value}
                      label={item.label}
                    />
                  ))}
                </el-select>
              );
            },
          },
          {
            label: "加分",
            prop: "addTotalScore",
            width: 120,
            show: true,
            formatter: (row) => {
              return row.addTotalScore || row.addTotalScore == 0
                ? row.addTotalScore > 0
                  ? "+" + row.addTotalScore
                  : row.addTotalScore
                : 0;
            },
          },
          {
            label: "本月得分",
            prop: "sumScore",
            sortable: true,
            width: 120,
            fixed: "right",
            show: true,
          },
          {
            label: "操作",
            width: 120,
            fixed: "right",
            show: true,
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noDel
                  noEdit
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
};
</script>
<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 0 30%;
  padding-top: 20%;
  background: rgba(0, 0, 0, 0.6);
}
::v-deep .el-progress__text {
  color: #409eff;
  font-weight: 600;
}
::v-deep.el-dialog__wrapper {
  overflow: hidden;
  top: -50px;
}
.freshTime {
  color: #999;
  font-size: 14px;
}
</style>
