<template>
  <div>
    <el-form-item label="数据名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="数据集">
      <el-input placeholder="多个数据用逗号（,）隔开" v-model="formData.originalData" @blur="simpleDataChange"></el-input>
    </el-form-item>
    <el-form-item label="使用的坐标系">
      <el-select v-model="formData.coordinateSystem" placeholder="请选择">
        <el-option label="cartesian2d" value="cartesian2d"></el-option>
        <el-option label="polar" value="polar"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="使用的x轴index">
      <el-input-number v-model="formData.xAxisIndex" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="使用的y轴index">
      <el-input-number v-model="formData.yAxisIndex" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="使用的极坐标系index">
      <el-input-number v-model="formData.yAxisIndex" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="标记的图形">
      <el-select v-model="formData.symbol" placeholder="请选择">
        <el-option label="circle" value="circle"></el-option>
        <el-option label="rect" value="rect"></el-option>
        <el-option label="roundRect" value="roundRect"></el-option>
        <el-option label="triangle" value="triangle"></el-option>
        <el-option label="diamond" value="diamond"></el-option>
        <el-option label="pin" value="pin"></el-option>
        <el-option label="arrow" value="arrow"></el-option>
        <el-option label="none" value="none"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="标记的大小">
      <el-input-number v-model="formData.symbolSize" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="标记的旋转角度">
      <el-input-number v-model="formData.symbolRotate" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="是否显示标记">
      <el-switch v-model="formData.showSymbol"></el-switch>
    </el-form-item>
    <el-form-item label="是否与图例联动">
      <el-switch v-model="formData.legendHoverLink"></el-switch>
    </el-form-item>
    <el-form-item label="数据堆叠标识">
      <el-input v-model="formData.stack"></el-input>
    </el-form-item>
    <el-form-item label="堆叠策略">
      <el-select v-model="formData.stackStrategy" placeholder="请选择">
        <el-option label="符号相同" value="samesign"></el-option>
        <el-option label="全部" value="all"></el-option>
        <el-option label="只堆叠正值" value="positive"></el-option>
        <el-option label="只堆叠负值" value="negative"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="鼠标悬浮时样式">
      <el-input v-model="formData.cursor"></el-input>
    </el-form-item>
    <el-form-item label="是否连接空数据">
      <el-switch v-model="formData.connectNulls"></el-switch>
    </el-form-item>
    <el-form-item label="是否裁剪超出的图形">
      <el-switch v-model="formData.clip"></el-switch>
    </el-form-item>
    <el-form-item label="是否是阶梯线图">
      <el-select v-model="formData.step" placeholder="请选择">
        <el-option label="start" value="start"></el-option>
        <el-option label="middle" value="middle"></el-option>
        <el-option label="end" value="end"></el-option>
        <el-option label="不显示" value="false"></el-option>
      </el-select>
    </el-form-item>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">图形上的文本标签配置</el-divider>
      <SeriesLineLabelOption :formData.sync="formData.label" :isEnd="false"/>
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">折线端点的标签配置</el-divider>
      <SeriesLineLabelOption :formData.sync="formData.endLabel" :isEnd="true"/>
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">标签的视觉引导线配置</el-divider>
      <el-form-item label="是否显示">
        <el-switch v-model="formData.labelLine.show"></el-switch>
      </el-form-item>
      <el-form-item label="是否显示在图形上方">
        <el-switch v-model="formData.labelLine.showAbove"></el-switch>
      </el-form-item>
      <el-form-item label="引导线第二段长度">
        <el-input v-model="formData.labelLine.length2"></el-input>
      </el-form-item>
      <el-form-item label="视觉引导线平滑程度">
        <el-input-number v-model="formData.labelLine.smooth" controls-position="right" :min="0" :max="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="两端之间最小的夹角">
        <el-input-number v-model="formData.labelLine.minTurnAngle" controls-position="right" :min="0" :max="180"
        ></el-input-number>
      </el-form-item>
      <LineStyleOption :formData.sync="formData.labelLine.lineStyle"/>
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">标签布局配置</el-divider>
      <el-form-item label="是否隐藏重叠标签">
        <el-switch v-model="formData.labelLayout.hideOverlap"></el-switch>
      </el-form-item>
      <el-form-item label="标签重叠时挪动位置">
        <el-select v-model="formData.labelLayout.moveOverlap" placeholder="请选择">
          <el-option label="水平依次位移" value="shiftX"></el-option>
          <el-option label="垂直依次位移" value="shiftY"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签的 x 位置">
        <el-input v-model="formData.labelLine.x"></el-input>
      </el-form-item>
      <el-form-item label="标签的 y 位置">
        <el-input v-model="formData.labelLine.y"></el-input>
      </el-form-item>
      <el-form-item label="x 方向上的偏移">
        <el-input-number v-model="formData.labelLine.dx" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="y 方向上的偏移">
        <el-input-number v-model="formData.labelLine.dy" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签旋转角度">
        <el-input-number v-model="formData.labelLine.rotate" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签显示的宽度">
        <el-input-number v-model="formData.labelLine.width" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签显示的高度">
        <el-input-number v-model="formData.labelLine.height" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签水平对齐方式">
        <el-select v-model="formData.labelLayout.align" placeholder="请选择">
          <el-option label="left" value="left"></el-option>
          <el-option label="center" value="center"></el-option>
          <el-option label="right" value="right"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签水平对齐方式">
        <el-select v-model="formData.labelLayout.verticalAlign" placeholder="请选择">
          <el-option label="top" value="top"></el-option>
          <el-option label="middle" value="middle"></el-option>
          <el-option label="bottom" value="bottom"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签大小">
        <el-input-number v-model="formData.labelLine.fontSize" controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标签是否可以拖拽">
        <el-switch v-model="formData.labelLayout.draggable"></el-switch>
      </el-form-item>
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">折线拐点配置</el-divider>
      <el-form-item label="颜色">
        <el-color-picker v-model="formData.itemStyle.color" show-alpha></el-color-picker>
      </el-form-item>
    </div>
  </div>
</template>
<script>

import SeriesLineLabelOption from '@/components/Configure/options/chart/series/lineLabel'
import LineStyleOption from '@/components/Configure/options/chart/style/lineStyleOption'
import {preConfig} from '@/components/Configure/options/preConfig'
import {merge} from "lodash";

export default {
  name: 'LineChartOption',
  props: ['formData'],
  components: {
    SeriesLineLabelOption,
    LineStyleOption
  },
  data() {
    return {
      independentConfig: {
        simpleData: '',
      }
    }
  },
  mounted() {
    this.formData = (merge({},preConfig['line'],this.formData))
    console.log(11111111,this.formData)
    // this.$set(this,'formData',{
    //   ...preConfig[this.formData.type],
    //   ...this.formData
    // })
  },
  methods: {
    seriesTypeChange(k) {
      console.log(123)
      this.chartData.series[k] = {
        type: this.chartData.series[k].type,
        label: {},
        // ...preConfig[this.chartData.series[k].type]
      }
    },
    simpleDataChange() {
      if (this.formData.originalData.startsWith('{{') && this.formData.originalData.endsWith('}}')) {
        this.$set(this.formData, 'data', this.formData.originalData)
        return
      }
      let str = this.formData.originalData.replaceAll('，', ',')
      let dataArr = str.split(',').map(e => {
        if (e === 'null' || e.length === 0) {
          return null
        } else {
          return e
        }
      })
      if (dataArr.length > 0) {
        this.$set(this.formData, 'data', dataArr)
      } else {
        this.$set(this.formData, 'data', [])
      }
    },
  }
}
</script>
<style>

</style>
