<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基本信息'" />
        <el-form ref="ruleFormRef" :model="data.fromObj" :rules="rules" :disabled="!data.config.saveBtnShow"
          label-width="120px" class="demo-ruleForm" status-icon :inline="true">
          <el-form-item label="姓名:" prop="xm">
            <el-input v-model="data.fromObj.xm" placeholder="请输入姓名" clearable style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="性别:" prop="sex">
            <MOSTY.DictRidioAndSelect placeholder="请选择性别" style='width:337px' :dictData="data.config.zdlist.D_BZ_XB"
              v-model="data.fromObj.sex" selectType="select" @getselect="handleSelectStatus" />
          </el-form-item>
          <el-form-item label="身份证号:" prop="idcard">
            <el-input v-model="data.fromObj.idcard" placeholder="请输入身份证号" clearable style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="手机号码:" prop="mobile">
            <el-input v-model="data.fromObj.mobile" placeholder="请输入手机号码" clearable style="width: 337px"></el-input>
          </el-form-item>
          <el-form-item label="所属相关方:">
            <el-input v-model="data.fromObj.relatedname" readonly clearable style="width: 337px">
              <template #append>
                <el-icon @click="changeclear" v-if="!data.fromObj.id"
                  style="cursor: pointer; position: absolute;left: 2px;top: 7px;color: #989393;">
                  <CircleClose />
                </el-icon>
                <el-button class='cursor ml10' @click="chooseXgf">选择</el-button></template>
            </el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <MOSTY.DictRidioAndSelect :dictData="D_BZ_JHZT" style="width: 335px" placeholder="请选择状态" :disabled="true"
              v-model="data.fromObj.state" selectType="select" />
          </el-form-item>
          <el-form-item label="是否创建账号:" prop="accountFlag">
            <MOSTY.DictRidioAndSelect style='width:337px' :dictData="D_BZ_SF" v-model="data.fromObj.accountFlag"
              selectType="select" />
          </el-form-item>
          <el-form-item label="登录账号:" prop="phone" v-if="data.fromObj.accountFlag == '1'">
            <el-input v-model="data.fromObj.phone" :minlength="3" :maxlength="12" clearable
              style='width:337px'></el-input>
          </el-form-item>
          <el-form-item label="密码:" v-if="data.fromObj.accountFlag == '1'" prop="userpwd">
            <el-input v-model="data.fromObj.userpwd" style='width:337px' @input="handleInput" placeholder="请输入密码">
              <template #append>
                <el-icon>
                  <View />
                </el-icon>
              </template>
            </el-input>
            <div class="input_span">
              <span
                :style="{ 'background-color': (msgText > 1 || msgText == 1) ? '#FC5F76' : '#BBBBBB', 'color': (msgText > 1 || msgText == 1) ? '#FC5F76' : '#BBBBBB' }">弱</span>
              <span
                :style="{ 'background-color': (msgText > 2 || msgText == 2) ? '#FF9900' : '#BBBBBB', 'color': (msgText > 2 || msgText == 2) ? '#FF9900' : '#BBBBBB' }">中</span>
              <span
                :style="{ 'background-color': (msgText > 3 || msgText == 3) ? '#33CC00' : '#BBBBBB', 'color': (msgText > 3 || msgText == 3) ? '#33CC00' : '#BBBBBB' }">强</span>
            </div>
          </el-form-item>
          <el-form-item label="是否具有证书:" prop="isHave">
            <el-select v-model="data.fromObj.isHave" @change="getisHave" style="width: 337px" clearable
              placeholder="请选择是否具有证书">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
        </el-form>
        <div v-if='isHaveStatus'>
          <MOSTY.Assort :title="'关联信息(固定信息、动态信息)'" />
          <div>
            <div class='table-lable'>
              <span>固定信息</span>
              <img :src="getImgUrl('img/icon-jt.png')" style='cursor:pointer' @click='isShowgd = !isShowgd' />
            </div>
            <div v-show='isShowgd'>
              <MOSTY.TabList :tablist='tablist' :obj="data.fromObj" from="证书" @handleChange="changelicolor"
                :isEdit="props.editObj.saveBtnShow" @resetChange='resetChange' />
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="submit(ruleFormRef)" v-loading='loadingshow' v-if="props.editObj.saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="black"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>

    </MOSTY.FromPage>
    <MOSTY.Choosexgf v-if="isShowXgfDialog" v-model="isShowXgfDialog" :Single="singleShow" @confirm="changecgx"
      :ids="data.fromObj.relatedid" :deptid="deptid">
    </MOSTY.Choosexgf>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, defineAsyncComponent, onMounted } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
