<route lang="yaml">
  name: taskEdit //分类分级任务编辑
  </route>

<script lang="ts" setup name="taskEdit">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import useDataAssetStore from "@/store/modules/dataAsset";
import { getListingList, listingDelete, listingUpdateStatus, filterVal, getParamsDataList } from "@/api/modules/dataProduct";
import { TableColumnWidth } from '@/utils/enum';

import Table from "@/components/Table/index.vue";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const userStore = useUserStore();
const userData = JSON.parse(userStore.userData);
const assetStore = useDataAssetStore();

const step = ref(0);
const selectIndex = ref(0);
const asideSearchInput = ref("");
const permissionList: any = ref([])
const listLoading = ref(false)
const currpermissionList: any = ref([])
const templateInfo = ref({})
const treeIndex: any = ref({})

const treeInfo = ref({
  id: "data-pickup-tree",
  filter: true,
  queryValue: "",
  queryPlaceholder: "输入组织名称搜索",
  props: {
    label: "organisationName",
    value: "guid",
  },
  nodeKey: 'guid',
  expandedKey: [],
  expandOnNodeClick: false,
  data: [],
});

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: "damCode", width: 96 },
    { label: "分类", field: "damTypeName", width: 380 },
    { label: "分级", field: "damName", width: 55 },
    { label: "规则", field: "damTypeName", width: 380 },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 200,
    btns: (scope) => {
      let row = scope.row, btnArr: any = [];
      if (row.approveState == 'Y') {
        if (row.listingStatus == 'Y') {
          btnArr.splice(0, 0, { label: "详情", value: "detail" });
        } else {
          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
        }
      } else {
        if (row.approveState == 'A') {
          btnArr.splice(0, 0, { label: "详情", value: "detail" });
        } else {
          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
        }
      }
      return btnArr;
    },
  },
});

const nodeClick = (data) => {
  treeIndex.value = data
  toSearch({})
}

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

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "detail" || type === "edit") {
    toPath(type);
  } else if (type === "delete") {
    open("此操作将永久删除，是否继续？", "warning");
  }
};

const toPath = (type) => {
  if (type == 'add') {
    router.push({
      name: "productListingDetail",
      query: {
        type
      },
    });
  } else {
    router.push({
      name: "productListingDetail",
      query: {
        guid: currTableData.value.guid,
        name: currTableData.value.damName,
        type
      },
    });
  }
}

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  tableInfo.value.page.limit = page.value.limit;
  tableInfo.value.page.curr = page.value.curr;
  getTableData();
};

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

const getFirstPageData = () => {
  page.value.curr = 1
  tableInfo.value.page.curr = 1;
  getTableData();
}

const querySearch = (queryString: string) => {
  listLoading.value = true
  const results = queryString
    ? currpermissionList.value.filter(item => item.dataPermissionName.indexOf(queryString) > -1)
    : permissionList.value;
  currpermissionList.value = results
  listLoading.value = false
}

const btnClick = async (btn, bType = null) => {
  const type = btn.value;
};

onActivated(() => {

})

onBeforeMount(() => {

})

</script>

<template>
  <div class="container_wrap full flex">
    <div class="aside_wrap">
      <div class="aside_title">选择分类分级模板</div>
      <div class="aside_search">
        <el-input v-model.trim="asideSearchInput" placeholder="请输入关键字" :prefix-icon="Search" clearable
          @change="querySearch" />
      </div>
      <div class="aside_list" v-loading="listLoading" v-infinite-scroll="handleScroll">
        <div class="list_item" v-for="(item, i) in currpermissionList" :class="{ active: selectIndex == i }"
          @click="selectIndex = i; changTable();" v-preReClick>{{ item.dataPermissionName }}</div>
      </div>
    </div>
    <div class="main_wrap">
      <div class="template_panel">
        <div class="panel_title">
          <p class="title_text">{{ templateInfo.title }}</p>
          <div class="title_desc">
            <p class="desc_group" v-for="desc in templateInfo.descGroup">
              <span class="desc_label">{{ desc.label }}：</span>
              <span class="desc_value">{{ desc.value }}</span>
            </p>
          </div>
        </div>
        <div class="panel_tags">
          <el-tag v-for="tag in templateInfo.tags" :type="tag.type">{{ tag.name }}</el-tag>
        </div>
        <p class="panel_desc">{{ templateInfo.desc }}</p>
      </div>
      <div>
        <div class="box_left aside_wrap">
          <div class="aside_title">组织列表</div>
          <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
        </div>
        <div class="box_right">
          <div class="panel_title">人员信息</div>
          <div class="table_panel_wrap">
            <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
          </div>
        </div>
      </div>
      <div class="tool_btns">
        <div class="btns">
          <el-button @click="btnClick({ value: 'cancel' })" v-if="step == 0">取消</el-button>
          <el-button @click="btnClick({ value: 'prev' })" v-if="step == 1">上一步</el-button>
          <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 0">下一步</el-button>
          <el-button type="primary" @click="btnClick({ value: 'next' })" v-if="step == 1">后台运行</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table_tool_wrap {
  width: 100%;
  height: 40px !important;
  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: 0px 8px 0;
}

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