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


import { httpList, httpStatus, httpEnterpriseStatus } from "/@/api/serviceParam/business";


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

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

const pageName = "business";
const { hasPermissionWithCode } = usePermission(pageName)

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 onEdit(row) {
  if(row.status == 1){
    ElMessage.warning('禁用后才能编辑')
    return
  }
  dataSource.value = row
  visible.value = true
}


const handleStatus = async row => {
  const { id, status, kh } = row;
  const api = kh === '0' ? httpStatus : httpEnterpriseStatus
  const { code, message } = await api({
    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" v-if="data && data.length > 0 && !isError">
    <ElTable :data="data" border size="small">
      <ElTableColumn label="ID" prop="id" width="80px" />

      <ElTableColumn label="类型" prop="id" width="80px">
        <template #="{ row }">
          <ElTag :size="'small'" :type="row.kh == 0 ? 'success' : ''">
            {{ row.kh == 0 ? '组织' : '企业' }}
          </ElTag>
        </template>
      </ElTableColumn>

      <ElTableColumn label="名称" prop="name" min-width="160px" show-overflow-tooltip />
      <ElTableColumn label="编码" prop="code" min-width="120px" show-overflow-tooltip />

      <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="addtime" width="160px" />

      <ElTableColumn label="操作" width="140px">
        <template #="{ row }">
          <el-tooltip v-if="hasPermissionWithCode('005')" effect="dark" content="编辑" placement="top">
            <ElButton link class="reset-margin" type="primary" :icon="useRenderIcon('edits')" @click="onEdit(row)" />
          </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 v-model:data="dataSource" v-model:visible="visible" :pid="pid" :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>