import { getImgUrl } from "@/utils/tools.js"
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_TB_RELATED, D_BZ_JHZT } = proxy.$dict("D_BZ_SF", "D_TB_RELATED", 'D_BZ_JHZT');
const isShowXgfDialog = ref(false)
const singleShow = ref(true)
const deptid = ref(null)
const isShowgd = ref(true)
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  editObj: {
    type: Object,
    default: () => { }
  },
  configobj: { type: Object, default: () => { } }
});
const tablist = ref([
  { title: '证书', icon: 'sbss2', actives: true, isEdit: props.editObj.saveBtnShow, components: defineAsyncComponent(() => import("./zsTab.vue")) },
])
const loadingshow = ref(false)
const emit = defineEmits("choosedUsers");
const ruleFormRef = ref();
const data = reactive({
  formData: {},
  fromObj: {
    state: '02'
  }
});
const msgText = ref('')
const rules = reactive({
  ...rule.phoneRule({ require: false, validator: true }, "mobile"),
  ...rule.NoText({ require: true, validator: true }, "phone"),
  ...rule.identityCardRule({ require: false, validator: true }, "idcard"),
  ...rule.NoTexts({ require: false, validator: true }, "zsbh"),
  xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  sex: [{ required: true, message: "请请选择性别", trigger: "blur" }],
  accountFlag: [{ required: true, message: "请选择是否创建账号", trigger: "blur" }],
  isHave: [{ required: true, message: "请选择是否具有证书", trigger: "blur" }],
  userpwd: [{ required: true, message: "请输入密码", trigger: "input" }]
});
// 是否具有证书
const isHaveStatus = ref(false)
const getisHave = (row) => {
  isHaveStatus.value = row
}
// 初始化
onMounted(() => {
  data.config = props.editObj
  deptid.value = props.editObj.orgid
  getmain(props.editObj.id);
});
watchEffect(() => {
  if (props.editObj) {
    data.config = props.editObj;
  }
});
function chooseXgf() {
  isShowXgfDialog.value = true
}
function handleInput(val) {
  if (/[\u4e00-\u9fa5]/.test(val)) {
    // 密码中包含中文
    ElMessage.error('密码不符合要求');
  } else {
    const sz = /[0-9]/.test(val)//数字
    const xx = /[a-z]/.test(val)//小写
    const dx = /[A-Z]/.test(val)//大写
    const tszf = /\W/.test(val)//特殊字符
    const Isarr = [sz, xx, dx, tszf].filter(item => { return item == true })
    const strongRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,}$/;
    if (strongRegex.test(val) || Isarr.length >= 3) {
      msgText.value = 3
    } else if (Isarr.length >= 2) {
      msgText.value = 2
    } else {
      msgText.value = 1
    }
  }
}
function changecgx(val) {
  data.fromObj.relatedid = val.id
  data.fromObj.relatedname = val.relatedname
  data.fromObj.state = '01'
}
//清除相关方数据
function changeclear(val) {
  data.fromObj.relatedid = null
  data.fromObj.relatedname = null
  data.fromObj.state = '02'
}
//点击带队领导选择按钮
// 保存
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (data.fromObj.accountFlag == '1' && data.fromObj.phone.length < 3) {
        ElMessage.error('登录账号长度不能低于3位');
      } else if (data.fromObj.accountFlag == '1' && data.fromObj.userpwd.length < 8) {
        ElMessage.error('密码长度不能低于8位');
      } else if (data.fromObj.accountFlag == '1' && msgText.value != 3) {
        ElMessage.error("密码必须满足强密码要求!");
      } else {
        loadingshow.value = true
        data.fromObj.files = data.fromObj.files ? data.fromObj.files.toString() : "";
        if (data.fromObj.id) {
          postApi(data.fromObj, "/mosty-jcgl/relatedUser/edit").then(() => {
            ElMessage.success("修改成功");
            emit("choosedUsers", "Main");
          }).finally(() => {
            loadingshow.value = false
          })
        } else {
          postApi(data.fromObj, "/mosty-jcgl/relatedUser/add").then(() => {
            ElMessage.success("新增成功");
            emit("choosedUsers", "Main");
          }).finally(() => {
            loadingshow.value = false
          })
        }
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
//获取详情
function getmain(id) {
  if (id) {
    getApi({ id }, "/mosty-jcgl/relatedUser/getInfo").then((res) => {
      if (res) {
        data.fromObj = res
        isHaveStatus.value = res.isHave
        if (data.fromObj.userpwd) {
          handleInput(data.fromObj.userpwd)
        }

      }
    });
  }
}
const black = () => {
  if (props.editObj.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("choosedUsers", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("choosedUsers", "Main");
  }

};


</script>

<style lang="scss" scoped>
.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

::v-deep .el-image {
  margin: 0;
  padding: 1px;
}

.erweim {
  text-align: center;
  margin-right: 10px;

  >img {
    width: 148px;
    height: 148px;
    display: block;
    border: 1px solid var(--el-color-primary);
  }
}

::v-deep .el-form {
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: start;
}

::v-deep .el-form-item__content {
  display: block;
  margin-left: 10px !important;
}

.el-form-item {
  margin-right: 20px;
}

.bigBox {
  display: block !important;
  padding-right: 14px;
  box-sizing: border-box;
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

.headBox {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

::v-deep .el-upload-list {
  width: 50%;
}

.input_span {
  height: 8px;
  display: flex;
  width: 35%;

  span {
    display: inline-block;
    width: 30%;
    border-radius: 8px;
    margin-right: 3px;
    text-align: center;
    margin-top: 3px;
  }
}
</style>
