<script lang="ts" setup name="dataDelivery">
import TableTools from "@/components/Tools/table_tools.vue";
import { commonPageConfig, TableColumnWidth } from '@/utils/enum';
import {
  getPageList,
  deleteDeliveryContract,
  getDeliveryVerifyDetail,
  verifyStatusChange,
  deliveryContract
} from "@/api/modules/dataDelivery";

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

/** 核验状态列表 */
const verifySatusList = ref([{
  value: 1,
  label: '未执行'
}, {
  value: 2,
  label: '已执行'
}, {
  value: 3,
  label: '通过'
}, {
  value: 4,
  label: '未通过'
}]);

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,
  },
  {
    type: 'select',
    label: '',
    field: 'verifySatus',
    default: '',
    placeholder: '核验状态',
    options: verifySatusList.value,
    filterable: true,
    clearable: true
  }
]);

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  {
    label: "数据产品名称", field: "dataProductName", width: 150, type: "text_btn", columClass: 'text_btn', value: "detail", click: (scope) => {
      router.push({
        name: 'productListingDetail',
        query: {
          guid: scope.row.dataProductGuid,
          type: 'detail',
          name: scope.row.dataProductName,
        }
      });
    }
  },
  {
    label: "合约名称", field: "contractName", width: 160, type: "text_btn", columClass: 'text_btn', value: "detail1", click: (scope) => {
      //履约中的合约状态
      router.push({
        name: 'smartContractDetail',
        query: {
          guid: scope.row.guid,
          name: scope.row.contractName,
          type: 'keepAgree',
          isDetail: 'Y'
        }
      });
    }
  },
  {
    label: "交付方式", field: "deliveryMethod", width: 120, getName: (scope) => {
      return scope.row.deliveryMethod == 1 ? '文件' : 'API';
    }
  },
  {
    label: "交付状态", field: "deliveryStatus", type: "tag", width: 96, align: 'center',
    getName: (scope) => {
      const deliveryStatus = scope.row.deliveryStatus
      switch (deliveryStatus) {
        case 1:
          return '未交付';
        case 2:
          return '已交付';
        case 3:
          return '交付中';
        default:
          return '--';
      }
    }, tagType: (scope) => {
      const deliveryStatus = scope.row.deliveryStatus
      switch (deliveryStatus) {
        case 3:
          return 'warning';
        case 2:
          return 'success';
        case 1:
          return 'info';
        default:
          return 'info';
      }
    }
  },
  {
    label: "核验状态", field: "verifySatus", type: "tag", width: 148, align: 'center',
    btn: {
      label: '查看', visible: (scope) => {
        return scope.row.verifySatus != 1;
      }, click: (scope) => {
        //弹出查看日志框。
        dialogInfo.value.visible = true;
        execTableInfo.value.loading = true;
        getDeliveryVerifyDetail(scope.row.guid).then((res: any) => {
          execTableInfo.value.loading = false;
          if (res?.code == proxy.$passCode) {
            execTableInfo.value.data = res.data || [];
          } else {
            res?.msg && proxy.$ElMessage.error(res?.msg);
          }
        })
      },
    },
    getName: (scope) => {
      const verifySatus = scope.row.verifySatus
      switch (verifySatus) {
        case 1:
          return '未执行';
        case 2:
          return '已执行';
        case 3:
          return '通过';
        case 4:
          return '未通过';
        default:
          return '--';
      }
    }, tagType: (scope) => {
      const verifySatus = scope.row.verifySatus
      switch (verifySatus) {
        case 1:
          return 'info';
        case 3:
          return 'success';
        case 2:
          return 'warning';
        case 4:
          return 'danger';
        default:
          return 'info';
      }
    }
  },
  { label: "核验时间", field: "verifyTime", width: 170 },
  { label: "交付时间", field: "deliveryTime", width: 170 },
]);

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

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: 160,
    btns: (scope) => {
      let btns: any = [];
      let row = scope.row;
      let deliveryStatus = row.deliveryStatus;
      if (deliveryStatus == 2) {//已交付有删除按钮
        btns.push({
          value: 'del', label: '删除', click: (scope) => {
            proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
              deleteDeliveryContract([scope.row.guid]).then((res: any) => {
                if (res?.code == proxy.$passCode) {
                  page.value.curr = 1;
                  getTableData();
                  proxy.$ElMessage.success('删除成功');
                } else {
                  res?.msg && proxy.$ElMessage.error(res?.msg);
                }
              });
            }, () => {
              proxy.$ElMessage.info("已取消");
            })
          }
        });
      } else {

      }

      // 交付只有核验通过有。
      let verifySatus = row.verifySatus;
      (verifySatus == 1 || verifySatus == 4) && btns.push({
        value: 'refresh', label: '刷新', click: (scope) => {

        }
      });
      if (verifySatus == 2) {
        btns.push({
          value: 'verify', label: '核验', click: (scope) => {
            currTableData.value = scope.row;
            verifyDialogInfo.value.visible = true;
            verifyDialogInfo.value.contents[0].formInfo.items[0].default = 'TG';
            verifyDialogInfo.value.contents[0].formInfo.items[1].default = '';
          }
        });
      }
      //已通过且未交付时，有交付按钮
      verifySatus == 3 && deliveryStatus != 2 && btns.push({
        value: 'delivery', label: '交付', click: (scope) => {
          deliveryContract(scope.row.guid).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              getTableData();
              proxy.$ElMessage.success('交付提交成功');
            } else {
              res?.msg && proxy.$ElMessage.error(res?.msg);
            }
          })
        }
      });
      return btns;
    }
  }
});

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

