<!--
  封装分账公共信息
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/12 10:59
-->

<template>
  <div>
    <a-alert v-if="vdata.currentReceiver.reqBindState == 0" type="warning" message="待绑定" banner />

    <a-alert v-if="vdata.currentReceiver.reqBindState == 1" type="success" message="绑定成功" banner />
    <a-alert v-if="vdata.currentReceiver.reqBindState == 2" type="error" message="绑定异常" banner />

    <!-- 分账信息  -->

    <a-divider orientation="left" style="color: #1A66FF;">分账信息</a-divider>
    <a-form
      ref="divisionFormRef"
      style="margin-top: 20px;"
      :model="vdata.currentReceiver"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="rules"
    >
      <a-form-item label="账号别名" name="receiverAlias">
        <a-input v-model:value="vdata.currentReceiver.receiverAlias" />
      </a-form-item>

      <a-form-item label="分账关系" name="relationType">
        <RelationType v-model:relationType="vdata.currentReceiver.relationType" v-model:relationTypeName="vdata.currentReceiver.relationTypeName" />
      </a-form-item>

      <a-form-item label="关系名称" name="relationTypeName">
        <a-input v-model:value="vdata.currentReceiver.relationTypeName" :disabled="vdata.currentReceiver.relationType !== 'CUSTOM'" />
      </a-form-item>

      <a-form-item label="默认分账比例" name="divisionProfit">
        <!-- 预览模式 || 不是运营平台（其他系统）： 不可更改分账费率， 使用默认值 -->
        <a-input-number
          v-model:value="vdata.currentReceiver.divisionProfit"
          :precision="2"
          :min="0.01"
          :max="100"
        >
          <template #addonAfter>%</template>
        </a-input-number>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">

import RelationType from '../relationType/RelationType.vue'
import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const divisionFormRef = ref()

const rules = {
   receiverAlias: [ ruleGenerator.requiredInput('账号别名') ],
   relationType: [ ruleGenerator.requiredSelect('分账关系') ],
   relationTypeName: [ ruleGenerator.requiredInput('关系名称') ],
   divisionProfit: [ ruleGenerator.requiredInput('默认分账比例', 'number') ],
}

const vdata : any = reactive({

  currentReceiver: {   // 当前分账用户信息
      reqBindState: 0, // 默认待绑定
      relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
      relationTypeName: '合作伙伴',
   }
})

// 验证 and 获取表单数据
function validateAndGetData(){

  return divisionFormRef.value.validate().then(() => {
    return Promise.resolve(JSON.parse(JSON.stringify(vdata.currentReceiver)))
  })

}

// 更改状态
function changeState(index, state){
  vdata.currentReceiver.reqBindState = state
}


defineExpose({ validateAndGetData, changeState })

</script>