<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="80%" title="划拨/收回设备" @ok="okFunc">
      <a-row>
        <a-space align="center">
          <label>请选择分配类型：</label>
          <a-radio-group v-model:value="vdata.allotOrRecover">
            <a-radio value="allot">划拨</a-radio>
            <a-radio value="recover">收回</a-radio>
          </a-radio-group>
        </a-space>
      </a-row>
      <div class="modal-div">
        <!-- 代理商列表 -->
        <div v-show="vdata.allotOrRecover == 'allot'" class="modal-div1">
          <div class="search">
            <a-input v-model:value="vdata.agentSearchData.agentNo" class="rate-input" placeholder="搜索服务商号" />
            <a-input v-model:value="vdata.agentSearchData.agentName" class="rate-input" placeholder="搜索服务商名称" />
            <a-button type="primary" @click="searchFunc">
              <template #icon><search-outlined /></template>查询
            </a-button>
            <a-button style="margin-left: 8px" @click="() => vdata.agentSearchData = {} "><reload-outlined />重置</a-button>
          </div>

          <div class="list-table">
            <JeepayTable
              ref="agentTableRef"
              :initData="true"
              :reqTableDataFunc="reqAgentTableDataFunc"
              :tableColumns="agentTableColumns"
              :searchData="vdata.agentSearchData"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.agent, onChange: agentTableSelectChangeFunc }"
              rowKey="agentNo"
              :scrollX="400"
            >
              <template #topBtnSlot>
                <p>请选择服务商</p>
              </template>
            </JeepayTable>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { API_URL_AGENT_LIST, req } from '@/api/manage'
import { reactive, ref, defineExpose, computed } from 'vue'

// 定义组件的传入参数 
const props = defineProps({
    showType: { type: String, default: 'AGENT' }, // 选择类型： AGENT
})

// 定义向父组件 通讯 func 
const emit = defineEmits(['selectFinishFunc'])

const agentTableColumns = [
  { key: 'agentNo', title: '服务商号', dataIndex: 'agentNo' },
  { title: '服务商名称', dataIndex: 'agentName' }
]

// 当前 table 组件
const agentTableRef = ref()

// 响应式数据 
const vdata :any = reactive ({
  visible: false,
  agentSearchData: { },
  allotOrRecover: 'allot',
  selectedRowKeys: { agent: [] } //列表的选择项
})

// 计算属性 
// const showTypeArray = computed((params) => {
//   return props.showType.split('_')
// })

// 请求table接口数据
function reqAgentTableDataFunc (params){
  return req.list(API_URL_AGENT_LIST, Object.assign({}, params, { state: 1 }))
}

// 商户表格搜索事件
const searchFunc = () => agentTableRef.value.refTable(true)

// 表格的选择事件
function agentTableSelectChangeFunc(selectedRowKeys) {
    vdata.selectedRowKeys.agent = selectedRowKeys
}

// 选择完毕
function okFunc(){

  // [代理商号， 分配类型]
  emit('selectFinishFunc',  [
    vdata.selectedRowKeys.agent.length > 0 ? vdata.selectedRowKeys.agent[0] : null, vdata.allotOrRecover
  ])
}

function close(){
  vdata.visible = false
}

// 显示
function  show () {
  vdata.selectedRowKeys = { agent: [] } //清空已选择的数据
  vdata.allotOrRecover = 'allot' // 默认划拨
  vdata.visible = true
}

// 定义对外输出函数
defineExpose( { show, close } )
</script>

<style scoped lang="less">
.modal-div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;

  .modal-div1 {
    width: 100%
  }

  .list-table {
    border: 1px solid #ddd;
    border-radius: 6px;
  }
}

.search {

  display: flex;
  margin: 10px 0;
  .rate-input {
    width: 200px;
    margin-right: 10px;
  }
}


</style>
