<template>
  <Header :pagging="pagging" :isTeached="isTeached" />
  <List
    :pagging="pagging"
    :checkPerm="isTeached ? 'cancel' : 'teach'"
    :isRecycle="isRecycle"
  >
    <template v-slot:tableCtrl>
      <template v-if="!isRecycle">
        <template v-if="isTeached">
          <el-button
            type="primary"
            @click="revokeTeaching()"
            v-pdpath="'cancel'"
            :class="{ disable: !pagging.state.table.selectRows.length }"
          >
            撤销教学
          </el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="addHandler" v-pdpath="'add'">
            新增火调项目
          </el-button>
          <el-button
            type="primary"
            @click="setTeaching"
            v-pdpath="'teach'"
            :class="{ disable: !pagging.state.table.selectRows.length }"
          >
            设为教学项目
          </el-button>
        </template>
      </template>
    </template>

    <template v-slot:appendColumn v-if="!isTeached">
      <el-table-column label="教学项目" v-slot:default="{ row }: { row: Fire }">
        {{ row.isTeached ? "是" : "否" }}
      </el-table-column>
    </template>

    <template v-slot:rowCtrl="{ row }: { row: Fire }">
      <template v-if="!isRecycle">
        <template v-if="isTeached">
          <span class="oper-span" @click="gotoQuery(row.caseId)" v-pdpath="['view']">
            查看
          </span>
          <span
            class="oper-span"
            @click="showMessageHandler(row)"
            v-pdpath="['message:look']"
            >留言
          </span>
        </template>
        <template v-else>
          <CaseEditMenu
            :title="row.projectSn"
            :prev-menu="[
              {
                key: 'info',
                label: '火调信息',
                onClick: () => editHandler(row),
              },
            ]"
            :caseId="row.caseId"
            v-if="row.caseId"
          />
          <span class="oper-span" @click="gotoQuery(row.caseId)" v-pdpath="['view']">
            查看
          </span>
          <span class="oper-span" @click="copy(row.caseId)" v-pdpath="['view']">
            复制
          </span>
          <span
            class="oper-span"
            @click="pagging.del(row)"
            style="color: var(--primaryColor)"
            v-pdpath="['del']"
          >
            删除
          </span>
        </template>
      </template>
      <template v-else>
        <span
          class="oper-span"
          @click="async () => {
            await setFire({...row, isDelete: 0} as any)
            pagging.refresh();
          }"
          v-pdpath="['retruen']"
          style="color: var(--primaryColor)"
        >
          恢复
        </span>
        <span
          class="oper-span"
          @click="pagging.del(row)"
          v-pdpath="['del']"
          style="color: var(--primaryColor)"
        >
          删除
        </span>
      </template>
    </template>
  </List>
</template>

<script setup lang="ts">
import Header from "./header.vue";
import List from "./list.vue";
import { useFirePagging } from "./pagging";
import { Fire, revokeFireTeachs, setFireTeachs, setFire } from "@/app/fire/store/fire";
import { copyCase } from "@/store/case";
import CaseEditMenu from "@/view/case/editMenu.vue";
import { gotoQuery } from "@/view/case/help";
import { confirm } from "@/helper/message";
import { addFire, editFire, showLeaveMsgList, addLeaveMsg } from "./quisk";
import { shareCase } from "@/view/case/quisk";
import { ElMessage } from "element-plus";

const { pagging, isTeached, isRecycle } = useFirePagging();

const copy = async (caseId: number) => {
  await copyCase(caseId);
  pagging.refresh();
};

// 撤销教学
const revokeTeaching = async (row?: Fire) => {
  if (!(await confirm("撤销教学，火调项目将不再显示在教学平台。（火调项目不会删除）"))) {
    return;
  }
  const items = row ? [row] : pagging.state.table.selectRows;
  await revokeFireTeachs(items.map(({ id }) => id));
  pagging.refresh();
  ElMessage.success(
    items.map(({ projectSn }) => projectSn).join(",") + "已成功从教学项目撤销"
  );
};

const showMessageHandler = (row: Fire) => {
  showLeaveMsgList({
    projectId: row.id,
    onAddLeaveMsg: () => addLeaveMsg({ projectId: row.id }),
  });
};

const setTeaching = async () => {
  let items = pagging.state.table.selectRows || [];
  if (!items.length) {
    return ElMessage.error("请先选择操作项");
  }
  if (
    !(await confirm(
      "将火调项目设为教学项目后，总队及以下全部队伍均可查看。设置后可在教学平台取消设置。"
    ))
  ) {
    return;
  }
  await setFireTeachs(items.map(({ id }) => id));
  pagging.refresh();
  ElMessage.success(
    "已成功设置" + items.length + "个火调项目到教学平台，已设置的项目不重复设置。"
  );
};

const editHandler = async (row: Fire) => {
  (await editFire({ fire: row })) && pagging.refresh();
};
const addHandler = async () => {
  (await addFire({})) && pagging.refresh();
};
</script>
