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

<script lang="ts" setup name="registerManagemant">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import { MoreFilled } from "@element-plus/icons-vue";
import {
  tagMethod,
  tagType,
} from "@/utils/common";
import {
  getRegisterList,
  registerDelete,
  registerApproveCancel,
  registerApproveReSubmit,
  registerApproveAllow,
  registerApproveBackup,
  getRegisterTenant
} from "@/api/modules/dataAsset";
import useDataAssetStore from "@/store/modules/dataAsset";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)

const assetStore = useDataAssetStore();

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const path = route.path;

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "daName",
    default: "",
    placeholder: "资产名称",
    clearable: true,
  },
  {
    type: "select",
    label: "",
    field: "tenantGuid",
    default: "",
    placeholder: "企业名称",
    clearable: true,
    filterable: true,
    options: [],
    props: {
      value: 'guid',
      label: 'tenantName'
    },
    visible: false,
  },
  {
    type: 'select',
    label: '',
    field: 'approveState',
    default: '',
    placeholder: '全部状态',
    options: [
      { label: '草稿中', value: 'N' },
      { label: '审批中', value: 'A' },
      { label: '已通过', value: 'Y' },
      { label: '已驳回', value: 'R' },
      { label: '已撤销', value: 'C' },
    ],
    clearable: true
  },
]);

const pageInfo = ref({
  limit: 50,
  curr: 1,
  rows: 0,
  type: "normal",
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
  daName: '',
  approveState: '',
  tenantGuid: '',
});

const tableFields = ref([{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "资产名称", field: "daName", width: 160, align: "left" },
{ label: "数据分类", field: "dataCategoryName", width: 120, align: "left" },
{ label: "存储方式", field: "storageFormName", width: 120, align: "left" },
{
  label: "所属行业", field: "ownIndustryName", width: 120, align: "left", getName: (scope) => {
    return scope.row['ownIndustryName']?.join(',')
  }
},
{ label: "状态", field: "approveState", type: "tag", width: 96, align: 'center' },
{ label: "修改人", field: "updateUserName", width: 140 },
{ label: "修改时间", field: "updateTime", width: 180 }]);

/** 是否时企业端。不是企业端，则是服务端。 */
const isCompanyPlatform = ref(userData.tenantType == 1);

const listDataLoading = ref(false);

const activeListType = ref('card');

const listData: any = ref([]);

/** 记录点击省略号弹出菜单的visible */
const cardBtnVisible: any = ref(false);

const tableInfo = ref({
  id: 'asset-data-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: listData.value,
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 160,
    btns: (scope) => {
      let row = scope.row;
      return getTableBtns(row);
    }
  }
});

const getTableBtns = (row, includeDetail = true) => {
  let btnsArr: any[] = [];
  if (row.approveState == 'N') {//只有草稿中的详情是可以编辑的
    includeDetail && btnsArr.push({ label: "详情", value: "path_detail" })
    if (row.tenantGuid == userData.tenantGuid) {
      btnsArr.push({ label: "删除", value: "delete" });
    }
  } else if (row.approveState == 'A') {//审批中
    includeDetail && btnsArr.push({ label: "详情", value: "path_detail" })
    if (row.tenantGuid == userData.tenantGuid) {
      btnsArr.push({ label: "撤销", value: "revoke" });
    }
    if (row.approveTenantGuids?.includes(userData.tenantGuid)) {
      btnsArr.push({ label: "通过", value: "pass" });
      btnsArr.push({ label: "驳回", value: "backup" });
    }
  } else if (row.approveState == 'Y') {//已通过的不能删除。
    includeDetail && btnsArr.push({ label: "详情", value: "path_detail" })
  } else if (row.approveState == 'R' || row.approveState == 'C') {//已驳回或已撤销
    includeDetail && btnsArr.push({ label: "详情", value: "path_detail" });
    if (row.tenantGuid == userData.tenantGuid) {
      btnsArr.push({ label: "重新提交", value: "edit", disabled: false })
    }
    if (row.tenantGuid == userData.tenantGuid) {
      btnsArr.push({ label: "删除", value: "delete" });
    }
  }
  return btnsArr;
}

