<script setup lang="ts">
import { ref } 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 { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { httpDetail } from "/@/api/serviceParam/terrace";
import { ElMessage } from "element-plus";

import Modal from "./components/modal.vue";
import SortModal from "./components/sort-modal.vue"

const PageName = "terrace";
const instance = ref<any>(null);
const disabled = ref(false)
const visible = ref(false)
const sortVisible = ref(false)
const loading = ref(false)
const data = ref<any>(initialData())

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

async function requestPlatformDetail(_id: string) {
  loading.value = true
  const result = await httpDetail({ id: _id })
  loading.value = false
  const { id, platform_name, platform_type, use_type, is_select_pay_rate, pay_list, desc } = result.data
  data.value = { id, platform_name, platform_type, use_type, is_select_pay_rate, pay_list, desc }
}

const events: PageEvents = {
  content: {
    create: () => {
      data.value = initialData()
      disabled.value = false
      visible.value = true
    },
    preview: async ({ id }) => {
      await requestPlatformDetail(id)
      disabled.value = true
      visible.value = true
    },
    update: async ({ id , status }) => {
      if(String(status) === '1'){
        ElMessage.warning('禁用后，才可以修改！')
        return
      }
      
      await requestPlatformDetail(id)
      disabled.value = false
      visible.value = true
    }
  }
};

async function onSort(id:string){
  await requestPlatformDetail(id)
  sortVisible.value = true
}

</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="{ id }">
      <ElTooltip placement="top" content="排序">
        <ElButton 
          size="small" 
          link 
          type="primary" 
          :icon="useRenderIcon('setting')" 
          @click="onSort(id)"
        />
      </ElTooltip>
    </template>
  </PageContainer>

    <Modal 
      v-model:visible="visible" 
      v-model:data="data" 
      :disabled="disabled"
      @refresh="instance!.onSearch()" 
    />

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