<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1000px"
      @close="close"
      @keyup.enter.native="doSubmit"
      :visible.sync="visible">
      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
               label-width="125px" @submit.native.prevent>
        <el-row  :gutter="15">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name"
                          :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写姓名"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="officeId" :rules="[{required: true, message: '部门不能为空', trigger: 'blur'}]" label="部门">
              <SelectTree
                ref="officeTree"
                :props="{
                  value: 'id',             // ID字段名
                  label: 'name',         // 显示名称
                  children: 'children'    // 子级字段名
                }"

                :url="`/sys/office/treeData?type=2`"
                :value="inputForm.officeId"
                :clearable="true"
                :accordion="true"
                @getValue="(value) => {inputForm.officeId=value}"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop="jobPositionId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.jobPositionId" style="width:100%" placeholder="请选择职位">
                <el-option
                  v-for="item in jobPositionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="positionId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.positionId" style="width:100%" placeholder="请选择职务">
                <el-option
                  v-for="item in positionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职级" prop="rankId"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.rankId" style="width:100%" placeholder="请选择职级">
                <el-option
                  v-for="item in rankList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="jobNo"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.jobNo" placeholder="请填写工号"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" prop="certificatesType"
                          :rules="[{required: true, message: '证件类型不能为空', trigger: 'blur'}
                 ]">
              <el-select v-model="inputForm.certificatesType" placeholder="请选择证件类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('certificates_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号" prop="idCard"
                          :rules="[{required: true, message: '证件号不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.idCard" placeholder="请填写证件号"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件照正面" prop="certificatesFront"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.certificatesFront" placeholder="请填写证件照正面"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件照反面" prop="certificatesBack"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.certificatesBack" placeholder="请填写证件照反面"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile"
                          :rules="[{required: true, message: '手机号码不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.mobile" placeholder="请填写手机号码"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型" prop="contractType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.contractType" placeholder="请选择合同类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('contract_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工类型" prop="workerType"
                          :rules="[{required: true, message: '员工类型不能为空', trigger: 'blur'}
                 ]">
              <el-select v-model="inputForm.workerType" placeholder="请选择员工类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('worker_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职日期" prop="onboardingDate"
                          :rules="[{required: true, message: '入职日期不能为空', trigger: 'blur'}
                 ]">
              <el-date-picker
                style="width: 100%"
                v-model="inputForm.onboardingDate"
                type="date"
                placeholder="选择入职日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="历史工龄" prop="seniority"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.seniority" placeholder="请填写历史工龄"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同公司" prop="contractCompany"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.contractCompany" placeholder="请填写合同公司"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.sex" placeholder="请选择性别" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('sex')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthDate"
                          :rules="[{required: true, message: '出生日期不能为空', trigger: 'blur'}
                 ]">
              <el-date-picker
                style="width: 100%"
                v-model="inputForm.birthDate"
                type="date"
                placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作地点" prop="workPlace"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.workPlace" placeholder="请填写工作地点"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系地址" prop="contactAddress"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.contactAddress" placeholder="请填写联系地址"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职年度就业情形" prop="employmentSituation"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.employmentSituation" placeholder="请选择入职年度就业情形" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('employment_situation')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工时制度" prop="workingHour"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.workingHour" placeholder="请选择入职年度就业情形" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('working_hour_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="ethnic"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.ethnic" placeholder="请填写民族"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户口类型" prop="accountType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.accountType" placeholder="请选择户口类型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('account_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户口所在地" prop="accountAddr"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.accountAddr" placeholder="请填写户口所在地"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="origin"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.origin" placeholder="请填写籍贯"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地址" prop="liveAddr"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.liveAddr" placeholder="请填写居住地址"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高学历" prop="highestEducation"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.highestEducation" placeholder="请选择最高学历" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('highest_education')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="politicalFace"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.politicalFace" placeholder="请选择政治面貌" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('political_face')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚姻状况" prop="maritalStatus"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.maritalStatus" placeholder="请选择婚姻状况" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('marital_status')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="血型" prop="bloodType"
                          :rules="[
                 ]">
              <el-select v-model="inputForm.bloodType" placeholder="请选择血型" style="width:100%;">
                <el-option
                  v-for="item in $dictUtils.getDictList('blood_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人姓名" prop="emergencyContactName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.emergencyContactName" placeholder="请填写紧急联系人姓名"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人电话" prop="emergencyContactTel"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.emergencyContactTel" placeholder="请填写紧急联系人电话"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配偶姓名" prop="spouseName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.spouseName" placeholder="请填写配偶姓名"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="孩子姓名" prop="childName"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.childName" placeholder="请填写孩子姓名"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ" prop="qq"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.qq" placeholder="请填写QQ"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信" prop="wechat"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.wechat" placeholder="请填写微信"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="个人邮箱" prop="email"
                          :rules="[
                 ]">
              <el-input v-model="inputForm.email" placeholder="请填写个人邮箱"     ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="21">
            <el-form-item label="备注" prop="remarks"
                          :rules="[
                 ]">
              <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.remarks" placeholder="请填写备注"     ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import RankService from '@/api/rank/RankService'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  import RankSystemTableService from '@/api/rank/RankSystemTableService'
  import JobPositionService from '@/api/position/JobPositionService'
  import RosterService from '@/api/roster/RosterService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          name: '',
          officeId: '',
          jobPositionId: '',
          positionId: '',
          rankId: '',
          jobNo: '',
          certificatesType: '',
          idCard: '',
          certificatesFront: '',
          certificatesBack: '',
          mobile: '',
          contractType: '',
          workerType: '',
          onboardingDate: '',
          seniority: '',
          contractCompany: '',
          sex: '',
          birthDate: '',
          workPlace: '',
          contactAddress: '',
          employmentSituation: '',
          workingHour: '',
          ethnic: '',
          accountType: '',
          accountAddr: '',
          origin: '',
          liveAddr: '',
          highestEducation: '',
          politicalFace: '',
          maritalStatus: '',
          bloodType: '',
          emergencyContactName: '',
          emergencyContactTel: '',
          spouseName: '',
          childName: '',
          qq: '',
          wechat: '',
          email: '',
          remarks: ''
        },
        jobPositionList: [],
        positionList: [],
        rankList: []
      }
    },
    rankService: null,
    rankSystemTableService: null,
    jobPositionService: null,
    rosterService: null,
    watch: {
      'inputForm.officeId': {
        handler () {
          this.changeOffice(this.inputForm.officeId)
        }
      },
      'inputForm.positionId': {
        handler () {
          this.changePosition(this.inputForm.positionId)
        }
      }
    },
    created () {
      this.rankService = new RankService()
      this.rankSystemTableService = new RankSystemTableService()
      this.jobPositionService = new JobPositionService()
      this.rosterService = new RosterService()
    },
    components: {
      SelectTree
    },
    methods: {
      init (method, id) {
        this.queryAllPosition()
        this.method = method
        this.inputForm = {
          name: '',
          officeId: '',
          jobPositionId: '',
          positionId: '',
          rankId: '',
          jobNo: '',
          certificatesType: '',
          idCard: '',
          certificatesFront: '',
          certificatesBack: '',
          mobile: '',
          contractType: '',
          workerType: '',
          onboardingDate: '',
          seniority: '',
          contractCompany: '',
          sex: '',
          birthDate: '',
          workPlace: '',
          contactAddress: '',
          employmentSituation: '',
          workingHour: '',
          ethnic: '',
          accountType: '',
          accountAddr: '',
          origin: '',
          liveAddr: '',
          highestEducation: '',
          politicalFace: '',
          maritalStatus: '',
          bloodType: '',
          emergencyContactName: '',
          emergencyContactTel: '',
          spouseName: '',
          childName: '',
          qq: '',
          wechat: '',
          email: '',
          remarks: ''
        }
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建花名册`
        } else if (method === 'edit') {
          this.title = '修改花名册'
        } else if (method === 'view') {
          this.title = '查看花名册'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.rosterService.queryById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.inputForm.birthDate = this.moment(this.inputForm.birthDate).format('YYYY-MM-DD HH:mm:ss')
            this.inputForm.onboardingDate = this.moment(this.inputForm.onboardingDate).format('YYYY-MM-DD HH:mm:ss')
            this.rosterService.save(this.inputForm).then(({data}) => {
              this.close()
              this.$message.success(data)
              this.$emit('refreshDataList')
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.visible = false
      },
      queryAllPosition () {
        this.rankSystemTableService.queryAllPosition().then(({data}) => {
          this.positionList = JSON.parse(JSON.stringify(data))
        })
      },
      getJobPositionByOff () {
        const id = this.inputForm.officeId
        if (id !== null && id !== undefined && id !== '') {
          this.jobPositionService.getJobPositionByOff(id).then(({data}) => {
            this.jobPositionList = JSON.parse(JSON.stringify(data))
          })
        } else {
          this.jobPositionList = []
        }
      },
      changeOffice () {
        this.getJobPositionByOff()
      },
      getRankByPosition () {
        const id = this.inputForm.positionId
        if (id !== null && id !== undefined && id !== '') {
          this.rankService.getRankByPosition(id).then(({data}) => {
            this.rankList = JSON.parse(JSON.stringify(data))
          })
        } else {
          this.rankList = []
        }
      },
      changePosition () {
        this.getRankByPosition()
      }
    }
  }
</script>
