<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title=" true ? '门店详情' : '' "
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    @close="onClose"
  >

    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户信息</a-divider>

    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户全称">
            {{ vdata.mchDetail.mchFullName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户简称">
            {{ vdata.mchDetail.mchShortName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="商户类型">
            {{ vdata.mchDetail.merchantType == 1?'小微':vdata.mchDetail.merchantType == 2?'个体':vdata.mchDetail.merchantType == 1?'企业':'其他' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="结算状态">
            {{vdata.mchDetail.settlementType??"无"}}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人姓名">
            {{ vdata.mchDetail.contactName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人手机号">
            {{ vdata.mchDetail.contactPhone }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

    </a-row>

    <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">门店信息</a-divider>
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店编号">
            {{ vdata.detailData['storeId'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店名称">
            {{ vdata.detailData['storeName'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店logo">
            <a-image v-if="vdata.detailData['storeLogo']" class="img" :src="vdata.detailData['storeLogo']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店内景照">
            <a-image v-if="vdata.detailData['storeInnerImg']" class="img" :src="vdata.detailData['storeInnerImg']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门头照">
            <a-image v-if="vdata.detailData['storeOuterImg']" class="img" :src="vdata.detailData['storeOuterImg']" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="门店地址">
            {{ vdata.detailData['address'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
<!--      <a-col :sm="12">-->
<!--        <a-descriptions>-->
<!--          <a-descriptions-item label="代理商号">-->
<!--            {{ vdata.detailData['agentNo'] }}-->
<!--          </a-descriptions-item>-->
<!--        </a-descriptions>-->
<!--      </a-col>-->
<!--      <a-col :sm="12">-->
<!--        <a-descriptions>-->
<!--          <a-descriptions-item label="用户号">-->
<!--            {{ vdata.detailData['mchNo'] }}-->
<!--          </a-descriptions-item>-->
<!--        </a-descriptions>-->
<!--      </a-col>-->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="联系人手机号">
            {{ vdata.detailData['contactPhone'] }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row justify="start" type="flex">
      <a-col :sm="24">
        <a-form-item label="备注">
          <a-input
            v-model:value="vdata.detailData['remark']"
            type="textarea"
            disabled="disabled"
            style="height: 50px"
          />
        </a-form-item>
      </a-col>
    </a-row>

  </a-drawer>
</template>

<script lang="ts" setup>
import {API_URL_MCH_APPLYMENT_LIST, API_URL_MCH_STORE_LIST, req} from '@/api/manage'
import { reactive } from 'vue'
    const vdata:any = reactive({
        btnLoading: false,
        detailData: {}, // 数据对象
        mchDetail:{},// 数据对象
        recordId: null, // 更新对象ID
        visible: false, // 是否显示弹层/抽屉
        isvList: [], // 服务商下拉列表
        isvName: '' // 服务商名称
    })

    function show (recordId) { // 弹层打开事件
        vdata.detailData = {} // 数据清空
        vdata.recordId = recordId
        req.getById(API_URL_MCH_STORE_LIST, recordId).then(res => {
          vdata.detailData = res
          mchDetail()
        })



        vdata.visible = true
      }
      function onClose () {
        vdata.visible = false
      }

      function mchDetail(){
        req.getById(API_URL_MCH_APPLYMENT_LIST, vdata.detailData.mchApplyId).then(res => {
          if(res.succResParameter){
            const  succResParameter = JSON.parse(res.succResParameter)
            vdata.termNo = succResParameter.termNo
          }else{
            vdata.termNo = "无"
          }
          vdata.mchDetail = res
        })
      }
defineExpose({
  show //抛出show函数给父组件
})
</script>
<style>
.img {
  width: 50px;
  height: 50px;
}
</style>