<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    :title=" vdata.isAdd ? '新增商户' : '修改商户' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"
    @close="onClose"
  >
    <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="用户名称" name="mchName">
            <a-input
              v-model:value="vdata.saveObject['mchName']"
              placeholder="请输入商户名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="登录名" name="loginUsername">
            <a-input
              v-model:value="vdata.saveObject['loginUsername']"
              placeholder="请输入商户登录名"
              :disabled="!vdata.isAdd"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="商户简称" name="mchShortName">
            <a-input
              v-model:value="vdata.saveObject['mchShortName']"
              placeholder="请输入商户简称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="联系人姓名" name="contactName">
            <a-input
              v-model:value="vdata.saveObject['contactName']"
              placeholder="请输入联系人姓名"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="联系人邮箱" name="contactEmail">
            <a-input
              v-model:value="vdata.saveObject['contactEmail']"
              placeholder="请输入联系人邮箱"
            />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="联系人手机号" name="contactTel">
            <a-input
              v-model:value="vdata.saveObject['contactTel']"
              placeholder="请输入联系人手机号"
            />
            <span v-if="!vdata.isAdd" class="jeepay-tip-text">同步更改登录手机号</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="space-between" type="flex">
<!--        <a-col :span="10" style="position:relative">-->
<!--          <a-form-item label="商户级别" name="mchLevel">-->
<!--            &lt;!&ndash; 商户级别 气泡弹窗 &ndash;&gt;-->
<!--            <a-radio-group v-model:value="vdata.saveObject['mchLevel']">-->
<!--              <a-radio :value="'M0'" :disabled="true">M0</a-radio>-->
<!--              <a-radio :value="'M1'">M1</a-radio>-->
<!--            </a-radio-group>-->
<!--          </a-form-item>-->
<!--          <div id="components-popover-demo-placement">-->
<!--            <div class="typePopover">-->
<!--              <a-popover placement="top">-->
<!--                <template #title><span>商户级别</span></template>-->
<!--                <template #content>-->
<!--                  <p>M0商户：简单模式（页面简洁，仅基础收款功能）</p>-->
<!--                  <p>M1商户：高级模式（支持api调用， 支持配置应用及分账、转账功能）</p>-->
<!--                </template>-->
<!--                <question-circle-outlined />-->
<!--              </a-popover>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-col>-->
        <a-col :span="10">
          <a-form-item label="状态" name="state">
            <a-radio-group v-model:value="vdata.saveObject['state']">
              <a-radio :value="1">
                启用
              </a-radio>
              <a-radio :value="0">
                禁用
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="备注" name="remark">
            <a-input v-model:value="vdata.saveObject['remark']" placeholder="请输入备注" type="textarea" />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 重置密码板块 -->
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-divider orientation="left">
            <a-tag color="#FF4B33">
              账户安全
            </a-tag>
          </a-divider>
        </a-col>
      </a-row>
      <div v-if="vdata.isAdd">
        <a-row justify="space-between" type="flex">
          <a-col :span="24">
            <a-form-item label="是否发送开通提醒">
              <a-radio-group v-model:value="vdata.saveObject['isNotify']">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码设置">
              <a-radio-group v-model:value="vdata.saveObject['passwordType']">
                <a-radio value="default">默认密码</a-radio>
                <a-radio value="custom">自定义密码</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-if="vdata.saveObject.passwordType == 'custom'" :span="12">
            <a-form-item label="登录密码" name="loginPassword">
              <a-input
                v-model:value="vdata.saveObject['loginPassword']"
                placeholder="请输入登录密码"
              />
            </a-form-item>
            <a-button type="primary" ghost @click="randomPassage(false, 6, 0)"><file-sync-outlined />随机生成密码</a-button>
          </a-col>
        </a-row>
      </div>
      <div v-else>
        <div>
          <a-row justify="space-between" type="flex">
            <a-col :span="10">
              <a-form-item v-if="vdata.resetIsShow" label="">
                重置密码：<a-checkbox v-model:checked="vdata.sysPassword.resetPass" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item v-if="vdata.sysPassword.resetPass" label="">
                恢复默认密码：<a-checkbox v-model:checked="vdata.sysPassword.defaultPass" @click="isResetPass" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div v-if="vdata.sysPassword.resetPass">
          <div v-if="!vdata.sysPassword.defaultPass">
            <a-row justify="space-between" type="flex">
              <a-col :span="10">
                <a-form-item label="新密码：" name="newPwd">
                  <a-input-password v-model:value="vdata.newPwd" autocomplete="new-password" :disabled="vdata.sysPassword.defaultPass" />
                </a-form-item>
              </a-col>

              <a-col :span="10">
                <a-form-item label="确认新密码：" name="confirmPwd">
                  <a-input-password v-model:value="vdata.sysPassword.confirmPwd" autocomplete="new-password" :disabled="vdata.sysPassword.defaultPass" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MCH_LIST, req, $getPasswordRules } from '@/api/manage'
