<script setup lang="ts">
import { ref, watch } from "vue";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";

import { PageContentInstance } from "/@/components/PageContent";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import { usePermission } from "/@/hooks/core";

import DemandModifyModal from "./demand-modify-modal.vue";
import { useUserStore } from "/@/store/modules/user";
import ExecModal from "./exec-modal.vue";
import { ElMessage } from "element-plus";
import apis from "./config/apis";

const pageName = "commonOrder";

const execModalRef = ref<InstanceType<typeof ExecModal> | null>(null);
const demandModifyModal = ref<InstanceType<typeof DemandModifyModal> | null>(null);

const userStore = useUserStore();
const { hasPermissionWithCode } = usePermission(pageName);
const pageContentRef = ref<PageContentInstance | null>(null);
const searchConfigRef = ref(searchConfig);

watch(
  () => userStore.level,
  level => {
    const { formItems } = searchConfigRef.value;
    const index = formItems.findIndex(({ field }) => field === "depart_id");
    const { itemid = "" } = userStore.info || {};
  },
  {
    immediate: true
  }
);

async function deleteItem(id: String) {
  const response = await apis.delete_exec({ id });
  if (response.code === 1) {
    pageContentRef.value.onSearch();
  } else {
    ElMessage.warning(response.message);
  }
}

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

<template>
  <page-auth :page-name="pageName">
    <page-container
      :hooks="hooks"
      :page-name="pageName"
      :search-config="searchConfig"
      :get-content-ref="ref => (pageContentRef = ref)"
      :content-config="contentConfig"
    >
      <template #content_header>
        <el-button type="" size="mini" @click="execModalRef?.onDisplay({})"
          >查看执行类型说明</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="demandModifyModal?.onDisplay({})"
          >添加</el-button
        >
      </template>

      <template #content_action="row">
        <el-link
          :href="row.down_url"
          v-if="String(row.status) === '2' && hasPermissionWithCode('10')"
          target="_blank"
          :underline="false"
        >
          <ElButton
            link
            size="small"
            type="primary"
            :icon="useRenderIcon('download-line')"
          />
        </el-link>

        <el-popconfirm
          title="是否确认删除该条记录?"
          @confirm="deleteItem(row.id)"
          v-if="hasPermissionWithCode('8') && String(row.status) === '3'"
        >
          <template #reference>
            <ElButton
              link
              size="small"
              type="primary"
              :icon="useRenderIcon('delete')"
            />
          </template>
        </el-popconfirm>
      </template>
    </page-container>
    <demand-modify-modal
      ref="demandModifyModal"
      @refresh="pageContentRef.onSearch()"
    />

    <ExecModal ref="execModalRef" />
  </page-auth>
</template>
