<template>
  <div id="add">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-button type="primary" size="mini" @click="back()">返回</el-button>
        </el-col>
        <el-col :span="24" class="two">
          <el-form :model="form" :rules="rules" ref="form" label-width="130px">
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="考点编号" prop="testsite_num">
                  <el-input v-model="form.testsite_num" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="考试日期" prop="exam_date">
                  <el-date-picker v-model="form.exam_date" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="考试等级" prop="exam_grade">
                  <el-select v-model="form.exam_grade" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in exam_gradeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="6">
                <el-form-item label="考试时间从" prop="startTime">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="form.startTime"
                    :picker-options="{
                      start: '08:00',
                      step: '00:30',
                      end: '18:00',
                    }"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="至" prop="endTime">
                  <el-time-select
                    placeholder="结束时间"
                    v-model="form.endTime"
                    :picker-options="{
                      start: '08:00',
                      step: '00:30',
                      end: '18:00',
                      minTime: form.startTime,
                    }"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="考试地点" prop="exam_addr">
                  <el-input v-model="form.exam_addr" placeholder="请输入考试地点"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="待考人数" prop="stayexam_personal">
                  <el-input v-model="form.stayexam_personal" placeholder="请输入待考人数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划参考人数" prop="test_number">
                  <el-input v-model="form.test_number" placeholder="请输入计划参考人数"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="考场编排情况" prop="layout_situation">
                  <el-input v-model="form.layout_situation" placeholder="请输入考场编排情况"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="公安机关" prop="police_office">
                  <el-input v-model="form.police_office" placeholder="请输入公安机关"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="考场编排人" prop="layout_personal">
                  <el-input v-model="form.layout_personal" placeholder="请输入考场编排人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="编排时间" prop="room_date">
                  <el-date-picker v-model="form.room_date" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="danger" size="small" @click="back">取消保存</el-button>
              <el-button type="primary" size="small" @click="submitForm('form')">提交保存</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const { exam_grade } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: examination_room } = createNamespacedHelpers('examination_room');
export default {
  name: 'add',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      rules: {
        exam_date: [{ required: true, message: '请选择', trigger: 'change' }],
        // 考试时间
        exam_time: [{ required: false, message: '请选择', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择', trigger: 'change' }],
        exam_grade: [{ required: true, message: '请选择', trigger: 'change' }],
        stayexam_personal: [{ required: true, message: '请输入待考人数', trigger: 'blur' }],
        test_number: [{ required: true, message: '请输入计划参考人数', trigger: 'blur' }],
        exam_addr: [{ required: true, message: '请输入考试地点', trigger: 'blur' }],
        num_range: [{ required: true, message: '请输入准考证号范围', trigger: 'blur' }],
        layout_situation: [{ required: true, message: '请输入考场编排情况', trigger: 'blur' }],
        police_office: [{ required: true, message: '请输入公安机关', trigger: 'blur' }],
        layout_personal: [{ required: true, message: '请输入考场编排人', trigger: 'blur' }],
        room_date: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      // 考试等级
      exam_gradeList: exam_grade,
    };
  },
  async created() {
    if (this.id) await this.search();
    else this.searchNum();
  },
  methods: {
    ...examination_room(['query', 'fetch', 'create', 'update']),
    async search() {
      let res = await this.fetch({ id: this.id });
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          if (data.id) {
            data.exam_time = data.startTime + '-' + data.endTime;
            let res = await this.update(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.back();
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          } else {
            data.exam_time = data.startTime + '-' + data.endTime;
            let res = await this.create(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.back();
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 返回
    back() {
      this.$router.push({ path: '/adminPolice/security/kcbp' });
    },
    // 查询整理编号
    async searchNum() {
      let res = await this.query();
      if (this.$checkRes(res)) {
        // 部门编号
        let dept_num = this.user.department_code || '2201';
        if (dept_num.length < 6) {
          dept_num = _.padEnd(dept_num, 6, '0');
        }
        // 获取当前年
        let year = Number(new Date().getFullYear());
        // 计算场次
        let total = res.total + 1;
        if (total.toString().length == 1) total = '00' + total;
        else if (total.toString().length == 2) total = '0' + total;
        else total;
        let testsite_num = dept_num + year + total;
        this.$set(this.form, `testsite_num`, testsite_num);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    text-align: right;
    margin: 10px 0;
  }
  .two {
    text-align: center;
  }
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
