<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="addStatus" :close-on-click-modal="false" :before-close="cancel"
    class="dialogClass" width="45%">
    <div class="addDia">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="手动" name="first">
          <el-form :model="form" ref="diaform" :rules="rules" class="diaform" label-width="80px">
            <el-form-item label="登录账号" prop="username">
              <el-input size="small" v-model.trim="form.username"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="userChnName">
              <el-input size="small" v-model.trim="form.userChnName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input size="small" v-model="form.idCard" maxlength="18"></el-input>
            </el-form-item>
            <el-form-item label="等级" prop="level">
              <el-select style="width:100%" v-model="form.level" placeholder="请选择">
                <el-option v-for="item in gradeArr" :key="item.id" :label="item.label" :value="Number(item.value)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用" prop="markEnable">
              <el-radio-group v-model="form.markEnable">
                <el-radio :label="1">激活</el-radio>
                <el-radio :label="2">锁定</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input size="small" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input size="small" v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button :loading="btnloading" icon="el-icon-circle-check" size="mini" @click="sumbit('diaform')" type="primary">保存</el-button>
              <el-button icon="el-icon-circle-close" size="mini" @click="cancel" type="info">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <template v-if="title!='编辑'">
          <el-tab-pane label="读卡器" name="second">
            <p class="tips">请将身份证放置在读卡上！再点击“开始识别身份证”按钮!</p>
            <el-button icon="el-icon-circle-check" size="mini" type="primary" @click="clickIdcard">开始识别身份证</el-button>
            <el-form :model="form2" ref="diaform2" :rules="rules" class="diaform" label-width="80px">
              <el-form-item label="登录账号" prop="username">
                <el-input size="small" v-model.trim="form2.username"></el-input>
              </el-form-item>
              <el-form-item label="用户名称" prop="userChnName">
                <el-input :disabled="true" size="small" v-model.trim="form2.userChnName"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard">
                <el-input :disabled="true" size="small" v-model="form2.idCard" maxlength="18"></el-input>
              </el-form-item>
              <el-form-item label="等级" prop="level">
                <el-select style="width:100%" v-model="form2.level" placeholder="请选择">
                  <el-option v-for="item in gradeArr" :key="item.id" :label="item.label" :value="Number(item.value)">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否启用" prop="markEnable">
                <el-radio-group v-model="form2.markEnable">
                  <el-radio :label="1">激活</el-radio>
                  <el-radio :label="2">锁定</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input size="small" v-model="form2.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input size="small" v-model="form2.email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button :loading="btnloading" icon="el-icon-circle-check" size="mini" type="primary">保存</el-button>
                <el-button icon="el-icon-circle-close" size="mini" type="info">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </template>
       
      </el-tabs>
      
    </div>
  </el-dialog>
</template>
<script>
import {getFindList} from "@/api/intelligent-warehouse/warehouse-management/fileBox-management";
  export default {
    props: {
      addStatus: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => "",
      },
      form: {
        type: Object,
        default: () => {},
      },
      form2: {
        type: Object,
        default: () => {},
      },
      rules: {
        type: Object,
        default: () => {},
      },
      selectId: {
        type: Number,
        default: () => null,
      },
    },
    data(){
      return {
        activeName:'first',
        gradeArr:[], // 等级
        btnloading: false,
      }
    },
    methods: {
      // 切换
      handleClick(val){
        this.activeName = val.name;
      },
      // 获取到等级字段值
      getFindList(){
        let params = {
          type:'dj'
        }
        getFindList(params).then((res)=>{
          if(res.code == 100){
            this.gradeArr = res.body.list;
          }
        })
      },
      // 开始识别身份证号
      clickIdcard(){
        this.form2 = {
          userChnName:'张小飞',
          idCard:'420117199904236788'
        }
      },
      sumbit(formName) {
        this.$refs[formName].validate((valid) => {
          debugger;
          if (valid) {
            this.btnloading = true;
            if (this.title === "新增") {
              this.$store.dispatch("operator/saveUser", this.form).then((res) => {
                this.btnloading = false;
                this.$emit("getData");
              }).catch(err => {
                this.btnloading = false;
              })
            } else {
              this.form.id = this.selectId;
              this.$store
                .dispatch("operator/updateUser", this.form)
                .then((res) => {
                  this.btnloading = false;
                  this.$emit("getData");
                }).catch(err => {
                  this.btnloading = false;
                })
            }
          }
        });
      },
      cancel() {
        this.$emit("cancel");
      },
    },
    created(){
      this.getFindList();
    }
  };

</script>
<style lang="scss" scoped>
  .addDia {
    padding: 0 5%;
    .tips{
      text-align: left;
      font-size: 14px;
      border: 1px dashed #e88f21;
      padding: 5px 10px;
      background-color: #f2e7d8;
      margin: 0 0 10px;
    }
    .diaform {
      ::v-deep .el-form-item__label {
        font-weight: 500;
      }
    }

    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

</style>
