<template>
  <!-- 弹出框表单 -->
  <el-drawer
    title="批量处理"
    :visible.sync="open"
    :direction="direction"
    size="50%"
  >
    <div style="padding:20px;font-size:15px">
      <div>已选择{{ selection.length }}个：</div>
      <div class="staffList mt20">
        <div v-for="item in selection" :key="item" class="mt10">
          将<span> {{ item.staffName }} </span>
          <span
            >的 {{ item.goOrOff }} 时间
            {{ item.goOffDateTime }} 打卡异常状态</span
          >
          <span class="ml10" style="color:#f56c6c">
            {{ dict["errorStatus"][item.errorStatus] }}
          </span>
          <span class="ml10">修改为</span>
        </div>
        <div class="mt10">
          <!--
                  <Field label=""  v-model="dealParams.processResult" type="select" :enumData="dict.errorStatus"/>
-->

          <!-- 处理异常状态 -->
          <el-select v-model="dealParams.processResult">
            <el-option
              v-for="($label, $value) in dict.errorStatus"
              :key="$value"
              :label="$label"
              :value="$value"
            >
            </el-option>
          </el-select>
          <!-- 早退/迟到 -->
          <!-- <el-input
            style="width:220px"
            placeholder="请输入数字"
            :maxlength="4"
            v-model="duration"
            v-if="
              dealParams.errorStatus == '1' || dealParams.errorStatus == '2'
            "
            class="ml20"
            type="number"
          >
            <template slot="append">分钟</template>
          </el-input> -->
        </div>
        <div class="mt10">
          <span>备注：</span>
          <el-input
            placeholder="请输入备注"
            type="textarea"
            show-word-limit
            class="mt10"
            :maxlength="50"
            v-model="dealParams.remark"
          ></el-input>
        </div>
      </div>
      <div class="mt20">
        <el-button type="primary" @click="saveForm" :loading="btnLoading"
          >确定</el-button
        >
        <el-button @click="cancleFn">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "AttendanceRecordDetail",
  created() {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "考勤打卡记录信息",
      // 是否显示弹出层
      open: false,
      direction: "rtl",
      toString: ["processResult", "errorStatus"],
      // 表单校验
      rules: {
        staffName: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        createTime: [{ required: true, message: "请选择创建时间" }],
      },
      dealParams: {
        remark: "",
        errorStatus: null,
        durtion: 0,
        processResult: null,
        recordErrorEntities: [], //处理员工
        processStatus: 1, //处理状态
      },
      selection: [],
      query: {},
      urls: {
        currUrl: "",
        saveUrl: "attendance/record/error/save",
      },
      dict: {
        errorStatus: "",
      },
      duration: "",
      btnLoading: false,
    };
  },

  methods: {
    // 渲染前置处理
    beforeRender(data) {
      return data;
    },
    /** 编辑 */
    edit(row, selection) {
      if (selection.length < 1) {
        this.selection = [row];
        this.query = { id: row.id };
      } else {
        this.selection = selection;
        this.query = { id: this.selection[0].id };
      }
      this.dealParams.recordErrorEntities = this.selection;
      this.urls.currUrl = "attendance/record/error/edit";
      this.getInital(this.query.id);
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    getInital(id) {
      this.$post(this.urls.currUrl + "?id=" + id).then((res) => {
        if (res.code == 1) {
          this.afterRender();
          this.dict = res.data.dict;
        }
      });
    },
    // 保存
    saveForm() {
      if (this.dealParams.processResult == "") {
        this.$message.error("请选择处理结果");
        return;
      }
      this.dealParams.processResult = this.dealParams.processResult;
      if (
        this.duration &&
        (this.dealParams.errorStatus == "1" ||
          this.dealParams.errorStatus == "2")
      ) {
        this.dealParams.processResult =
          this.dict.errorStatus[this.dealParams.errorStatus] +
          this.duration +
          "分钟";
        this.dealParams.durtion = this.duration;
      }

      //删除不必要的提交参数
      if(this.dealParams.recordErrorEntities.length>0){

       let newArrays=this.dealParams.recordErrorEntities.map(i=>{
          let obj={}
          obj.id=i.id;
          obj.staffId=i.staffId;
            return obj;
        });
        this.dealParams.recordErrorEntities=newArrays
      }

      this.btnLoading = true;
      // 保存结果处理
      this.$post(this.urls.saveUrl, this.dealParams)
        .then((res) => {
          this.btnLoading = false;
          if (res.code == 1) {
            this.cancleFn();
            this.$message.success(res.msg);
          }
        })
        .catch((error) => {
          this.btnLoading = false;
          console.log(error);
          this.$message.error(error.message);
        });
    },
    cancleFn() {
      this.open = false;
      this.dealParams = {
        remark: "",
        errorStatus: null,
        durtion: 0,
        processResult: "",
        recordErrorEntities: [], //处理员工
        processStatus: 1, //处理状态
      };
      this.$emit("ok");
    },
  },
};
</script>
