<template>
  <div class="app-container">
    <page-header :content="id?'编辑':'添加'"></page-header>
    <el-form ref="dataForm" :model="dataForm" :rules="dataRules" label-width="140px">
      <el-form-item label="访客姓名" prop="username">
        <el-input v-model.trim="dataForm.username" class="input-width" maxlength="20" placeholder="请输入访客姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="访客手机号" prop="userPhone">
        <el-input v-model.trim="dataForm.userPhone" class="input-width" maxlength="11" placeholder="请输入访客手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="dataForm.gender" placeholder="请选择" class="input-width" clearable>
          <el-option :key="gender.value" :label="gender.label" :value="gender.value" v-for="gender in genderList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model.trim="dataForm.idcard" class="input-width" maxlength="18" placeholder="请输入身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证照片" prop="idcardImage">
        <upload v-model="dataForm.idcardImage" :width="114" :height="114" tips="上传图片" accept="image/jpeg,image/gif,image/png"></upload>
      </el-form-item>
      <el-form-item label="访客公司" prop="company">
        <el-input v-model.trim="dataForm.company" class="input-width" maxlength="50" placeholder="请输入访客公司" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="dataForm.remark" class="input-width" maxlength="200" placeholder="请输入备注" clearable></el-input>
      </el-form-item>
      <el-form-item label="有效截止时间" prop="validTime">
        <el-date-picker
            v-model="dataForm.validTime"
            class="input-width"
            value-format="timestamp"
            type="datetime"
            :picker-options="pickerOption"
            placeholder="请选择时间"
            :default-value="defaultDate">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <page-footer showConfirm width="800px" @cancel="onCancel" @confirm="onConfirm"></page-footer>
  </div>
</template>

<script>

import {validateCardID, validateNotEmpty, validatePhone} from "@/utils/validate";
import {dateFormat} from "@/utils/dateUtil";
import Upload from "@/components/Upload"

export default {
  name: "VisitorBackupEdit",
  components: {Upload},
  data() {
    return {
      id: undefined, // 数据id
      dataForm: {
        operatingUserId: undefined, // 操作用户id
        operatingUsername: undefined, // 操作用户姓名
        username: undefined, // 访客姓名
        userPhone: undefined, // 访客手机号
        gender: undefined, // 性别
        idcard: undefined, // 身份证号
        idcardImage: undefined, // 身份证照片
        company: undefined, // 访客公司
        remark: undefined, // 备注
        validTime: undefined, // 有效截止时间
      },


      dataRules: {
        'username': [{validator: validateNotEmpty, errorMessage: "访客姓名不能为空", required: true, trigger: 'blur'}],
        'userPhone': [{validator: validatePhone, errorMessage: "访客手机号不能为空", required: true, trigger: 'blur'}],
        'gender': [{validator: validateNotEmpty, errorMessage: "性别不能为空", required: true, trigger: 'blur'}],
        'idcard': [{validator: validateCardID, errorMessage: "身份证号不能为空", required: true, trigger: 'blur'}],
        'idcardImage': [{validator: validateNotEmpty, errorMessage: "身份证照片不能为空", required: true, trigger: 'blur'}],
        'validTime': [{validator: validateNotEmpty, errorMessage: "有效截止时间不能为空", required: true, trigger: 'change'}],
        'company': [{validator: validateNotEmpty, errorMessage: "访客公司不能为空", required: true, trigger: 'blur'}],
      },

      pickerOption: {
        disabledDate: (date) => {
          return date < new Date(dateFormat("yyyy-MM-dd 00:00:00", Date.now()));
        }
      },
      defaultDate: Date.now(),
      genderList: [{label: "男", value: 1}, {label: "女", value: 2}],
    }
  },

  watch: {},

  mounted() {
    this.initData();
  },

  methods: {
    // 初始化数据
    initData() {
      this.id = this.$route.query.id;
      if (this.id) {
        this.getDetail(this.id);
      }
    },

    // 取消
    onCancel() {
      this.$router.back();
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.id) { // 更新
            this.$axios.put("/v1/visitor/backup/update", this.dataForm).then(() => {
              this.$message.success("更新成功！");
              this.$eventBus.$emit("VisitorBackupUpdate");
              this.onCancel();
            });
          } else { // 添加
            this.$axios.post("/v1/visitor/backup/add", this.dataForm).then(() => {
              this.$message.success("保存成功！");
              this.$eventBus.$emit("VisitorBackupAdd");
              this.onCancel();
            });
          }
        }
      });
    },

    // 获取详情
    getDetail(id) {
      this.$axios.get(`/v1/visitor/backup/query/${id}`).then(data => {
        this.dataForm = data;
      })
    },
  },

}
</script>
<style lang="scss" scoped>
.app-container {
  .input-width {
    width: 250px;
  }
}
</style>
