<template>
        <el-dialog
          :visible.sync="dialogVisible"
          width="80%" title='列样式设置'
          :append-to-body='true' :close-on-click-modal='false'>
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size='mini'>
              <el-form-item label="字体颜色">
               <el-select v-model="formInline.color" placeholder="颜色" clearable>
                  <el-option v-for="(item,index) in colorOptions" :key='index' :label="item.label" :value='item.value'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="字体大小">
                <el-select v-model="formInline.fontSize" placeholder="字体大小" clearable>
                  <el-option v-for='(item,index) in fontSizeOptions' :key='index' :label="item.label" :value='item.value'>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="背景色">
                <el-select v-model="formInline.background" placeholder="颜色" clearable>
                  <el-option v-for="(item,index) in colorOptions" :key='index' :label="item.label" :value='item.value'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文本的修饰">
                <el-select v-model="formInline['text-decoration']" placeholder="文本的修饰" clearable>
                  <el-option v-for="(item,index) in textDecorationOptions" :key='index' :label="item.label" :value='item.value'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="对齐方式">
                <el-select v-model="formInline['text-align']" placeholder="对齐方式" clearable>
                  <el-option v-for="(item,index) in textAlignOptions" :key='index' :label="item.label" :value='item.value'></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
               <el-button size='mini' type="primary" @click="onSubmitStyle">确定</el-button>
            </div>
      </el-dialog>
</template>
<script>
export default {
  props: {
    formInline: {
      default() {
        return {}
      }
    },
    value: Boolean
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      dialogVisible: false,
      fontSizeOptions: [
        { value: '10px', label: '10px' },
        { value: '12px', label: '12px' },
        { value: '14px', label: '14px' },
        { value: '16px', label: '16px' },
        { value: '18px', label: '18px' },
        { value: '20px', label: '20px' },
        { value: '22px', label: '22px' },
        { value: '24px', label: '24px' }
      ],
      colorOptions: [
        { value: '#000000', label: '黑色' },
        { value: '#C0C0C0', label: '银色' },
        { value: '#808080', label: '灰色' },
        { value: '#FFFFFF', label: '白色' },
        { value: '#FF0000', label: '红色' },
        { value: '#800080', label: '紫色' },
        { value: '#FF00FF', label: '紫红' },
        { value: '#008000', label: '绿色' },
        { value: '#00FFFF', label: '浅绿' },
        { value: '#00FF00', label: '亮绿' },
        { value: '#808000', label: '橄榄' },
        { value: '#000080', label: '深蓝' },
        { value: '#0000FF', label: '蓝色' },
        { value: '#008080', label: '青色' }
      ],
      textDecorationOptions: [
        { value: 'line-through', label: '删除线' },
        { value: 'underline', label: '下划线' },
        { value: 'overline', label: '上划线' }
      ],
      textAlignOptions: [
        { value: 'left', label: '左对齐' },
        { value: 'right', label: '右对齐' },
        { value: 'center', label: '中间' }
      ]
    }
  },
  methods: {
    onSubmitStyle() {
      this.$emit('submit', this.formInline)
    }
  }
}
</script>
