<template>
  <view class="dec-desc" :style="{ backgroundColor: arg.bgColor }">
    <text
      class="text"
      v-for="(item, i) in desc"
      :key="i + item"
      :class="className"
      :style="{ color: arg.color }"
    >
      {{ item }}
    </text>
  </view>
</template>

<script>
export default {
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: null,
      className: "",
      desc: [],
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.initData();
  },
  methods: {
    initData() {
      if (!!this.arg.title) {
        const title = this.arg.title.replace(/\n\r?/g, "<br>");
        this.desc = title.split("<br>");
      } else {
        this.desc = ["左侧编辑『文本内容』"];
      }
      this.className = (function (that) {
        let str = "";
        if (!!that.arg.size) {
          str = that.arg.size;
        }
        if (!!that.arg.position) {
          str = str + (str ? " " : "") + that.arg.position;
        }
        return str;
      })(this);
    },
  },
};
</script>
