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

import Modal from "./modal.vue"


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

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


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

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

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

function initalData() {
  requesetOrganizelist();
}


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('删除成功')
      requesetOrganizelist()
    }else {
      ElMessage.warning('删除失败')
    }
  })
}

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

async function handleSubmit(){
  const { name, id, companyNo } = dataSource.value
  const model = {name, id, companyNo ,pid: pid.value}
  const res = await httpUpdate(model)

  if(res.code === 0){
    visible.value = false
    ElMessage.success('更新成功')
    requesetOrganizelist()
  }else{
    ElMessage.warning('更新成功')
  }
}

initalData();

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

<template>
  <ul class="mt-[10px]" v-loading="loading" v-if="data.depart && data.item && !isError">
    <ElTable :data="data.depart" border size="small">
      <ElTableColumn label="组织名称" prop="name" />
      <ElTableColumn label="公司编码" prop="companyNo" />
      <ElTableColumn label="公司名称" prop="companyName" />
      <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-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>

    <li class="leading-[40px] flex gap-1 select-none cursor-pointer flex justify-between items-center"
      v-for="item in data.item" :type="item.position + '' === '1' ? 'primary' : 'info'" :key="item.id">
      <p>{{ item.nickname }}</p>

      <ElButton>设为负责人</ElButton>
    </li>

    <Modal 
      v-model:data="dataSource" 
      v-model:visible="visible" 
      :disabledBusiness="true" 
      @submit="handleSubmit" 
      />
  </ul>

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