<route lang="yaml">
  name: qualityAssess
</route>

<template>
  <div class="container_wrap flex">
    <div class="box_left aside_wrap">
      <div class="aside_title">质量评估方案列表</div>
      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="box_right">
      <div class="table_tool_wrap">
        <TableTools :searchItems="searchItemList" :searchId="'user-manage-search'" @search="toSearch" />
        <div class="tools_btns">
          <el-button type="primary" @click="newCreatePlan" :disabled="treeSelectItem.guid == 4"
            v-preReClick>新建方案</el-button>
        </div>
      </div>
      <div class="table_panel_wrap">
        <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tableSelectionChange="tableSelectionChange"
          @tableSwitchBeforeChange="tableSwitchBeforeChange" @tablePageChange="tablePageChange" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="qualityAssess">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import Tree from "@/components/Tree/index.vue";
import TableTools from '@/components/Tools/table_tools.vue'
import Table from "@/components/Table/index.vue";
import { useRouter } from "vue-router";
import { changeNum } from '@/utils/common';
import {
  getPlanList,
  deletePlan,
  updateQualityPlanState,
  executePlan
} from '@/api/modules/dataQualityAssess';
import { TableColumnWidth } from '@/utils/enum';
import useDataQualityStore from "@/store/modules/dataQuality";
import { commonPageConfig } from '@/components/PageNav/index';

/** 数据质量缓存内容 */
const dataQualityStore = useDataQualityStore();

const { proxy } = getCurrentInstance() as any;

const router = useRouter()

/** 当前左侧选中树的item,用于根据选中不同层级，右侧显示不同表格。 */
const treeSelectItem: any = ref({})

/** 左侧树形配置信息。 */
const treeInfo: any = ref({
  id: "data-pickup-tree",
  filter: false,
  queryValue: "",
  queryPlaceholder: "输入名称搜索",
  nodeKey: 'guid',
  expandedKey: [0],
  currentNodeKey: 0,
  props: {
    value: 'guid',
    label: 'label',
    isLeaf: 'isLeaf'
  },
  data: [{
    guid: 0,
    label: '质量评估方案',
    children: [{
      guid: 1,
      label: '表方案'
    }, {
      guid: 3,
      label: '分组方案'
    }, {
      guid: 2,
      label: '数据库方案'
    }
      // , {
      //   guid: 4,
      //   label: '数据同步方案'
      // }
    ]
  }],
});

/** 上方搜索配置信息。 */
const searchItemList = ref([
  {
    type: 'input',
    label: '',
    field: 'planName',
    default: '',
    maxlength: 50,
    placeholder: '方案名称',
    clearable: true,
    visible: true
  }, {
    type: 'select',
    label: '',
    field: 'state',
    default: null,
    placeholder: '状态',
    options: [
      { label: '上线', value: 1 },
      { label: '下线', value: 0 },
    ],
    clearable: true,
    visible: true
  }
])

/** 当前操作的方案表格行数据 */
const currTableData: any = ref<Object>({});
/** 分页及搜索传参信息配置。 */
const page = ref({
  ...commonPageConfig, planName: '',
  planType: null,
  state: null
});
/** 方案表格已勾选选中的行。 */
const selectRowData = ref([])

/** 方案表格配置信息。 */
const tableInfo = ref({
  id: 'user-manage-table',
  //  multiple: true,
  loading: false,
  nodeKey: 'guid',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center", fixed: "left" },
    { label: "方案名称", field: "planName", width: 140, type: "text_btn", value: "detail", fixed: "left", columClass: 'text_btn' },
    {
      label: "方案类型", field: "planType", width: 90, getName: (scope) => {
        let planType = scope.row.planType;
        return planType == 1 ? '表' : (planType == 2 ? '数据库' : (planType == 4 ? '数据同步' : '分组'));
      }
    },
    { label: "数据源", field: "dataSourceName", width: 150 },
    {
      label: "表数量", field: "tableNum", width: 80, align: 'right', getName: (scope) => {
        return scope.row.tableNum != null ? changeNum(scope.row.tableNum ?? 0) : '--';
      }
    },
    {
      label: "规则数", field: "ruleNum", width: 80, align: 'right', getName: (scope) => {
        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
      }
    },
    {
      label: '状态', field: 'state', type: 'switch', activeText: '上线', inactiveText: '下线', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center', isDisabled: (scope) => {
        return scope.row.planType == 4;
      }
    },
    { label: "执行状态", field: "execState", width: TableColumnWidth.STATE, align: 'center', type: "tag" },
    {
      label: "执行周期", field: "execCycle", width: TableColumnWidth.EXECCYCLE
    },
    { label: "下次执行时间", field: "nextExecTime", width: TableColumnWidth.DATETIME, },
    { label: "最后执行时间", field: "lastExecTime", width: TableColumnWidth.DATETIME, },
    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME, },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 270,
    btns: (scope) => {
      const row = scope.row
      let btnsArr: any = [{
        label: "编辑", value: "edit", disabled: row.state === 1 || row.isExecute || row.execState == 1 || row.planType == 4, click: (scope) => {
          router.push({
            name: 'assessTemplate',
            query: {
              guid: row.guid,
              planName: row.planName
            }
          });
        }
      },
      {
        label: "查看结果", value: "resultView", disabled: row.execState == 1 || row.isExecute || row.execState == 0, click: (scope) => {
          router.push({
            name: 'assessDetail',
            query: {
              planGuid: row.guid,
              name: row.planName,
              planExecGuid: row.planExecGuid
            }
          });
        }
      },
      {
        label: "日志", value: "path_log", disabled: row.execState == 0, click: (scope) => {
          router.push({
            name: 'assessLog',
            query: {
              guid: row.guid,
              name: row.planName
            }
          });
        }
      }];
      if (row.isExecute) {
        btnsArr.splice(0, 0, { label: "执行中...", value: "execute", disabled: true })
      } else {
        btnsArr.splice(0, 0, { label: "手动执行", value: "execute", disabled: row.execState == 1 || row.state == 0 || row.planType == 4 })
      }
      btnsArr.push({ label: "删除", value: "delete", disabled: row.isExecute || row.execState == 1 || row.state == 1 });
      return btnsArr
    }
  }
});

