<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-table
        :data="tableData"
        header-cell-style="text-align:center;background-color:#57c9cd;color:#fff"
        cell-style="text-align:center"
        style="width: 100%">
        <el-table-column
          prop="no"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="plant"
          label="工厂"
          width="180">
        </el-table-column>
        <el-table-column
          prop="productionLine"
          label="产线">
        </el-table-column>
        <el-table-column
          prop="workOrderNumber"
          label="工单号">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="productCode"
          label="产品编码">
        </el-table-column>
        <el-table-column
          prop="SalesOrderNumber"
          label="销售单号">
        </el-table-column>
        <el-table-column
          prop="scheduledProduction"
          label="计划产量">
        </el-table-column>
        <el-table-column
          prop="FinishedOutput"
          label="完成产量">
        </el-table-column>
        <el-table-column
          prop="percentageComplete"
          label="完成率">
        </el-table-column>
      </el-table>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="16">
        <div class="chart-wrapper">
          <LineChart1 :chart-data="lineChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import LineChart1 from './dashboard/LineChart1'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const lineChartData = {
  newVisitis: {
    expectedData: [99, 98, 95, 93, 96, 93, 97],
    actualData: [99, 98, 95, 93, 96, 93, 97],
    expedData: [200, 192, 120, 144, 160, 130, 140]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    expedData: [200, 192, 120, 144, 160, 130, 140]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
    expedData: [200, 192, 120, 144, 160, 130, 140]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
    expedData: [200, 192, 120, 144, 160, 130, 140]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    LineChart1
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,

      tableData: [
        {
          no: '1',
          plant: '1',
          productionLine: '1',
          workOrderNumber: '1',
          productName: '1',
          productCode: '1',
          SalesOrderNumber: '1',
          scheduledProduction: '1',
          FinishedOutput: '1',
          percentageComplete: '1'
        }
      ]
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.el-table th.el-table__cell > .cell{
  text-align: center  ;
}
</style>
