<template>
  <div class="page">
    <!-- S 页面表格 -->
    <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
        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>
    <!-- E 页面表格 -->

    <!-- S 页面查看信息详情弹出框组件  -->
    <dialog-show ref="dialogform" @ok="getData" />
    <!-- E 页面查看信息详情弹出框组件  -->

    <!-- S 页面进度加载框组件  -->
    <div class="mask" v-if="progress">
      <el-progress :stroke-width="26" :percentage="percent"></el-progress>
    </div>
    <!--E 页面进度加载框组件  -->

    <!-- S 页面弹出框组件  -->
    <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>
    <!-- E 页面弹出框组件  -->
  </div>
</template>

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

  data() {
    return {
      endTime: null, //结束时间
      restTime: "15", //更新过程预计时间初始值
      freshDate: null, //日期组件绑定值
      btnFreshLoading: false, //手动更新按钮加载状态
      dialogOpen: false, //弹窗显示状态
      isExport: false, //导出按钮禁用状态
      showBtn: true, //是否展示手动更新按钮
      showTip: true, //是否显示弹窗内得提示信息
      showContent: true, //弹出框展示内容
      submitLoad: false, //弹出框提交按钮加载状态
      progress: false, //导出进度条显示
      percent: 0, //导出进度百分比
      //引入表格配置项
      config: {
        isshowTabPane: true,
        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" },
          { type: "index", label: "序号", width: 50, fixed: "left" },

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

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

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

          {
            label: "所属部门",
            prop: "deptName",
            formatter: this.formatter,
          },
          {
            label: "所属中心",
            formatter: (row) => {
              return "宜宾市民中心";
            },
          },
          {
            label: "工作纪律",
            prop: "effectScore",
            width: 150,
            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,
            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,
            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,
            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,
            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,
          },

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

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

          {
            label: "备注1",
            prop: "remark",
            formatter: (row) => {
              return row.remark && row.remark != "" ? (
                row.remark
              ) : (
                <span style="color:#409eff">添加备注1</span>
              );
            },
            width: 240,
          },
          {
            label: "备注2",
            prop: "remarkAddDesc",
            formatter: (row) => {
              return row.remarkAddDesc &&
                row.remarkAddDesc != "" &&
                row.remarkAddDesc != "(0);" ? (
                row.remarkAddDesc
              ) : (
                <span style="color:#409eff">添加备注2</span>
              );
            },
            width: 240,
          },
          {
            label: "加分",
            prop: "addTotalScore",
            width: 120,
            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",
          },
          {
            label: "操作",
            width: 120,
            fixed: "right",
            formatter: (row) => {
              return (
                <table-buttons
                  noAdd
                  noDel
                  noEdit
                  row={row}
                  onEdit={this.toEdit}
                  onView={this.toView}
                  onDel={this.toDel}
                />
              );
            },
          },
        ],
      },
    };
  },
  methods: {
    // 进度条方法
    countDown() {
      if (this.percent == 95) {
        if (this.selection.length > 0) {
          this.query["idList"] = this.selection;
        }
        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);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@charset "UTF-8";
.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>
