<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
        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">
        <span>
          当前为
          <span style="color: #1c75dd"
            >{{ this.query.yearmonth ? this.query.yearmonth : "--" }}
          </span>
          入驻部门窗口绩效考核明细</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>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import { timestampToTime } from "@/assets/utils/dateFormat.js";

export default {
  name: "StaffPerformSummaryList",
  components: {
    dialogShow,
  },
  mixins: [table],

  created() {},

  methods: {
    countDown() {
      if (this.percent == 95) {
        if (this.selection.length > 0) {
          this.query["idList"] = this.selection;
        }
        this.$download(
          "/window/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) {
      this.query.yearmonth
        ? this.query.yearmonth
        : (this.query.yearmonth = timestampToTime(Date.parse(new Date()), 2));

      return data;
    },

    handleRefresh() {
      this.dialogOpen = true;
      this.btnFreshLoading = true;
    },
    submitFresh() {
      if (this.freshDate) {
        this.submitLoad = true;
        this.$post("/window/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);
      }
    },
    // 表格内下拉选框得触发事件
    async handleChange(v, row) {
      let obj = { ...row };
      await this.$post("/window/perform/summary/save", obj).then((res) => {
        const { code, msg } = res;
        code == 1 ? this.$message.success(msg) : this.$message.error(msg);
        this.getData();
      });
    },
  },
  data() {
    return {
      toString: ["suggestion"],
      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,
        search: [
          {
            name: "yearmonth",
            type: "month",
            label: "请选择月份",
            fuzzy: false,
          },
          {
            name: "suggestion",
            type: "select",
            label: "评选建议",
            fuzzy: false,
          },
          {
            name: "deptName",
            type: "text",
            label: "进驻部门名称关键字搜索",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60, fixed: "left" },
          { type: "index", label: "序号", width: 50, fixed: "left" },

          {
            label: "入驻部门（单位名称）",
            prop: "deptName",
            formatter: this.formatter,
            fixed: "left",
            width: 300,
          },

          {
            label: "窗口建设得分",
            prop: "ckjsdf",
            sortable: true,
            formatter: (row) => {
              return (
                <el-input-number
                  v-model={row.ckjsdf}
                  placeholder="请输入得分"
                  clearable
                  controls={false}
                  onChange={(v) => this.handleChange(v, row)}
                ></el-input-number>
              );
            },
          },
          {
            label: "重点任务推进得分",
            prop: "zdrwdf",
            sortable: true,
            formatter: (row) => {
              return (
                <el-input-number
                  v-model={row.zdrwdf}
                  placeholder="请输入得分"
                  controls={false}
                  clearable
                  onChange={(v) => this.handleChange(v, row)}
                ></el-input-number>
              );
            },
          },
          {
            label: "加分",
            prop: "addTotalScore",
            sortable: true,
            formatter: (row) => {
              return (
                <el-input-number
                  v-model={row.addTotalScore}
                  placeholder="请输入加分"
                  controls={false}
                  clearable
                  onChange={(v) => this.handleChange(v, row)}
                ></el-input-number>
              );
            },
          },
          {
            label: "合计得分",
            prop: "sumScore",
            sortable: true,
          },
          {
            label: "评选建议",
            prop: "suggestion",
            formatter: (row) => {
              const options = [
                {
                  label: "无",
                  value: 0,
                },
                {
                  label: "红旗窗口",
                  value: 1,
                },
              ];
              return (
                <el-select
                  v-model={row.suggestion}
                  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: "remark",
            width: 380,
            formatter: (row) => {
              return (
                <el-input
                  v-model={row.remark}
                  placeholder="请输入备注"
                  clearable
                  onChange={(v) => this.handleChange(v, row)}
                ></el-input>
              );
            },
          },
        ],
      },
    };
  },
};
</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>
