<template>
  <div>
    <el-form-item label="是否显示">
      <el-switch v-model="formData.show"></el-switch>
    </el-form-item>
    <el-form-item label="坐标轴名称">
      <el-input v-model="formData.name">
      </el-input>
    </el-form-item>
    <el-form-item label="坐标轴类型">
      <el-select v-model="formData.type" placeholder="请选择">
        <el-option label="value" value="value"></el-option>
        <el-option label="category" value="category"></el-option>
        <el-option label="time" value="time"></el-option>
        <el-option label="log" value="log"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="对数轴的底数" v-if="formData.type === 'log'">
      <el-input-number v-model="formData.logBase " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="坐标轴位置">
      <el-select v-model="formData.position" placeholder="请选择">
        <el-option label="top" value="top"></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.offset" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="坐标轴名称位置">
      <el-select v-model="formData.nameLocation" placeholder="请选择">
        <el-option label="start" value="start"></el-option>
        <el-option label="middle" value="middle"></el-option>
        <el-option label="center" value="center"></el-option>
        <el-option label="end" value="end"></el-option>
      </el-select>
    </el-form-item>
    <div>
      <div style="margin: 0 8px 12px 100px;">
        <el-divider content-position="left">
          <span>
            名称样式
          </span>
          <el-switch
            v-model="independentConfig.nameTextStyle">
          </el-switch>
        </el-divider>
      </div>
    </div>
    <div v-show="independentConfig.nameTextStyle">
      <TextStyleOption :formData="formData.nameTextStyle"
                       :hasItem="['rich','align','verticalAlign','backgroundColor','borderColor','borderWidth','borderType','borderDashOffset','borderRadius','padding','shadowColor','shadowBlur','shadowOffsetX','shadowOffsetY','overflow','ellipsis']" />
    </div>
    <el-form-item label="称与轴线的距离">
      <el-input-number v-model="formData.nameGap" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="名字旋转角度">
      <el-input-number v-model="formData.nameRotate" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="名字最大长度">
      <el-input-number v-model="formData.nameTruncate.maxWidth" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="截断后末尾内容">
      <el-input v-model="formData.nameTruncate.ellipsis">
      </el-input>
    </el-form-item>
    <el-form-item label="是否反向">
      <el-switch v-model="formData.inverse"></el-switch>
    </el-form-item>
    <el-form-item label="刻度最小值">
      <el-input-number v-model="formData.min" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="刻度最大值">
      <el-input-number v-model="formData.max" controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="是否强制包含零">
      <el-switch v-model="formData.scale"></el-switch>
    </el-form-item>
    <el-form-item label="刻度分割段数">
      <el-input-number v-model="formData.splitNumber " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="最小间隔大小">
      <el-input-number v-model="formData.minInterval " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="最大间隔大小">
      <el-input-number v-model="formData.maxInterval " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="强制分割间隔">
      <el-input-number v-model="formData.interval " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="起始值">
      <el-input-number v-model="formData.startValue " controls-position="right">
      </el-input-number>
    </el-form-item>
    <el-form-item label="数据集">
      <el-input placeholder="多个数据用逗号（,）隔开" v-model="formData.originalData" @blur="simpleDataChange"></el-input>
    </el-form-item>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">坐标轴轴线配置</el-divider>
      <AxisAxisLineOption :formData.sync="formData.axisLine" />
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">坐标轴刻度配置</el-divider>
      <AxisAxisTickOption :formData.sync="formData.axisTick" />
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">次刻度线配置</el-divider>
      <AxisMinorTickOption :formData.sync="formData.minorTick" />
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">
        <span>
        刻度标签样式配置
      </span>
        <el-switch
          v-model="independentConfig.axisLabel">
        </el-switch>
      </el-divider>
      <div v-show="independentConfig.axisLabel">
        <AxisLabelOption :formData="formData.axisLabel" :isX="false"
                         :hasItem="['rich','align','verticalAlign','backgroundColor','borderColor','borderWidth','borderType','borderDashOffset','borderRadius','padding','shadowColor','shadowBlur','shadowOffsetX','shadowOffsetY','overflow','ellipsis']" />
      </div>
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">分隔线配置</el-divider>
      <SplitLineOption :formData.sync="formData.splitLine" />
    </div>
    <div style="margin: 0 8px 12px 100px;">
      <el-divider content-position="center">次分隔线配置</el-divider>
      <MinorSplitLineOption :formData.sync="formData.minorSplitLine" />
    </div>
  </div>
</template>
<script>
import TextStyleOption from '@/components/Configure/options/chart/style/textStyleOption';
import AxisAxisLineOption from '@/components/Configure/options/chart/axis/axisAxisLineOption';
import AxisAxisTickOption from '@/components/Configure/options/chart/axis/axisAxisTickOption';
import AxisMinorTickOption from '@/components/Configure/options/chart/axis/axisMinorTickOption';
import AxisLabelOption from '@/components/Configure/options/chart/axis/axisLabelOption';
import SplitLineOption from '@/components/Configure/options/chart/axis/splitLineOption';
import MinorSplitLineOption from '@/components/Configure/options/chart/axis/minorSplitLineOption';

export default {
  name: 'YAxisOption',
  props: ['formData'],
  components: {
    TextStyleOption,
    AxisAxisLineOption,
    AxisAxisTickOption,
    AxisMinorTickOption,
    AxisLabelOption,
    SplitLineOption,
    MinorSplitLineOption
  },
  data() {
    return {
      independentConfig: {
        nameTextStyle: false,
        axisLabel: false
      }
    };
  },
  methods: {
    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>
