<!--
  新建分账用户（通用组件  微信支付宝这种）

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/09 14:20
-->

<template>
  <div>
    <a-button type="primary" style="margin-bottom: 10px;" @click="addReceiverRow"> <plus-outlined />添加接收账号</a-button>
    <!-- 表格 -->
    <a-table :columns="accTableColumns" :data-source="vdata.receiverTableData" :pagination="false" rowKey="rowKey" style="margin:0">
      <template #bodyCell="{column, record}">
        <!-- 账号类型 -->
        <template v-if="column.key == 'reqBindState'">
          <div v-show="record.reqBindState == 0" style="color: salmon ">
            <info-circle-outlined />待绑定
          </div>
          <div v-show="record.reqBindState == 1" style="color: green; ">
            <check-circle-outlined /> 绑定成功
          </div>
          <div v-show="record.reqBindState == 2" style="color: red; ">
            <close-circle-outlined /> 绑定异常
          </div>
        </template>

        <!-- 账号别名 -->
        <template v-if="column.key == 'receiverAlias'">
          <a-input v-model:value="record.receiverAlias" style="width: 150px" placeholder="(选填)默认为账号" />
        </template>

        <!-- 账号类型 -->
        <template v-if="column.key == 'accType'">
          <a-select v-model:value="record.accType" style="width: 110px" placeholder="账号类型" default-value="0">
            <a-select-option :value="0">个人</a-select-option>
            <a-select-option :value="1">商户类型</a-select-option>
          </a-select>
        </template>

        <!-- 接收方账号 -->
        <template v-if="column.key == 'accNo'">
          <a-input v-model:value="record.accNo" style="width: 150px;margin-right: 7px" />
          <!-- 只有微信， 支付宝官方可扫码获取 -->
          <template v-if="selectedMchAndIfcodeInfo.ifCode == 'wxpay' || selectedMchAndIfcodeInfo.ifCode == 'alipay' || selectedMchAndIfcodeInfo.ifCode == 'sftpay'">
            <qrcode-outlined v-if="record.accType == 0" @click="showChannelUserModal(record)" />
          </template>
        </template>

        <!-- 接收方姓名 -->
        <template v-if="column.key == 'accName'">
          <a-input v-model:value="record.accName" style="min-width: 100px;" />
        </template>

        <!-- 分账关系 -->
        <template v-if="column.key == 'relationType'">
          <RelationType v-model:relationType="record.relationType" v-model:relationTypeName="record.relationTypeName" />
        </template>

        <!-- 关系名称 -->
        <template v-if="column.key == 'relationTypeName'">
          <a-input v-model:value="record.relationTypeName" :disabled="record.relationType !== 'CUSTOM'" style="min-width:100px;" />
        </template>

        <!-- 默认分账比例 -->
        <template v-if="column.key == 'divisionProfit'">
          <a-input-number
            v-model:value="record.divisionProfit"
            style="width: 120px"
            :precision="2"
            :min="0.01"
            :max="100"
          >
            <template #addonAfter>%</template>
          </a-input-number>
        </template>

        <template v-if="column.key == 'op'"><a-button type="link" @click="delRow(record)">删除</a-button></template>
      </template>
    </a-table>
    <!-- 获取渠道用户信息组件 -->
    <ChannelUserModal ref="channelUserModal" @changeChannelUserId="changeChannelUserIdFunc($event)" />
  </div>
</template>

<script lang="ts" setup>

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


// 参数注入： 当前选择的数据对象信息（包含 ifCode, mchNo, appId 等参数 ）
let selectedMchAndIfcodeInfoRef : any = inject('selectedMchAndIfcodeInfo')
let selectedMchAndIfcodeInfo : any = selectedMchAndIfcodeInfoRef.value


const channelUserModal = ref()

const accTableColumns = [
  { key: 'reqBindState', title: '状态',width:100 },
  { key: 'receiverAlias', title: '账号别名' },
  { key: 'accType', title: '账号类型' },
  { key: 'accNo',  title: '接收方账号',width:220 },
  { key: 'accName',  title: '接收方姓名',width:120 },
  { key: 'relationType', title: '分账关系'},
  { key: 'relationTypeName',  title: '关系名称' },
  { key: 'divisionProfit', title: '默认分账比例',width:100},
  { key: 'op', title: '操作',align:'center' }
]

const vdata : any = reactive({
    accTableColumns: accTableColumns, // 表头模板（微信支付宝公用）
    receiverTableData: [], // 分账用户列表集合
})


// 添加一行账号信息
function addReceiverRow () {
  vdata.receiverTableData.push(
    {
      rowKey: genRowKey(),  
      reqBindState: 0, // 默认待绑定
      accType: 0,
      relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
      relationTypeName: '合作伙伴',
  })
}

// 删除某一行
function delRow (item) {
  const index = vdata.receiverTableData.indexOf(item)
  if (index > -1) {
    vdata.receiverTableData.splice(index, 1)
  }
}

// 显示获取用户ID的弹层
function showChannelUserModal ( record) {
  channelUserModal.value.showModal(
    selectedMchAndIfcodeInfo.appId,
    selectedMchAndIfcodeInfo.ifCode,
    record
    )
}

// 接收到当前渠道用户ID信息
function changeChannelUserIdFunc ({ channelUserId, extObject }) {
  extObject.accNo = channelUserId
}


// 获取请求列表（List格式）， 返回Promise对象，  值为数组类型
function getReqDataList(){
  return Promise.resolve(vdata.receiverTableData)
}

function changeState(index, state){
  vdata.receiverTableData[index].reqBindState = state
}

defineExpose({getReqDataList, changeState})
</script>
