<template>
  <div class="card_employee">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="登录账号" prop="username">
            <el-input v-model="ruleForm.username" :disabled="operationType == 'add' ? false : true"
              placeholder="请输入登录账号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="operationType === 'add'">
          <el-form-item label="密码" prop="password">
            <el-input :class="cipherState ? '' : 'no-autofill-pwd'" v-model="ruleForm.password" :disabled="forbid"
              placeholder="请输入密码">
              <i class="el-icon-view el-input__icon" slot="suffix" @click="handleIconClick"></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="bottom_zero" label="权限" prop="roleId">
            <el-select v-model="ruleForm.roleId" :disabled="forbid" placeholder="请选择权限">
              <el-option :label="item.name" :value="item.id" v-for="(item,index) in menuData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="provUser.name">
            <el-input v-model="ruleForm.provUser.name" :disabled="forbid" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="provUser.idCard">
            <el-input v-model="ruleForm.provUser.idCard" :disabled="forbid" placeholder="请输入身份证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号" prop="provUser.no">
            <el-input v-model="ruleForm.provUser.no" :disabled="forbid" placeholder="请输入工号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="provUser.phone">
            <el-input v-model="ruleForm.provUser.phone" :disabled="forbid" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="provUser.userType">
            <el-select v-model="ruleForm.provUser.userType" :disabled="forbid" placeholder="请选择类型">
              <el-option v-for="item in employeeType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.provUser.userType == 3">
          <el-form-item>
            <el-radio-group v-model="ruleForm.provUser.isorders">
              <el-radio :label="0">送气员</el-radio>
              <el-radio :label="1">库管</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用状态" prop="provUser.hireStatus">
            <el-input v-model="ruleForm.provUser.hireStatus" :disabled="forbid" placeholder="聘用状态"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用日期" prop="provUser.hireTime">
            <el-date-picker v-model="ruleForm.provUser.hireTime" :disabled="forbid" value-format="yyyy-MM-dd"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教育程度" prop="provUser.education">
            <el-input v-model="ruleForm.provUser.education" :disabled="forbid" placeholder="教育程度"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位类别" prop="provUser.jobCategory">
            <el-input v-model="ruleForm.provUser.jobCategory" :disabled="forbid" placeholder="岗位类别"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资质" prop="provUser.personQual">
            <el-input v-model="ruleForm.provUser.personQual" :disabled="forbid" placeholder="资质"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="card_margin_bottom">
            <el-form-item label="描述">
              <el-input type="textarea" v-model="ruleForm.provUser.description" :disabled="forbid"
                placeholder="请输入描述"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col class="card_divider" :span="24"
          v-if="ruleForm.provUser.userType === 3 && ruleForm.provUser.isorders == 0 || ruleForm.provUser.userType === 4">
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row
        v-if="ruleForm.provUser.userType === 3 && staffDialogVisible  && ruleForm.provUser.isorders == 0 || ruleForm.provUser.userType === 4  && staffDialogVisible ">
        <el-col :span="24" v-if="ruleForm.provUser.userType === 3">
          <div class="title_binding">绑定《燃气从业资格证》</div>
        </el-col>
        <el-col :span="24" v-else>
          <div class="title_binding">绑定《道路运输从业人员从业资格证》</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书编号" prop="provTruck.certificateNo">
            <el-input v-model="ruleForm.provTruck.certificateNo" :disabled="forbid" placeholder="请输入证书编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员类型" prop="provTruck.type">
            <el-select v-model="ruleForm.provTruck.type" :disabled="forbid" placeholder="请选择人员类型">
              <el-option label="运输、维护和抢修人员" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证机关" prop="provTruck.issueAuthority">
            <el-input v-model="ruleForm.provTruck.issueAuthority" :disabled="forbid" placeholder="发证机关"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证时间" prop="provTruck.issueTime">
            <el-date-picker v-model="ruleForm.provTruck.issueTime" :disabled="forbid" value-format="yyyy-MM-dd"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.provUser.userType === 4">
          <el-form-item label="首次发证时间" prop="provTruck.firstIssueTime">
            <el-date-picker v-model="ruleForm.provTruck.firstIssueTime" :disabled="forbid" value-format="yyyy-MM-dd"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.provUser.userType === 4">
          <el-form-item label="有效期" prop="provTruck.expireTime">
            <el-date-picker v-model="ruleForm.provTruck.expireTime" :disabled="forbid" value-format="yyyy-MM-dd"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="ruleForm.provTruck.remarks" :disabled="forbid"
              placeholder="请输入备注内容"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" :key="Math.random()" v-if="ruleForm.provUser.userType === 3">
          <el-form-item label-width="130px" class="card_fuel_gas" label="燃气从业资格证" prop="provTruck.imgUrl">
            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :disabled="forbid"
              :http-request="UploadImage">
              <img v-if="ruleForm.provTruck.imgUrl" :src="$baseUrl + ruleForm.provTruck.imgUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24" :key="Math.random()" v-if="ruleForm.provUser.userType === 4">
          <el-form-item label-width="120px" class="card_fuel_gas" label="道路运输从业人员从业资格证" prop="provTruck.imgUrl">
            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :disabled="forbid"
              :http-request="UploadImage">
              <img v-if="ruleForm.provTruck.imgUrl" :src="$baseUrl + ruleForm.provTruck.imgUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {
    getFileToken,
  } from '@/api/user'
  export default {
    name: 'formEmployee',
    props: {
      // 绑定值
      ruleForm: {
        type: Object,
        default: () => {},
      },
      // 权限角色
      menuData: {
        type: Array,
        default: () => [],
      },
      operationType: {
        type: String,
        default: () => '',
      },
      // 弹窗
      staffDialogVisible: {
        type: Boolean,
        default: () => false,
      },
      // 禁止
      forbid: {
        type: Boolean,
        default: () => false,
      }
    },
    data() {
      return {
        cipherState: false,
        rules: {
          username: [{
            required: true,
            message: '请填写登录账号',
            trigger: 'blur'
          }],
          password: [{
              required: true,
              message: '请填写登录密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '密码长度在 6 到 16 个字符',
              trigger: 'blur'
            }
          ],
          roleId: [{
            required: true,
            message: '请选择用户权限',
            trigger: 'blur,change'
          }],
          "provUser.name": [{
            required: true,
            message: '请填写姓名',
            trigger: 'blur'
          }],
          "provUser.idCard": [{
            required: true,
            message: '请填写身份证号',
            trigger: 'blur'
          }],
          "provUser.no": [{
            required: true,
            message: '请填写工号',
            trigger: 'blur'
          }],
          "provUser.phone": [{
            required: true,
            message: '请填写联系电话',
            trigger: 'blur'
          }],
          "provUser.userType": [{
            required: true,
            message: '请选择类型',
            trigger: 'blur,change'
          }],
          "provUser.hireStatus": [{
            required: true,
            message: '请填写聘用状态',
            trigger: 'blur'
          }],
          "provUser.hireTime": [{
            required: true,
            message: '聘用日期',
            trigger: 'blur,change'
          }],
          "provUser.education": [{
            required: true,
            message: '请填写教育程度',
            trigger: 'blur'
          }],
          "provUser.jobCategory": [{
            required: true,
            message: '请填写岗位类别',
            trigger: 'blur'
          }],
          "provUser.personQual": [{
            required: true,
            message: '请填写员工资质',
            trigger: 'blur'
          }],
          "provTruck.certificateNo": [{
            required: true,
            message: '请填写证书编号',
            trigger: 'blur'
          }],
          "provTruck.type": [{
            required: true,
            message: '请选择人员类型',
            trigger: 'blur,change'
          }],
          "provTruck.issueAuthority": [{
            required: true,
            message: '请选择人员类型',
            trigger: 'blur,change'
          }],
          "provTruck.issueTime": [{
            required: true,
            message: '请选择人员类型',
            trigger: 'blur,change'
          }],
          "provTruck.firstIssueTime": [{
            required: true,
            message: '请选择首次发证时间',
            trigger: 'blur,change'
          }],
          "provTruck.expireTime": [{
            required: true,
            message: '请选择有效期',
            trigger: 'blur,change'
          }],
          "provTruck.imgUrl": [{
            required: true,
            message: '请上传燃气从业资格证',
            trigger: 'blur'
          }],
        },
        employeeType: [{
          value: 3,
          label: '门店人员'
        }, {
          value: 4,
          label: '货车司机'
        }, {
          value: 5,
          label: '充装站人员'
        }],
        imageUrl: '',
      }
    },
    methods: {
      // 上传文件
      UploadImage(file) {
        const loading = this.$loading({
          lock: true,
          text: '图片上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.file = file.file;
        let formData = new FormData();
        formData.append('file', this.file);
        getFileToken(formData).then(res => {
          if (res.code == 200) {
            this.ruleForm.provTruck.imgUrl = res.data
            this.$forceUpdate()
            this.$refs['ruleForm'].validateField('provTruck.imgUrl')
          }
          loading.close();
        }).catch(e => {})
      },
      //子组件校验，传递到父组件
      validateForm() {
        let flag = null
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      },
      // 眼睛
      handleIconClick() {
        if (this.cipherState) {
          this.cipherState = false
        } else {
          this.cipherState = true
        }
      },
      // 清空表单
      clearForm() {
        this.$nextTick(() => {
          if (this.$refs.ruleForm) {
            this.$refs.ruleForm.fields.forEach(field => {
              if (field.prop) {
                field.resetField()
              }
            })
          }
        })
        // this.$refs.ruleForm.resetFields();
        this.$refs.ruleForm.clearValidate()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card_employee {
    overflow-x: hidden;
    max-height: 620px;
    overflow-y: auto;
    padding-right: 5px;
  }

  .title_binding {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .card_fuel_gas .el-form-item__label {
    width: 130px !important;
  }

  .card_fuel_gas .el-form-item__content {
    margin-left: 130px !important;
  }

  .card_margin_bottom ::v-deep .el-form-item {
    margin-bottom: 0px !important;
  }

  .no-autofill-pwd ::v-deep .el-input__inner {
    -webkit-text-security: disc !important;
  }

  .el-input__icon {
    cursor: pointer;
    font-size: 15px;
  }
</style>