const getTableData = () => {
  tableInfo.value.loading = true
  getPageList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    dataProductName: page.value.dataProductName,
    contractName: page.value.contractName,
    verifySatus: page.value.verifySatus
  }).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 dialogInfo = ref({
  visible: false,
  size: 700,
  direction: "column",
  header: {
    title: "查看执行内容",
  },
  footer: {
    visible: false
  }
});

const handleDialogCancel = () => {
  dialogInfo.value.visible = false;
}

const execTableInfo = ref({
  id: "exec-table",
  height: '214px',
  fields: <any[]>[
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "策略id", field: "strategyId", width: 260 },
    { label: "操作行为", field: "action", width: 120 },
    { label: "操作行为英文名称", field: "actionEnName", width: 140 },
    { label: "约束条件", field: "constraintName", width: 120 },
    { label: "约束条件英文名称", field: "constraintEnName", width: 140 },
    { label: "约束条件运算符", field: "constraintOperatorName", width: 140 },
    { label: "约束条件值", field: "constraintValue", width: 150 },
    { label: "检验结果", field: "result", width: 130 },
    // { label: "上报时间", field: "reportingTime", width: 170 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false
  },
  loading: false
});

const verifyDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "核验",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-pass-form',
        items: [
          {
            type: 'radio-group',
            label: ' ',
            field: 'verifySatus',
            default: 'TG',
            required: false,
            options: [
              { label: '通过', value: 'TG' },
              { label: '未通过', value: 'NTG' },
            ],
          },
          {
            label: '',
            type: "textarea",
            placeholder: "请填写未通过理由（必填）",
            field: "verifySuggest",
            clearable: true,
            required: true,
            maxlength: 200,
            visible: false,
            block: true,
            col: 'margin_b_0',
          }
        ]
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit", loading: false },
    ],
  },
});

const verifyDialogRadioChange = (val, info) => {
  verifyDialogInfo.value.contents[0].formInfo.items[1].visible = val == 'NTG';
}

const verifyDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    if (!info.verifySuggest) {
      proxy.$ElMessage.error('请先填写未通过理由');
      return;
    }
    verifyDialogInfo.value.footer.btns[1].loading = true;
    verifyStatusChange(Object.assign({}, info, {
      deliveryGuid: currTableData.value.guid
    })).then((res: any) => {
      verifyDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        proxy.$ElMessage.success('核验状态提交成功');
        getTableData();
      } else {
        res?.msg && proxy.$ElMessage.error(res?.msg)
      }
    })
  } else if (btn.value == 'cancel') {
    verifyDialogInfo.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>
    <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.header.title" width="700" :modal="true"
      :close-on-click-modal="true" destroy-on-close align-center @close="handleDialogCancel">
      <Table ref="execTableRef" :tableInfo="execTableInfo" class="exec-table" />
    </el-dialog>
    <Dialog :dialogInfo="verifyDialogInfo" @btnClick="verifyDialogBtnClick"
      @radio-group-change=verifyDialogRadioChange />
  </div>
</template>

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