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

    <panel-group :topData="topData"/>

    <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"
        :row-style="tableRowStyle"
        :row-class-name="tableRowClass"
        style="width: 100%">
        <el-table-column
          prop="ROWSEQ"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="FACTORY_NAME"
          label="工厂"
          width="150">
        </el-table-column>
        <el-table-column
          prop="PRODUCT_LINE_NAME"
          label="产线"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ORDER_CODE"
          label="订单编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="MATERIAL_CODE"
          label="物料编号">
        </el-table-column>
        <el-table-column
          prop="MATERIAL_NAME"
          label="物料名称"
          width="200">
        </el-table-column>
        <el-table-column
          prop="ORDER_AMOUNT"
          label="计划数">
        </el-table-column>
        <el-table-column
          prop="COMPLETE_AMOUNT"
          label="完成数">
        </el-table-column>
        <el-table-column
          prop="RATE"
          label="完成率">
        </el-table-column>
        <el-table-column
          prop="PLAN_DATE"
          label="计划日期">
        </el-table-column>
      </el-table>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="16">
        <div class="chart-wrapper">
          <LineChart1 :chart-data="lineChartData1"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieChartData"/>
        </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'
import {getData} from '@/api/index'


const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
const week = () => {
  let today = new Date();
  let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
  let dayOfWeek = firstDayOfYear.getDay();
  let spendDay = 1;
  if (dayOfWeek != 0) {
    spendDay = 7 - dayOfWeek + 1;
  }
  firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
  let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
  return Math.ceil((d / 7) + 1)
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    LineChart1
  },
  data() {
    return {
      topData: {},
      lineChartData: {},
      lineChartData1: {},
      pieChartData: {},
      tableData: []
    }
  },
  mounted() {
    getData({}).then(e => {
      let data = e.data
      let xData1 = [...new Set(data.columnarList.map(val => val.BEGIN_DATE))]
      let xData2 = [...new Set(data.lineList.map(val => val.BEGIN_DATE))]
      console.log(data)
      this.topData = {
        value1: data.planOrderSum,
        value2: data.prodOrderSum,
        value3: data.planProductSum,
        value4: data.compProductSum,
      }
      this.tableData = data.todayOrderList
      this.lineChartData = {
        legend: {},
        title: {
          text: `第${week()}周产量`,
          textStyle: {
            align: 'center',
            color: '#000',
            fontSize: 20,
          },
          top: '0%',
          left: '0%',
        },
        xAxis: {
          data: xData1,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: [
          {
            axisTick: {
              show: false
            }
          },
          {
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '一线订单履约率(%)',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                // areaStyle: {
                //   color: '#f3f8ff'
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            data: xData1.map(v => {
              return (data.columnarList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_01"))?.RATE || 0
            }),
            animationDuration: 1000,
            animationEasing: 'quadraticOut'
          },
          {
            name: '二线订单履约率(%)',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#638641',
                lineStyle: {
                  color: '#638641',
                  width: 2
                },
                // areaStyle: {
                //   color: '#f3f8ff'
                // }
              }
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            data: xData1.map(v => {
              return (data.columnarList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_02"))?.RATE || 0
            }),
            animationDuration: 1000,
            animationEasing: 'quadraticOut'
          },
          {
            name: '一线产量',
            smooth: false,
            type: 'bar',
            barMaxWidth: 60,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#9fe080',
                lineStyle: {
                  color: '#9fe080',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: xData1.map(v => {
              return (data.columnarList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_01"))?.COMPLETE_AMOUNT || 0
            }),
            animationDuration: 1000,
            animationEasing: 'quadraticOut'
          },
          {
            name: '二线产量',
            smooth: false,
            type: 'bar',
            barMaxWidth: 60,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: '#296827',
                lineStyle: {
                  color: '#296827',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: xData1.map(v => {
              return (data.columnarList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_02"))?.COMPLETE_AMOUNT || 0
            }),
            animationDuration: 1000,
            animationEasing: 'quadraticOut'
          }
        ]
      }
      this.lineChartData1 = {
        title: {
          text: `第${week()}周清单率(%)`,
          textStyle: {
            align: 'center',
            color: '#000',
            fontSize: 20,
          },
          top: '0%',
          left: '0%',
        },
        xAxis: {
          data: xData2,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}%'
          }
        },
        legend: {},
        series: [
          {
            name: '一线清单率(%)',
            smooth: false,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: xData1.map(v => {
              return (data.lineList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_01"))?.COMPLETE_AMOUNT || 0
            }),
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          },
          {
            name: '二线清单率(%)',
            smooth: false,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#638641',
                lineStyle: {
                  color: '#638641',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: xData1.map(v => {
              return (data.lineList.find(val => val.BEGIN_DATE === v && val.PRODUCT_LINE_CODE === "CX_02"))?.COMPLETE_AMOUNT || 0
            }),
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }
          ]
      }
      this.pieChartData = {
        title: {
          text: `第${week()}周质量缺陷分布`,
          textStyle: {
            align: 'center',
            color: '#000',
            fontSize: 20,
          },
          top: '0%',
          left: '0%',
        },
        tooltip: {
          trigger: 'item',
          formatter: '缺陷种类:{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
        },
        series: [
          {
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '46%'],
            data: data.pieList.map(val => {
              return {
                value: val.SUM,
                name: val.QUALITY_DEFECT_NAME
              }
            }),
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      }
    })
  },
  methods: {
    tableRowStyle({row, rowIndex}) {
      let date = `${new Date().getFullYear()}-${(new Date().getMonth()) > 10 ? (new Date().getMonth() + 1) : ('0' + (new Date().getMonth() + 1))}-${(new Date().getDate() > 10) ? (new Date().getDate()) : ('0' + new Date().getDate())}`
      let date1 = new Date(row.PLAN_DATE).getTime()
      let date2 = new Date(date).getTime()
      if ((date2 - date1) === (1000 * 60 * 60 * 24)) {
        return {'background-color': 'yellow', color: '#000'};
      }
      if (row.STATUS === 1) {
        return {'background-color': 'red', color: '#fff'};
      } else {
        return {}
      }
    },
    tableRowClass({row, rowIndex}) {
      let date = `${new Date().getFullYear()}-${(new Date().getMonth()) > 10 ? (new Date().getMonth() + 1) : ('0' + (new Date().getMonth() + 1))}-${(new Date().getDate() > 10) ? (new Date().getDate()) : ('0' + new Date().getDate())}`
      let date1 = new Date(row.PLAN_DATE).getTime()
      let date2 = new Date(date).getTime()
      if ((date2 - date1) === (1000 * 60 * 60 * 24)) {
        return 'blackHover'
      }
      if (row.STATUS === 1) {
        return 'blackHover'
      } else {
        return {}
      }
    },
  }
}
</script>

<style lang="less" 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;
}

/deep/ .blackHover:hover {
  color: #000 !important;
}
</style>