const currTableData: any = ref({});

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type === "edit") { //草稿中\已驳回\已撤销\已通过 状态，才可以编辑。
    router.push({
      name: 'registerStart',
      query: { guid: row.guid }
    });
  } else if (type == "delete") {
    delTableOpen("此操作将永久删除该资产登记，是否继续?", "warning");
  } else if (type === 'revoke') { // 撤销，状态为审批中时可以撤销。
    ElMessageBox.confirm('确定撤销该资产登记审批流程吗？', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: 'warning',
    }).then(() => {
      listDataLoading.value = true;
      let params = {
        bizGuid: row.guid,
        funcCode: row.funcCode
      }
      registerApproveCancel(params).then((res: any) => {
        listDataLoading.value = false;
        if (res?.code == proxy.$passCode) {
          if (res.data) {
            ElMessage.success('该审批流程撤销成功！');
            row.approveState = "C";
          } else {
            ElMessage.error('该审批流程撤销失败！');
          }
        } else {
          ElMessage.error(res.msg);
        }
      });
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消撤销'
      });
    });
  } else if (type === 'path_detail') { // 详情, 若是草稿中，详情就是编辑，
    if (row.approveState === 'N') {
      router.push({
        name: 'registerStart',
        query: { guid: row.guid }
      });
    } else {
      router.push({
        name: 'registerInfoDetail',
        query: { guid: row.guid, type: 'asset', daTenantGuid: row.tenantGuid }
      });
    }
  } else if (type === 'pass') {
    passDialogInfo.value.visible = true;
  } else if (type == 'backup') {
    rejectDialogInfo.value.visible = true;
  }
};

const handleDataClick = (item) => {
  if (item.approveState === 'N') {
    router.push({
      name: 'registerStart',
      query: { guid: item.guid }
    });
  } else {
    router.push({
      name: 'registerInfoDetail',
      query: { guid: item.guid, type: 'asset', daTenantGuid: item.tenantGuid }
    });
  }
}

