<template>
  <!-- 弹出框表单 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <Field label="站点Id" prop="siteId" v-model="form.siteId" placeholder="请输入站点Id"/>
        <Field label="站点名称" prop="siteName" v-model="form.siteName" type="textarea" placeholder="请输入站点名称"/>
        <Field label="用户名称" prop="name" v-model="form.name" placeholder="请输入用户名称"/>
        <Field label="身份证号码" prop="idCard" v-model="form.idCard" placeholder="请输入身份证号码"/>
        <Field label="性别" prop="gender" v-model="form.gender" type="select" :enumData="dict.gender" placeholder="请选择性别"/>
        <Field label="手机号码" prop="phone" v-model="form.phone" placeholder="请输入手机号码"/>
        <Field label="出生日期" prop="birthday"  >
          <!-- v-model="form.birthday" type="date" -->
                  <el-date-picker
                  v-model="birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择出生日期"
                  @change="changeTime"
                >
                </el-date-picker>
        </Field>
        <Field label="家庭住址" prop="address" v-model="form.address" type="textarea" placeholder="请输入家庭住址"/>
        <Field label="照片路径"><imageUpload v-model="form.photo" prePath="/file/preview"/></Field>
        <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        <Field label="注册人员来源" prop="source" v-model="form.source" type="select" :enumData="dict.source" placeholder="请选择注册人员来源"/>
        <Field label="是否添加到海康人脸库" prop="inFaceHk" v-model="form.inFaceHk" type="select" :enumData="dict.inFaceHk" placeholder="请选择是否添加到海康人脸库"/>
        <Field label="人脸的唯一标识" prop="indexCode" v-model="form.indexCode" type="textarea" placeholder="请输入人脸的唯一标识"/>
        <Field label="人脸所属的人脸分组的唯一标识" prop="ifaceGroupIndexCode" v-model="form.ifaceGroupIndexCode" type="textarea" placeholder="请输入人脸所属的人脸分组的唯一标识"/>

      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
import ImageUpload from '@/components/ImageUpload';
export default {
  mixins: [form],
  components: {
    dialogShow ,
    ImageUpload,
  },
  data() {
    return {
      birthday:'',
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "注册人员",
      // 是否显示弹出层
      open: false,
      toString:[
        "gender",
        "source",
        "inFaceHk",
      ],
      // 表单校验
      rules: {
        gender: [
          {required: true,message: "请输入性别", trigger: "blur" },
        ],
        birthday: [
          {required: true,message: "请选择出生日期" },
        ],
        address: [
          {required: true,message: "请输入家庭住址", trigger: "blur" },
          {max: 256,message: "最多只能录入256个字符",trigger: "blur",},
        ],
        photo: [
          {required: true,message: "请输入照片路径", trigger: "blur" },
          {max: 100,message: "最多只能录入100个字符",trigger: "blur",},
        ],
        inFaceHk: [
          {required: true,message: "请输入是否添加到海康人脸库", trigger: "blur" },
        ],
        createTime: [
          {required: true,message: "请选择创建时间" },
        ],
      }
    };
  },

  methods: {
    changeTime(e){
      console.log(e);
      this.birthday = e
      this.form.birthday = e + " 00:00:00"
    },
    /** 编辑 */
    edit(row) {
      this.reset()
      this.query = { id: row.id };
      this.urls.currUrl ="person/edit";
      this.getData();
      this.pageInfo.type="edit"
      this.title = "修改注册人员";
    },
    /** 新增 */
    add(row) {
      this.reset()
      this.urls.currUrl = "person/add";
      this.getData();
      this.pageInfo.type="add"
      this.title = "新增注册人员";
    },
    /** 查看*/
    view(row) {
      this.reset()
      this.query = { id: row.id };
      this.urls.currUrl ="person/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");
    },

    // 表单重置
    reset() {
      this.form = {
        siteId : null,
        siteName : "",
        name : "",
        idCard : "",
        gender : 0,
        phone : "",
        birthday : null,
        address : "",
        photo : "",
        remark : "",
        source : null,
        inFaceHk : 0,
        indexCode : "",
        ifaceGroupIndexCode : "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
