<template>
  <!-- 弹出框表单 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="50%"
    height="300px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="userName">
      <div class="user-left">
        <div class="user-name">
          {{ form.staffName }}
        </div>
        <div class="user-info">
          <span class="user-i">工号：{{ form.workNum }}</span>
          <span class="user-i">所属部门：{{ form.deptName }}</span>
        </div>
      </div>
      <div class="user-right">
        <!-- <div class="n">{{ form.otherScore }}</div>
        <div class="m">{{ form.month }}月自评绩效得分</div> -->
        <div class="n" style="margin-top: 10px; color: #409eff">
          {{ form.totalScore }}
        </div>
        <div class="m">{{ form.month }}月绩效得分</div>
        <div class="m" style="color: #aaa">
          绩效分数更新时间：{{ momentVal(form.updateTime) }}
        </div>
      </div>
    </div>
    <div class="dialog_box" v-if="pageInfo.type == 'view'">
      <div
        class="userName user-t-item"
        :class="{ t2: item.subAddType == 1, t1: item.subAddType == 2 }"
        v-for="item in list"
        :key="item.id"
      >
        <div class="user-left">
          <div class="user-name">
            {{ dictVal("checkType", item.checkType) }}
          </div>
          <div class="user-info">
            <span class="user-i">绩效规则：{{ item.ruleName }}</span>
          </div>
          <div class="user-info">
            <span class="user-i"
              >{{
                item.subAddType == 1
                  ? "加分方式："
                  : item.subAddType == 2
                  ? "扣分方式："
                  : "方式："
              }}{{ util_formatter("subMethod", item.subMethod) }}</span
            >
          </div>
          <div class="user-info" v-if="item.performType == 'attend'">
            <span class="user-i">异常时间：{{ momentVal(item.remark) }}</span>
          </div>
          <div class="user-info">
            <span class="user-i"
              >核查时间：{{ momentVal(item.checkTime) }}</span
            >
          </div>
          <div class="user-info" v-if="item.auditStatus == 2">
            <span class="user-i"
              >核查结果：{{ item.subAddType == 1 ? "+" : "-"
              }}{{ item.score }}（{{ item.checkResult }}）</span
            >
          </div>
        </div>
        <div class="user-right">
          <div class="n">
            {{ item.subAddType == 1 ? "+" : "-"
            }}{{ item.auditStatus == 2 ? 0 : item.score }}
          </div>
        </div>
      </div>
    </div>
    <div class="dialog_box" v-else style="margin-top: 20px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row v-if="form.label == '备注1'">
          <el-col :span="2" style="width: 5.3333%"> <div>备注：</div></el-col>
          <el-col :span="22">
            <span>
              <el-input
                type="textarea"
                v-model="form.remark"
                :autosize="{ minRows: 2, maxRows: 8 }"
                placeholder="请输入备注内容"
                style="
                  font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica,
                    STHeiTi, Arial, sans-serif;
                "
              ></el-input>
            </span>
          </el-col>
        </el-row>

        <el-row v-if="form.label == '备注2'">
          <el-col :span="2" style="width: 5.3333%"> <div>备注：</div></el-col>
          <el-col :span="22">
            <template v-if="typeof form.remarkAdd != 'string'">
              <div
                class="attend_box"
                v-for="(val, i) in form.remarkAdd"
                :key="i"
              >
                <div class="text_box" style="width: 50%">
                  <el-autocomplete
                    class="inline-input"
                    v-model="val.name"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    style="width: 100%"
                    clearable
                    @clear="handleClear(val)"
                    @blur="handleBlur"
                  ></el-autocomplete>
                </div>
                <div class="score_box">
                  <el-input-number
                    v-model="val.score"
                    @blur="handleBlur"
                    @change="handleBlur"
                    controls-position="right"
                  ></el-input-number>
                </div>
                <div class="icon_box">
                  <i
                    class="el-icon-circle-plus-outline"
                    style="
                      width: 100%;
                      height: 100%;
                      font-size: 30px;
                      color: #409eff;
                      margin-right: 10px;
                    "
                    @click="handlePlus"
                    v-if="i + 1 == form.remarkAdd.length"
                  ></i>
                  <i
                    class="el-icon-remove-outline"
                    @click="handleRemove(i)"
                    style="
                      width: 100%;
                      height: 100%;
                      font-size: 30px;
                      color: #f56c6c;
                    "
                  ></i>
                </div>
              </div>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
      style="display: flex; align-items: center"
    >
      <el-col :span="20">
        <el-col :span="4" style="width: 15.7%" v-if="form.label == '备注2'">
          <div>当前累计加分：</div></el-col
        >
        <el-col :span="1" v-if="form.label == '备注2'" style="text-align: left">
          <span style="color: #f56c6c; font-weight: 600">
            {{ form.addTotalScore ? form.addTotalScore : 0 }}
          </span>
        </el-col>
      </el-col>
      <el-button
        type="primary"
        v-if="pageInfo.type !== 'view'"
        @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
