<template>
  <div>
    <el-dialog :title="taskName" :visible.sync="open" width="1350px" append-to-body>
      <el-form ref="form" :model="form" :rules="isReadonly? rulesLeave : rules" label-width="135px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="申报单位" prop="deptId">
              <span>{{form.applyDeptName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="唯一码" prop="uniqueCode">
              <el-input v-model="form.uniqueCode" placeholder="请输入唯一码" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idcardNo">
              <el-input v-model="form.idcardNo" placeholder="请输入身份证号" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthDay">
              <el-date-picker clearable size="small"
                              v-model="form.birthDay"
                              type="month"
                              :readonly="isReadonly"
                              value-format="yyyy-MM-dd"
                              placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" :disabled="isReadonly">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="民族" prop="folk">
              <el-select v-model="form.folk" placeholder="请选择民族" :disabled="isReadonly">
                <el-option
                  v-for="dict in folkOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select v-model="form.politicalStatus" placeholder="请选择政治面貌" :disabled="isReadonly">
                <el-option
                  v-for="dict in politicalStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input v-model="form.nativePlace" placeholder="请输入籍贯" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="技术职称" prop="professionalTitle">
              <el-select v-model="form.professionalTitle" placeholder="请选择技术职称" :disabled="isReadonly">
                <el-option
                  v-for="dict in professionalTitleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="初始学历" prop="firstEducation">
              <el-select v-model="form.firstEducation" placeholder="请选择初始学历" :disabled="isReadonly">
                <el-option
                  v-for="dict in educationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最高学历" prop="topEducation">
              <el-select v-model="form.topEducation" placeholder="请选择最高学历" :disabled="isReadonly">
                <el-option
                  v-for="dict in educationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="初始学历毕业院校" prop="firstEducationSchool">
              <el-input v-model="form.firstEducationSchool" placeholder="请输入初始学历毕业院校" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最高学历毕业院校" prop="topEducationSchool">
              <el-input v-model="form.topEducationSchool" placeholder="请输入最高学历毕业院校" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="初始学历所学专业" prop="firstEducationProfession">
              <el-input v-model="form.firstEducationProfession" placeholder="请输入初始学历所学专业" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最高学历所学专业" prop="topEducationProfession">
              <el-input v-model="form.topEducationProfession" placeholder="请输入最高学历所学专业" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="现岗位及职务" prop="postJob">
              <el-input v-model="form.postJob" placeholder="请输入现岗位及职务" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职务" prop="postTitle">
              <el-select v-model="form.postTitle" placeholder="请选择职务" :disabled="isReadonly">
                <el-option
                  v-for="dict in postTitleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="职级" prop="postLevel">
              <el-select v-model="form.postLevel" placeholder="请选择职级" :disabled="isReadonly">
                <el-option
                  v-for="dict in postLevelOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任同等职务时间" prop="postTime">
              <el-date-picker clearable size="small"
                              v-model="form.postTime"
                              :readonly="isReadonly"
                              value-format="yyyy-MM-dd"
                              placeholder="选择任同等职务时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="参加工作时间" prop="workDate">
              <el-date-picker clearable size="small"
                              v-model="form.workDate"
                              :readonly="isReadonly"
                              type="month"
                              value-format="yyyy-MM-dd"
                              placeholder="选择参加工作时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="入司时间" prop="hiredate">
              <el-date-picker clearable size="small"
                              v-model="form.hiredate"
                              :readonly="isReadonly"
                              type="month"
                              value-format="yyyy-MM-dd"
                              placeholder="选择入司时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="员工类型" prop="employeType">
              <el-select v-model="form.employeType" placeholder="请选择员工类型" :disabled="isReadonly">
                <el-option
                  v-for="dict in employeTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="员工岗位" prop="postCode">
              <el-select v-model="form.postCode" placeholder="请选择员工岗位" :disabled="isReadonly">
                <el-option
                  v-for="dict in postCodeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-if="0">
            <el-form-item label="是否一孩">
              <el-radio-group v-model="form.onlyChild">
                <el-radio
                  v-for="dict in onlyChildOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="人事档案存放地" prop="personnelDossierLocation">
              <el-input v-model="form.personnelDossierLocation" placeholder="请输入人事档案存放地" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="人事档案">
              <el-radio-group v-model="form.personnelDossier">
                <el-radio
                  :disabled="isReadonly"
                  v-for="dict in personnelDossierOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="在职状态" >
              <el-select v-model="form.status" placeholder="请选择在职状态" :disabled="isReadonly">
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" :disabled="isReadonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="form.approveType=='transferapply'">
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="原任部门" class="red-font">
                {{ form.applyDeptName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="调任部门" class="red-font">
                {{ form.deptName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="调任日期" class="red-font">
                {{ form.firedate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="调任原因" class="red-font">
                {{ form.remark }}
              </el-form-item>
            </el-col>
          </el-row>

        </div>

        <div v-if="form.approveType=='leaveapply'">
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="离职日期" class="red-font">
                {{ form.firedate }}
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="离职原因" class="red-font">
                {{ form.remark }}
              </el-form-item>
            </el-col>
          </el-row>

        </div>

      </el-form>
      <view-verify
        :open.sync="open"
        :row="row"
        :taskId="taskId"
        :type="type"
        :itemTitle="itemTitle"
        :item1="item1"
        :item2="item2"
        :reapply="!isReadonly"
      />
    </el-dialog>
  </div>
</template>

<script>
  import ViewVerify from "@/components/Activiti/ViewVerify/index";

  export default {
    name: "EmployeeForm",
    components: {
      ViewVerify,
    },
    props: {
      row: {
        type: Object,
      },
      taskId: {
        type: String,
      },
      taskName: {
        type: String,
      },
      type: {
        type: String,
        default: 'none',
      },
    },
    data() {
      return {
        title: '审核',
        itemTitle:'审批意见',
        item1:"",
        item2:"",
        form: this.row,
        open: false,
        // 部门树选项
        deptOptions: [],
        // 请假类型字典
        typeOptions: [],
        // 性别字典
        sexOptions: [],
        // 年龄段字典
        agePeriodOptions: [],
        // 是否一孩字典
        onlyChildOptions: [],
        // 民族字典
        folkOptions: [],
        // 政治面貌字典
        politicalStatusOptions: [],
        // 学历学位字典
        educationOptions: [],
        // 技术职称字典
        professionalTitleOptions: [],
        // 岗位字典
        postCodeOptions: [],
        // 职务字典
        postTitleOptions: [],
        // 职级字典
        postLevelOptions: [],
        // 人事档案是否在集团字典
        personnelDossierOptions: [],
        // 员工类型字典
        employeTypeOptions: [],
        // 状态字典
        statusOptions: [],
        mTaskName:"重新申请",
        isReadonly:true,
        // 表单校验
        rules: {
          name: [
            { required: true, message: "员工姓名不能为空！", trigger: "blur" }
          ],
          phone: [
            { max: 11, message: '请输入11位手机号！', trigger: 'blur'},
            { validator: this.checkPhone, trigger: "blur"}
          ],
          idcardNo: [
            { required: true, message: "员工身份证号不能为空！", trigger: "blur" },
            { validator: this.checkCard, trigger: "blur"}
          ],
          sex: [
            { required: true, message: "请选择员工性别！", trigger: "blur" }
          ],
          birthDay: [
            { required: true, message: "出生日期不能为空！", trigger: "blur" }
          ],
          folk: [
            { required: true, message: "请选择民族！", trigger: "blur" }
          ],
          politicalStatus: [
            { required: true, message: "请选择政治面貌！", trigger: "blur" }
          ],
          nativePlace: [
            { required: true, message: "籍贯不能为空！", trigger: "blur" }
          ],
          topEducation: [
            { required: true, message: "请选择学历学位！", trigger: "blur" }
          ],
          postCode: [
            { required: true, message: "请选择岗位！", trigger: "blur" }
          ],
          postTitle: [
            { required: true, message: "请选择职务！", trigger: "blur" }
          ],
          postLevel: [
            // { required: true, message: "请选择职级别！", trigger: "blur" }
          ],
          workDate: [
            //{ required: true, message: "参加工作时间不能为空！", trigger: "blur" }
          ],
          hiredate: [
            //{ required: true, message: "入司时间不能为空！", trigger: "blur" }
          ],
          employeType: [
            { required: true, message: "请选择员工类型！", trigger: "blur" }
          ],
        },
        rulesLeave: {
          // firedate: [
          //   { required: true, message: "离职日期不能为空！", trigger: "blur" }
          // ],
          // remark: [
          //   { required: true, message: "离职原因不能为空！", trigger: "blur" },
          //   { max: 20, message: '离职原因不能超过20个字符', trigger: 'blur'}
          // ]
        },
      }
    },


    created() {
     // this.isReadonly=this.mTaskName!=this.taskName;
      console.log("type",this.type);
      this.isReadonly=!(this.type=='todo'&&this.row.approveType=='addapply');
      if(this.mTaskName==this.taskName){
        this.itemTitle="重新申请";
        this.item1="是";
        this.item2="否";
      }else{
        this.item1="同意";
        this.item2="退回";

      }
      this.getDicts("sys_dept_business_type").then(response => {
        this.typeOptions = response.data;
      });

      this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
      this.getDicts("employe_age_period").then(response => {
        this.agePeriodOptions = response.data;
      });
      this.getDicts("sys_yes_no").then(response => {
        this.onlyChildOptions = response.data;
      });
      this.getDicts("sys_folk").then(response => {
        this.folkOptions = response.data;
      });
      this.getDicts("sys_political_status").then(response => {
        this.politicalStatusOptions = response.data;
      });
      this.getDicts("sys_education").then(response => {
        this.educationOptions = response.data;
      });
      this.getDicts("sys_professional_title").then(response => {
        this.professionalTitleOptions = response.data;
      });
      this.getDicts("sys_employe_post").then(response => {
        this.postCodeOptions = response.data;
      });
      this.getDicts("sys_post").then(response => {
        if(this.$store.state.user.deptType == 20){

          response.data.forEach(item =>{
            if(item.dictValue.startsWith("2")){
              this.postTitleOptions.push(item)
            }
          });

        }else{
          this.postTitleOptions = response.data;
        }
      });
      this.getDicts("sys_post_level").then(response => {
        this.postLevelOptions = response.data;
      });
      this.getDicts("sys_employe_dossier").then(response => {
        this.personnelDossierOptions = response.data;
      });
      this.getDicts("sys_employe_type").then(response => {
        this.employeTypeOptions = response.data;
      });
      this.getDicts("sys_employe_status").then(response => {
        this.statusOptions = response.data;
      });
    },
    methods: {
      updateForm(){
        updateEmployee(this.form).then(response => {


        });
      }

    }
  }
</script>

<style scoped>
  .el-date-editor {
    width:195px;
  }
  .red-font{
    color:orangered;
  }
</style>
