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

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="60%"
      :title="showTypeArray.indexOf('STORE') > -1 ? '请选择门店' : showTypeArray.indexOf('APP') > -1 ? '请选择应用' : '请选择用户'"
      @ok="okFunc">
      <div class="modal-div">
        <!-- 商户列表 ( 必选 ) -->
        <div class="modal-div1">
          <p>用户列表</p>

          <div v-if="props.onlyMchNo || props.onlyMchName || props.mchNoAndName" class="search">
            <a-input v-if="props.onlyMchNo || props.mchNoAndName" v-model:value="vdata.mchSearchData.mchNo"
              class="rate-input" placeholder="搜索商户号" />
            <a-input v-if="props.onlyMchName || props.mchNoAndName" v-model:value="vdata.mchSearchData.mchName"
              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.mchSearchData = {}"><reload-outlined />重置</a-button>
          </div>
          <div class="list-table">
            <!-- 列表渲染 -->
            <JeepayTable ref="mchTableRef" :initData="true" :reqTableDataFunc="reqMchTableDataFunc"
              :tableColumns="mchTableColumns" :searchData="vdata.mchSearchData"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.mch, onChange: mchTableSelectChangeFunc }"
              rowKey="mchNo" :scrollX="400">
              <!-- 自定义插槽 -->
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'type'">
                  <a-tag :color="record.type === 1 ? 'green' : 'orange'">
                    {{ record.type === 1 ? '普通商户' : '特约商户' }}
                  </a-tag>
                </template>
              </template>
            </JeepayTable>
          </div>
        </div>
        <!-- 应用列表 -->
        <div v-if="showTypeArray.indexOf('APP') > -1" class="modal-div1 second-div">
          <p>应用列表</p>
          <div v-show="vdata.selectedRowKeys.mch.length > 0" class="list-table">
            <JeepayTable ref="mchAppTableRef" :initData="false" :reqTableDataFunc="reqMchAppTableDataFunc"
              :tableColumns="mchAppTableColumns" :searchData="vdata.mchAppSearchData"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.app, onChange: mchAppTableSelectChangeFunc }"
              rowKey="appId" :scrollX="400" />
          </div>
        </div>
        <!-- 门店列表 -->
        <div v-if="showTypeArray.indexOf('STORE') > -1" class="modal-div1">
          <p>门店列表</p>
          <div v-show="vdata.selectedRowKeys.mch.length > 0" class="list-table">
            <JeepayTable ref="mchStoreTableRef" :initData="false" :reqTableDataFunc="reqMchStoreTableDataFunc"
              :tableColumns="mchStoreTableColumns" :searchData="vdata.mchStoreSearchData"
              :rowSelection="{ type: 'radio', selectedRowKeys: vdata.selectedRowKeys.store, onChange: mchStoreTableSelectChangeFunc }"
              rowKey="storeId" :scrollX="400" />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

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


// 定义组件的传入参数 
const props = defineProps({
  showType: { type: String, default: 'MCH' }, // 选择类型： MCH / MCH_APP / MCH_STORE / MCH_APP_STORE
  onlyMchNo: { type: Boolean, default: false }, // 搜索时仅展示商户号
  onlyMchName: { type: Boolean, default: false }, // 搜索时仅展示商户名称
  mchNoAndName: { type: Boolean, default: false }, // 搜索时同时展示商户名和商户号
})

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


const mchTableColumns = [
  { title: '用户名称', dataIndex: 'mchName' },
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo' },
  { key: 'contactTel', title: '用户手机号', dataIndex: 'contactTel' },
  { title: '用户类型', key: 'type', dataIndex: 'type' }
]
const mchAppTableColumns = [
  { title: '应用AppId', dataIndex: 'appId' },
  { title: '应用名称', dataIndex: 'appName' }
]

const mchStoreTableColumns = [
  { title: '门店ID', dataIndex: 'storeId' },
  { title: '门店名称', dataIndex: 'storeName' }
]

// 当前 table 组件
const mchTableRef = ref()
const mchAppTableRef = ref()
const mchStoreTableRef = ref()


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

  visible: false,
  mchSearchData: {
    mchNo: '',
    mchName: '',
  },
  mchAppSearchData: {},
  mchStoreSearchData: {},
  selectedRowKeys: { mch: [], app: [], store: [], userInfo: [], mchApplyId: [], } //列表的选择项
})

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


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

// 请求table接口数据 商户应用列表
function reqMchAppTableDataFunc(params) {
  return req.list(API_URL_MCH_APP, params)
}


const mchApplyIdList = ref([])

// 请求table接口数据 商户门店列表
async function reqMchStoreTableDataFunc(params) {
  mchApplyIdList.value = await req.list(API_URL_MCH_STORE_LIST, params)
  return mchApplyIdList.value
}

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

// 商户表格的选择事件
function mchTableSelectChangeFunc(selectedRowKeys, e) {
  console.log(e[0], 'onChangeonChangeonChangeonChangeonChange')
  console.log(selectedRowKeys, 'selectedRowKeysselectedRowKeysselectedRowKeys')

  vdata.selectedRowKeys.userInfo = e
  vdata.selectedRowKeys.mch = selectedRowKeys
  vdata.selectedRowKeys.app = []
  vdata.selectedRowKeys.store = []

  vdata.mchAppSearchData.mchNo = selectedRowKeys[0]
  vdata.mchStoreSearchData.mchNo = selectedRowKeys[0]

  if (mchAppTableRef.value) {
    mchAppTableRef.value.refTable(true)
  }

  if (mchStoreTableRef.value) {
    mchStoreTableRef.value.refTable(true)
  }


}

// 商户表格的选择事件
function mchAppTableSelectChangeFunc(selectedRowKeys) {
  vdata.selectedRowKeys.app = selectedRowKeys
}

// 商户表格的选择事件
function mchStoreTableSelectChangeFunc(selectedRowKeys) {
  console.log(mchApplyIdList.value);
  
  vdata.selectedRowKeys.mchApplyId = [mchApplyIdList.value.records.find(item => item.storeId == selectedRowKeys[0]).mchApplyId]
  console.log(vdata.selectedRowKeys.mchApplyId);

  vdata.selectedRowKeys.store = selectedRowKeys
}

// 选择完毕
function okFunc() {
  console.log(vdata.selectedRowKeys.userInfo, 'vdata.selectedRowKeys.userInfo')
  // [用户号， 应用， 门店]
  emit('selectFinishFunc',
    [
      vdata.selectedRowKeys.mch.length > 0 ? vdata.selectedRowKeys.mch[0] : null,
      vdata.selectedRowKeys.app.length > 0 ? vdata.selectedRowKeys.app[0] : null,
      vdata.selectedRowKeys.store.length > 0 ? vdata.selectedRowKeys.store[0] : null,
      vdata.selectedRowKeys.userInfo.length > 0 ? vdata.selectedRowKeys.userInfo[0] : null,
      vdata.selectedRowKeys.mchApplyId.length > 0 ? vdata.selectedRowKeys.mchApplyId[0] : null
    ])

}

function close() {
  vdata.visible = false
}


// 显示
function show(initMchSearchData) {

  vdata.selectedRowKeys = { mch: [], app: [], store: [] } //清空已选择的数据

  vdata.mchSearchData = initMchSearchData || {}
  vdata.visible = true

  nextTick(() => {
    mchTableRef.value.refTable(true)
  })
}

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

<style scoped lang="less">
.search {

  display: flex;
  margin: 10px 0;

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

.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>
