<template>
  <!-- 现货参考价-详情 -->
  <a-modal class="commonModal paddingDialog purchase-detail" title="现货参考价详情" v-model:visible="visible" centered @cancel="cancel" width="890px">
    <fieldset class="formFieldSet">
      <legend>现货信息</legend>
      <a-form class="inlineForm">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="现货品种">
              <span class="white">{{ formatValue(selectedRow.deliverygoodsname) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="商品">
              <span class="white">{{ formatValue(selectedRow.wrstandardname) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="品牌">
              <span class="white">{{ formatValue(selectedRow.brandname) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </fieldset>
    <fieldset class="formFieldSet">
      <legend>修改记录</legend>
      <a-table class="dialogTable" :columns="columns" :data-source="tableList" :pagination="false"></a-table>
    </fieldset>
    <template #footer>
      <a-button key="submit" type="primary" @click="cancel">关闭 </a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { formatValue } from '@/common/methods';
import { Ermcp3SellBuyContract } from '@/services/go/ermcp/purchase/interface';
import { getPriceTypeName } from '@/common/constants/enumsName';
import { _closeModal } from '@/common/setup/modal/modal';
import { querySpotGoodsPriceLog } from '@/services/go/ermcp/qhj';
import { Ermcp3SpotGoodsPriceLog, QuerySpotGoodsPriceLogReq } from '@/services/go/ermcp/qhj/interface';
import { ColumnType } from '@/common/methods/table';
import { getUserId } from '@/services/bus/user';

export default defineComponent({
  name: 'spotmarket_price_detail',
  components: {},
  emits: ['cancel', 'update'],
  props: {
    selectedRow: {
      type: Object as PropType<Ermcp3SellBuyContract>,
      default: {},
    },
  },
  setup(props, context) {
    const { visible, cancel } = _closeModal(context);
    const tableList = ref<Ermcp3SpotGoodsPriceLog[]>([]);

    // 表头对应字段
    const columns: ColumnType[] = [
      {
        title: '变更时间',
        dataIndex: 'operatetime',
        key: 'operatetime',
        align: 'center',
        width: 120,
      },
      {
        title: '价格',
        dataIndex: 'spotgoodsprice',
        key: 'spotgoodsprice',
        align: 'center',
        width: 120,
      },
      {
        title: '操作人',
        dataIndex: 'operatorname',
        key: 'operatorname',
        align: 'center',
        width: 120,
      },
    ];

    const param: QuerySpotGoodsPriceLogReq = {
      userid: getUserId(),
      deliverygoodsid: props.selectedRow.deliverygoodsid,
    };

    // 修改记录
    querySpotGoodsPriceLog(param).then((res) => {
      tableList.value = res;
    });

    return {
      visible,
      cancel,
      columns,
      tableList,
      formatValue,
      getPriceTypeName,
    };
  },
});
</script>