<template>
  <div>
    <el-form-item>
      <template slot="label">
        <span style="color: #aaa">标题id</span>
      </template>
      <el-input v-model="formData.id"></el-input>
    </el-form-item>
    <el-form-item label="是否显示">
      <el-switch v-model="formData.show"></el-switch>
    </el-form-item>
    <el-form-item label="标题文本">
      <el-input v-model="formData.text"></el-input>
    </el-form-item>
    <el-form-item>
      <template slot="label">
        <span style="color: #aaa">标题超链接</span>
      </template>
      <el-input v-model="formData.link"></el-input>
    </el-form-item>
    <el-form-item v-if="formData.link">
      <template slot="label">
        <span style="color: #aaa">超链接打开窗口</span>
      </template>
      <el-radio-group v-model="formData.target">
        <el-radio label="self">当前窗口打开</el-radio>
        <el-radio label="blank">新窗口打开</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="水平对齐方式">
      <el-radio-group v-model="formData.textAlign">
        <el-radio label="auto">auto</el-radio>
        <el-radio label="left">left</el-radio>
        <el-radio label="right">right</el-radio>
        <el-radio label="center">center</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="垂直对齐方式">
      <el-radio-group v-model="formData.textVerticalAlign">
        <el-radio label="auto">auto</el-radio>
        <el-radio label="top">top</el-radio>
        <el-radio label="bottom">bottom</el-radio>
        <el-radio label="middle">middle</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="离左侧的距离">
      <el-input v-model="formData.left"></el-input>
    </el-form-item>
    <el-form-item label="离上侧的距离">
      <el-input v-model="formData.top"></el-input>
    </el-form-item>
    <el-form-item label="离右侧的距离">
      <el-input v-model="formData.right"></el-input>
    </el-form-item>
    <el-form-item label="离底部的距离">
      <el-input v-model="formData.bottom"></el-input>
    </el-form-item>
    <el-form-item label="背景色">
      <el-input v-model="formData.backgroundColor"></el-input>
    </el-form-item>
    <el-form-item label="边框颜色">
      <el-input v-model="formData.borderColor"></el-input>
    </el-form-item>
    <el-form-item label="边框线宽">
      <el-input-number v-model="formData.borderWidth " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="圆角半径">
      <el-input-number v-model="formData.borderRadius " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="阴影的模糊大小">
      <el-input-number v-model="formData.shadowBlur " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="阴影颜色">
      <el-input v-model="formData.shadowColor "
      ></el-input>
    </el-form-item>
    <el-form-item label="阴影水平的偏移距离">
      <el-input-number v-model="formData.shadowOffsetX " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="阴影垂直的偏移距离">
      <el-input-number v-model="formData.shadowOffsetY " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <div>
      <div style="margin: 0 8px 12px 100px;">
        <el-divider content-position="left">
          <span>
            标题样式
          </span>
          <el-switch
              v-model="independentConfig.titleStyle">
          </el-switch>
        </el-divider>
      </div>
    </div>
    <div v-show="independentConfig.titleStyle">
      <TextStyleOption :formData="formData.textStyle" :hasItem="['rich']"/>
    </div>
  </div>
</template>
<script>
import TextStyleOption from './style/textStyleOption'

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

</style>
