<template>
  <Drawer :title="'详情'" :placement="'right'" class="delistingBottom" :visible="visible" @cancel="cancel">
    <div class="detail">
      <div class="detail__body">
        <a-row v-for="(item, index) in columns" :key="index">
          <a-col :span="6">{{ item.columntitle }}</a-col>
          <a-col :span="18">{{ handleDetailValue(item.columnfield) }}</a-col>
        </a-row>
      </div>
      <div class="detail__footer">
        <a-button class="cancelBtn" @click="cancel">取消</a-button>
      </div>
    </div>
  </Drawer>
</template>

<script lang="ts">
import Drawer from '@/common/components/drawer/index.vue';
import { BtnList, ModalEnum } from '@/common/export/commonTable';
import { _closeModal } from '@/common/setup/modal/modal';
import { QueryWrTradeBargainApplyQsp, WrOrderDetail } from '@/services/go/wrtrade/interface';
import { defineComponent, PropType, ref } from 'vue';
import { getWrOrderTypeName } from '@/common/constants/enumsName';
import { Column } from '@/services/go/commonService/interface';
import { getTableHead } from '@/common/methods/table';
import { TableKey } from '@/common/methods/table/interface';

export default defineComponent({
  name: ModalEnum.pre_sale_warehouse_receipt_deal_detail,
  components: { Drawer, BtnList },
  emits: ['cancel', 'update'],
  props: {
    tableName: String as PropType<keyof TableKey>,
    selectedRow: {
      type: Object as PropType<QueryWrTradeBargainApplyQsp & WrOrderDetail>,
      default: {},
    },
    isMy: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    const columns = ref<Column[]>([]);

    if (props.tableName) {
      columns.value = getTableHead(props.tableName);
    }

    // 处理详情数据
    const handleDetailValue = (field: keyof typeof props.selectedRow) => {
      const data = props.selectedRow;
      // 挂牌类型
      if (field === 'wrtradetype') {
        return getWrOrderTypeName(data.buyorsell, data.wrtradetype);
      }
      // 成交金额
      if (field === 'amount') {
        return data.tradeqty * data.tradeprice;
      }
      return data[field];
    };

    return {
      visible,
      columns,
      cancel,
      getWrOrderTypeName,
      handleDetailValue,
    };
  },
});
</script>

<style lang="less" scoped>
.detail {
    [theme='light'] & {
        --label-color: #7a8a94;
        --text-color: #333;
    }

    display: flex;
    flex-direction: column;
    height: 100%;

    &__body {
        flex: 1;
        overflow-y: auto;
        padding: 0 25px;

        .ant-row {
            margin-top: 10px;

            .ant-col {
                &:first-child {
                    color: var(--label-color, #7a8a94);
                }
                &:last-child {
                    color: var(--text-color, #fff);
                }
            }
        }
    }

    &__footer {
        text-align: center;
        padding: 20px 0;
    }
}
</style>
