<script setup>
import { apiRiskLevelRelationShip } from '@/api/riskLevel'

const show = defineModel('show', { type: Boolean, default: false })

const props = defineProps({
  editData: {
    type: [Object, null],
    default: null
  }
})
const emits=defineEmits(['success'])

watch(
  ()=>show.value,
  (n)=>{
    if(n&&props.editData){
      formState.userLevel=props.editData.CustomerRisk
      formState.productLevel=props.editData.ProductRisk
    } else{
      formState.userLevel=''
      formState.productLevel=''
    }
    if(n){
      getProductRiskLevelOpts()
    }
  }
)

// 用户风险等级选项
const userRiskLevelOpts = ref([])
async function getUserRiskLevelOpts() {
  const res = await apiRiskLevelRelationShip.userRiskLevelOpts()
  if (res.Ret === 200) {
    userRiskLevelOpts.value = res.Data.List || []
  }
}
getUserRiskLevelOpts()

// 产品风险等级选项
let productLevelOpts=[]
async function getProductRiskLevelOpts() {
  const res = await apiRiskLevelRelationShip.productRiskLevelOpts()
  if (res.Ret === 200) {
    const arr = res.Data.List || []
    productLevelOpts=arr.map(item=>{
      return {
        ...item,
        value:item.RiskName
      }
    })
  }
}

const formRef=ref(null)
const formRules = {
  userLevel: [{ required: true, message: '请选择用户风险等级', trigger: 'blur' },],
  productLevel: [
    { required: true, message: '请选择产品风险等级', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const regex = /^R\d+$/;
        if (!regex.test(value)) {
          callback(new Error('输入的值必须是 R 加数字，并且不能包含空格'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}
const formState = reactive({
  userLevel: '',
  productLevel: ''
})

function querySearch(queryString, cb) {
  const validLevels = productLevelOpts; // 可用的选项
  cb(validLevels)
}

async function handleSave() {
  await formRef.value.validate()
  const params={
    CustomerRisk:formState.userLevel,
    ProductRisk:formState.productLevel
  }
  const res=props.editData?await apiRiskLevelRelationShip.relationEdit(params) : await apiRiskLevelRelationShip.relationAdd(params)
  if(res.Ret!==200) return
  ElMessage.success(props.editData?'编辑成功': '添加成功');
  show.value=false
  emits('success')
}

</script>

<template>
  <el-dialog
    v-model="show"
    width="500"
    :title="editData ? '编辑' : '添加关联关系'"
    draggable
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      class="form-box"
      label-width="130px"
      hide-required-asterisk
    >
      <el-form-item prop="userLevel" label="用户风险等级">
        <el-select
          v-model="formState.userLevel"
          placeholder="请选择用户风险等级"
        >
          <el-option
            v-for="item in userRiskLevelOpts"
            :key="item.Id"
            :label="item.RiskName"
            :value="item.RiskName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="productLevel" label="产品最高风险等级">
        <el-autocomplete
          v-model="formState.productLevel"
          :fetch-suggestions="querySearch"
          placeholder="请选择产品风险等级"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="footer-wrap">
        <el-button type="primary" plain size="large" @click="show = false"
          >取消</el-button
        >
        <el-button type="primary" size="large" @click="handleSave"
          >保存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>