<template>
  <div class="echarts_cont">
    <div class="ec_header">
      <el-button class="but" size="mini" plain type="primary" @click="drawer = true">新增</el-button>
    </div>
    <el-drawer
        title="配置图形"
        :visible.sync="drawer"
        direction="ltr">
        <div class="configuration">
          <el-form
            :model="tableForm"
            ref="airportCompanyForm"
          >
            <el-form-item
              label="图形类型"
              prop="parenttype"
              size="default"
            >
              <el-select
                v-model="tableForm.parenttype"
                filterable
                default-first-option
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.v"
                  :label="item.k"
                  :value="item.v"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form
          v-if="type == 1"
            :model="inHourDataOption"
            ref="foldline"
          >
          <el-form-item label="图形名称">
              <el-input clearable v-model="inHourDataOption.title.text"  size="small" placeholder="图形名称"></el-input>
            </el-form-item>
            <el-form-item label="图形x轴">
              <el-input clearable v-model="inHourDataOption.xAxis[0].data"  size="small" placeholder="请输入x轴名称"></el-input>
            </el-form-item>
            <el-form-item label="图形标记">
              <el-input clearable v-model="inHourDataOption.legend.data"  size="small" placeholder="请输入图形标记"></el-input>
            </el-form-item>
            <el-form-item label="图形幕布">
              <el-select
                v-model="inHourDataOption.series[0].areaStyle"
                filterable
                default-first-option
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in option"
                  :key="item.v"
                  :label="item.k"
                  :value="item.v"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="x轴颜色">
              <el-input clearable v-model="inHourDataOption.xAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="y轴颜色">
              <el-input clearable v-model="inHourDataOption.yAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="y轴网线">
              <el-select
                v-model="inHourDataOption.yAxis[0].splitLine.show"
                filterable
                default-first-option
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionbreaky"
                  :key="item.v"
                  :label="item.k"
                  :value="item.v"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网线颜色">
              <el-input clearable v-model="inHourDataOption.yAxis[0].splitLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="折线颜色">
              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.normal.lineStyle.color"  size="small" placeholder="请输入折线颜色"></el-input>
            </el-form-item>
            <el-form-item label="图形折点">
              <el-select
                v-model="inHourDataOption.series[0].symbol"
                filterable
                default-first-option
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionbreak"
                  :key="item.v"
                  :label="item.k"
                  :value="item.v"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="折点颜色">
              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.normal.color"  size="small" placeholder="请输入折点颜色"></el-input>
            </el-form-item>
            <el-form-item label="折点大小">
              <el-input clearable v-model="inHourDataOption.series[0].symbolSize"  size="small" placeholder="折点大小"></el-input>
            </el-form-item>
          </el-form>
          <el-form
          v-if="type == 2"
            :model="inHourDataOption"
            ref="foldline"
          >
            <el-form-item label="图形名称">
              <el-input clearable v-model="inHourDataOption.title.text"  size="small" placeholder="图形名称"></el-input>
            </el-form-item>
            <el-form-item label="图形x轴">
              <el-input clearable type="string" v-model="inHourDataOption.xAxis.data"  size="small" placeholder="请输入x轴名称"></el-input>
            </el-form-item>
            <el-form-item label="图形标记">
              <el-input clearable type="string" v-model="inHourDataOption.legend.data"  size="small" placeholder="请输入图形标记"></el-input>
            </el-form-item>
            <el-form-item label="x轴颜色">
              <el-input clearable v-model="inHourDataOption.xAxis.axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="y轴颜色">
              <el-input clearable v-model="inHourDataOption.yAxis.axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="网线颜色">
              <el-input clearable v-model="inHourDataOption.yAxis.splitLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="柱子宽度">
              <el-input clearable v-model="inHourDataOption.series[0].barWidth"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="柱上颜色">
              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[0].color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="柱中颜色">
              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[1].color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="柱下颜色">
              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[2].color"  size="small" placeholder="请输入"></el-input>
            </el-form-item>
          </el-form>

        </div>
      </el-drawer>
    <div class="cont">
      <BarCharts id="hover" :option="inHourDataOption"/>
    </div>
    <!-- <BarCharts :option="inHourDataOption"/> -->
  </div>
</template>

