<template>
  <a-card
    :bordered="false"
    :headStyle="{ fontSize: '22px', fontWeight: 600 }"
    :body-style="{ padding: '0' }"
  >
    <div>

          <a-tabs default-active-key="1" size="large" @change="changeProcessTabs" :tab-bar-style="{ paddingLeft: '16px' }">
            <a-tab-pane tab="深圳" key="1">
            </a-tab-pane>
            <a-tab-pane tab="赤壁" key="2">
            </a-tab-pane>
          </a-tabs>
          <a-row style="display: flex">
            <div class="report">
            <a-radio-group v-model="dateType" @change="changeDay">
                <a-radio-button :value = "1">日报表</a-radio-button>
                <a-radio-button :value = "2">周报表</a-radio-button>
                <a-radio-button :value = "3">月报表</a-radio-button>
            </a-radio-group>
            </div>
            <a-col :xl="18" :span="30" :style="{ right: '10px' }">
                <a-select
                  mode="multiple"
                  placeholder="请选择工厂"
                  :style="{ width: '240px', marginRight: '10px' }"
                  v-model="companyCode"
                  allowClear
                >
                  <a-select-option v-for="d in companyCodeList" :key="d">
                    {{ d }}
                  </a-select-option>
                </a-select>
                <a-select
                  placeholder="请选择客户"
                  :style="{ width: '150px', marginRight: '10px' }"
                  v-model="salesAspectName"
                >
                  <a-select-option v-for="d in salesAspectNameList" :key="d">
                    {{ d }}
                  </a-select-option>
                </a-select>
                <a-select
                  placeholder="请选择线别"
                  :style="{ width: '150px', marginRight: '10px' }"
                  v-model="productionLine"
                >
                  <a-select-option v-for="d in lineList" :key="d">
                    {{ d }}
                  </a-select-option>
                </a-select>
                
                <j-date
                  :show-time="false"
                  style="width: 100%"
                  date-format="YYYY-MM-DD"
                  placeholder="查询时间"
                  v-model="endDate"
                  :style="{ width: '150px', marginRight: '10px' }"
                ></j-date>
                <a-input placeholder="请输入间隔" :style="{ width: '150px', marginRight: '10px' }" v-model="processGap" />
                <a-button @click="searchProcessReach" type="primary" icon="" :style="{ marginRight: '10px' }">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
              <div :id="'saleReportChart'"  :style="{ width: '100%', height: '50vh' }"></div>
            </a-col>
            <!-- <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> -->
              <a-modal v-model="visiblePie">
                <div id="saleReportPieChart" style="width: 400px; height: 400px;"></div>
              </a-modal>
              <!-- <div :id="'saleReportBarChart'"  :style="{ width: '100%', height: '50vh' }"></div> -->
            <!-- </a-col> -->

          </a-row>
    </div>
  </a-card>

</template>

<script>

