<template>
  <dialogBox :title="title" :width="'867px'" class="PersonnelDialog" @closeDialog="close" :isMain="true" @submitForm="submitForm"
    v-model="myValue">
    <div class="dialogCon">
      <el-form ref="form" :model="form" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="姓名:" prop="name" label-width="100px">
              <el-input v-model="form.name" placeholder="姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="23">
            <el-col :span="18" class="col-pd0">
              <el-form-item label="性别:" label-width="88px">
                <el-radio v-for="(item, index) in sexList" :key="index" v-model="form.sex" :label="item.value">{{
                  item.name }}</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-checkbox v-model="form.isDuty">负责人</el-checkbox>
            </el-col>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="工号:" prop="code" label-width="100px">
              <el-input v-model="form.code" placeholder="工号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名:" prop="loginName" label-width="72px">
              <el-input v-model="form.loginName" :disabled="showLoginName" placeholder="用户名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="身份证号码:" label-width="100px">
              <el-input v-model="form.idCard" placeholder="身份证号码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码:" prop="mobilePhone" label-width="72px">
              <el-input v-model="form.mobilePhone" placeholder="手机号码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="最高职务级别:" label-width="100px">
              <el-select v-model="form.jobLevel" placeholder="最高职务级别">
                <el-option v-for="item in levelList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公电话:" prop="telephone" label-width="72px">
              <el-input v-model="form.telephone" placeholder="办公电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="组织机构:" label-width="100px" prop="departmentId">
              <el-select class="selbig" v-model="form.departmentId" placeholder="组织机构">
                <el-option v-for="item in districtAreaList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="办公地点:" label-width="100px" class="form-item-mb0">
              <el-input v-model="form.address" placeholder="办公地点" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </dialogBox>
</template>

<script>
  import { api, httpAction, getAction } from '@/api/manageApi'
  export default {
    name: "",
    props: {
      value: { type: Boolean, default: false },
    },
    data () {
      return {
        myValue: this.value,
        districtAreaList: [],
        form: {
          sex: "0",
          departmentId: '',
        },
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          code: [{ required: true, message: "请输入工号", trigger: "blur" }],
          departmentId: [{ required: true, message: "请选择组织机构", trigger: 'change' }],
          mobilePhone: [{ validator: "sddd", trigger: "blur" }],
          loginName: [
            { required: true, message: "请输入用户名", trigger: "blur" },
          ],
        },
        title: "",
        showLoginName: false,
        sexList: [{ lable: "0", value: "0", name: "男" }, { lable: "1", value: "1", name: "女" }],
        levelList: [{ lable: "0", value: "0", name: "干事" }, { lable: "1", value: "1", name: "经理" }],
        dataUrl: api.users
      };
    },
    watch: {
      value (val) {
        this.myValue = val
      }
    },
    created () {
      this.getdistricts()
    },
    methods: {
      getdistricts () {
        getAction(api.departments, {
          queryOptions: { orderBys: [{ property: "sort", direction: "desc" }] },
        }).then((res) => {
          this.districtAreaList = res.content;

        });


      },
      // 添加人员
      adds () {
        this.showLoginName = false
      },
      // 编辑
      edit (record) {
        this.showLoginName = true
        // 若有id为编辑
        if (record) {
          this.$nextTick(() => {
            this.form = Object.assign({}, record)
          })
        }
      },
      // 保存
      submitForm () {
        this.districtAreaList.forEach((item) => {
          if (this.form.departmentId == item.id) {
            this.form.organizationId = item.organizationId
          }
        })
        this.$refs.form.validate((valid) => {
          if (valid) {
            let method = ''
            let url = ''
            const formData = this.form
            if (!formData.id) {
              method = 'post'
              url = this.dataUrl
            } else {
              method = 'put'
              url = `${this.dataUrl}/${formData.id}`
            }
            httpAction(url, formData, method).then((res) => {
              if (res.status === 1) {
                this.$message.success({ message: res.message, showClose: true })

                this.close()

                this.$emit('ok')
              } else {
                this.$message.error({ message: res.message, showClose: true })
              }
            })
          } else {
            return false
          }
        })
      },
      resetForm () {
        this.form = {
          sex: '0'
        }
        this.$refs.form.resetFields()
      },
      close () {
        this.resetForm()
        this.$emit('input', false)
      }
    }
  }
</script>
<style scoped lang="scss">
</style>