<script setup lang="ts">
import { ref, reactive } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { initialData } from "./config/_options";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import { httpSetSettleCard } from "/@/api/serviceParam/supplierBankDetail";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import BankModal from "./components/bank-modal.vue"
import { useTask } from "/@/hooks/core"


import { ElMessageBox, ElMessage } from "element-plus"

const bankModal = reactive({ visible: false, type: 'create', data: {} })
const PageName = "supplierBankDetail";
const instance = ref<any>(null);
const loading = ref(false)


const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};

const events: PageEvents = {
  content: {
    create: () => {
      bankModal.data = initialData()
      bankModal.type = 'create'
      bankModal.visible = true
    },
    preview: async ({ contact_mobile, contact_name, bank_name, bank_no, code, name  }) => {
      bankModal.data =  { contact_mobile, contact_name, bank_name, bank_no, code, name  }
      bankModal.type = 'preview'
      bankModal.visible = true
    },
    update: async ({ contact_mobile, contact_name, bank_name, bank_no, code, name, id  }) => {
      bankModal.data =  { id, contact_mobile, contact_name, bank_name, bank_no, code, name  }
      bankModal.type = 'update'
      bankModal.visible = true
    }
  }
};


const settleCardTask = useTask({ success: () => {
  ElMessage.success('设置成功')
  instance.value?.onSearch()
} })


function setSettleCard(id: string) {
  ElMessageBox.confirm('是否确认设置为结算卡?').then(() => {
    settleCardTask.run(httpSetSettleCard({ id }))
  })
}
</script>

<template>
  <PageAuth :pageName="PageName" v-loading="loading">
    <PageContainer 
      :hooks="hooks" 
      :events="events" 
      :content-config="contentConfig" 
      :search-config="searchConfig"
      :get-content-ref="ref => (instance = ref)" 
    >
    <template #content_action="{ is_default, id }">
      <ElTooltip v-if="is_default != 1" placement="top" content="设置为结算卡">
        <ElButton 
          size="small" 
          link 
          type="primary" 
          :icon="useRenderIcon('setting')"
          @click="setSettleCard(id)"
        />
      </ElTooltip>
    </template>
  </PageContainer>

    <BankModal
      @refresh="instance!.onSearch()" 
      v-model:visible="bankModal.visible" 
      v-model:data="bankModal.data"
      :type="bankModal.type"
    />
  </PageAuth>
</template>
