<template>
  <div class="history-container">
    <div class="flex top">
      <div class="flex width200">
        <span> 系统选择：</span>  
        <el-select v-model="value1"  placeholder="请选择" size="mini">
          <el-option
            v-for="item in fxOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> 
      </div>
      <div class="date">
        <Date />
      </div>
    </div>
    <div
      v-for="(item, index) of listData"
      :key="index"
      class="middle"
    >
      <BarEchart :echartData="item" class="echartDiv100"/>
    </div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
        <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue";
import Process from "./Process.vue";
import Date from "@/components/Date.vue";
export default {
  name: "History",
  components: {
    BarEchart,
    Process,
    Date
  },
  setup() {
    const state = reactive({
      listData: [
        {
          id: "echart0",
          title: "降水量-柱状图",
          legend: ['降水量'],
          color: ["#6fdbce"],
      }],
      fxOptions: [{
        value: '0',
        label: '降水量',
      },{
        value: '1',
        label: '系统A',
      },{
        value: '2',
        label: '系统B',
      },{
        value: '3',
        label: '系统C',
      },{
        value: '4',
        label: '系统D',
      },{
        value: '5',
        label: '系统E',
      }],
      value1:'降水量',
      tableHeader: [{
          prop: 'one',
          label: '1点'
        },{
          prop: 'two',
          label: '2点'
        },{
          prop: 'three',
          label: '3点'
        },{
          prop: 'four',
          label: '4点'
        },{
          prop: 'five',
          label: '5点'
        },{
          prop: 'six',
          label: '6点'
        },{
          prop: 'seven',
          label: '7点'
        },{
          prop: 'eight',
          label: '8点'
        },{
          prop: 'nine',
          label: '9点'
        },{
          prop: 'ten',
          label: '10点'
        }],
        tableData: [{
          one: '100',
          two: '200', 
          three: '100',
          four: '500',
          five: '200',
          six: '300',
          seven: '200',
          eight: '100',
          nine: '300',
          ten: '400'
        }]
    });
    onMounted(async () => {});

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.history-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  .top {
    width: 100%;
    height: 50px;
  }
  .middle {
    width: 100%;
    height: 400px;
    // border: 1px solid red;s
    .echartDiv100 {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
  }
  .bottom{
    height: calc(100% - 520px);
    // border: 1px solid red;
  }
  .date {
    width: 100%;
    display: flex;
    justify-content: end;
    height: 50%;
  }
  .width200 {
    width: 200px;
    >span {
      display: inline-block;
      width: 180px;
    }
  }
}
</style>
