<!-- 基本的文本属性框 -->
<template>
  <div class="base-text">
    <div class="title">属性</div>
    <ul>
      <li>
        <div class="small-title">边框</div>
        <div class="property">
          <div class="color-box">
            <div class="cololorSelect">
              <el-color-picker
                show-alpha
                @change="changeStrokeColor"
                class="fix-box-1"
                v-model="strokecolor"
              ></el-color-picker>
            </div>
            <span>颜色</span>
          </div>
          <div class="line-width">
            <el-input-number
              style="width: 80px"
              v-model="linewidth"
              controls-position="right"
              @change="changeborderWidth"
              size="mini"
              :min="1"
              :max="20"
              :maxlength="100"
            ></el-input-number>
            <span>边框宽度</span>
          </div>
          <div class="color-box">
            <div class="cololorSelect">
              <el-color-picker
                @change="changeBackground"
                show-alpha
                class="fix-box-1"
                v-model="backgroundcolor"
              ></el-color-picker>
            </div>
            <span>背景颜色</span>
          </div>
        </div>
      </li>
      <li>
        <div class="small-title">文字</div>
        <div class="property">
          <div class="line-width">
            <el-input-number
              style="width: 80px"
              v-model="size"
              controls-position="right"
              @change="changeFontSize"
              size="mini"
              :min="1"
              :max="20"
              :maxlength="100"
            ></el-input-number>
            <span>字号</span>
          </div>

          <div class="color-box">
            <div class="cololorSelect">
              <el-color-picker
                show-alpha
                @change="changeColor"
                class="fix-box-1"
                v-model="Color"
              ></el-color-picker>
            </div>
            <span>颜色</span>
          </div>
        </div>
      </li>
      <li>
        <el-input @input="changeText" v-model="text"></el-input>
      </li>
      <li>
        <div class="small-title">其他数据绑定</div>
        <div class="property">
          <div class="line-width">
            <el-input @input="changeBindMsg" v-model="bindMsg"></el-input>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import bus from "@/bus/bus";
export default {
  props: [
    "strokeColor",
    "fontSize",
    "backgroundColor",
    "textMsg",
    "lineWidth",
    "Width",
    "Height",
    "color",
    "bindText", //绑定数据
    "items",
  ],
  data() {
    return {
      size: 0, //font-size
      text: "", //文本
      strokecolor: "", //边框色
      backgroundcolor: "",
      linewidth: 1,
      width: 4,
      height: 4,
      borderLineOption: [
        {
          id: "solid",
          src: require("@/assets/images/solidLine.png"),
        },
        {
          id: "dashed",
          src: require("@/assets/images/dashedLine.png"),
        },
        {
          id: "dotted",
          src: require("@/assets/images/dotLine.png"),
        },
      ],
      borderStyle: "solid",
      Color: "",
      bindMsg:'',//附加信息
    };
  },
  methods: {
    // 改变文字
    changeText(val) {
      bus.$emit("updateStyle", "text", val);
    },
    // 改变b文字颜色
    changeColor(val) {
      bus.$emit("updateStyle", "color", val);
    },
    // 改变border颜色
    changeStrokeColor(val) {
      bus.$emit("updateStyle", "strokeColor", val);
    },
    // 改变背景颜色
    changeBackground(val) {
      bus.$emit("updateStyle", "backgroundColor", val);
    },
    // 改变字体大小
    changeFontSize(val) {
      bus.$emit("updateStyle", "font", val);
    },
    // 改变边框宽度
    changeborderWidth(val) {
      bus.$emit("updateStyle", "lineWidth", val);
    },
    changeBindMsg(val){
      this.items.data.properties.bindMsg = val;
    }
  },
  mounted() {
    // console.log(Select)
  },
  watch: {
    strokeColor(val) {
      this.strokecolor = val;
    },
    fontSize(val) {
      this.size = val;
    },
    backgroundColor(val) {
      this.backgroundcolor = val;
    },
    lineWidth(val) {
      this.linewidth = val;
    },
    Width(val) {
      this.width = val;
    },
    Height(val) {
      this.height = val;
    },
    textMsg(val) {
      this.text = val;
    },
    color(val) {
      this.Color = val;
    },
    items(val) {
      if (!val) return;
      this.bindMsg = val.data.properties.bindMsg;
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.base-text {
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  ul {
    width: calc(~"100% - 24px");
    margin: -1px 12px 0 12px;
    li {
      border-top: 1px solid #979797;
      .small-title {
        font-size: 12px;
        color: #8d9399;
        margin: 12px 0;
      }
      .property {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .color-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          .cololorSelect {
            width: 32px;
            height: 20px;
            overflow: hidden;
            position: relative;
            margin: 4px 0;
            .fix-box-1 {
              margin-top: -8px;
              margin-left: -8px;
              /deep/ .el-color-picker__trigger {
                width: 200px;
                height: 200px;
              }
            }
          }
        }
        .line-width {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 8px;
          position: relative;
        }
        span {
          font-size: 12px;
          color: #1f2429;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>