<template>
  <t-modal :visibled.sync="visibled" :mask-closable="false">
    <template slot="header">
      <div class="device-modal-title">{{ isEdit?'用户编辑':'新增用户' }}</div>
    </template>
    <t-form :model="addUserModal" :rules="addUserModalRules" label-position="right">
      <t-form-item label="姓名：" prop="name">
        <t-input v-model="addUserModal.name" placeholder="请输入姓名"></t-input>
      </t-form-item>
      <t-form-item label="员工编号：" prop="code">
        <t-input v-model="addUserModal.code" placeholder="请输入员工编号"></t-input>
      </t-form-item>
      <t-form-item label="公司：" prop="apartments">
        <t-select v-model="addUserModal.apartments" placeholder="请选择公司" clearable>
          <t-option v-for="(item,index) in companyList" :value="item.id" :key="index">{{ item.name }}</t-option>
        </t-select>
      </t-form-item>
      <t-form-item v-if="addUserModal.apartments!==''" label="部门：" prop="organizeCode">
        <t-select-tree v-model="addUserModal.organizeCode" :node-data="departmentTypesList" width="200px" node-key="id"></t-select-tree>
      </t-form-item>
      <t-form-item label="职务：" prop="mainJobPosition">
        <t-select v-model="addUserModal.mainJobPosition" placeholder="请选择职务" clearable>
          <t-option v-for="(item,index) in dataList" :value="item.value" :key="index">{{ item.name }}</t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="年龄：" prop="birthday">
        <t-date-picker v-model="addUserModal.birthday" placeholder="请输入年龄" @date-change="startPickerDateChange"></t-date-picker>
      </t-form-item>
      <t-form-item label="手机：" prop="mainWirelessCall">
        <t-input v-model="addUserModal.mainWirelessCall" placeholder="请输入11位手机号"></t-input>
      </t-form-item>
      <t-form-item label="人脸图片：" prop="facePicture">
        <t-input v-model="addUserModal.facePicture" placeholder="请输入手机号"></t-input>
      </t-form-item>
    </t-form>
    <template slot="footer">
      <t-button @click="resetModalData">取消</t-button>
      <t-button v-if="isEdit" :loading="loadingSubmit" color="primary" @click="submitModalData">修改</t-button>
      <t-button v-else :loading="loadingSubmit" color="primary" @click="submitModalData">提交</t-button>
    </template>
  </t-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 公司列表
    companyList: {
      type: Array,
      default: () => []
    },
    // 公司对应部门列表
    departmentTypesList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 是否为编辑状态
      isEdit: false,
      dataList: [
        {
          name: '数据一',
          value: 1
        },
        {
          name: '数据二',
          value: 2
        },
        {
          name: '数据三',
          value: 3
        }
      ],
      // 新增用户表单
      addUserModal: {
        name: '',
        code: '',
        organizeCode: '',
        apartments: '',
        mainJobPosition: '',
        birthday: '',
        mainWirelessCall: '',
        facePicture: ''
      },
      // 新增用户表单规则
      addUserModalRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '员工编号不能为空', trigger: 'blur' }
        ],
        field4: [
          { required: true, message: '公司不能为空' }
        ],
        organizeCode: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        mainJobPosition: [
          { required: true, message: '职务不能为空', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        mainWirelessCall: [
          { required: true, message: '手机不能为空', trigger: 'blur' }
        ],
        facePicture: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 显示/隐藏对话框
    visibled: {
      set(val) {
        this.$emit('visibled', val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    // 确认新增用户
    submitModalData() {
      this.visible = false
      console.log(this.visibled)
      console.log(this.visible);
    },
    // 重置表单数据
    resetModalData () {
      // this.$refs['activityForm'].resetFields()
      this.imgUrl = ''
      this.visibled = false
    }
  }
}
</script>

<style>

</style>