<template>
  <div id="right_toolbar">
    <!-- 右侧侧编辑器 -->
    <a-tabs class="atabless" default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="属性">
        <div class="property">
          <!-- <ul class="formatting">
            <li v-for="(item,key) in poistionList" :key="key">
              <img
                v-show="!item.disable"
                :src="require(`./../../assets/images/${item.img}.png`)"
                alt
              />
              <img
                v-show="item.disable"
                :src="require(`./../../assets/images/${item.disableImg}.png`)"
                alt
              />
            </li>
          </ul>-->
          <ul class="position">
            <li v-for="(item,i) in msgList" :key="i">
              <a-input
                :disabled="item.disable"
                @change="changeStatus(item)"
                size="small"
                v-model="item.msg"
                placeholder
                :suffix="item.unit"
              />
            </li>
            <li>
              <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
            </li>
          </ul>
          <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="元素" force-render>
        <div class="element">
          <a-input-search placeholder="搜索" @search="onSearch" />
          <ul class="element-list">
            <li>
              <a-icon type="play-circle" />
              <span>电梯系统</span>
            </li>
          </ul>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import attrSelect from "@/components/edit/attr_select";
import bus from "@/bus";
const poistionList = [
  {
    name: "水平调整",
    disable: false,
    img: "t-level",
    disableImg: "t-level-d"
  },
  {
    name: "垂直调整",
    disable: true,
    img: "t-vertical",
    disableImg: "t-vertical-d"
  },
  {
    name: "居左调整",
    disable: false,
    img: "t-left",
    disableImg: "t-left-d"
  },
  {
    name: "居中调整",
    disable: false,
    img: "t-center",
    disableImg: "t-center-d"
  },
  {
    name: "居右调整",
    disable: false,
    img: "t-right",
    disableImg: "t-right-d"
  },
  {
    name: "居上调整",
    disable: false,
    img: "t-top",
    disableImg: "t-top-d"
  },
  {
    name: "上下居中调整",
    disable: false,
    img: "t-topandbottm",
    disableImg: "t-topandbottm-d"
  },
  {
    name: "居下调整",
    disable: false,
    img: "t-bottom",
    disableImg: "t-bottom-d"
  }
];
const msgList = [
  {
    msg: "",
    disable: false,
    name: "X",
    unit: "x"
  },
  {
    msg: "",
    disable: false,
    name: "Y",
    unit: "y"
  },
  {
    msg: "0°",
    disable: true,
    name: "",
    unit: ""
  },
  {
    msg: "",
    disable: false,
    name: "Width",
    unit: "w"
  },
  {
    msg: "",
    disable: false,
    name: "Height",
    unit: "h"
  }
];
// import Select from "@/components/Select/Select.vue";
export default {
  props: {
    focusItemList: {
      type: Object,
      default: function() {
        return [];
      },
      required: false
    }
  },
  components: {
    attrSelect
  },
  data() {
    return {
      poistionList,
      msgList,
      attrType: ""
    };
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    onSearch() {},
    // 改变状态
    changeStatus(item) {
      if (item.name == "Width") {
        bus.$emit("itemWidth", item.msg);
      } else if (item.name == "Height") {
        bus.$emit("itemHeight", item.msg);
      } else if (item.name == "X" || item.name == "Y") {
        let x,y=''
        this.msgList.forEach(t=>{
          if(t.name == 'X'){
                x = t.msg
          }else if(t.name == 'Y'){
                y = t.msg
          }
        })
        bus.$emit("itemPositon", x,y);
      }
    }
  },
  watch: {
    focusItemList: function(newVal) {
      this.attrType = newVal.itemType;
      if (newVal.itemList.length !== 1) {
        this.msgList.forEach(item => {
          if (item.name == "X") {
            item.msg = 0;
          }
          if (item.name == "Y") {
            item.msg = 0;
          }
          if (item.name == "Width") {
            item.msg = 0;
          }
          if (item.name == "Height") {
            item.msg = 0;
          }
        });
      } else {
        this.msgList.forEach(item => {
          const Item = newVal.itemList[0];
          if (item.name == "X") {
            item.msg = Item.mapToScene(
              Item.pos.x + Item.boundingRect().x,
              Item.pos.y + Item.boundingRect().y
            ).x;
          }
          if (item.name == "Y") {
            item.msg = Item.mapToScene(
              Item.pos.x + Item.boundingRect().x,
              Item.pos.y + Item.boundingRect().y
            ).y;
          }
          if (item.name == "Width") {
            item.msg = Item.boundingRect().width;
          }
          if (item.name == "Height") {
            item.msg = Item.boundingRect().height;
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#right_toolbar {
  width: 280px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
  .atabless {
    height: 100%;
    width: 100%;
  }
  .property {
    width: 100%;
    height: 100%;
    .formatting {
      display: flex;
      height: 50px;
      padding: 0 12px 0 12px;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-around;
      li {
        width: 16px;
        height: 16px;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
    .position {
      display: flex;
      padding: 0 12px 30px 12px;
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid #c3c7cb;
      flex-wrap: wrap;
      li {
        margin-top: 10px;
        width: 30%;
        margin-right: 8px;
        .lock {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }
  .element {
    margin: 0 12px 0 12px;
    .element-list {
      padding-top: 12px;
      box-sizing: border-box;
      li {
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 12px;
        box-sizing: border-box;
        color: #1f2429;
        &:hover {
          background: #f5f6f7;
        }
      }
    }
  }
}
</style>