<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-radio-group v-model="dataForm.type" @change="changeType">
          <el-radio-button label="日" />
          <el-radio-button label="周" />
          <el-radio-button label="月" />
          <el-radio-button label="年" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="dataForm.date"
          :type="datePickerType[dataForm.type].type"
          :format="datePickerType[dataForm.type].format"
          :placeholder="'选择' + datePickerType[dataForm.type].placeholder"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="time"
        header-align="center"
        align="center"
        label="时间"
      />
      <el-table-column
        v-for="item in yaoluList"
        :prop="item.id"
        header-align="center"
        align="center"
        :label="item.name"
        :key="item.id"
      />
    </el-table>
  </div>
</template>

<script>
// 窑炉列表
const yaoluList = [
  {
    id: '1',
    name: '窑炉1',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '2',
    name: '窑炉2',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '3',
    name: '窑炉3',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '4',
    name: '窑炉4',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '5',
    name: '窑炉5',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '6',
    name: '窑炉6',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '7',
    name: '窑炉7',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '8',
    name: '窑炉8',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '9',
    name: '窑炉9',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '10',
    name: '窑炉10',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  },
  {
    id: '11',
    name: '窑炉11',
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ]
  }
]

// 日期类型
const datePickerType = {
  '日': {
    type: 'date',
    format: '',
    placeholder: '日期'
  },
  '周': {
    type: 'week',
    format: 'yyyy 第 WW 周',
    placeholder: '周'
  },
  '月': {
    type: 'month',
    format: '',
    placeholder: '月'
  },
  '年': {
    type: 'year',
    format: '',
    placeholder: '年'
  }
}

export default {
  data () {
    return {
      dataForm: {
        type: '日',
        date: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      orderDetailVisible: false,
      yaoluList,
      datePickerType
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataList = []
      this.dataListLoading = true
      this.yaoluList.map((item, index) => {
        if (index === 0) {
          item.data.map(i => {
            this.dataList.push({
              time: i.time,
              [item.id]: i.value
            })
          })
        } else {
          item.data.map((i, idx) => {
            this.dataList[idx][item.id] = i.value
          })
        }
      })
      this.dataListLoading = false
    },
    // 切换查询类型
    changeType (v) {}
  }
}
</script>
