<!-- 设备信息点详情 -->
<template>
  <div id="equip-msg">
    <div class="title">{{ name ? name : "--" }}</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="属性" name="first">
        <div class="property">
          <ul>
            <li>
              <div class="small-title">文本</div>
              <div class="property">
                <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 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
                      @change="changeBackground"
                      show-alpha
                      class="fix-box-1"
                      v-model="backgroundcolor"
                    ></el-color-picker>
                  </div>
                  <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>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="信息点" name="second">
        <ul class="msg">
          <li>
            <div class="msg-name">全局编码</div>
            <Input
              :width="220"
              v-model="equipId"
              placeholder="请输入全局编码"
              @input="boxInput('equipId')"
              name="persager"
              disabled
              class="msg-input"
              :title="equipId"
            />
          </li>
          <li>
            <div class="msg-name">信息点编码</div>
            <Input
              :width="220"
              v-model="id"
              disabled
              placeholder="请输入信息点编码"
              @input="boxInput('id')"
              name="persager"
              :title="id"
              class="msg-input"
            />
          </li>
          <li>
            <div class="msg-name">信息点名称</div>
            <Input
              :width="220"
              v-model="name"
              placeholder="请输入信息点名称"
              @input="boxInput('name')"
              name="persager"
              class="msg-input"
            />
          </li>
          <li>
            <div class="msg-name">数据格式</div>
            <Input
              :width="220"
              v-model="dataFormat"
              placeholder="请输入数据格式"
              @input="boxInput('dataFormat')"
              name="persager"
              class="msg-input"
            />
          </li>
          <li>
            <div class="msg-name">实时值</div>
            <Input
              :width="220"
              v-model="currentData"
              placeholder="请输入实时值"
              @input="boxInput('currentData')"
              name="persager"
              class="msg-input"
            />
          </li>
          <li>
            <div class="msg-name">单位</div>
            <Input
              :width="220"
              v-model="unit"
              placeholder="请输入单位"
              @input="boxInput('unit')"
              name="persager"
              class="msg-input"
            />
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import bus from "@/bus/bus";
import { rgbaNum } from "@persagy-web/big-edit/lib/until";
import { SFont,SColor } from '@persagy-web/draw/lib';
export default {
  props: ["EquipMsgData","strokeColor", "fontSize", "backgroundColor","curTextItem"],
  data() {
    return {
      equipId: "", //全局id
      id: "", // 信息点id
      name: "", //信息点名称
      unit: "", // 信息点的单位
      dataFormat: "", //数据格式
      currentData: "", //实时值
      activeName: "first",
      color :'',
      size :'',
      backgroundcolor:''
    };
  },
  mounted() {},
  methods: {
    // 改变颜色
    changeColor(val) {
      const colorlist = rgbaNum(val);
      const styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
      this.curTextItem.color =  styleValue;
    },
    // 改变背景颜色
    changeBackground(val) {
      const colorlist = rgbaNum(val);
      const styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
      this.curTextItem.backgroundColor = styleValue
    },
    // 改变字体大小
    changeFontSize(val) {
      const styleValue = new SFont("sans-serif", val)
      this.curTextItem.font =  styleValue
    },
    boxInput() {
      const EquipMsgData = {
        equipId: this.equipId,
        id: this.id,
        name: this.name,
        unit: this.unit,
        currentData: this.currentData,
        dataFormat: this.dataFormat,
      };
      this.$emit("changeEquipMsgData", EquipMsgData);
    },
    // 点击切换
    handleClick(tab, event) {
      // 设置高度
      if (tab.paneName == "second") {
        const box = document.getElementsByClassName("msgPoint-list")[0];
        const box2 = document.getElementsByClassName("msgPoint-list-press")[0];
        box.style.height = this.equipHeight;
        box2.style.height = this.equipHeight;
      }
    },
  },
  watch: {
    EquipMsgData(val) {
      this.equipId = val.equipId;
      this.id = val.id;
      this.name = val.name;
      this.unit = val.unit ? val.unit : "";
      this.currentData = val.currentData ? val.currentData : "";
      this.dataFormat = val.dataFormat ? val.dataFormat : "";
      // 文本属性
    },
     strokeColor(val) {
      this.color = val;
    },
    fontSize(val) {
      this.size = val;
    },
    backgroundColor(val) {
      this.backgroundcolor = val;
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li,
p {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#equip-msg {
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  .msg {
    padding: 12px;
    box-sizing: border-box;
    li {
      width: 100%;
      .msg-name {
        color: #8d9399;
        font-size: 16px;
        margin-bottom: 8px;
      }
      .msg-input {
        margin: 8px 0 16px 0;
      }
    }
  }
    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>