<template>
  <!-- 采购详情-->
  <a-modal class="add-custom custom-detail" title="详情" v-model:visible="visible" @cancel="cancel" centered width="890px">
    <template #footer>
      <a-button key="submit" type="primary" :loading="loading" @click="submit">关闭</a-button>
    </template>
    <a-tabs v-model:activeKey="activeKey" @change="tabClick">
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.name"></a-tab-pane>
    </a-tabs>
    <InfoDetail :selectedRow="selectedRow" v-if="activeKey == 1" />
    <div class="tableDatas" v-else>
      <a-table class="dialogTable" :columns="columns" :data-source="tableList" :pagination="false">
        <template #status="{ text }">
          <span class="yellow">{{ text }}</span>
          <!-- 审核通过'green' 审核拒绝 'orange' 待审核'yellow'   -->
        </template>

        <template #applystatus="{ text }">
          <a>{{ getApplyStatusName(text) }}</a>
        </template>

        <!-- 发票金额-->
        <template #invoicetype="{ text }">
          <a>{{ invoiceStatusName(text) }}</a>
        </template>

        <!-- 发票类型-->
        <template #contracttype="{ text }">
          <a>{{ getReceiptName(text) }}</a>
        </template>

        <!-- 出入库类型 -->
        <template #inouttype="{ text }">
          <a>{{ InOutTypeName(text) }}</a>
        </template>

        <!-- 款项类型 -->
        <template #kxtype="{ record }">
          <a>{{ stateName(record.deductamount, record.contracttype) }}</a>
        </template>

        <!-- 金额-->
        <template #payamount="{ text, record }">
          <span>{{ formatValue(record.kxtype === 2 ? record.deductamount : text) }}</span>
        </template>

        <!-- 调整付保证金-->
        <template #addmargin="{ record }">
          <span>{{ formatValue(record.addmargin === undefined || '' ? record.decmargin : record.addmargin) }}</span>
        </template>

        <!-- 交收量 -->
        <template #reckonrealqty="{ record }">
          <span>{{ formatValue(record.reckonrealqty) }}</span>
        </template>

        <!-- 其他费用 -->
        <template #reckonotheramount="{ record }">
          <span>{{ formatValue(record.reckonotheramount) }}</span>
        </template>

        <!-- 调整金额 -->
        <template #reckonadjustamount="{ record }">
          <span>{{ formatValue(record.reckonadjustamount) }}</span>
        </template>

        <!-- 申请人 -->
        <template #applyname="{ record }">
          <span>{{ formatValue(record.applyname) }}</span>
        </template>

        <!-- 款项记录 款项类型为退款  则金额使用deductamount-->
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { formatValue } from '@/common/methods';
import { getPriceTypeName } from '@/common/constants/enumsName';
import { Ermcp3SellBuyContract } from '@/services/go/ermcp/purchase/interface';
import { _closeModal } from '@/common/setup/modal/modal';
import { getTableColumns } from '@/common/setup/table';
import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { QueryBusinessDj, QueryBusinessJs } from '@/services/go/ermcp/business-review';
import { QueryBusinessFp, QueryBusinessKx } from '@/services/go/ermcp/finance-review';
import { QueryAreaStockApply } from '@/services/go/ermcp/inventory-review';
import { QueryChangeLog } from '@/services/go/ermcp/spot-contract';
import { columnsPaTradeLink } from '@/views/information/spot-contract/components/detail/setup';
import { QueryPaTradeLinkDetail } from '@/services/go/ermcp/patrade-link';
import InfoDetail from '@/views/information/spot-contract/components/infoDetail/index.vue';
import { getApplyStatusName, getReceiptName } from '@/common/constants/enumsName';
import { invoiceStatusName, stateName } from '@/views/manage/finance-review/setup';
import { InOutTypeName } from '@/views/manage/inventory-review/setup';
import moment from 'moment';

