<template>
  <el-dialog class="dialog"
             :visible.sync="dialogVisible"
             center
             title="评分"
             append-to-body
             :before-close="onBeforeClose"
             @close="onClose"
             width="600px">
    <el-form label-width="120px" ref="dataForm" :model="dataForm" :rules="dataRules">
      <!-- 普通输入-->
      <el-form-item label="姓名" prop="username">
        <el-input class="input-width" :value="dataForm.username" readonly disabled></el-input>
      </el-form-item>

      <el-form-item label="事由" prop="event">
        <el-select v-model="dataForm.event" placeholder="请选择" class="input-width">
          <el-option-group
              v-for="group in eventGroupList"
              :key="group.label"
              :label="group.label">
            <el-option v-for="item in group.eventList" :key="item.label" :label="item.label" :value="item.label">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.score }}分</span>
            </el-option>
          </el-option-group>

        </el-select>
      </el-form-item>

<!--      <el-form-item label="分数" prop="changeScore">-->
<!--        <el-input class="input-width" v-model="dataForm.changeScore" oninput="value=(value.match(/^-/) ? '-':'') + value.replace(/[^\d]/g,'')"></el-input>-->
<!--      </el-form-item>-->
    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="onConfirm">确 认</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";


export default {
  name: "dialogEdit",
  components: {},
  props: {
    visible: {
      type: Boolean
    },
    data: {
      type: Object
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    "dataForm.event"(value) {
      this.dataForm.changeScore = this.eventGroupList.flatMap(group => group.eventList).find(event => event.label === value).score;
    }
  },
  data() {
    return {
      dataForm: {
        username: undefined, // 用户姓名
        userId: undefined, // 用户id
        month: "", // 考勤月份 yyyy-MM
        event: undefined, // 事件
        changeScore: undefined, // 变动分值
      },

      dataRules: {
        event: [{validator: validateNotEmpty, errorMessage: "事件不能为空", required: true, trigger: 'blur'}],
        changeScore: [{validator: validateNotEmpty, errorMessage: "变动分值不能为空", required: true, trigger: 'blur'}],
      },

      eventGroupList: [{
        label: "考勤",
        eventList: [
          {label: "正常打开上下班", score: 0},
          {label: "早退、迟到10分钟", score: -2},
          {label: "迟到10分钟以上", score: -5}
        ]
      }, {
        label: "其他事项",
        eventList: [
          {label: "矿工", score: -10},
          {label: "组织一次培训", score: 5},
          {label: "钻研新技能", score: 5},
          {label: "突出表显", score: 5},
          {label: "其他", score: 3}
        ]
      }],
    }
  },

  mounted() {
    this.initData();
    if (this.data) {
      this.dataForm.userId = this.data.userId;
      this.dataForm.month = this.data.month;
      this.dataForm.username = this.data.username;
    }
  },

  methods: {
    validateNotEmpty,

    // 初始化数据
    initData() {
    },

    // 取消
    onCancel() {
      this.dialogVisible = false;
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$axios.post("/v1/system/attendance/score", this.dataForm).then(() => {
            this.$emit("add");
            this.onCancel();
          });
        }
      });
    },

    // 关闭前确认
    onBeforeClose(done) {
      if (this.$store.state.app.closeConfirmEnable) {
        this.$confirm("确认关闭？").then(() => done());
      } else {
        done();
      }
    },

    // 关闭
    onClose() {
      this.$emit("close");
    },
  }
}
</script>

<style scoped lang="scss">
.input-width {
  width: 350px;
}
</style>