import { httpAction,postAction,getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate.vue'
import * as echarts from 'echarts'
import moment from 'dayjs'
import '@/assets/less/TableExpand.less'

var weekOfYear = require('dayjs/plugin/weekOfYear')
var advancedFormat = require('dayjs/plugin/advancedFormat')
moment.extend(advancedFormat)
moment.extend(weekOfYear)

export default {
  name: 'PvdSalereportDetailList',
  components: { JDate, getAction },
  data() {
    return {
      visible:false,
      visiblePie:false,
      width:window.top.document.body.offsetWidth-500,
      authority: this.$store.state.user.permissionList,
      listData: [
        moment().subtract(1, 'days').format('YYYY-MM-DD'),
        moment().subtract(9, 'days').format('YYYY-w'),
        moment().format('YYYY-MM'),
      ],
      startDate: moment().subtract(8, 'days').format('YYYY-MM-DD'),
      endDate: moment().subtract(1, 'days').format('YYYY-MM-DD'),
      processTabKey: 'saleReportChart',
      listProcessReach: 'aoiOee/aoiOeeMac',
      listProcessSel: 'produce/report/listProcessSel',
      listProNoReach: 'produce/report/listProNoReach',
      listMachineNo: 'aoiOee/queryAoiOeeMachineNo',
      // queryMachineByDate: 'aoiOee/queryMachineByDate',
      queryCompanyCodeList: '/pvdSalereportDetail/queryConditionsList',
      queryList: '/pvdSalereportDetail/queryList',
      
      listTab:[{text:'深圳',value:1},{text:'赤壁',value:2}],
      dateType: 1,
      processGap:14,
      // xData:[],
      loading:false,
      day:'',
      myChart1:{},
      myChart2:{},
      companyCode:undefined,
      salesAspectName:undefined,
      productionLine:undefined,
      companyCodeList:[],
      salesAspectNameList:[],
      lineList:[],
      dayList:[],
      tabValue:1,
      bodystyle:{
        overflow: 'hidden',
        overflowY: 'scroll',
      },
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  created() {
    // setTimeout(() => {
    this.initEcharts()
      //  this.initsaleReportPieChart()
    // }, 300)
    this.initList()
  },
  methods: {
    handleCancel(){
      this.visible = false
    },
    handleProName(e) {
      this.selectProcessName = e
      this.getData()
    },
    //tab切换
    changeProcessTabs(key) {
      debugger
      this.machineType = undefined
      this.machineNo = undefined
      this.shift = undefined
      this.tabValue = key
      this.dateType = 1
      this.initEcharts()
    },
    changeDay(e) {
      this.$nextTick(function () {
        this.dateType = e.target.value
        this.getData()
      })
    },
    //初始化查询条件
    initEcharts() {
      // this.myChart1 = echarts.init(document.getElementById('saleReportChart'))  
      this.initList()
      this.getData()
    },
    initList() {
      this.getCompanyCodeList();
    },
    getCompanyCodeList(){
      let params = {
        tab: this.tabValue,
        days: this.startDate,
        dayNum: this.processGap,
      }
      httpAction(this.queryCompanyCodeList,params,'post').then((res) => {
        if (res.success) {
          debugger
          this.companyCodeList = res.result.listCompanyCode;
          this.salesAspectNameList = res.result.listCustomerName;
          this.lineList = res.result.listLine;
          this.dayList = res.result.listDate;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    searchReset(){
      // this.machineType = undefined
      // this.machineNo = undefined
      // this.shift = undefined
      this.getData()
    },
    searchProcessReach() {
      this.getData()
    },
    
    queryMachineByD(date){
      let params= {
        type:this.dateType,
        date:date
      }
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      this.loading = true;
      if(this.tabValue = '1'){
        getAction(this.queryMachineByDateSZ, params).then((res) => {
          if (res.success) {
            // this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      }else{
        getAction(this.queryMachineByDate, params).then((res) => {
          if (res.success) {
            // this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      }
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
      }
      this.ipagination = pagination;
      // this.queryMachineByD(this.day);
    },
    getData(){
       //校验查询条件
      if (!this.startDate) {
        this.$message.warning('请选择开始时间查询条件')
        return
      }
      let companyCode = this.companyCode;
      let salesAspectName = this.salesAspectName;
      let line = this.productionLine;
      //调用后台接口
      var params = {
        tab: this.tabValue,
        days: this.startDate,
        dayNum: this.processGap,
        companyCode:companyCode,
        customerName:salesAspectName,
        line:line
      }
      httpAction(this.queryList,params,'post').then((res) => {
        if (res.success) {
          debugger
          this.companyCodeList = res.result.listCompanyCode;
          this.salesAspectNameList = res.result.listCustomerName;
          this.lineList = res.result.listLine;
          // this.dayList = res.result.listDate;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
      // var myChart = {};
      // myChart = this.myChart1
      // myChart.showLoading({
      //     text: '数据正在加载...',
      //     textStyle: { fontSize: 30, color: '#444' },
      //     effectOption: { backgroundColor: 'rgba(0, 0, 0, 0)' },
      // })
      
      this.initSaleReportChart()
    },
    //初始化销售柱状图表
    initSaleReportChart() {  
      debugger;
      let that = this
      var myChart = echarts.init(document.getElementById('saleReportChart')) ;
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: that.dayList,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            formatter: function (value, index) {
              debugger
              if (that.dateType == '1') {
                return value.substring(5);  
              } else if(that.dateType == '2'){
                return "WK"+value;
              } else if(that.dateType == '3'){
                return value+"月";
              }
              // return value.substring(5);
            }
          }
        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '按公司汇总',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '按客户名称汇总',
            type: 'bar',
            // stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '按线别汇总',
            type: 'bar',
            // stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
          },
          // {
          //   name: 'Video Ads',
          //   type: 'bar',
          //   stack: 'Ad',
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [150, 232, 201, 154, 190, 330, 410]
          // },
          // {
          //   name: 'Search Engine',
          //   type: 'bar',
          //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   markLine: {
          //     lineStyle: {
          //       type: 'dashed'
          //     },
          //     data: [[{ type: 'min' }, { type: 'max' }]]
          //   }
          // },
          // {
          //   name: 'Baidu',
          //   type: 'bar',
          //   barWidth: 5,
          //   stack: 'Search Engine',
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [620, 732, 701, 734, 1090, 1130, 1120]
          // },
          // {
          //   name: 'Google',
          //   type: 'bar',
          //   stack: 'Search Engine',
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [120, 132, 101, 134, 290, 230, 220]
          // },
          // {
          //   name: 'Bing',
          //   type: 'bar',
          //   stack: 'Search Engine',
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [60, 72, 71, 74, 190, 130, 110]
          // },
          // {
          //   name: 'Others',
          //   type: 'bar',
          //   stack: 'Search Engine',
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [62, 82, 91, 84, 109, 110, 120]
          // }
        ]
      };

      myChart.on('click', function (params) {
        // that.day = res.dateList[params.dataIndex]
        that.ipagination.current = 1
        that.ipagination.pageSize = 10
        
        that.initsaleReportPieChart();
      })
      option &&   myChart.setOption(option)
      myChart.hideLoading()
      window.onresize = function () {
          myChart.resize();
      }
    },
    initsaleReportPieChart() {  
      debugger;
      this.visiblePie = true
      var myChart = echarts.init(document.getElementById('saleReportPieChart'));
      // let that = this
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
      option &&   myChart.setOption(option)
      myChart.hideLoading()
      window.onresize = function () {
          myChart.resize();
      }
    },

  },
}
</script>
<style lang="less" scoped>
.report {
  display: flex;
  width: 300px;
  margin-left: 12px;
}
</style>