<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list size" style="margin-bottom: 10px">
      <span class="d-left big">编辑内容文本</span>
    </div>
    <div>
      <a-textarea
        v-model="arg.title"
        placeholder="请输入要说明的文字，最多100字"
        :maxLength="100"
        :auto-size="{ minRows: 3, maxRows: 4 }"
        @blur="refreshShow"
        style="width: 100%"
      />
      <span class="d-error" v-if="!arg.title">请填写文本</span>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">字体大小</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.size"
          @change="refreshShow"
          button-style="solid"
        >
          <a-radio-button :value="'big'">大</a-radio-button>
          <a-radio-button :value="'middle'">中</a-radio-button>
          <a-radio-button :value="'small'">小</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">文本颜色</span>
      <div class="d-right">
        <div style="float: right; margin-right: 40px">
          <color-picker
            :back="back1"
            :color="arg.color"
            @change="(val) => ensure(val, 'color')"
          ></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">背景颜色</span>
      <div class="d-right">
        <div style="float: right; margin-right: 40px">
          <color-picker
            :back="back2"
            :color="arg.bgColor"
            @change="(val) => ensure(val, 'bgColor')"
          ></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">显示位置</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.position"
          @change="refreshShow"
          button-style="solid"
        >
          <a-radio-button :value="'left'">居左</a-radio-button>
          <a-radio-button :value="'center'">居中</a-radio-button>
          <a-radio-button :value="'right'">居右</a-radio-button>
        </a-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import colorPicker from "../../../modal/colorPicker";
export default {
  props: ["tab", "checked"],
  components: {
    colorPicker,
  },
  data() {
    return {
      arg: null,
      back1: "",
      back2: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
    if (!this.arg.color) {
      this.arg.color = "#000000";
    }
    if (!this.arg.bgColor) {
      this.arg.color = "#ffffff";
    }
    this.back1 = this.arg.color;
    this.back2 = this.arg.bgColor;
  },
  methods: {
    ensure(val, key) {
      this.arg[key] = val;
      this.refreshShow();
    },
    refreshShow() {
      this.tab.refresh = !this.tab.refresh;
    },
  },
};
</script>
