<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData = {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />


        <jeepay-text-up   v-model:value="vdata.searchData['mchApplyName']"   :placeholder="'商户名称/商户号'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['storeId']"  :placeholder="'门店名称/门店编号'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['ifName']"   :placeholder="'支付通道'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['isvNo']"  :placeholder="'渠道名称/渠道号'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['mchUserName']"  :placeholder="'用户号/名称/手机号'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['mchServiceName']"  :placeholder="'服务商号/服务商名称'"  />
        <jeepay-text-up  v-model:value="vdata.searchData['bindAppIdName']" :placeholder="'应用名称/应用ID'" />
        <jeepay-text-up  v-model:value="vdata.searchData['contactPhone']"  :placeholder="'联系人电话'" />
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="storeId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_MCH_STORE_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'storeName'">
            <a @click="detailFunc(record.storeId)"><b>{{ record.storeName }}</b></a >
          </template>
          <template v-if="column.key === 'bindAppIdName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>应用名称：{{record.bindAppIdName}}</span><br>
                <span>应用ID：{{record.bindAppId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
            </a-tooltip>
          </template>


          <template v-if="column.key === 'mchUserName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>用户名称：{{record.mchUserName}}</span><br>
                <span>用户手机号：{{record.mchUserPhone}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchUserName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchServiceName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>服务商名称：{{record.mchServiceName}}</span><br>
                <span>服务商号：{{record.agentNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchServiceName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchShortName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>商户名称：{{record.mchApplyName}}</span><br>
                <span>商户号：{{record.mchApplyId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.mchApplyName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'defaultFlag'">
            <a-tag v-if="record.defaultFlag===1" color="green">是</a-tag>
            <a-switch v-else :checked="record.defaultFlag===1?true:false" @change="(defaultFlag) => { return updateState(record.mchNo, record.storeId, defaultFlag)}" />
          </template>
          <template v-if="column.key === 'deviceNumber'">
            <a href="javascript:void(0)" @click="deviceFunc(record.storeId)">{{ record.deviceNumber ? record.deviceNumber : 0 }}</a>
          </template>
          <template v-if="column.key === 'remark'">
<!--            <span @click="editFunc(record.storeId)" class="two-lines"-->
<!--            ><b></b>-->
<!--              <EditOutlined @click="editFunc(record.storeId)" />-->
<!--            </span>-->
            <div class="my-tooltip-title-box"> {{record.remark != "" ? record.remark : "--" }}</div>
          </template>
          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_STORE_EDIT')" type="link" style="padding-right: 10px;padding-left: 10px;" @click="deviceFunc(record.storeId)">设备管理</a-button>
              <a-button v-if="$access('ENT_MCH_STORE_EDIT')" type="link" style="padding-right: 10px; padding-left: 10px;text-align: center"  @click="editFunc(record.storeId)" >修改</a-button >
              <a-button v-if="$access('ENT_MCH_STORE_DELETE')" type="link" style="color: red" @click="delFunc(record.storeId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
  </page-header-wrapper>
</template>
<script lang="ts" setup>
import { API_URL_MCH_STORE_LIST, req, reqLoad } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import InfoDetail from './Detail.vue'
import { useRoute } from 'vue-router'
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import router from '@/router'
// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
  { title: "门店名称", key: "storeName", dataIndex: "storeName"},
  { title: "门店编号", dataIndex: "storeId"},
  { title: '用户名称', key: 'mchUserName', dataIndex: 'mchUserName' },
  { title: '服务商名称', key: 'mchServiceName', dataIndex: 'mchServiceName' },
  // { title: "是否默认", key: "defaultFlag", align: "center" },
  { title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
  { title: "联系电话", dataIndex: "contactPhone" },
  { title: "备注", key: "remark", dataIndex: "remark"},
  { title: "设备总数", key: "deviceNumber", dataIndex: "deviceNumber", align: "center" },
  // { title: '蚂蚁店铺状态', key: 'alipayShopStatus', dataIndex: 'alipayShopStatus' },
  { title: "创建时间", dataIndex: "createdAt" },
  { key: "op", title: "操作", fixed: "right", align: "center" },
])
    const infoDetail = ref()
    const infoAddOrEdit  = ref()
    const infoTable = ref()
    const vdata = reactive({
      tableColumns: tableColumns,
      searchData: {} as any,
      btnLoading: false
    })

    const queryFunc = () => {
      
      vdata.btnLoading = true
      infoTable.value.refTable(true)
    }

    onMounted(() => {
      vdata.searchData['mchNo'] = useRoute().query.mchNo
      queryFunc()
    })

    // 请求table接口数据
    function reqTableDataFunc (params)  {
       return req.list(API_URL_MCH_STORE_LIST, params)
    }

    function searchFunc() { // 点击【查询】按钮点击事件
      vdata.btnLoading = true // 打开查询按钮的loading
      infoTable.value.refTable(true)
    }
    function addFunc () { // 业务通用【新增】 函数
      infoAddOrEdit.value.show(vdata.searchData['mchNo'])
    }
    function delFunc (recordId) { // 业务通用【删除】 函数
      $infoBox.confirmDanger('确认删除？', '', () => {
        return req.delById(API_URL_MCH_STORE_LIST, recordId).then(res => {
         $infoBox.message.success('删除成功！')
          infoTable.value.refTable(false)
        }).catch(err => {})
      })
    }
    function editFunc (recordId) { // 业务通用【修改】 函数
      infoAddOrEdit.value.show(vdata.searchData['mchNo'], recordId)
    }
    function detailFunc (recordId: any) { // 门店详情页
      infoDetail.value.show(recordId)
    }
    function updateState (mchNo, recordId, state) { // 【更新状态】
      const title = state === 1 ? '确认[默认]该门店？' : '确认[取消默认]该门店？'
      const content = '开启默认后则默认使用该门店配置，有且只能有一个默认门店。'
      return new Promise<void>((resolve, reject) => {
        $infoBox.confirmDanger(title, content, () => {
          return reqLoad.updateById(API_URL_MCH_STORE_LIST, recordId, { mchNo: mchNo, defaultFlag: state }).then(res => {
            searchFunc()
            resolve()
          }).catch(err => reject(err))
        },
          () => {
          reject(new Error())
        })
      })
    }

  // 云喇叭配置
  function speakerConfig (recordId: any) {
    router.push({
      path: '/store/speaker',
      query: { storeId: recordId }
    })
  }
function deviceFunc(storeId){
  router.push({
    path: "/qrc",
    query:{storeId:storeId}
  });
}

  // 云打印配置
  function printerConfig (recordId: any) {
    router.push({
      path: '/store/printer',
      query: { storeId: recordId }
    })
  }

</script>
