<template>
  <!-- 弹出框表单 -->
  <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    size="50%"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      style="padding: 0 20px"
    >
      <el-row>
        <Field
          label="考评年份"
          prop="year"
          v-model="form.year"
          type="year"
          placeholder="请选择考评年份"
        />
        <Field
          label="考评月份"
          prop="month"
          type="month"
          v-model="form.month"
          placeholder="请选择考评月份"
        />
      </el-row>
      <el-row>
        <Field
          label="员工姓名"
          prop="staffName"
          v-model="form.staffName"
          placeholder="请输入员工姓名"
        />
        <Field
          label="工号"
          prop="workNum"
          v-model="form.workNum"
          placeholder="请输入工号"
        />
      </el-row>
      <el-row>
        <Field label="所属大厅" prop="salaId">
          <el-select
            v-model="form.salaId"
            :clearable="true"
            @change="salaChange"
            :placeholder="'请选择大厅'"
          >
            <el-option
              :label="label.deptName"
              :value="label.id"
              v-for="(label, value) in salaArr"
              :key="value"
            ></el-option>
          </el-select>
        </Field>
        <Field label="所属部门" prop="deptId">
          <el-select
            v-model="form.deptId"
            :clearable="true"
            @change="deptChange"
            :placeholder="'请选择部门'"
          >
            <el-option
              :label="label.deptName"
              :value="label.id"
              v-for="(label, value) in deptArr"
              :key="value"
            ></el-option>
          </el-select>
        </Field>
      </el-row>
      <el-row>
        <Field
          label="工作纪律"
          prop="effectScore"
          type="num"
          v-model="form.effectScore"
          placeholder="请输入工作纪律分数"
        />
        <Field
          label="服务规范"
          prop="attendScore"
          type="num"
          v-model="form.attendScore"
          placeholder="请输入服务规范分数"
        />
      </el-row>
      <el-row>
        <Field
          label="综合管理"
          prop="complainScore"
          type="num"
          v-model="form.complainScore"
          placeholder="请输入综合管理分数"
        />
        <Field
          label="群众评议"
          prop="reviewScore"
          type="num"
          v-model="form.reviewScore"
          placeholder="请输入群众评议分数"
        />
      </el-row>
      <el-row>
        <Field
          label="工作效能"
          prop="goworkScore"
          type="num"
          v-model="form.goworkScore"
          placeholder="请输入工作效能分数"
        />
        <Field
          label="其他绩效"
          prop="otherScore"
          type="num"
          v-model="form.otherScore"
          placeholder="请输入其他绩效分数"
        />
      </el-row>
      <div class="bl_line">
        <span>{{ form.month }} 月得分</span>
        <span>{{
          (
            form.otherScore +
            form.goworkScore +
            form.reviewScore +
            form.complainScore +
            form.attendScore +
            form.effectScore
          ).toFixed(2)
        }}</span>
      </div>
      <el-row>
        <Field
          label="备注1"
          prop="remark"
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注1"
        />
      </el-row>
      <el-row style="padding-left: 70px">
        <el-col :span="3" style="width: 5.9%; font-size: 14px; color: #606266">
          <div>备注2</div></el-col
        >
        <el-col :span="20">
          <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>
      <div class="bl_line">
        <span>加分</span>
        <span>{{ form.addTotalScore }}</span>
      </div>
      <el-row>
        <Field label="服务明星推荐" prop="recommend">
          <el-select
            v-model="form.recommend"
            :clearable="true"
            :placeholder="'请选择'"
          >
            <el-option label="服务明星" value="服务明星"></el-option>
          </el-select>
        </Field>
      </el-row>
      <el-row>
        <Field label="政务服务管理科审核等次" prop="auditLevel" class="level">
          <el-select
            v-model="form.auditLevel"
            :clearable="true"
            :placeholder="'请选择'"
          >
            <el-option
              :label="label.label"
              :value="label.value"
              v-for="(label, value) in options"
              :key="value"
            ></el-option>
          </el-select>
        </Field>
      </el-row>
      <el-row
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #eee;
          padding: 10px 0 0 0;
        "
      >
        <div style="width: 80%">
          本月得分
          <span style="font-size: 16px; color: #ff4242">
            {{
              (
                Number(form.addTotalScore) +
                Number(form.otherScore) +
                Number(form.goworkScore) +
                Number(form.reviewScore) +
                Number(form.complainScore) +
                Number(form.attendScore) +
                Number(form.effectScore)
              ).toFixed(2)
            }}
          </span>
        </div>
        <form-buttons @submit="submitForm" noCancelBtn />
      </el-row>
    </el-form>
  </el-drawer>