<script>
// import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
import BarCharts from './components/echart/commonChartsBar.vue'
// import BarChartsr from '../../components/echart/commonChartsLine.vue'
import { Query } from '@/api/webApi'
const barOption = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      show: true,
      boundaryGap: false,
      axisLine:{
        lineStyle:{
          color:'red',
          width:2
        }
      },
      splitLine: {  
        show:false,   //X网格线
        lineStyle:{   //x网格线
          color: '#000000'
        }
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value',
        //y轴颜色
      axisLine: { 
        lineStyle: {   // Y 轴颜色配置
          color: '#3366CC'  
        } 
      },
      splitArea: {
        show: true  //y网格区域颜色
      },
      splitLine: {
        show:false,     //y网格线
        lineStyle:{
          color: '#ffffff'
        }
      },
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      symbol: 'circle',
      itemStyle: {
        normal: {
          color: "#1F824E", //改变折线点的颜色
          lineStyle: {
            color: "#1F824E", //改变折线颜色
          },
        },
      },
      // emphasis: {
      //   focus: 'series'
      // },
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};
const hisOption = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email']
  },
  xAxis: {
    type: 'category',
    show: true,
      // boundaryGap: false,
      axisLine:{
        lineStyle:{
          color:'red',
          width:2
        }
      },
      splitLine: {  
        show:false,   //X网格线
        lineStyle:{   //x网格线
          color: '#000000'
        }
      },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
            //y轴颜色
    axisLine: { 
      lineStyle: {   // Y 轴颜色配置
        color: '#3366CC'  
      } 
    },
    splitArea: {
      show: true  //y网格区域颜色
    },
    splitLine: {
      show:false,     //y网格线
      lineStyle:{
        color: '#ffffff'
      }
    },
  },
  series: [
    {
      name: 'Email',
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: '20',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#595FAE", // 0% 处的颜色
            },
            {
              offset: 0.2,
              color: "#595FAE", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#595FAE", // 100% 处的颜色
            },
          ],
        },
      }
    }
  ]
};
const cakeOption = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ["40%", "60%"],
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
        {
      name: "访问来源",
      type: "pie",
      // silent:true,
      radius: ["0%", "30%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      color: ["red"],
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = ["#3893F0", "#4ECAE9"];
            return colorList[params.dataIndex];
          },
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
      ],
    },
  ]
};
export default {
  name: "Newecharts",
  props: {
  },
  data () {
    return {
      inHourDataOption: null,
      drawer: false,
      tableForm: {
        parenttype: ''
      },
      type: null,
      options: [{
        v: '折线图',
        k: '折线图'
      },{
        v: '柱状图',
        k: '柱状图'
      },
      {
        v: '饼图',
        k: '饼图'
      },
      {
        v: '雷达图',
        k: '雷达图'
      }],
      option: [{
        v: {},
        k: '启动'
      },
      {
        v: null,
        k: '关闭'
      }],
      optionbreak:[{
        v: 'circle',
        k: '启动'
      },
      {
        v: 'none',
        k: '取消'
      }],
      optionbreaky:[{
        v: true,
        k: '启动'
      },
      {
        v: false,
        k: '取消'
      }],
    }
  },
  components: {
    BarCharts
  },
  watch: {
    tableForm: {
      handler (val) {
        if (val.parenttype == '折线图') {
          this.type = 1
          this.inHourDataOption = this._.cloneDeep(barOption)
        } else if (val.parenttype == '柱状图') {
          this.type = 2
          this.inHourDataOption = this._.cloneDeep(hisOption)
        } else if (val.parenttype == '饼图') {
          this.type = 3
          this.inHourDataOption = this._.cloneDeep(cakeOption)
        } else if (val.parenttype == '柱状雷达图图') {
          this.type = 4
        }
        // this.inHourDataOption = val.parenttype
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // this.inHourDataOption.series[0].areaStyle = null
    // console.log(this.inHourDataOption.series[0].areaStyle)
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.echarts_cont {
  width: 100%;
  height: calc(100vh - 110px);
  >.ec_header{
    width: 100%;
    height: 62px;
    z-index: 9999;
    >.but{
      float: right;
    }
  }
  >.cont{
    width: 100%;
    height: 90%;
  }
  .configuration{
    padding: 0 30px 0 25px;
  }
  ::v-deep  .el-form-item__content{
    display: flex;
  }
}
</style>