<script lang="ts" setup name="dataUsage">
import TableTools from "@/components/Tools/table_tools.vue";
import { commonPageConfig, TableColumnWidth } from '@/utils/enum';
import {
  getDataUsePageList,
  deleteDataUse,
  distributeContract,
} from "@/api/modules/dataDelivery";
import { useValidator } from "@/hooks/useValidator";

const { required } = useValidator();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "dataProductName",
    default: "",
    placeholder: "数据产品名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: "input",
    label: "",
    field: "contractName",
    default: "",
    placeholder: "合约名称",
    maxlength: 50,
    clearable: true,
  },
]);

const page = ref({
  ...commonPageConfig,
  dataProductName: '',
  contractName: ''
});

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  {
    label: "数据产品名称", field: "dataProductName", width: 160, type: "text_btn", columClass: 'text_btn', value: "detail", disabled: (scope) => {
      return scope.row.contractStatus == '06';
    }, click: (scope) => {
      if (scope.row.contractStatus == '06') {
        return;
      }
      router.push({
        name: 'usageCatalogDetail',
        query: {
          guid: scope.row.dataProductGuid,
          type: 'detail',
          foundMode: 'use',
          name: scope.row.dataProductName,
        }
      });
    }
  },
  {
    label: "合约名称", field: "contractName", width: 170, type: "text_btn", columClass: 'text_btn', value: "detail1", disabled: (scope) => {
      return scope.row.isDistribute == 'Y';
    }, click: (scope) => {
      let isDistribute = scope.row.isDistribute;
      if (isDistribute == 'Y') {
        return;
      }
      //履约中的合约状态
      router.push({
        name: 'smartContractDetail',
        query: {
          guid: scope.row.contractGuid,
          name: scope.row.contractName,
          type: 'keepAgree',
          isDetail: 'Y'
        }
      });
    }
  },
  {
    label: "交付方式", field: "deliveryMethod", width: 120, getName: (scope) => {
      return scope.row.deliveryMethod == 1 ? '文件' : 'API';
    }
  },
  { label: "交付方", field: "deliveryPartyName", width: 220 },
  { label: "交付时间", field: "deliveryTime", width: 170 },
  { label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
]);

const currTableData: any = ref({});
const tableInfo = ref({
  id: 'contract-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [], //{ verifySatus: 2 }, { verifySatus: 4 }, { verifySatus: 3, deliveryStatus: 2, }
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 230,
    btns: (scope) => {
      let actions = scope.row.actions || {};
      let arrBtns: any = [];
      if (scope.row.contractStatus != '06') {
        for (let action in actions) {
          arrBtns.push({ label: actions[action], value: action, click: btnHanldesMap[action] });
        }
      }
      arrBtns.push({ label: '日志', value: 'log', click: btnHanldesMap['log'] });
      return arrBtns;
    }
  }
});

const btnHanldesMap = {
  /** 查看产品详情 */
  read: (scope) => {
    router.push({
      name: 'usageCatalogDetail',
      query: {
        guid: scope.row.dataProductGuid,
        type: 'detail',
        foundMode: 'read',
        name: scope.row.dataProductName,
        useGuid: scope.row.guid
      }
    });
  },
  download: (scope) => { //下载
    router.push({
      name: 'usageCatalogDetail',
      query: {
        guid: scope.row.dataProductGuid,
        type: 'detail',
        foundMode: 'download',
        name: scope.row.dataProductName,
        useGuid: scope.row.guid
      }
    });
  },
  distribute: (scope) => { //分发
    currTableData.value = scope.row;
    tenantDialogInfo.value.visible = true;
    templateFormItems.value[0].options = currTableData.value.deliveryNodes || [];
    let distributeNodes = currTableData.value.distributeNodes || [];
    if (distributeNodes?.length) {
      templateFormItems.value[0].options = currTableData.value.deliveryNodes?.map(d => {
        d.disabled = distributeNodes.includes(d.guid) ? true : false;
        return d;
      })
    }
    templateFormItems.value[0].default = '';
  },
  delete: (scope) => {//删除
    proxy.$openMessageBox('确定要删除该数据使用吗？', () => {
      deleteDataUse([scope.row.guid]).then((res: any) => {
        if (res.code == proxy.$passCode) {
          page.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success("删除成功");
        } else {
          proxy.$ElMessage.error(res.msg);
        }
      });
    }, () => {
      proxy.$ElMessage.info("已取消");
    })
  },
  log: (scope) => { //日志
    router.push({
      name: 'dataUsageLog',
      query: {
        contractGuid: scope.row.contractGuid,
        contractName: scope.row.contractName
      }
    });
  }
}

const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.dataProductName = '';
    page.value.contractName = '';
  } else {
    page.value.dataProductName = val.dataProductName;
    page.value.contractName = val.contractName;
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true
  getDataUsePageList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    dataProductName: page.value.dataProductName,
    contractName: page.value.contractName
  }).then((res: any) => {
    tableInfo.value.loading = false
    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 {
      res?.msg && proxy.$ElMessage.error(res?.msg)
    }
  }).catch(() => {
    tableInfo.value.loading = false
  })
};

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

onBeforeMount(() => {
  toSearch({});
});

const templateFormItems = ref([{
  type: 'select',
  label: '分发连接器',
  field: 'tenantGuids',
  default: '',
  block: true,
  placeholder: '请选择',
  options: [],
  props: {
    value: 'guid',
    label: 'tenantName',
    disabled: 'disabled'
  },
  filterable: true,
  multiple: true,
  collapse: true,
  tagsTooltip: true,
  clearable: true,
  required: true
}]);

const templateFormRules = ref({
  tenantGuids: [{ required: true, trigger: 'change', message: "请选择分发连接器" }]
});

const tenantDialogInfo = ref({
  visible: false,
  size: 480,
  title: "选择分发连接器",
  type: 'edit',
  formInfo: {
    id: 'copy-form',
    items: templateFormItems.value,
    rules: templateFormRules.value
  },
  submitBtnLoading: false,
  btns: {
    submit: (btn, info) => {
      tenantDialogInfo.value.submitBtnLoading = true;
      distributeContract({
        useGuid: currTableData.value.guid,
        nodeGuid: info.tenantGuids
      }).then((res: any) => {
        tenantDialogInfo.value.submitBtnLoading = false;
        if (res?.code == proxy.$passCode) {
          tenantDialogInfo.value.visible = false;
          proxy.$ElMessage.success('分发连接器提交成功');
        } else {
          res?.msg && proxy.$ElMessage.error(res?.msg)
        }
      })
    },
    cancel: () => {
      tenantDialogInfo.value.visible = false;
    }
  }
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'contract-search'" @search="toSearch" :init="false" />
    </div>
    <div class="table_panel_wrap" style="height: calc(100% - 44px);">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
    <!-- 选择分发企业的对话框 -->
    <Dialog_form :dialogConfigInfo="tenantDialogInfo" />
  </div>
</template>

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