<script setup lang="ts">
import { shallowRef, ref, watch, reactive } from "vue"
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { httpChannels, httpChannelCategory } from "/@/api/serviceParam/paymentChannelGrossProfit";
import { useTask } from "/@/hooks/core"

import Modal from "./modal.vue"
import { usePermission } from "/@/hooks/core/usePermission";


const state = reactive({
  data: {},
  visible: false
})


const { hasPermissionWithCode } = usePermission('paymentChannelGrossProfit')

const currentChannelId = shallowRef('');
const channelQueryParatters = ref({ channel_name: '' })
const channelCategoryQueryParatters = ref({ cat_name: '' })

const channelTask = useTask({ initialData: {}, success: (data) => {
    const { id } = data.list[0] || ''
    currentChannelId.value = id
}})

const channelCategoryTask = useTask({ initialData: [] })

const requestChannelList = () => channelTask.run(httpChannels({ ...channelQueryParatters.value, page: 1, size: 15 }))
const requestChannelCategory = () => currentChannelId.value && channelCategoryTask.run(httpChannelCategory({ ...channelCategoryQueryParatters.value, channel_id: currentChannelId.value }))

watch(() => currentChannelId.value, requestChannelCategory, { immediate: true })

function handleUpdateChannelCategory(row){
  state.visible = true
  state.data = { 
    channel_name: channelTask.data.list.find(({id}) => id == row.channel_id)?.channel_name || '--',
    ...row
   }
}

requestChannelList()
</script>

<template>
  <div class="flex bg-white gap-[10px]">
    <div class="flex-col w-[50%]" v-loading="channelTask.loading">
      <div class="flex">
        <ElInput placeholder="支付渠道名称" class="mr-[20px]" v-model="channelQueryParatters.channel_name" @change="requestChannelList" />
        <ElButton type="primary" @click="requestChannelList">刷新</ElButton>
      </div>

      <ElTable class="mt-[10px]" border size="small" :data="channelTask.data.list">
        <ElTableColumn width="60px" label="选择">
          <template #="{ row }">
            <ElRadio v-model="currentChannelId" :label="row.id"><span></span></ElRadio>
          </template>
        </ElTableColumn>
        <ElTableColumn label="支付渠道名称" prop="channel_name" show-overflow-tooltip />
        <ElTableColumn label="业务公司" prop="companyName" show-overflow-tooltip />
      </ElTable>
    </div>

    <div class="flex-col w-[50%]" v-loading="channelCategoryTask.loading">
      <div class="flex">
        <ElInput placeholder="一级分类名称" class="mr-[20px]" v-model="channelCategoryQueryParatters.cat_name" @change="requestChannelCategory" />
        <ElButton type="primary" @click="requestChannelCategory">刷新</ElButton>
      </div>

      <ElTable class="mt-[10px]" border size="small" :data="channelCategoryTask.data">
        <ElTableColumn label="一级分类名称" prop="cat_name" show-overflow-tooltip />
        <ElTableColumn label="业务公司"  show-overflow-tooltip>
          <template #="{ row }">
            {{ channelTask.data.list.find(({id}) => id == row.channel_id)?.channel_name || '--' }}
          </template>
        </ElTableColumn>

        <ElTableColumn label="毛利率" width="60px">
          <template #="{row}">
              {{Number(row.rate).toFixed(2)}}%
           </template>
        </ElTableColumn>

        <ElTableColumn label="操作" width="60px">
          <template #="{ row }" v-if="hasPermissionWithCode('005')">
            <ElButton type="primary" link :icon="useRenderIcon('edit')" @click="handleUpdateChannelCategory(row)" />
          </template>
        </ElTableColumn>
      </ElTable>
    </div>

    <Modal 
      v-model:visible="state.visible" 
      v-model:data="state.data" 
      @refresh="requestChannelCategory"
     />
  </div>
</template>
