<template>
  <div class="app-container">
    <el-tabs v-model="activeName" tab-position="left" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="废料统计" name="废料统计">
        <el-row :gutter="5">
          <el-col :span="8">
            <el-card>
              <div class="chartsTitle">废料原因占比</div>
              <Echart
                :options="pieOptions"
                id="pieChart"
                height="45vh"
              ></Echart>
            </el-card>
          </el-col>
          <el-col :span="16">
            <el-card>
              <div class="chartsTitle">废料原因统计</div>
              <div id="barChart" style="width:100%;height: 45vh"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-card style="margin-top: 5px">
          <div class="chartsTitle">废料明细表</div>
          <el-table
            small
            :data="list"
            fit stripe
            size="mini"
            pager-count="3"
            style="border-top: 1px solid #f5f5f5;"
            height="100"
            v-el-height-adaptive-table="{bottomOffset: 20}"
          >
            <el-table-column label="序号" type="index">
            </el-table-column>
            <el-table-column label="物料编号" prop="card">
            </el-table-column>
            <el-table-column label="物料型号" prop="sco">
            </el-table-column>
            <el-table-column label="物料名称" prop="name" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="报废原因" prop="reason">
            </el-table-column>
            <el-table-column label="报废数量" prop="num">
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="采购统计" name="采购统计">
        <el-row :gutter="5" v-if="activeName==='采购统计'">
          <el-col :span="12">
            <el-card>
              <div class="chartsTitle">采购物料表</div>
              <charts
                :id="chartId1"
                :options="barOptions"
                :className="chartsName"
                height="45vh"
                width="600px"
              >
              </charts>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div class="chartsTitle">采购供应商表</div>
              <charts
                :id="chartId2"
                :options="barOptions"
                :className="chartsName"
                height="45vh"
                width="600px"
              >
              </charts>
            </el-card>
          </el-col>
        </el-row>
        <div>
          <el-card style="margin-top: 5px;">
            <div class="chartsTitle">采购明细表</div>
            <el-table
              small
              :data="list"
              fit stripe
              size="mini"
              pager-count="3"
              style="border-top: 1px solid #f5f5f5;"
              height="100"
              v-el-height-adaptive-table="{bottomOffset: 20}"
            >
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="名称" prop="name" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="数量" prop="num" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="单位" prop="name" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="供应商" prop="sco" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="废料来源" name="废料来源">
        <el-row>
          <el-card v-if="activeName==='废料来源'">
            <div class="chartsTitle">废料来源</div>
            <charts
              :id="chartId3"
              :options="barOptions"
              :className="chartsName"
              height="45vh"
            >
            </charts>
          </el-card>
          <el-card style="margin-top: 5px">
            <div class="chartsTitle">废料来源明细表</div>
            <el-table
              small
              :data="list"
              fit stripe
              size="mini"
              pager-count="3"
              style="border-top: 1px solid #f5f5f5;"
              height="100"
              v-el-height-adaptive-table="{bottomOffset: 20}"
            >
              <el-table-column label="序号" type="index">
              </el-table-column>
              <el-table-column label="编号" prop="card">
              </el-table-column>
              <el-table-column label="名称" prop="name" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="数量" prop="num">
              </el-table-column>
              <el-table-column label="供应商" prop="sco" show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </el-card>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import charts from './charts.vue'
  import Echart from '@/components/echart';

  export default {
    name: "materialStatistics",
    components: {
      charts,
      Echart
    },
    data() {
      return {
        chartId1: 'chart1',
        chartId2: 'chart2',
        chartId3: 'chart3',
        barChart: null,
        barChart1: null,
        pieOptions: {},
        barOptions: {},
        activeName: '废料统计',
        chartsName: "chartsName",
        cdata: {
          xData: ["气泡", "划痕"],
          seriesData: [
            {value: 10, name: "气泡"},
            {value: 5, name: "破点"},
            {value: 19, name: "划伤"},
            {value: 6, name: "其他"},
          ]
        },
        chartData: {
          xAxisData: ["气泡", "破点", "划伤", "其他"],
          seriesData: [10, 5, 19, 6],
        },
        xAxisbar: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
        barData: [80, 95, 96, 96, 96, 98, 99],
        list: [
          {id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31', num: 2, reason: "气泡"},
          {id: 2, name: 'HIehd92', card: '3332', sco: 'REF-32', num: 1, reason: "划痕"},
          {id: 3, name: 'HIehd93', card: '3333', sco: 'REF-33', num: 3, reason: "擦伤"},
          {id: 4, name: 'HIehd94', card: '3334', sco: 'REF-34', num: 2, reason: "气泡"},
          {id: 5, name: 'HIehd95', card: '3335', sco: 'REF-35', num: 1, reason: "擦伤"},
          {id: 6, name: 'HIehd96', card: '3336', sco: 'REF-36', num: 2, reason: "气泡"},
          {id: 7, name: 'HIehd97', card: '3337', sco: 'REF-37', num: 1, reason: "划痕"},
        ],
      }
    },
    watch: {
      cdata: {
        handler(newData) {
          this.pieOptions = {
            color: [
              "#32c5e9",
              "#ffdb5c"
            ],
            legend: {
              data:["气泡", "破点", "划伤", "其他"],
              top: 'top',
              left: 'left',
              orient: "vertical",
              textStyle: {
                color: "#556677", // 文字的颜色。
              }
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
              show: true
            },
            calculable: true,
            series: [
              {
                name: '废料原因',
                type: 'pie',    // 设置图表类型为饼图
                radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                center: ['50%', '50%'], //圆心位置
                data: newData.seriesData
              }
            ]
          }
        },
        immediate: true,
      },
      immediate: true,
      deep: true
    },
    methods: {
      drawChart() {
        let that = this;
        this.barChart = this.$echarts.init(document.getElementById('barChart'));
        this.barChart.setOption({
          grid: {
            top: '10%',
            left: '3%',
            right: '5%',
            bottom: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              let color = params.color;//图例颜色
              let htmlStr = '<div>';
              htmlStr += params.seriesName + '<br/>';
              htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
              htmlStr += params.name + '：' + params.value + '件';
              htmlStr += '</div>';
              return htmlStr;
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: false, //去掉X轴分割线
            },
            data: that.chartData.xAxisData,
          },
          yAxis: {
            axisLine: {
              show: true,//y轴线
            },
            axisTick: {
              show: false//Y轴刻度线
            },
            axisLabel: {
              color: '#333333'//Y轴文本颜色
            },
            splitLine: {
              show: true, //Y轴分割线
              lineStyle: {
                color: '#dddddd'//Y轴分割线颜色
              }
            },
          },
          series: [{
            name: '废料统计',
            type: 'bar',
            barWidth: 20,
            data: that.chartData.seriesData,
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              formatter: '{c}',//显示百分号
              textStyle: { //数值样式
                color: 'black',//字体颜色
                fontSize: 10//字体大小
              }
            },
            itemStyle: {
              color: '#409EFF'
            },
          }]
        });
      },
      handleClick(tab) {
        // console.log(tab);
        // debugger;
      },
    },
    mounted() {
      this.drawChart();
      this.barOptions = {
        grid: {
          top: '10%',
          left: '3%',
          right: '5%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let color = params.color;//图例颜色
            let htmlStr = '<div>';
            htmlStr += params.name + '<br/>';
            htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
            htmlStr += params.seriesName + '：' + params.value + '%';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false, //去掉X轴分割线
          },
          data: this.xAxisbar,
        },
        yAxis: {
          axisLine: {
            show: true,//y轴线
          },
          axisTick: {
            show: false//Y轴刻度线
          },
          axisLabel: {
            color: '#333333'//Y轴文本颜色
          },
          splitLine: {
            show: true, //Y轴分割线
            lineStyle: {
              color: '#dddddd'//Y轴分割线颜色
            }
          },
        },
        series: [{
          name: '成品率',
          type: 'bar',
          barWidth: 20,
          data: this.barData,
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            formatter: '{c}',//显示百分号
            textStyle: { //数值样式
              color: 'black',//字体颜色
              fontSize: 10//字体大小
            }
          },
          itemStyle: {
            color: '#409EFF'
          },
        }]
      }
    }
  }
</script>

<style scoped>
  .chartsTitle {
    text-align: center;
    height: 35px;
    line-height: 35px;
    font-size: 22px;
  }
</style>