export default defineComponent({
  name: 'sell-detail',
  emits: ['cancel', 'update'],
  components: { InfoDetail },
  props: {
    selectedRow: {
      type: Object as PropType<Ermcp3SellBuyContract>,
      default: {},
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    const loading = ref<boolean>(false);
    const tabList = ref<{ key: number; name: string }[]>([]);
    const activeKey = ref<number>(1);
    const tableList = ref<any[]>([]);
    activeKey.value = 1;
    // 表头数据
    const { columns, registerColumn } = getTableColumns();
    // 审核拒绝和未提交不显示后面的选项
    tabList.value = [0, 4, 6].includes(props.selectedRow.contracctstatus)
      ? [{ key: 1, name: '合同详情' }]
      : [
        { key: 1, name: '合同详情' },
        { key: 2, name: '点价记录' },
        { key: 3, name: '交收记录' },
        { key: 4, name: '款项记录' },
        { key: 5, name: '发票记录' },
        { key: 6, name: props.selectedRow.contracttype === 1 ? '入库记录' : '出库记录' },
        { key: 7, name: '变更记录' },
        { key: 8, name: '关联记录' },
      ];
    function submit() {
      cancel();
    }

    function tabClick() {
      const { spotcontractid, contracttype } = props.selectedRow;
      switch (activeKey.value) {
        case 2: // 点价记录
          registerColumn('table_pcweb_someprice_detail_dj');
          queryResultLoadingAndInfo(QueryBusinessDj, loading, { relatedid: spotcontractid, applystatus: '2,3' }).then((res) => {
            tableList.value = res;
          });
          break;
        case 3: // 交收记录
          registerColumn('table_pcweb_someprice_detail_js');
          queryResultLoadingAndInfo(QueryBusinessJs, loading, { relatedid: spotcontractid, applystatus: '2,3' }).then((res) => {
            tableList.value = res;
          });
          break;
        case 4: //款项记录
          registerColumn('table_pcweb_someprice_detail_kx');
          queryResultLoadingAndInfo(QueryBusinessKx, loading, { relatedid: spotcontractid, applystatus: '2,3' }).then((res) => {
            tableList.value = res;
          });
          break;
        case 5: // 发票记录
          registerColumn('table_pcweb_someprice_detail_fp');
          queryResultLoadingAndInfo(QueryBusinessFp, loading, { relatedid: spotcontractid, applystatus: '2,3' }).then((res) => {
            tableList.value = res;
          });
          break;
        case 6: // 出入库记录
          const inouttype = contracttype === 1 ? '5' : '6';
          if (contracttype === 1) {
            registerColumn('table_pcweb_someprice_detail_stock');
          } else {
            registerColumn('table_pcweb_someprice_detail_stock_out');
          }
          queryResultLoadingAndInfo(QueryAreaStockApply, loading, {
            spotcontractid,
            inouttype,
          }).then((res) => {
            tableList.value = res;
          });
          break;
        case 7: //// 变更记录
          registerColumn('table_pcweb_someprice_detail_change');
          queryResultLoadingAndInfo(QueryChangeLog, loading, { RelatedId: spotcontractid }).then((res) => {
            tableList.value = res;
          });
          break;
        case 8: //// 关联记录
          columns.value.length = 0;
          columns.value.push(...columnsPaTradeLink);
          queryResultLoadingAndInfo(QueryPaTradeLinkDetail, loading).then((res) => {
            // 关联日期降序
            tableList.value = res.sort((a, b) => moment(b.tradetime).valueOf() - moment(a.tradetime).valueOf());
          });
          break;
      }
    }
    return {
      visible,
      cancel,
      submit,
      loading,
      formatValue,
      getPriceTypeName,
      activeKey,
      tabClick,
      tabList,
      columns,
      tableList,
      getApplyStatusName,
      getReceiptName,
      invoiceStatusName,
      stateName,
      InOutTypeName,
    };
  },
});
</script>

<style lang="less">
.custom-detail {
    .ant-modal-content {
        .ant-modal-body {
            padding-top: 0;
            padding-left: 0;
            padding-right: 0;

            .ant-tabs {
                background: @m-black11;
                width: 100%;
                padding: 0 24px;

                .ant-tabs-bar {
                    margin-bottom: 0;
                    border-bottom: 0;
                }
                .anticon {
                    color: @m-grey2;
                }
                .ant-tabs-nav-container {
                    .ant-tabs-nav-wrap {
                        .ant-tabs-nav {
                            .ant-tabs-tab {
                                width: 70px;
                                margin-right: 43px;
                                text-align: center;
                                font-size: 16px;
                                color: @m-grey2;
                                padding: 0;
                                line-height: 45px;
                            }

                            .ant-tabs-tab-active.ant-tabs-tab {
                                color: @m-blue0;
                            }

                            .ant-tabs-ink-bar {
                                width: 70px !important;
                                background: @m-blue0;
                                .rounded-corners(1px);
                            }
                        }
                    }
                }
            }
        }
    }

    .tableDatas {
        margin-top: 26px;
        padding: 0 24px;
        overflow: hidden;

        .dialogTable {
            width: 100%;
            overflow: overlay;
        }
    }

    .ant-form.inlineForm {
        margin-top: 20px;
        padding: 0 24px;
    }
}
</style>