import { Base64 } from 'js-base64'
import {message} from 'ant-design-vue'
import {defineProps,reactive,ref} from 'vue'
 
    const props = defineProps({
    callbackFunc: { type: Function,default:null }
    })

  const infoFormModel = ref()
  const infoTable =ref()
  const vdata : any = reactive({
    newPwd: '', //  新密码
    resetIsShow: false, // 重置密码是否展现
    passwordRules: /^$/, //密码规则
    passwordRulesText: '', //密码规则提示文字 
    sysPassword: {
      resetPass: false, // 重置密码
      defaultPass: true, // 使用默认密码
      confirmPwd: '' //  确认密码
    },
    btnLoading: false,
    isAdd: true, // 新增 or 修改页面标志
    saveObject: {}, // 数据对象
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉
    rules: {
      mchName: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
      loginUsername: [{ required: true, pattern: /^[a-zA-Z][a-zA-Z0-9]{5,17}$/, message: '请输入字母开头，长度为6-18位的登录名', trigger: 'blur' }],
      mchShortName: [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
      contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
      contactEmail: [{ required: false, pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱地址', trigger: 'blur' }],
      contactTel: [{ required: true, pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }],
      newPwd: [{ required: false, trigger: 'blur' }, {
        validator: (rule, value) => {
          if (!vdata.sysPassword.defaultPass) {
            if (!vdata.passwordRules.test(vdata.newPwd)) {
              return Promise.reject(vdata.passwordRulesText)
            } else if(vdata.newPwd !== vdata.sysPassword.confirmPwd) {
              return Promise.reject('新密码与确认密码不一致')
            } else return Promise.resolve()
          } else {
              return Promise.resolve()
          }
          
        }
      }], // 新密码
      confirmPwd: [{ required: false, trigger: 'blur' }, {
        validator: (rule, value) => {
          if (!vdata.sysPassword.defaultPass) {
            // vdata.newPwd === vdata.sysPassword.confirmPwd ? callBack() : callBack('新密码与确认密码不一致')
            if(!vdata.passwordRules.test(vdata.sysPassword.confirmPwd)){
              return Promise.reject(vdata.passwordRulesText)
            } else if(vdata.newPwd !== vdata.sysPassword.confirmPwd) {
              return Promise.reject('新密码与确认密码不一致')
            } else return Promise.resolve()
          } else {
              return Promise.resolve()
          }
        }
      }] // 确认新密码
    }
  })
  function getPasswordRules () { // 获取密码规则
    $getPasswordRules().then(res => {
      vdata.passwordRules = new RegExp(res.regexpRules)
      vdata.passwordRulesText = res.errTips
    })
  }
  function show (recordId) { // 弹层打开事件
    getPasswordRules()
    vdata.isAdd = !recordId
    vdata.saveObject = { 'state': 1, 'type': 1, mchLevel: 'M1', passwordType: 'default', isNotify: 0, refundMode: ['plat', 'api'] } // 数据清空
    if (infoFormModel.value != undefined) {
      infoFormModel.value.resetFields()
    }
    
    if (!vdata.isAdd) { // 修改信息 延迟展示弹层
      vdata.resetIsShow = true // 展示重置密码板块
      vdata.recordId = recordId
      req.getById(API_URL_MCH_LIST, recordId).then(res => {
        vdata.saveObject = res
      })
      vdata.visible = true
    } else {
      vdata.visible = true // 立马展示弹层信息
    }
  }
  function handleOkFunc () { // 点击【确认】按钮事件      
      infoFormModel.value.validate().then(valid =>{

          vdata.btnLoading = true
          
          // 请求接口
          if (vdata.isAdd) {
            // 如果新增密码设置为默认密码，登录密码设置为空
            if(vdata.saveObject.passwordType == 'default' || !vdata.saveObject.loginPassword) {
              vdata.saveObject.loginPassword = ''
            }
            if(vdata.saveObject.passwordType == 'custom' && !vdata.passwordRules.test(vdata.saveObject.loginPassword)) {
              vdata.btnLoading = false
              return message.error(vdata.passwordRulesText)
            }
            vdata.saveObject.mchLevel =  'M1';
            req.add(API_URL_MCH_LIST, vdata.saveObject).then(res => {
              message.success('新增成功')
              vdata.visible = false
              props.callbackFunc() // 刷新列表
              vdata.btnLoading = false
            }).catch(res => {
              vdata.btnLoading = false
            })
          } else {

            vdata.sysPassword.confirmPwd = Base64.encode(vdata.sysPassword.confirmPwd)
            Object.assign(vdata.saveObject, vdata.sysPassword) // 拼接对象
            req.updateById(API_URL_MCH_LIST, vdata.recordId, vdata.saveObject).then(res => {
              message.success('修改成功')
              vdata.visible = false
              props.callbackFunc() // 刷新列表
              vdata.btnLoading = false
              vdata.resetIsShow = true // 展示重置密码板块
              vdata.sysPassword.resetPass = false
              vdata.sysPassword.defaultPass = true // 是否使用默认密码默认为true
              resetPassEmpty(DataView) // 清空密码
            }).catch(res => {
              vdata.btnLoading = false
              vdata.resetIsShow = true // 展示重置密码板块
              vdata.sysPassword.resetPass = false
              vdata.sysPassword.defaultPass = true // 是否使用默认密码默认为true
              resetPassEmpty(vdata) // 清空密码
            })
          }
        
      }).catch(valid =>{
      })
  }
  function  onClose () {
    vdata.visible = false
    vdata.resetIsShow = false // 取消重置密码板块展示
    vdata.sysPassword.resetPass = false
    resetPassEmpty(vdata)
    vdata.sysPassword.defaultPass = true// 是否使用默认密码默认为true
  }
  function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }
  // 使用默认密码重置是否为true
  function isResetPass () {
    if (!vdata.sysPassword.defaultPass) {
      vdata.newPwd = ''
      vdata.sysPassword.confirmPwd = ''
    }
  }
  // 保存后清空密码
  function resetPassEmpty (vdata) {
    vdata.newPwd = ''
    vdata.sysPassword.confirmPwd = ''
  }

  function randomPassage(randomFlag, min, max) { // 生成6位随机密码
    let str = ''
    let range = min
    const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    // 随机产生
    if (randomFlag) {
      range = Math.round(Math.random() * (max - min)) + min
    }
    for (var i = 0; i < range; i++) {
      var pos = Math.round(Math.random() * (arr.length - 1))
      str += arr[ pos ]
    }
    vdata.saveObject['loginPassword'] = str
  }


defineExpose({
  show
})
</script>
<style lang="less">
  .typePopover {
    position: absolute;
    top: 0;
    left:62px;
  }
</style>
