<template>
  <!-- S 弹出框表单 -->
  <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>
  <!-- E 弹出框表单 -->
</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();
    },
    // 增加备注2的备注
    handlePlus() {
      this.form.remarkAdd.push({
        name: '',
        score: 0
      });
    },
    // 删除备注2的备注
    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();
    },
    // 清楚备注2当前的内容
    handleClear(val) {
      val.name = '';
      val.score = 0;
    },
    // 获取备注2 的加扣分选项
    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();
    },
    // 备注2 备注项的文字匹配
    querySearch(queryString, cb) {
      let rulesList = this.rulesList;
      let results = queryString ? rulesList.filter(this.createFilter(queryString)) : rulesList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 备注2 备注项的文字匹配
    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.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>