const toSearch = (val: any, clear: boolean = false) => {
  page.value.curr = 1;
  if (clear) {
    searchItemList.value.map(item => item.default = '')
    page.value.planName = '';
    page.value.state = null;
    getTableData();
    return;
  }
  page.value.planName = val.planName;
  page.value.state = val.state;
  getTableData();
};

/** 调用接口刷新获取方案表格数据 */
const getTableData = () => {
  tableInfo.value.loading = true;
  getPlanList({
    pageIndex: page.value.curr, pageSize: page.value.limit, planName: page.value.planName,
    planType: page.value.planType,
    state: page.value.state
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res === undefined) {
      return;
    }
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
  })
};

/** 监听处理表格勾选事件。 */
const tableSelectionChange = (val) => {
  selectRowData.value = val.map((item) => item.guid);
};

/** 监听处理分页事件。 */
const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

const tableSwitchBeforeChange = (scope, field, callback) => {
  if (scope.row.isExecute || scope.row.execState == 1) {
    ElMessage.warning('该方案正在执行中，无法下线');
    return;
  }
  const msg = `确定【${scope.row[field] == 1 ? '下线' : '上线'}】该方案吗?`;
  ElMessageBox.confirm(
    msg,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const state = scope.row[field] == 1 ? 0 : 1
    const result = tableSwitchChange(state, scope, field)
    callback(result)
  }).catch(() => {
    callback(false)
  })
}

const tableSwitchChange = (val, scope, field) => {
  return new Promise((resolve, reject) => {
    let params = {
      guid: scope.row.guid,
      state: val
    }
    updateQualityPlanState(params).then((res: any) => {
      if (res.code == proxy.$passCode && res.data) {
        page.value.curr = 1;
        getTableData();
        ElMessage({
          type: "success",
          message: `该方案${val == 1 ? '上线' : '下线'}成功`,
        });
        resolve(true)
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
        getTableData();
        reject(false)
      }
    }).catch(() => {
      getTableData();
      reject(false)
    })
  })
}

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "execute") {
    row.isExecute = true
    const guid = row.guid
    executePlan(guid).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getTableData();
        ElMessage({
          type: "success",
          message: "手动执行提交成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
      row.isExecute = false
    }).catch(() => {
      row.isExecute = false
    })
  } else if (type === 'delete') {
    open(`此操作将永久删除 ${row.planName}, 是否继续?`, "warning");
  } else if (type == 'detail') {//查看详情
    if (row.planType != 4) {
      router.push({
        name: 'assessTemplate',
        query: {
          guid: row.guid,
          planName: row.planName,
          detail: 1
        }
      });
    }
  }
};

/** 删除操作确认对话框。 */
const open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids = [currTableData.value.guid]
    if (isBatch) {
      guids = selectRowData.value
    }
    deletePlan(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        page.value.curr = 1;
        getTableData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    });
  });
};

/** 树形点击节点事件处理。 */
const nodeClick = (data) => {
  treeSelectItem.value = data
  if (data.children) {
    page.value.planType = null;
  } else {
    page.value.planType = data.guid;
  }
  page.value.curr = 1;
  searchItemList.value[0].default = '';
  searchItemList.value[1].default = null;
  getTableData();
}

onActivated(() => {
  /** 若是新建评估方案跳转则默认选中对应的方案类型展示列表。 */
  if (dataQualityStore.planType) {
    /** 若是编辑方案之后跳转，则只需要重新获取当前的表格数据即可。 */
    if (dataQualityStore.isUpdate) {
      getTableData();
      dataQualityStore.setIsUpdate(false);
    } else {
      /** 若树选中的与默认方案类型一致，则不需要再选中树，只更新表格数据。 */
      if (treeSelectItem.value && treeSelectItem.value.guid == dataQualityStore.planType) {
        treeInfo.value.currentNodeKey = dataQualityStore.planType;
        getTableData();
      } else {
        treeInfo.value.currentNodeKey = dataQualityStore.planType;
        nextTick(() => {
          nodeClick(treeInfo.value.data[0].children.find(c => c.guid == treeInfo.value.currentNodeKey));
        })
      }
    }
    dataQualityStore.setPlanType(null);
  }
})

const newCreatePlan = () => {
  /** 新建评估方案时，若是左侧树选中的是方案类型，则新建时设置类型默认值与树选中值对应。 */
  if (treeSelectItem.value.guid != null && treeSelectItem.value.guid !== 0) {
    dataQualityStore.setDefaultPlanType(treeSelectItem.value.guid);
  }
  router.push({
    name: 'assessTemplate'
  });
}

</script>

<style lang="scss" scoped>
.container_wrap {
  padding: 0;
  display: flex;
  justify-content: space-between;

  .box_left {
    width: 200px;
    box-shadow: 1px 0 0 0 #d9d9d9;

    .tree_panel {
      height: 100%;
      padding-top: 0;

      :deep(.el-tree) {
        margin: 0;
        overflow: hidden auto;
      }
    }
  }

  .box_right {
    width: calc(100% - 200px);
    height: 100%;
    padding: 0 16px;
    overflow: hidden auto;
  }

  .panel_title {
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: var(--el-color-regular);
  }
}

.table_tool_wrap {
  width: 100%;
  height: 84px;

  .tools_btns {
    padding: 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 84px);
}
</style>