<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="reqTableDataFunc" searchConditionNum="6">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']"
            customDateRangeType="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData['productOrPackageName']" :placeholder="'产品名称'"
          :key="'productOrPackageName'" />
        <jeepay-text-up v-model:value="vdata.searchData['mchName']" :placeholder="'商户名称/商户号'" />
        <jeepay-text-up v-model:value="vdata.searchData['contactsName']" :placeholder="'联系人/电话'" />
        <a-form-item label="" class="table-search-item" :placeholder="'商户状态'">
          <a-select v-model:value="vdata.searchData['state']" :placeholder="'商户状态'">
            <a-select-option value=""> 全部 </a-select-option>
            <a-select-option value="1"> 审核中 </a-select-option>
            <a-select-option value="2"> 审核失败 </a-select-option>
            <a-select-option value="3"> 已开通 </a-select-option>
            <a-select-option value="4"> 已取消 </a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable ref="infoTable" :init-data="true" :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns" :search-data="vdata.searchData" :expandedRowShow="true" row-key="id"
        @btnLoadClose="btnLoading=false">
        <!-- <template #topBtnSlot>
          <a-button v-if="$access('ENT_MCH_INFO_ADD')" type="primary" @click="addFunc">
            <plus-outlined />新建
          </a-button>
        </template> -->

        <template #expandedRowRender="{record}">
          <a-table :columns="vdata.innerColumns" :data-source="record.specialCertificationText" :pagination="false"
            style="margin-top: 5px">
            <template #certificationUrl="{ record }">
              <a-image :src="record.certificationUrl" style="width: 100px;height: 100px" />
            </template>
            <template #UserUrl="{ record }">
              <a-image v-if="record.UserUrl" :src="record.UserUrl" style="width: 100px;height: 100px" />
              <span v-else style="color:#ff4949">未上传</span>
            </template>
          </a-table>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            {{ record.id }}
          </template>

          <template v-if="column.key === 'mchName'">
            {{ record.mchName }}
          </template>
          <template v-if="column.key === 'contactsName'">
            {{ record.contactsName }}
          </template>
          <template v-if="column.key === 'contactsTel'">
            {{ record.contactsTel }}
          </template>

          <template v-if="column.key === 'productName'">
            {{ record.productName }}
          </template>

          <!--          <template v-if="column.key === 'specialCertificationText'">-->
          <!--            <a-image v-if="record.specialCertificationText" style="width: 40px;height:40px;" :src="record.specialCertificationText[0].certificationUrl || ''" />-->
          <!--          </template>-->

          <template v-if="column.key === 'costRule'">
            <div v-for="item in record.costRule" :key="item">
              {{item.versionName}}
            </div>
          </template>

          <template v-if="column.key === 'pracPrice'">
            <a-popover placement="top" style="background: #0c2640 !important;">
              <template #content style="background: #ff0 !important;">
                <p>订单金额：￥{{record.actualPrice }}</p>
                <p v-if="record.pracPrice">实付金额：￥{{ record.pracPrice}}</p>
              </template>
              <b style="color: #1890ff">￥{{ isNaN(record.pracPrice)?
                '0.00':record.pracPrice}} </b>
            </a-popover>
          </template>
          <template v-if="column.key === 'type'">
            {{ record.productName }}
          </template>

          <template v-if="column.key === 'state'">
            <a-badge status="default" text="未审核" v-if="record.state === 0" />
            <a-badge status="warning" text="审核中" v-if="record.state === 1" />
            <a-badge status="error" text="审核驳回" v-if="record.state === 2" />
            <a-badge status="success" text="已审核" v-if="record.state === 3" />
            <a-badge status="default" text="已取消" v-if="record.state === 4" />
          </template>

          <template v-if="column.key === 'updatedAt'">
            {{ record.updatedAt }}
          </template>

          <template v-if="column.key === 'createdAt'">
            {{ record.createdAt }}
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns v-if="record.state != 3">
              <a-button type="link" @click="showModal(record)">审核</a-button>
            </JeepayTableColumns>
          </template>

        </template>
      </JeepayTable>
    </a-card>

    <a-modal v-model:visible="visibleStatus" title="审核" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <a-form ref="infoFormModel" :model="vdata.searchFrom" class="edit-box">
        <a-row justify="space-between" type="flex">
          <a-col :span="24">
            <a-form-item label="审核状态" :labelCol="{span: 5}">
              <a-radio-group v-model:value="vdata.searchFrom.state">
                <a-radio value="2">审核驳回</a-radio>
                <a-radio value="3">审核成功</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="上传支付凭证" name="payImg" :labelCol="{span: 5}" style="line-height:75px">
              <JeepayUpload v-model:src="vdata.searchFrom.payImg" bizType="applyment" style="margin-left:2px" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="订单金额" name="actualPrice" :labelCol="{span: 5}">
              <a-input v-model:value="vdata.searchFrom.actualPrice" disabled style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="实付金额" name="pracPrice" :labelCol="{span: 5}">
              <a-input-number v-model:value="vdata.searchFrom.pracPrice" :min="0.01" :precision="2"
                style="width:100%" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" :labelCol="{span: 5}">
              <a-input v-model:value="vdata.searchFrom.stateDesc" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>
