<template>
  <div style="padding: 8px 20px 20px;">
    <div class="w100 plr-20" style="font-size: 14px">
      <div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
        <div class="disInlineBlock" style="width: 120px;">{{item}}</div>
        <div style="width: calc(100% - 120px);vertical-align: top;" class="disInlineBlock">{{formData['formValue'] && formData['formValue'][key]}}</div>
      </div>
    </div>
    <div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
      <EchartsLine class="w100 h100" :lineData="item && item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
    </div>
  </div>
</template>

<script setup>
  import EchartsLine from "@/components/echartsList/line.vue";
  export default {
    name: 'FirstMonitor',
    components: {EchartsLine},
    props: {
      chartList: {
        type: Array,
        default: () => []
      },
      formData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    created() {},
    methods: {
      chartDataEvent(valData, funcName) {
        this.$emit("chartFnEvent", valData, funcName);
      },
    }
  }
</script>
