<!--
  封装选择商户， 选择pos的通用弹层

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/28 16:53
-->
<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="95%" title="请选择POS列表" @ok="okFunc">
      <div class="modal-div">
        <!-- 商户列表 ( 必选 ) -->
        <div class="modal-div1">
          <p>商户列表</p>
          <div class="list-table">
            <!-- 列表渲染 -->
            <JeepayTable
              ref="posTableRef"
              :initData="true"
              :reqTableDataFunc="reqPosTableDataFunc"
              :tableColumns="posTableColumns"
              :searchData="vdata.posSearchData"
              :rowSelection="{ type: 'radio',selectedRowKeys: vdata.selectedRowKeys, onChange: posTableSelectChangeFunc }"
              rowKey="deviceId"
              :scrollX="400"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

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


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


const posTableColumns = [
  { title: '设备号', dataIndex: 'deviceNo' },
  { title: '设备名称', dataIndex: 'deviceName' },
  { title: '批次号', dataIndex: 'batchId' },
]


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


// 响应式数据 
const vdata :any = reactive ({

  visible: false,
  posSearchData: { },
  selectedRowKeys: [], //列表的选择项
  selectedRows: {} //选择列

})


// 请求table接口数据 商户列表
function reqPosTableDataFunc (params){
  return req.list(API_URL_STORE_DEVICE, params)
}

// 商户表格的选择事件
function posTableSelectChangeFunc(selectedRowKeys, selectedRows) {
    vdata.selectedRowKeys = selectedRowKeys
    vdata.selectedRows = selectedRows
   
}


// 选择完毕
function okFunc(){


  //
  if(vdata.selectedRowKeys.length > 0){
      emit('selectFinishFunc', vdata.selectedRowKeys[0], vdata.selectedRows[0] )

  }else{
      emit('selectFinishFunc', null)

  }
}

function close(){
  vdata.visible = false
}


// 显示
function  show (initposSearchData) {

  vdata.selectedRowKeys = [] //清空已选择的数据

  vdata.posSearchData = initposSearchData
  vdata.visible = true
  nextTick(() => {
    posTableRef.value.refTable(true)
  })
  
}

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

<style scoped lang="less">
.modal-div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .modal-div1 {
    flex-grow: 1;
    width: 30%;
  }

  .list-table {
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 6px;
  }
}
.second-div {
 margin: 0 10px;
}
@media screen and (max-width:768px){
  .modal-div {
    flex-direction: column;
    .modal-div1 {
      width: 100%;
    }
  }
  .second-div {
    margin: 0 
  }
}
</style>