<script setup lang="ts">

  import { API_URL_PRODUCT_EXAMINE_LIST, API_URL_PRODUCT_EXAMINEE_CHECK, req, reqLoad } from '@/api/manage'

  import { ref, reactive, onMounted } from 'vue'
  import router from '@/router'
  import { Modal } from 'ant-design-vue';
  import { AnyARecord } from 'dns';

  const infoTable = ref()
  let tableColumns = reactive([
    { key: 'id', title: '申请单号' },
    { key: 'productName', title: '产品名称', dataIndex: 'product_desc' },
    { key: 'costRule', title: '订购信息', dataIndex: 'costRule', },
    { key: 'pracPrice', title: '订单金额', dataIndex: 'pracPrice' },
    // { key: 'actualPrice', title: '订单总价', dataIndex: 'actualPrice' },
    { key: 'mchName', title: '用户', dataIndex: 'mchName' },
    { key: 'contactsName', title: '联系人', dataIndex: 'contactsName' },
    { key: 'contactsTel', title: '手机号', dataIndex: 'contactsTel' },
    // { key: 'specialCertificationText', title: '特殊资质', dataIndex: 'specialCertificationText', },
    { key: 'state', title: '状态' },
    // { key: 'updatedAt', title: '修改日期', dataIndex: 'updatedAt' },
    { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt' },
    { key: 'operation', title: '操作', fixed: 'right', align: 'center' }
  ])


  let btnLoading = ref(false)
  let state = ref()
  let stateDesc = ref()
  let priceDesc = ref()
  let imgDesc = ref()
  let logId = ref('')
  const vdata = reactive({
    searchData: {
      mchName: "",
      state: '' as any,
      queryDateRange: '',
    },
    searchFrom: {} as any,
    innerColumns: [
      {
        title: '特殊资质名称',
        key: 'certificationName',
        dataIndex: 'certificationName',
      },
      {
        title: '图片',
        key: 'UserUrl',
        dataIndex: 'UserUrl',
        slots: { customRender: "UserUrl" },
      }, {
        title: '示例图',
        key: 'certificationUrl',
        dataIndex: 'certificationUrl',
        slots: { customRender: "certificationUrl" },
      },
    ]
  })
  let visibleStatus = ref(false)
  function showModal(data) {
    state.value = 0
    stateDesc.value = ''
    priceDesc.value = ''
    imgDesc.value = ''
    vdata.searchFrom.actualPrice = data.actualPrice
    vdata.searchFrom.pracPrice = data.pracPrice
    vdata.searchFrom.stateDesc = data.stateDesc
    logId = data.id
    visibleStatus.value = true;
  }
  function hideModal() {
    checkSave()
    visibleStatus.value = false;
  }

  function checkSave() {
    req.add(API_URL_PRODUCT_EXAMINEE_CHECK, {
      id: logId,
      state: vdata.searchFrom.state,
      // stateDesc:vdata.searchFrom.stateDesc,
      stateDesc: vdata.searchFrom.stateDesc,
      actualPrice: vdata.searchFrom.actualPrice,
      pracPrice: vdata.searchFrom.pracPrice,
      payImg: vdata.searchFrom.payImg || '',
    }).then(res => {
      console.log(res, 'infoTable.value')

      queryFunc()
    })
  }


  function queryFunc() {
    btnLoading.value = true
    infoTable.value.refTable(true)
  }
  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    return req.list(API_URL_PRODUCT_EXAMINE_LIST, params)
  }


  function searchFunc() { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
    // confirm()
  }

</script>