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

import { khOptions } from "../_options"

import Modal from "./modal.vue"
import { statusOptions } from "../_options";

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


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


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

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 onDelete(id: string) {
  ElMessageBox.confirm('确定要删除?', {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const model = { id }
    const res = await httpDelete(model)
    if (res.code === 0) {
      ElMessage.success('删除成功')
      requestOrganizelist()
    } else {
      ElMessage.warning('删除失败')
    }
  })
}

function onEdit(row) {
  dataSource.value = row
  visible.value = true
}


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

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

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

initialData();

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

<template>
  <ul class="mt-[10px]" v-loading="loading">
    <ElTable :data="data" border size="small">
      <ElTableColumn label="ID" prop="id" width="60px" />
      <ElTableColumn label="类型" width="80px">
        <template #="{ row }">
           <ElTag>{{ khOptions.find(({ value }) => value === String(row.kh))?.label || '--' }}</ElTag> 
        </template>
      </ElTableColumn>
      <ElTableColumn label="名称" prop="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="company_name" width="120px" />
      <ElTableColumn label="创建人" prop="creater" width="120px" />
      <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('edits')" @click="onEdit(row)" />
          </el-tooltip>

          <el-tooltip effect="dark" content="删除专属分类" placement="top">
            <ElButton link class="reset-margin" type="primary" :icon="useRenderIcon('delete')"
              @click="onDelete(row.id)" />
          </el-tooltip>

          <el-popconfirm :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 v-model:data="dataSource" v-model:visible="visible" :pid="pid" :breadcrumb="breadcrumb"  @refresh="requestOrganizelist" />
  </ul>
</template>
