<template>
  <div>
    <el-form-item label="是否显示">
      <el-switch v-model="formData.show"></el-switch>
    </el-form-item>
    <el-form-item label="标签的位置" v-if="isEnd===false">
      <el-select v-model="formData.step" placeholder="请选择">
        <el-option label="top" value="top"></el-option>
        <el-option label="left" value="left"></el-option>
        <el-option label="right" value="right"></el-option>
        <el-option label="bottom" value="bottom"></el-option>
        <el-option label="inside" value="inside"></el-option>
        <el-option label="insideLeft" value="insideLeft"></el-option>
        <el-option label="insideRight" value="insideRight"></el-option>
        <el-option label="insideTop" value="insideTop"></el-option>
        <el-option label="insideBottom" value="insideBottom"></el-option>
        <el-option label="insideTopLeft" value="insideTopLeft"></el-option>
        <el-option label="insideBottomLeft" value="insideBottomLeft"></el-option>
        <el-option label="insideTopRight" value="insideTopRight"></el-option>
        <el-option label="insideBottomRight" value="insideBottomRight"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="距离元素的距离">
      <el-input-number v-model="formData.distance" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="标签旋转角度">
      <el-input-number v-model="formData.rotate" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="标签之间的最小距离">
      <el-input-number v-model="formData.minMargin" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="内容格式化">
      <el-input v-model="formData.formatter"></el-input>
    </el-form-item>
    <div>
      <div style="margin: 0 8px 12px 100px;">
        <el-divider content-position="left">
          <span>
            样式设置
          </span>
          <el-switch
              v-model="independentConfig.lineStyle">
          </el-switch>
        </el-divider>
      </div>
    </div>
    <div v-show="independentConfig.lineStyle">
      <TextStyleOption :formData.sync="formData"
                       :hasItem="['rich','align','verticalAlign','backgroundColor','borderColor','borderWidth','borderType','borderDashOffset','borderRadius','padding','shadowColor','shadowBlur','shadowOffsetX','shadowOffsetY','overflow','ellipsis']"/>
    </div>
  </div>
</template>
<script>
import TextStyleOption from '../style/textStyleOption'

export default {
  name: 'SplitLineOption',
  props: ['formData','isEnd'],
  components: {
    TextStyleOption,
  },
  data() {
    return {
      independentConfig: {
        lineStyle: false
      }
    }
  },
  methods: {}
}
</script>
<style>

</style>
