<template>
  <div class="new-text-option">
    <div class="setting-title" @click="show = !show">
      <div>组件设置</div>
      <e class="el-icon-arrow-right" v-show="!show"></e>
      <e class="el-icon-arrow-down" v-show="show"></e>
    </div>
    <el-form size="mini" label-width="80px" v-show="show">
      <el-form-item label="文本内容">
        <el-input v-model="option.text"></el-input>
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="option.color"></el-color-picker>
      </el-form-item>
      <el-form-item label="文字大小">
        <el-input type="number" v-model="option.fontSize"></el-input>
      </el-form-item>
      <el-form-item label="文字间距">
        <el-input type="number" v-model="option.letterSpacing"></el-input>
      </el-form-item>
      <el-form-item label="文字粗细">
        <el-select v-model="option.fontWeight">
          <el-option
            v-for="(item, i) of dictFontWeight"
            :key="i"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开启滚动">
        <el-switch v-model="option.switchRoll"></el-switch>
      </el-form-item>
      <el-form-item label="滚动速度" v-show="option.switchRoll">
        <el-input type="number" v-model="option.speed"></el-input>
      </el-form-item>
      <el-form-item label="超链接">
        <el-switch v-model="option.switchHref"></el-switch>
      </el-form-item>
      <el-form-item label="地址" v-show="option.switchHref">
        <el-input v-model="option.href"></el-input>
      </el-form-item>
      <el-form-item label="跳转方式" v-show="option.switchHref">
        <el-radio-group v-model="option.hrefType">
          <el-radio label="_self">本页面</el-radio>
          <el-radio label="_blank">新页面</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { dictFontWeight, dictTextAlign } from "../dict";
export default {
  name: "new-text-option",
  props: ["option"],
  data() {
    return {
      show: true,
      dictFontWeight,
      dictTextAlign,
    };
  },
};
</script>
<style lang="scss">
.new-text-option {
}
</style>