import moment from "moment";
export default {
  mixins: [form],
  components: {
    dialogShow,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "员工绩效统计",
      // 是否显示弹出层
      open: false,
      toString: ["month"],
      // 表单校验
      rules: {},
      list: [],
      dict: {},
      rulesList: [],
    };
  },

  methods: {
    handleBlur() {
      this.form.addTotalScore = 0;

      this.form.remarkAdd && this.form.remarkAdd.length > 0
        ? this.form.remarkAdd.forEach((v) => {
            if (v.name && v.name != "") {
              v.score ? v.score : (v.score = 0);
              this.form.addTotalScore += v.score;
            }
          })
        : "";
      this.form.addTotalScore = this.form.addTotalScore.toFixed(2);
      this.$forceUpdate();
    },
    handlePlus() {
      this.form.remarkAdd.push({
        name: "",
        score: 0,
      });
    },
    handleRemove(i) {
      if (i == 0 && this.form.remarkAdd.length == 1) {
        this.form.remarkAdd = [
          {
            name: "",
            score: 0,
          },
        ];
      } else {
        this.form.remarkAdd = this.form.remarkAdd.filter(
          (v, index) => index != i
        );
      }
      this.handleBlur();
    },
    handleClear(val) {
      val.name = "";
      val.score = 0;
    },
    handleSelect(item) {
      this.form.remarkAdd.forEach((val) => {
        this.rulesList.forEach((v) => {
          if (val.name == v.value) {
            v.subAddType == 2
              ? (val.score = Number("-" + v.score))
              : (val.score = Number("+" + v.score));
          }
        });
      });
      this.handleBlur();
    },
    querySearch(queryString, cb) {
      let rulesList = this.rulesList;
      let results = queryString
        ? rulesList.filter(this.createFilter(queryString))
        : rulesList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (rule) => {
        return (
          rule.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 日期
    momentVal(v) {
      return moment(v).format("YYYY-MM-DD HH:SS");
    },
    // 字典转换
    dictVal(key, val) {
      return this.dict[key][val];
    },
    /** 查看汇总 */
    checkAll(id) {
      this.$post("/check/all/record/list", {
        checkStatus: 2,
        staffId: id,
        checkTimeStart: this.$route.query.yearmonth
          ? this.$route.query.yearmonth + "-01"
          : "",
        checkTimeEnd: this.$route.query.yearmonth
          ? this.$route.query.yearmonth + "-31"
          : "",
      }).then((res) => {
        const { code, data, dict } = res;
        if (code == 1) {
          const row = data.data || [];
          //deductTime申诉时间 checkTime 核查时间 ruleName规则checkType字典 subAddType：1增加2减score
          this.list = row;
          this.dict = dict;
        }
      });
    },
    /** 编辑 */
    async edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "staff/perform/summary/edit";
      await this.getData();
      this.pageInfo.type = "edit";
      this.title = "员工绩效统计";

      row.label && row.label != "" ? (this.form.label = row.label) : "";
      this.$nextTick(async () => {
        if (row.label == "备注2") {
          await this.$post("/perform/rules/list", { size: -1 }).then((res) => {
            if (res.code == 1) {
              this.rulesList = res.data.data;
              this.rulesList && this.rulesList.length > 0
                ? this.rulesList.forEach((v) => {
                    v.value = v.name + "--" + v.content;
                  })
                : "";
              if (
                !this.form.remarkAdd ||
                this.form.remarkAdd.length == 0 ||
                this.form.remarkAdd != ""
              ) {
                this.form.remarkAdd = [];
                this.form.remarkAdd.push({
                  name: "",
                  score: 0,
                });
              }
              this.handleBlur();
              this.$forceUpdate();
            }
          });
        }
      });
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "staff/perform/summary/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增员工绩效统计";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = {
        id: row.id,
      };
      this.urls.currUrl = "staff/perform/summary/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "员工绩效统计详细";
      this.checkAll(row.staffId);
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        staffId: 0,
        workNum: "",
        staffName: "",
        deptId: 0,
        deptName: "",
        attendScore: null,
        assessScore: null,
        workScore: null,
        effectScore: null,
        otherScore: null,
        errorScore: null,
        totalScore: null,
        remark: "",
        year: null,
        month: null,
        remarkAdd: [],
        addTotalScore: 0,
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.userName {
  background: rgba(242, 246, 252, 1);
  display: flex;
  align-items: center;
  padding: 15px;

  .user-left {
    flex: 1;
  }

  .user-name {
    font-size: 18px;
    font-weight: bold;
  }

  .user-info {
    margin-top: 10px;

    .user-i {
      margin-right: 40px;
    }
  }

  .user-right {
    text-align: center;

    .n {
      font-size: 16px;
      font-weight: bold;
    }

    .m {
      font-size: 12px;
    }
  }
}

.user-t-item {
  margin-top: 20px;
  border-left: 4px solid #ff4242;
}

.t1 {
  border-color: #ff4242;
  background: rgba(255, 66, 66, 0.07);

  .user-name,
  .n {
    color: #ff4242;
  }
}
.t2 {
  border-color: rgba(27, 198, 167, 1);
  background: rgba(27, 198, 167, 0.07);

  .user-name,
  .n {
    color: rgba(27, 198, 167, 1);
  }
}

/deep/.el-dialog__body {
  height: 650px;
  .dialog_box {
    height: 85%;
    overflow-y: auto;
    .attend_box {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .score_box {
        margin: 0 15px;
      }
      .icon_box {
        display: flex;
      }

      /deep/.el-input__inner {
        width: 100%;
      }
    }
    /deep/.el-autocomplete {
      width: 100% !important;
    }
  }

  /deep/.el-textarea input::-moz-input-placeholder {
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
      sans-serif !important;
  }
  /deep/.el-textarea input::-webkit-input-placeholder {
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
      sans-serif !important;
  }
}
</style>