<template>
  <div style="background:#f4f4f4;padding:15px">
   <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 }" style="background:white"></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'
export default {
 name: "CMultipleLine",
 components:{
       Style
   },
 mixins:[chartOptionMixins,settingMethod],
 props: {
   width: {
     type: String,
     default: '100%'
   },
   height: {
     type: String,
     default: '500px'
   },
   domId:{
     default: 'multipleLine'
   },
  
 },
 data() {
   return {
     widths:'100%',
     heights:'500px',
     drawer:false,
     changeColor:true,
     id:this.domId,
     relation:{},
     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)
     })
  },
  domId(val){
   this.id = val
  }
 },
 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
     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', '')
     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 = '时间'
     this.form.setting.title2 = '金额/万元'
     // var chartDom1 = document.getElementById(this.domId) 
     // var myChart1 = this.$echarts.init(chartDom1)
     var timeList = []
     var patentNoList = []
     var data = []
     this.chartData.forEach(item => {
         for(let key in this.relation){
             var index2 = data.findIndex(i=>{
               return i.key == key
             })
             if(index2 ==-1){
               data.push(
                 {
                   name:relation[key],
                   key:key,
                   type:'line',
                   connectNulls:true,
                   data:[]
                 }
               )
             }
           
         }
         var index = timeList.findIndex(i=>{
           return item.time == i
         })
         if(index == -1){
           timeList.push(item.time)
         }
     });
     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(this.chartData && this.chartData.length>0){
            this.chartData.forEach(item2=>{
              var index = timeList.findIndex(i=>{
                return item2.time == i
              })
              item.data[index] = item2[item.key]
            })
          }
          
        });
     this.selected = {
       x:timeList,
       y:data.map(item=>{return item.name}),
       data:data
     }
     if(this.changeColor){
       this.setColor()
     }
     let {backgroundColor,title, legend, xAxis, yAxis, series, grid,toolbox } = this.get2AxisOption('line', '')
     return {
       backgroundColor,
       title,
       tooltip: {
         trigger: 'axis'
       },
       legend,
       grid: grid,
       xAxis: xAxis,
       yAxis: yAxis,
       series: series,
       toolbox:toolbox
     }
     
   }
 }
}
</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:-20px;
   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>
