<script setup lang="ts">
import { ref, shallowRef } from "vue";
import { useAsync, useResponseHandle } from "/@/hooks/core/useAsync";
import { httpList, httpStatus } from "/@/api/serviceParam/sort";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ElMessageBox, ElMessage } from "element-plus"

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

const emit = defineEmits(["breadcrumbChange"]);
const props = defineProps<{
  otherParms: Record<string, string>;
  breadcrumb: any[]
}>();
const { hasPermissionWithCode } = usePermission('sort')

const responseHandle = useResponseHandle()
const visible = shallowRef(false)
const pid = ref("");
const modalType = ref('')

const dataSource = ref<any>({})
const { data, run, loading, isError } = useAsync<any>({ isList: true });

function toNextNode(depart: any) {
  pid.value = depart.id;
  requestOrganizelist();
  emit("breadcrumbChange", depart);
}

function requestOrganizelist() {
  const params = { ...(pid.value ? { pid: pid.value } : { pid: 0 }), ...props.otherParms };
  run(httpList(params));
}

function initialData() {
  requestOrganizelist();
}

function onEdit(row, type = 'preview') {
  dataSource.value = row
  visible.value = true
  modalType.value = type
}

const handleStatus = async row => {
  const { id, status } = row;

  const { code, message } = await httpStatus({
    id: Number(id),
    status: status + "" === "1" ? "0" : "1",
    relaComNo: ''
  });

  responseHandle({
    code,
    message,
    handler: () => requestOrganizelist()
  });
};

initialData();

defineExpose({
  changePid: (id: string) => (pid.value = id),
  onSearch: () => requestOrganizelist()
});
</script>

<template>
  <ul class="mt-[10px]" v-loading="loading" v-if="data && data.length > 0 && !isError">
    <ElTable :data="data" border size="small">
      <ElTableColumn label="ID" prop="id" min-width="160px" />
      <ElTableColumn label="分类名称" prop="cat_name" min-width="160px" />
      <ElTableColumn label="状态" prop="status" width="70px">
        <template #="{ row }">
          <ElTag :type="String(row.status) === '0' ? 'warning' : ''">
            {{ statusOptions.find(({ value }) => value === String(row.status))?.label || '--' }}
          </ElTag>
        </template>
      </ElTableColumn>

      <ElTableColumn label="分类等级" prop="level" width="80px" />
      <ElTableColumn label="财务核算码" prop="fund_code" width="120px" />

      <ElTableColumn label="关联规格" prop="fund_code" width="120px" show-overflow-tooltip>
        <template #="{ row }">
          {{ row.im.map((({ spec_name }) => spec_name)).join('、') }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="创建时间" prop="addtime" width="160px" />
     
      <ElTableColumn label="操作" width="140px">
        <template #="{ row }">
          <el-tooltip effect="dark" content="详情" placement="top">
            <ElButton link class="reset-margin" type="primary" :icon="useRenderIcon('eye-view')" @click="onEdit(row)" />
          </el-tooltip>

          <el-tooltip v-if="hasPermissionWithCode('005')" effect="dark" content="修改" placement="top">
            <ElButton 
              link 
              class="reset-margin" 
              type="primary" 
              :icon="useRenderIcon('edit')" 
              @click="onEdit(row, 'update')" 
            />
          </el-tooltip>


          <el-popconfirm 
            v-if="hasPermissionWithCode('004')"
            :title=" String(row.status) === '1' ? '改为禁用？' : '改为启用？'" 
            @confirm="handleStatus(row)"  >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  size="small"
                  :icon=" useRenderIcon(String(row.status) === '1' ? 'close-circle-line' : 'checkbox-circle-line')" />
                </template>
          </el-popconfirm>
          
          <el-tooltip effect="dark" content="下一级" placement="top">
            <ElButton link class="reset-margin" type="primary" :icon="useRenderIcon('arrow-right-s-line')"
              @click="toNextNode(row)" />
          </el-tooltip>
        </template>
      </ElTableColumn>
    </ElTable>

    <Modal 
      :pid="pid" 
       v-model:data="dataSource" 
       v-model:visible="visible"
       :type="modalType"
      :breadcrumb="breadcrumb"
      @refresh="requestOrganizelist" 
    />
  </ul>

  <div class="w-full leading-[198px] text-center border-[#ccc] border rounded-sm mt-2 color-[#ccc] font-bold" v-else>
    暂无数据
  </div>
</template>
