<template>
  <div class="field_template">
    <div
      v-if="value.label"
      class="label"
    >{{ value.label }}</div>
    <div
      class="right"
    >
      <span
        v-if="value.prefix"
        class="prefix"
      >{{ value.prefix }}</span>
      <span
        v-if="!isRequestValueShow && value.value"
        class="value"
      >{{ value.value }}</span>
      <span
        v-if="isRequestValueShow"
        class="value"
      >{{ requestValue }}</span>
      <span
        v-if="value.suffix"
        class="suffix"
      >{{ value.suffix }}</span>
    </div>
  </div>
</template>
<script>
import request from '@/http/request.js';
import { findDeepValue } from '../utils';
export default {
  name: 'FieldTemplate',
  props: {
    value: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      isRequestValueShow: false,
      requestValue: '-',
      parseReturn: {
        'enum': async function(data, code) {
          // TODO 默认接口和格式，待完善
          // /dcs/dcs/queryComboxData.action
          // {
          //   "id": "5005",
          //   "value": "SH000000H",
          //   "text": "上海AMC"
          // }

        },
        'field': async function(data, field) {
          return findDeepValue(data, field);
        },
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      const { request } = this.value;
      console.log('request', request);
      if (request && request?.need) {
        console.log('request init', request);
        this.isRequestValueShow = true;
        this.requestValue = await this.query(request);
      }
    },
    async query({ type, url, param, data, returnField }) {
      const result = await request({
        url: url,
        method: 'post',
        data: data,
        param: param,
      });
      if (result.success) {
        const returnValue = await this.parseReturn[type](result.data, returnField);
        return returnValue;
      } else {
        return '';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.field_template {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  cursor: text;
  .label {
    width: 80px;
    text-align: left;
    color: var(--application-color-5);
  }
  .right {
    flex-grow: 1;
    text-align: left;
    .prefix {
      color: var(--application-color-6);
      padding-right: 4px;
    }
    .value {
      color: var(--application-color-3);
    }
    .suffix {
      padding-left: 4px;
      color: var(--application-color-6);
    }
  }
}
</style>
