<template>
  <div class="app-container" style="overflow-x: auto;">
    <el-form :inline="true" label-width="68px">
      <el-form-item label="报告年份" prop="reportDate">
        <el-date-picker clearable size="small" style="width: 200px"
                        type="year"
                        placeholder="选择报告年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        v-hasPermi="['production:monthly:export']"
        >导出</el-button>
        </el-form-item>
    </el-form>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column prop="title" label=""></el-table-column>
      <el-table-column prop="unit" label=""></el-table-column>
      <el-table-column prop="currently" label="currently"></el-table-column>
      <el-table-column prop="jan" :label="this.monthList[0]"></el-table-column>
      <el-table-column prop="feb" :label="this.monthList[1]"></el-table-column>
      <el-table-column prop="mar" :label="this.monthList[2]"></el-table-column>
      <el-table-column prop="apr" :label="this.monthList[3]"></el-table-column>
      <el-table-column prop="may" :label="this.monthList[4]"></el-table-column>
      <el-table-column prop="jun" :label="this.monthList[5]"></el-table-column>
      <el-table-column prop="jul" :label="this.monthList[6]"></el-table-column>
      <el-table-column prop="aug" :label="this.monthList[7]"></el-table-column>
      <el-table-column prop="sep" :label="this.monthList[8]"></el-table-column>
      <el-table-column prop="oct" :label="this.monthList[9]"></el-table-column>
      <el-table-column prop="nov" :label="this.monthList[10]"></el-table-column>
      <el-table-column prop="dec" :label="this.monthList[11]"></el-table-column>
      <el-table-column prop="total" label="total"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Monthly",
      data() {
        return {
          monthList: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          tableData: [
            {title: "NAP", unit: ""},
            {title: "C5", unit: "t"},
            {title: "NA", unit: "t"},
            {title: "Wison Ethane", unit: "t"},
            {title: "LPG to Furnace", unit: "t"},
            {title: "C4 Raff3  fr bd and 2ph", unit: "t"},
            {title: "C2 fr LDPE", unit: "t"},
            {title: "C3 fr OXO", unit: "t"},
            {title: "Mixed C3/C4 fr BD", unit: "t"},
            {title: "HC9", unit: "t"},
            {title: "Offgas fr AEU", unit: "t"},
            {title: "wash oil", unit: "t"},
            {title: "toluene", unit: "t"},
            {title: "C4 Recycle(ton)", unit: "t"},
            {title: "input total", unit: "t"},
            {title: "Total feed", unit: ""},
          ]
        }
      },
      created() {
        this.year = new Date().getFullYear();
        let monthListTemp = [];
        for (let i = 0; i < this.monthList.length; i++) {
          monthListTemp.push(this.monthList[i] + "-" + this.year);
        }
        this.monthList = monthListTemp;
      },
    }
</script>

<style scoped>

</style>