</template>

<script>
import form from "@/assets/mixins/formdialog";
export default {
  name: "StaffPerformSummaryEditDetail",
  mixins: [form],
  components: {},
  created() {
    this.getArr();
  },

  data() {
    return {
      total: 0,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "新增人员",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["year", "month"],
      // 表单校验
      rules: {
        month: [{ required: true, message: "请选择月份", trigger: "blur" }],
        year: [{ required: true, message: "请选择年份", trigger: "blur" }],
        staffName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
        ],
      },
      form: {},
      salaArr: [],
      deptArr: [],
      rulesList: [],
      options: [
        {
          label: "好",
          value: "好",
        },
        {
          label: "较好",
          value: "较好",
        },
        {
          label: "一般",
          value: "一般",
        },
        {
          label: "不合格",
          value: "不合格",
        },
        {
          label: "不确定",
          value: "不确定",
        },
      ],
    };
  },

  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
        );
      };
    },
    deptChange() {
      this.page = 1;
      let arr = this.deptArr.filter((v) => v.id == this.form.deptId);
      if (arr && arr.length > 0) {
        this.form.deptName = arr[0].deptName;
      }
    },
    salaChange() {
      this.$get("/dept/getDeptBySalaId", { salaId: this.form.salaId })
        .then((res) => {
          if (res.code == 1) {
            this.deptArr = res.data.data;
            this.page = 1;
            let arr = this.salaArr.filter((v) => v.id == this.form.salaId);
            if (arr && arr.length > 0) {
              this.form.salaName = arr[0].deptName;
            }
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    getArr() {
      this.$get("/dept/getSalaList")
        .then((res) => {
          if (res.code == 1) {
            this.salaArr = res.data.data;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      this.$get("/dept/getDeptBySalaId")
        .then((res) => {
          if (res.code == 1) {
            this.deptArr = res.data.data;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "/staff/perform/summary/edit/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改员工分数统计";
    },
    /** 新增 */
    async add(row) {
      this.reset();
      this.urls.currUrl = "/staff/perform/summary/edit/add";
      this.pageInfo.type = "add";
      this.title = "新增员工分数统计";
      await this.$post("/perform/rules/list", { size: -1 }).then(
        async (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 == undefined ||
              this.form.remarkAdd == null ||
              this.form.remarkAdd.length == 0 ||
              this.form.remarkAdd == ""
            ) {
              this.form.remarkAdd = [
                {
                  name: "",
                  score: 0,
                },
              ];

              this.handleBlur();
              this.$forceUpdate();
            } else {
              this.handleBlur();
              this.$forceUpdate();
            }
            this.open = true;
          }
        }
      );
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "/staff/perform/summary/edit/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "员工分数统计详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

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

    // 表单重置
    reset() {
      this.form = {
        staffName: "",
        year: "",
        month: "",
        salaId: "",
        selectDeptId: 0,
        effectScore: 0,
        attendScore: 0,
        complainScore: 0,
        reviewScore: 0,
        goworkScore: 0,
        otherScore: 0,
        remark: null,
        remarkAddDesc: null,
        auditLevel: null,
        recommend: null,
        remark: "",
        remarkAdd: [],
        addTotalScore: 0,
        workNum: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.due_month .el-date-picker__header {
  display: none;
}
.bl_line {
  margin: 0 auto;
  background: inherit;
  background-color: rgba(0, 102, 255, 0.0470588235294118);
  box-sizing: border-box;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(36, 104, 242, 1);
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px;
  border-radius: 4px;
  height: 52px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  margin: 5px 0 20px 20px;
}
.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;
}
</style>