<template>
  <el-row>
    <el-form-item label="控件栅格">
      <el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
    </el-form-item>
    <el-form-item>
      <template slot="label">
        <span>自动填写</span>
        <el-tooltip style="cursor: pointer" effect="dark" :content="'设置指定规则，将结果自动填写到字段输入框中'" placement="top">
          <i class="el-icon-question" />
        </el-tooltip>
      </template>
      <el-select v-model="activeData.__config__.inputType" @change="activeData.defaultValueExp = null" placeholder="请选择">
        <el-option label="指定数值" :value="1">
          <span>指定数值</span>
          <el-tooltip style="cursor: pointer" effect="dark" :content="'创建数据时将指定数值自动输入'" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </el-option>
        <el-option label="自定义表达式" :value="2">
          <span>自定义表达式</span>
          <el-tooltip style="cursor: pointer" effect="dark" :content="'通过函数和本表其他字段的运算结果自动填入，被引用的字段值改变时不会改变当前字段值'" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文本内容">
      <template slot="label">
        <span>文本内容</span>
        <el-tooltip style="cursor: pointer" effect="dark" :content="'默认文本内容，如使用自定义表达式时，在未算出计算结果时，可预设要表达的内容'" placement="top">
          <i class="el-icon-question" />
        </el-tooltip>
      </template>
      <el-input v-model="activeData.__config__.defaultValue" placeholder="请输入文本内容" />
    </el-form-item>
    <el-form-item label="自定义表达" v-if="activeData.__config__.inputType === 2">
      <customExpression :defaultValueExp="activeData.defaultValueExp" @onChangeExp="setDefaultValExp" :dbLinkId="dbLinkId" :drawList="drawList" :activeData="activeData" />
    </el-form-item>
    <!-- <el-form-item label="显示标签">
      <el-switch v-model="activeData.__config__.showLabel" />
    </el-form-item> -->
    <el-form-item label="行高">
      <el-input-number v-model="activeData.textStyle['line-height']" :min="12" placeholder="请输入行高" controls-position="right" />
    </el-form-item>
    <el-form-item label="字体大小">
      <el-input-number v-model="activeData.textStyle['font-size']" :min="12" placeholder="请输入字体大小" controls-position="right" />
    </el-form-item>
    <el-form-item label="对齐方式">
      <el-radio-group v-model="activeData.textStyle['text-align']">
        <el-radio-button label="left">左对齐</el-radio-button>
        <el-radio-button label="center">居中对齐</el-radio-button>
        <el-radio-button label="right">右对齐</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="字体颜色">
      <el-color-picker v-model="activeData.textStyle['color']"></el-color-picker>
    </el-form-item>
    <el-form-item label="是否加粗">
      <el-switch v-model="activeData.textStyle['font-weight']" active-value="bold" inactive-value="normal" />
    </el-form-item>
    <el-form-item label="是否斜体">
      <el-switch v-model="activeData.textStyle['font-style']" active-value="italic" inactive-value="normal" />
    </el-form-item>
    <el-form-item label="下划线样式">
      <el-radio-group v-model="activeData.textStyle['text-decoration']">
        <el-radio-button label="none">无样式</el-radio-button>
        <el-radio-button label="underline">下划线</el-radio-button>
        <el-radio-button label="line-through">删除线</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-row>
</template>
<script>
import comMixin from './mixin'
import customExpression from "@/components/Generator/index/RightComponents/customExpression.vue";
export default {
  props: ['activeData', 'dbLinkId', 'drawList'],
  mixins: [comMixin],
  components: {customExpression},
  data() {
    return {}
  },
  created() {
  },
  methods: {}
}
</script>
