<!-- 支付配置页面 -->
<template>
  <div class="gyq_container">
    <div class="header_wrap">
      <div class="left_btn" @click="router.back()">
        <el-icon size="22" color="#333">
          <Back />
        </el-icon>
      </div>
      <div class="info">
        <div class="t">{{ route.query.shopName }} | 支付配置</div>
        <div class="intro">管理您的支付渠道和进件信息</div>
      </div>
      <!-- <div class="center">
        <el-text size="large">当前模式：</el-text>
        <el-radio-group size="large" :model-value="payModel" @change="handleRadioChange">
          <el-radio :label="item.label" :value="item.value" v-for="item in tabList" :key="item.value"></el-radio>
        </el-radio-group>
      </div> -->
    </div>
    <div class="gyq_content row mt14">
      <tabHeader v-model="tabActiveIndex" :list="tabList" />
      <payStatusCard name="payStatusCard" key="payStatusCard" ref="payStatusCardRef" v-if="tabActiveIndex == 0" />
      <detailModal name="detailModal" key="detailModal" ref="detailModalRef" v-model="detail"
        v-if="tabActiveIndex == 1" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import detailModal from './components/detailModal.vue';
import payStatusCard from './components/payStatusCard.vue';
import { shopMerchantGet, shopMerchantPut } from '@/api/common'

const route = useRoute()
const router = useRouter()
const payModel = ref('')
const tabActiveIndex = ref(0)
const tabList = ref([
  // {
  //   label: '支付进件',
  //   value: 'native'
  // },
  {
    label: '聚合支付',
    value: 'poly'
  }
])

// 二次确认支付模式 更换支付模式
async function handleRadioChange(value) {
  await ElMessageBox.confirm('确定要选择该模式吗？', '注意').then(async () => {
    try {
      await shopMerchantPut({
        shopId: route.query.shopId,
        channel: value
      })
      payModel.value = value
    } catch (error) {
      console.log(error);
    }
  }).catch(() => { })
}

// 与子组件的form绑定
const detail = ref({})
async function shopMerchantGetAjax() {
  try {
    const res = await shopMerchantGet({ shopId: route.query.shopId })
    console.log('shopMerchantGetAjax===', res);
    if (res && res.shopId) {
      payModel.value = res.channel

      if (res && res.polyMerchantDTO) {
        detail.value = res.polyMerchantDTO
      }
    }
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  shopMerchantGetAjax()
})

</script>

<style scoped lang="scss">
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  &.mt14 {
    margin-top: 14px;
  }
}

.center {
  display: flex;
  align-items: center;
}

.header_wrap {
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding-right: 14px;

  .left_btn {
    height: 73px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .info {
    flex: 1;
    padding: 14px 14px 14px 0;

    .t {
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }

    .intro {
      font-size: 14px;
      color: #999;
    }
  }

  .form {
    display: flex;
    align-items: center;
  }
}
</style>