const delTableOpen = (msg, type, isBatch: boolean = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids: any = [];
    guids = [currTableData.value.guid]
    registerDelete(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        pageInfo.value.curr = 1;
        getTableData();
        ElMessage({
          type: "success",
          message: "删除资产登记成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

const getTableData = () => {
  listDataLoading.value = true;
  tableInfo.value.loading = true;
  getRegisterList({
    pageSize: pageInfo.value.limit,
    pageIndex: pageInfo.value.curr,
    daName: pageInfo.value.daName,
    approveState: pageInfo.value.approveState,
    tenantGuid: pageInfo.value.tenantGuid
  }).then((res: any) => {
    listDataLoading.value = false;
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      listData.value = tableInfo.value.data = data.records || [];
      pageInfo.value.limit = data.pageSize
      pageInfo.value.curr = data.pageIndex
      pageInfo.value.rows = data.totalRows
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const toSearch = (val: any, clear: boolean = false) => {
  pageInfo.value.curr = 1;
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    pageInfo.value.daName = '';
    pageInfo.value.approveState = "";
    pageInfo.value.tenantGuid = "";
  } else {
    pageInfo.value.daName = val.daName;
    pageInfo.value.approveState = val.approveState;
    pageInfo.value.tenantGuid = val.tenantGuid;
  }
  getTableData();
};

const pageChange = (info) => {
  pageInfo.value.curr = Number(info.curr);
  pageInfo.value.limit = Number(info.limit);
  getTableData();
};

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

onBeforeMount(() => {
  if (isCompanyPlatform.value) {
    tableInfo.value.fields = tableFields.value;
    searchItemList.value[1].visible = false;
  } else {
    tableFields.value.splice(2, 0, { label: "企业名称", field: "tenantName", width: 240, align: "left" });
    tableInfo.value.fields = tableFields.value;
    searchItemList.value[1].visible = true;
    getRegisterTenant().then((res: any) => {
      if (res.code == proxy.$passCode) {
        searchItemList.value[1].options = res.data || [];
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
})

const handleCreate = () => {
  router.push({
    name: 'registerStart'
  });
}

const passDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "通过",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-pass-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写通过理由（必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

const passDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    listDataLoading.value = true;
    let params = {
      bizGuid: currTableData.value.guid,
      funcCode: currTableData.value.funcCode,
      approveSuggest: info.approveSuggest
    }
    registerApproveAllow(params).then((res: any) => {
      listDataLoading.value = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          ElMessage.success('审批成功');
          passDialogInfo.value.visible = false;
          getTableData();
        } else {
          ElMessage.error('审批失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else if (btn.value == 'cancel') {
    passDialogInfo.value.visible = false;
  }
};

const rejectDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "驳回",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-reject-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写驳回理由（必填）",
            field: "approveSuggest",
            clearable: true,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

const rejectDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    if (info.approveSuggest == '') {
      ElMessage.error('请填写驳回理由');
      return
    }
    listDataLoading.value = true;
    let params = {
      bizGuid: currTableData.value.guid,
      funcCode: currTableData.value.funcCode,
      approveSuggest: info.approveSuggest
    }
    registerApproveBackup(params).then((res: any) => {
      listDataLoading.value = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          ElMessage.success('驳回成功');
          rejectDialogInfo.value.visible = false;
          getTableData();
        } else {
          ElMessage.error('驳回失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else if (btn.value == 'cancel') {
    rejectDialogInfo.value.visible = false;
  }
};

const createBtnVisible = computed(() => {
  return isCompanyPlatform || (userStore.hasPermission('数据资产', path, '新建'))
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" />
      <div class="tools_btns">
        <el-button type="primary" @click="handleCreate" v-if="createBtnVisible" v-preReClick>新建</el-button>
        <div class="view-change">
          <div class="list-btn" :class="[activeListType === 'list' ? 'active' : '']" @click="activeListType = 'list'">
            <el-icon style="width: 12px;height: 12px;">
              <svg-icon style="width: 12px;height: 12px;"
                :name="activeListType === 'list' ? 'btn-list-white' : 'btn-list'" />
            </el-icon>
          </div>
          <div class="card-btn" :class="[activeListType === 'card' ? 'active' : '']" @click="activeListType = 'card'">
            <el-icon style="width: 12px;height: 12px;">
              <svg-icon style="width: 12px;height: 12px;"
                :name="activeListType === 'card' ? 'btn-card-white' : 'btn-card'" />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="table_panel_wrap" :style="{ height: createBtnVisible ? 'calc(100% - 89px)' : 'calc(100% - 40px)' }">
      <div v-if="activeListType === 'card'" class="data-content" v-loading="listDataLoading">
        <div class="card-content" v-for="item in listData" :key="item.guid" @click="handleDataClick(item)">
          <div class="title-row">
            <div class="title">
              <ellipsis-tooltip :content="item.daName" class-name="w100f"
                :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
            </div>
            <el-tag :type="(tagType(item, 'approveState') as any)">{{
        tagMethod(item, 'approveState')
      }}</el-tag>
          </div>
          <div v-if="!isCompanyPlatform" class="desc">{{ item.tenantName ?? '深圳传世般若有限公司' }}</div>
          <div class="desc">{{ item.updateTime }}</div>
          <div class="type-btn">
            <template v-if="item.ownIndustryName?.length">
              <div class="type-items">
                <div v-for="(info) in item.ownIndustryName" class="type">{{ info }}</div>
              </div>
            </template>
            <template v-else>
              <div class="type-items"></div>
            </template>
            <el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
              popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
              <template #reference>
                <el-icon class="list-more" color="#666" v-show="getTableBtns(item, false)?.length > 0"
                  @click.stop="cardBtnVisible = true">
                  <MoreFilled />
                </el-icon>
              </template>
              <div class="levitation-ul">
                <span class="levitation-li" v-for="btn in getTableBtns(item, false)"
                  @click="tableBtnClick({ row: item }, btn)">{{
        btn.label }}</span>
              </div>
            </el-popover>
          </div>
        </div>
        <div v-if="!listData.length" class="card-noData">
          <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
          <span>暂无数据资产</span>
        </div>
      </div>
      <Table v-else :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
      <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
    </div>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
  </div>
</template>

<style scoped lang="scss">
.container_wrap {
  padding: 0 16px;
}

.table_panel {
  height: calc(100% - 44px) !important;
}

.tools_btns {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .view-change {
    width: 56px;
    height: 22px;
    border: 1px solid var(--el-border-color-regular);
    border-radius: 2px;
    display: flex;
    cursor: pointer;

    .list-btn {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        background-color: var(--el-color-primary);
      }
    }

    .card-btn {
      width: 50%;
      border-left: 1px solid var(--el-border-color-regular);
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        background-color: var(--el-color-primary);
      }
    }
  }

}

.data-content {
  height: calc(100% - 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 20px;
  align-content: flex-start;
  overflow-y: auto;

  .card-noData {
    height: 100%;
    width: 100%;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
  }

  .card-content {
    width: 22%;
    min-width: 220px;
    height: auto;
    padding: 16px;
    border: 1px solid var(--el-border-color-regular);
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      border: 1px solid var(--el-color-primary);
    }

    .title-row {
      display: flex;
      height: 24px;
      line-height: 24px;
      justify-content: space-between;

      .title {
        font-size: 16px;
        color: var(--el-text-color-primary);
        font-weight: 600;
        flex-shrink: 1;
        min-width: 0;
        flex-grow: 1;
        margin-right: 12px;
      }
    }

    .desc {
      font-size: 14px;
      color: var(--el-text-color-regular);
      line-height: 21px;
      margin-top: 4px;
      height: 21px;
    }

    .type-btn {
      margin-top: 4px;
      display: flex;
      height: 24px;
      line-height: 24px;
      justify-content: space-between;
      align-items: center;

      .type-items {
        display: inline-flex;
      }

      .type {
        width: auto;
        padding: 0 6px;
        height: 18px;
        border-radius: 10px;
        border: 1px solid var(--el-color-primary);
        line-height: 18px;
        font-size: 12px;
        color: var(--el-color-primary);
        text-align: center;
        margin-right: 4px;
      }

      .list-more {
        margin: 0px 4px;
      }
    }
  }
}
</style>