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

<script lang="ts" setup name="productListingCheck">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import useDataAssetStore from "@/store/modules/dataAsset";
import { ElMessage, ElMessageBox } from "element-plus";

import { getListingList, filterVal, getParamsDataList } from "@/api/modules/dataProduct";
import { registerApproveAllow, registerApproveBackup, } from "@/api/modules/dataAsset";
import { TableColumnWidth } from '@/utils/enum';

import TableTools from "@/components/Tools/table_tools.vue";
import Table from "@/components/Table/index.vue";
import Dialog from "@/components/Dialog/index.vue";

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

const searchItemList: any = ref([
  {
    type: "input",
    label: "",
    field: "damName",
    default: "",
    placeholder: "产品名称",
    clearable: true
  },
  {
    type: "select",
    label: "",
    field: "damType",
    default: "",
    props: {
      value: 'paramValue',
      label: 'paramName'
    },
    placeholder: "产品类型",
    options: damTypes.value,
    clearable: true,
  },
]);
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 tableInfo = ref({
  id: "mapping-table",
  fields: [
    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
    { label: "数据产品编号", field: "damCode", width: 160 },
    { label: "数据产品名称", field: "damName", width: 140 },
    {
      label: "产品类型", field: "damTypeName", width: 100
    },
    { label: "权利主体", field: "tenantName", width: 200,
      // getName: (scope) => {
      //   return userData.tenantName;
      // }
    },
    {
      label: "是否公共数据", field: "isPublicData", width: 120, getName: (scope) => {
        return scope.row.isPublicData == 'Y' ? '是' : '否';
      }
    },
    {
      label: "审核状态", field: "approveState", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
        return filterVal(scope.row.approveState, 'approveState');
      }
    },
    { label: "申请时间", field: "applicationTime", width: TableColumnWidth.DATETIME },
    { label: "操作时间", field: "updateTime", width: TableColumnWidth.DATETIME },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 140,
    btns: (scope) => {
      let row = scope.row, btnsArr = [];
      if (row.approveState == 'A') {
        if (row.approveTenantGuids?.includes(userData.tenantGuid)) {
          btnsArr.splice(0, 0, { label: "通过", value: "pass", type: 'primary' }, { label: "驳回", value: "reject", type: 'danger', plain: true });
        }
        btnsArr.splice(0, 0, { label: "详情", value: "check" });
      } else {
        btnsArr.splice(0, 0, { label: "详情", value: "check" });
      }
      return btnsArr;
    },
  },
});

const contents = ref({
  pass: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-pass-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写通过备注（选填）",
            field: "approveSuggest",
            clearable: true,
            maxlength: 400,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  reject: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-reject-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写驳回理由（必填）",
            field: "approveSuggest",
            clearable: true,
            maxlength: 400,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
});

const listingDialogRef = ref();
const dialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "",
  },
  type: '',
  contents: [],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

const getTableData = () => {
  tableInfo.value.loading = true;
  getListingList(
    Object.assign({}, searchItemValue.value, {
      isGrounding: 1,
      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 toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    searchItemValue.value = {};
  } else {
    searchItemValue.value = Object.keys(val).length ? { ...val } : {};
  }
  page.value.curr = 1;
  tableInfo.value.page.curr = 1;
  getTableData();
};

const currTableData: any = ref({});
const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "check") {
    toPatn(type);
  } else {
    dialogInfo.value.type = type
    dialogInfo.value.header.title = type == 'pass' ? '通过' : '驳回'
    dialogInfo.value.contents = contents.value[type]
    dialogInfo.value.visible = true
  }
};

const toPatn = (type) => {
  router.push({
    name: "productListingCheckDetail",
    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 getFirstPageData = () => {
  page.value.curr = 1
  getTableData();
}

const dialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    let params = { ...info }
    params.bizGuid = currTableData.value.guid
    params.funcCode = currTableData.value.funcCode
    if (dialogInfo.value.type == 'pass') {
      dialogInfo.value.visible = false;
      registerApproveAllow(params).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getFirstPageData();
          ElMessage({
            type: 'success',
            message: '审批成功'
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.msg,
          })
        }
      }).catch(() => {
      })
    } else if (dialogInfo.value.type == 'reject') {
      if (info.approveSuggest == '') {
        ElMessage.error('请填写驳回原因')
        return
      }
      dialogInfo.value.visible = false;
      registerApproveBackup(params).then((res: any) => {
        if (res.code == proxy.$passCode) {
          getFirstPageData();
          ElMessage({
            type: 'success',
            message: '驳回成功'
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.msg,
          })
        }
      }).catch(() => {

      })
    }
  } else if (btn.value == 'cancel') {
    nextTick(() => {
      dialogInfo.value.visible = false;
    })
  }
};

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

onBeforeMount(() => {
  getParamsDataList({ paramCode: 'DAM-TYPE' }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      damTypes.value = res.data || [];
      let item = searchItemList.value.find(item => item.field == 'damType');
      item && (item.options = damTypes.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" />
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange"  />
    </div>
    <!-- 审核对话框 -->
    <Dialog ref="listingDialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" />
  </div>
</template>

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

  .tools_btns {
    padding: 0px 0 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 44px);
  padding: 0px 8px 0;
}
</style>