<template>
  <div style="margin-top:20px" >
    <div style="display:flex;justify-content: flex-end;cursor: pointer;margin-bottom: -27px;margin-right:8px" :style="{ width: widths }">
      <div class="set2">
        <div>
          <i class="el-icon-refresh" style="font-size:18px;" @click="review"></i>
        </div>
        <p class="text">还原</p>
      </div>
      <div class="set">
        <div>
          <i class="el-icon-setting" style="font-size: 18px;" @click="set"></i>
        </div>
        <p class="text">设置图表格式</p>
      </div>
      
    </div>
    <div :id="domId" :style="{ width: widths , height:heights }" ></div>
    <el-drawer
            title="图表配置"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="500px">
            <div style="width:500px">
               <Style :form="form"></Style> 
            </div>
            
        </el-drawer>
  </div>
  
</template>

<script>
import {chartOptionMixins,settingMethod} from '@/views/components/setting/mixins'
import Style from '@/views/components/setting/style.vue'
var that = this
export default {
  name: "CMultipleLine",
  components:{
        Style
    },
  mixins:[chartOptionMixins,settingMethod],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    domId:{
      default: 'multipleLine'
    },
   NewForm:{
   }
  },
  data() {
    return {
      widths:'100%',
      heights:'500px',
      drawer:false,
      changeColor:true,
      id:this.domId,
      relation:{},
      name:'',
      // domId: 'multipleLine',
      chartData:[]
    }
  },
  computed:{
    formSetting(){
      return this.form.setting
    },
  },
  watch:{
    formSetting(val){
      this.dispose(this.id)
      this.heights = val.height + val.heightUnit
      this.widths = val.width + val.widthUnit
      var a = this.getOption2()
      this.$nextTick(() => {
        this.initChart(this.id, a)
      })
   }
  },
  mounted() {
  },
  
  methods: {
    handleClose(){
      this.form = JSON.parse(JSON.stringify(this.form))
      this.drawer = false
    },
    set(){
      this.drawer = true
      // this.$emit('form',this.form)
    },
    open(chartData,name,relation,timeUnit){
      this.chartData = chartData
      this.relation = relation
      this.name = name
      var a = this.getOption(name,relation,timeUnit)
      this.$nextTick(() => {
        this.initChart(this.id, a)
      })
    },
  review(){
      this.dispose(this.id)
      var a = this.getOption2()
      this.$nextTick(() => {
          this.initChart(this.id, a)
        })
    },
  getOption2(){
    this.changeColor = false
    let {backgroundColor,title,legend, xAxis, yAxis, series, grid,toolbox } = this.get2AxisOption('line', '')
      // console.log(legend, xAxis, yAxis, series, grid)
      return {
        backgroundColor,
        title,
        tooltip: {
          trigger: 'axis'
        },
        legend,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
        toolbox:toolbox
      }
  },
    getOption(name,relation,timeUnit) {
      this.form.setting.text.text = name
      this.form.setting.title1 = relation.xStr
      this.form.setting.title2 = relation.yStr+'/万元'
      // var chartDom1 = document.getElementById(this.domId) 
      // var myChart1 = this.$echarts.init(chartDom1)
      var timeList = []
      var productNameList = []
      var productList = []
      var data = []

      for(var i = 0;i<this.chartData.length;i++){
        var index = productList.findIndex(item=>{
          return item.id == this.chartData[i].productId
        })
        if(index == -1){
          productNameList.push(this.chartData[i].productName)
          productList.push({
            id:this.chartData[i].productId,
            data:[this.chartData[i]]
          })
        }else{
          productList[index].data.push(this.chartData[i])
        }
        var index2 = timeList.indexOf(this.chartData[i][relation.x])
        if(index2 == -1){
          timeList.push(this.chartData[i][relation.x])
        }
      }
      for(let i =0;i<productList.length;i++){
        var timeData = []
        var productData = productList[i].data
        for(let j = 0;j<productData.length;j++){
          var index = timeList.indexOf(productData[j][relation.x])
          timeData[index] = productData[j][relation.y]
        }
        data.push(
          {
            name:productNameList[i],
            type:'line',
            connectNulls:true,
            data:timeData
          }
        )
      }

      // this.chartData.forEach(item => {
      //   productNameList.push(item.productName)
      //   data.push({
      //     name:item.productName,
      //     type:'line',
      //     connectNulls:true,
      //     saleVOS:item.saleVOS,
      //     data:[]
      //   })
      //   item.saleVOS.forEach(item1=>{
      //     var index = timeList.findIndex(i=>{
      //       return item1[relation.x] == i
      //     })
      //     if(index == -1){
      //       timeList.push(item1[relation.x])
      //     }
      //   })
      // });
      // timeList = timeList.sort((a,b)=>{
      //     if(timeUnit == 0){
      //       return Date.parse(a.replace(/-/g, "/")) - Date.parse(b.replace(/-/g, "/"))
      //     }else if(timeUnit==1){
      //       return  Date.parse(a.match(/(\d{1,3})+(?:\.\d+)?/g).join('/'))-Date.parse(b.match(/(\d{1,3})+(?:\.\d+)?/g).join('/'))
      //     }else{
      //       return Date.parse(a.substring(0,a.length-1))-Date.parse(b.substring(0,b.length-1))
      //     }
      //   }),
      // data.forEach(item=>{
      //   if(item.saleVOS && item.saleVOS.length>0){
      //     item.saleVOS.forEach(item2=>{
      //       var index = timeList.findIndex(i=>{
      //         return item2[relation.x] == i
      //       })
      //       item.data[index] = item2[relation.y]
      //     })
      //   }
        
      // });
      
      this.selected = {
        x:timeList,
        y:productNameList,
        data:data
      }
      if(this.changeColor){
        this.setColor()
      }
      
      // console.log(this.selected)
      let {backgroundColor, title, legend, xAxis, yAxis, series, grid,toolbox } = this.get2AxisOption('line', '')
      // console.log(legend, xAxis, yAxis, series, grid)
      return {
        backgroundColor,
        title,
        tooltip: {
          trigger: 'axis'
        },
        legend,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series,
        toolbox:toolbox,
       
      }
   
      
      // var option = {
      //   title: {
      //     text: name,
      //     bottom:0,
      //     left:'center'
      //   },
      //   tooltip: {
      //     trigger: 'axis'
      //   },
      //   legend: {
      //     data: productNameList.length>1?productNameList:[],
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '40',
      //     containLabel: true
      //   },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {}
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: timeList,
      //     name: '时间',
      //     nameLocation: "end"
      //   },
      //   yAxis: {
      //     type: 'value',
      //     name: '销售额/万元',
      //     nameLocation: "end"
      //   },
      //   series: data
      // };
      // myChart1.clear();
      // myChart1.setOption(option);
    }
  }
}
</script>
<style lang="scss" scoped>
  .text{
    display: none;
    font-size: 12px;
    color: #4099c6;
    position: absolute;
    top: 10px;
    left: -30px;
    z-index: 999;
    width: 200px;
  }
  .set{
    position: relative;
    // margin-bottom:-200%;
    z-index: 999;
    // padding: 10px 0;
  }
  .set2{
    margin-right:6px;
    position: relative;
    z-index: 999;
  }
  .set2:hover .text{
    left:0;
    display: block;
  }
  .set:hover .text{
    display: block;
  }
</style>
