<route lang="yaml">
  name: taskConfig //分类分级任务
  </route>

<script lang="ts" setup name="taskConfig">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import useDataAssetStore from "@/store/modules/dataAsset";
import { filterVal, getCgTaskPageList, cgTaskDelete, runExecTask } from "@/api/modules/dataInventory";
import { TableColumnWidth } from '@/utils/enum';

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const assetStore = useDataAssetStore();

const loading = ref(false);
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
});
const searchItemValue: any = ref({});
const currTableData: any = ref({});
const tableInfo = ref({
  id: "mapping-table",
  fields: [
    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
    { label: "任务名称", field: "taskName", width: 96 },
    {
      label: "目录名称", field: "cgDirName", width: 120, type: "text_btn", columClass: 'text_btn', click: (scope) => {
        router.push({
          name: "classifyGradeCatalogue",
          query: { name: scope.row.cgDirName },
        });
      }
    },
    {
      label: "元数据", field: "metaNames", width: 200, getName: (scope) => {
        const metaNames = scope.row.metaNames || [];
        return metaNames.join(',');
      }
    },
    {
      label: "执行状态", field: "status", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
        return filterVal(scope.row.status, 'status');
      }, tagType: (scope) => {
        return scope.row.status == 'Y' ? 'success' : scope.row.status == 'E' ? 'danger' : 'info';
      }
    },
    { label: "任务修改人", field: "updateUserName", width: 120 },
    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
    { label: "确认次数", field: "confirmCnt", width: 96, align: 'right' },
    { label: "结果确认人", field: "confirmUserName", width: 120 },
    { label: "确认时间", field: "confirmTime", width: TableColumnWidth.DATETIME },
    {
      label: "结果状态", field: "confirmStatus", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
        return filterVal(scope.row.confirmStatus, 'confirmStatus');
      }, tagType: (scope) => {
        return scope.row.confirmStatus == 'Y' ? 'success' : 'warning';
      }
    },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 280,
    btns: (scope) => {
      let row = scope.row, btnArr: any = [
        { label: "手动执行", value: "run", disabled: row.status != 'Y' && row.status != 'E' },
        { label: "编辑", value: "edit", disabled: row.status != 'Y' && row.status != 'E' },
        { label: "日志", value: "log" },
        { label: "删除", value: "delete", disabled: row.status != 'Y' && row.status != 'E' }
      ];
      if (row.confirmStatus == 'Y') {
        btnArr.splice(0, 0, { label: "结果修改", value: "modify" });
      } else {
        btnArr.splice(0, 0, { label: "结果确认", value: "confirm", disabled: row.status != 'Y' });
      }
      return btnArr;
    },
  },
});

const getTableData = () => {
  loading.value = true;
  getCgTaskPageList(
    Object.assign({}, searchItemValue.value, {
      pageIndex: page.value.curr,
      pageSize: -1,
    })
  ).then((res: any) => {
    loading.value = false;
    tableInfo.value.data = res.data.records || [];
  })
    .catch((res) => {
      loading.value = false;
    });
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == 'confirm' || type == 'modify' || type == 'edit' || type == "log") {
    toPath(type);
  } else if (type == 'run') {
    const params = { guid: currTableData.value.guid };
    runExecTask(params).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getTableData();
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    }).catch((res) => {
      ElMessage({
        type: "error",
        message: '请求失败',
      });
    });
  } else if (type === "delete") {
    open("此操作将永久删除，是否继续？", "warning");
  }
};

const toPath = (type) => {
  if (type == 'add') {
    router.push({
      name: "taskEdit",
      query: {
        type
      },
    });
  } else if (type == 'edit') {
    router.push({
      name: "taskEdit",
      query: {
        guid: currTableData.value.guid,
        name: currTableData.value.taskName,
        type
      },
    });
  } else if (type == 'confirm' || type == 'modify') {
    router.push({
      name: "taskDetail",
      query: {
        guid: currTableData.value.guid,
        name: currTableData.value.taskName,
        execGuid: currTableData.value.execGuid,
        type
      },
    });
  } else {
    router.push({
      name: "taskLog",
      query: {
        guid: currTableData.value.guid,
        name: currTableData.value.taskName,
        type
      },
    });
  }
}

const open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    const guids = [currTableData.value.guid];
    cgTaskDelete(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getTableData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    }).catch((res) => {

    });
  });
};

onActivated(() => {
  if (assetStore.isRefresh) {//如果是首次加载，则不需要调用
    getTableData()
    assetStore.set(false);
  }
})

onBeforeMount(() => {
  getTableData()
})

</script>

<template>
  <div class="container_wrap" v-loading="loading">
    <div class="table_tool_wrap" v-if="tableInfo.data.length">
      <div class="table_title">分类分级任务</div>
    </div>
    <div class="table_panel_wrap" v-if="tableInfo.data.length">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
    </div>
    <div class="card-noData" v-else>
      <img src="@/assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
      <p>暂无分类分级任务，<span class="text_btn" @click="toPath('add')">去新建</span></p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table_tool_wrap {
  width: 100%;
  min-height: unset;
  padding: 0 8px;

  .table_title {
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    font-size: 16px;
    color: #212121;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 40px);
  padding: 8px 8px 16px;
}

.card-noData {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>