<template>
  <div class="dcs_details">
    <TopModule :value="blocks?.topBlock" />
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="$t('field.baseInfo')"
        name="first"
      >
        <FieldsModule :value="blocks?.fieldBlock" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('form.riskInfo')"
        name="second"
      />
    </el-tabs>
  </div>
</template>
<script>
import request from '@/http/request.js';
import TopModule from './module/TopModule.vue';
import FieldsModule from './module/FieldsModule.vue';
import FXSPOT from './settingTemplate/FXSPOT.json';
import { cloneDeep } from 'lodash';
import { parseDeep } from './utils';
export default {
  name: 'DcsDetails',
  components: {
    TopModule,
    FieldsModule,
  },
  provide() {
    return {
      'globalData': this.globalData,
    };
  },
  props: {
    title: {
      type: Number || String,
      default: '',
    },
    dealId: {
      type: Number || String,
      default: '',
    },
    product: {
      type: Number || String,
      default: '',
    },
    instrument: {
      type: Number || String,
      default: '',
    },
  },
  data() {
    return {
      activeName: 'first',
      template: FXSPOT, // TODO 默认外汇即期配置
      blocks: null,
      globalData: null,
    };
  },
  created() {
    console.log('DcsDetails created');
    this.initData();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async initData() {
      if (!this.dealId || !this.product || !this.instrument) {
        console.error('Failed load Details!');
        return;
      }
      let globalData = {};
      const results = await Promise.all([this.queryList(this.dealId), this.queryInputParam(this.product)]);
      globalData = Object.assign(results[0], results[1]);
      this.globalData = globalData;

      const template = cloneDeep(this.template);
      const hash = new WeakMap([]);
      this.blocks = await parseDeep(globalData, template, hash);
      console.log('this.blocks', this.blocks);
    },
    async queryList(dealId) {
      // TOOD 旧接口查询交易信息
      const result = await request({
        url: 'dcs/dcs/dealQuery/queryList.action',
        method: 'post',
        data: { 'queryParam.dealId': dealId },
      });
      return result.data.result[0];
    },
    async queryInputParam(product) {
      // TOOD 旧接口查询模板和交易基本信息
      const result = await request({
        url: 'dcs/dcs/queryInputParam.action',
        method: 'post',
        data: { 'product': product },
      });
      return result.data.result;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
