<template>
  <ul class="tool layer-edit-tool">
    <!-- shape的设置 -->
    <template v-if="baseType==='shape'">
      <li class="disabled" v-show="!isActiveEl"></li>
      <li class="tool-item" style="border: 1px solid #DBDCDD;padding: 0 6px;border-radius: 4px;">
        <el-tooltip class="item" effect="dark" content="边框粗细" placement="top">
          <el-select v-model="elInfo.outline.width">
            <el-option
              v-for="item in layerEditOptions.stokeSize"
              :key="item"
              :label="item"
              :value="item">
              <div style="min-width:50px;">
                <span>{{ item }}</span>
              </div>
            </el-option>
          </el-select>
        </el-tooltip>
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="边框样式" placement="top">
          <el-dropdown trigger="click" @command="setShapeStyle">
            <div class="el-dropdown-link">
              <img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
              <i class="el-icon-arrow-down" style="font-size:12px;"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="dashed"
                class="layeredit-dropdown-item"
                :style="elInfo.outline.style==='dashed'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
              <el-dropdown-item command="solid"
                class="layeredit-dropdown-item"
                :style="elInfo.outline.style==='solid'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                  <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="边框颜色" placement="top">
          <el-color-picker
            v-model="elInfo.outline.color"
            size="mini"
            show-alpha
            :predefine="layerEditOptions.colorsOptions"
          />
        </el-tooltip>	
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="填充颜色" placement="top">
          <el-color-picker
          v-model="elInfo.fill"
          size="mini"
          show-alpha
          :predefine="layerEditOptions.colorsOptions"
        />
        </el-tooltip>
      </li>
    </template>
    <!-- line的设置 -->
    <template v-if="baseType==='line'">
      <li class="disabled" v-show="!isActiveEl"></li>
      <li class="tool-item" style="border: 1px solid #DBDCDD;padding: 0 6px;border-radius: 4px;">
        <el-tooltip class="item" effect="dark" content="线条粗细" placement="top">
          <el-select v-model="elInfo.strokeWidth">
            <el-option
              v-for="item in layerEditOptions.stokeSize"
              :key="item"
              :label="item"
              :value="item">
              <div style="min-width:50px;">
                <span>{{ item }}</span>
              </div>
            </el-option>
          </el-select>
        </el-tooltip>
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="线条样式" placement="top">
          <el-dropdown trigger="click" @command="setLineStyle">
            <div class="el-dropdown-link">
              <img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
              <i class="el-icon-arrow-down" style="font-size:12px;"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="dashed"
                class="layeredit-dropdown-item"
                :style="elInfo.style==='dashed'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
              <el-dropdown-item command="solid"
                class="layeredit-dropdown-item"
                :style="elInfo.style==='solid'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                  <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="线条箭头" placement="top">
          <el-dropdown trigger="click" @command="setLinePointsStyle">
            <div class="el-dropdown-link">
              <img src="~@/assets/icons/arrow.svg" width="20" height="20" style="vertical-align: middle;">
              <i class="el-icon-arrow-down" style="font-size:12px;"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="end"
                class="layeredit-dropdown-item"
                :style="elInfo.points[1]==='arrow'&&elInfo.points[0]!=='arrow'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                <i class="iconfont icon-arrow-right" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
              <el-dropdown-item command="start"
                class="layeredit-dropdown-item"
                :style="elInfo.points[0]==='arrow'&&elInfo.points[1]!=='arrow'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                  <i class="iconfont icon-arrow-left" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
              <el-dropdown-item command="both"
                class="layeredit-dropdown-item"
                :style="elInfo.points[0]==='arrow'&&elInfo.points[1]==='arrow'?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                  <i class="iconfont icon-arrow-both" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
              <el-dropdown-item command="none"
                class="layeredit-dropdown-item"
                :style="elInfo.points[0]===''&&elInfo.points[1]===''?'background-color: #ecf5ff !important;color: #66b1ff !important;':''"
              >
                  <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-tooltip>
      </li>
      <li class="tool-item">
        <el-tooltip class="item" effect="dark" content="线条颜色" placement="top">
          <el-color-picker
            v-model="elInfo.color"
            size="mini"
            show-alpha
            :predefine="layerEditOptions.colorsOptions"
          />
        </el-tooltip>	
      </li>
    </template>
    <!-- text的设置 -->
    <template v-if="baseType==='text'">
      <li class="tool-item editor">
        <div class="layer-text-toolbar"></div>
        <p v-if="!isActiveEl">请选择文本元素</p>
      </li>
    </template>
  </ul>
</template>

<script>
import '@/assets/icons/iconfont.css';
import {layerEditOptions} from '../../utils/config';
export default {
  props:{
    elInfo:{//当前选中的图层元素或预设值
      type:Object,//可能是BaseRectShape|BaseLineShape|BaseTextShape
    },
    baseType:{//根据type决定展示的Tool有哪些
      type:String,//line shape text
    },
    isActiveEl:{//elInfo是不是当前选中的图层元素
      type:Boolean,
    }
  },
  data() {
    return {
      layerEditOptions:layerEditOptions,
    };
  },
  methods: {
    setShapeStyle(style){
      this.elInfo.outline.style = style
    },
    setLineStyle(style){
      this.elInfo.style = style
    },
    setLinePointsStyle(style){
      if(style==='start'){
        this.elInfo.points[0] = 'arrow'
        this.elInfo.points[1] = ''
      }
      if(style==='end'){
        this.elInfo.points[1] = 'arrow'
        this.elInfo.points[0] = ''
      }
      if(style==='both'){
        this.elInfo.points[0] = 'arrow'
        this.elInfo.points[1] = 'arrow'
      }
      if(style==='none'){
        this.elInfo.points[0] = ''
        this.elInfo.points[1] = ''
      }
    }
  },
};
</script>
<style lang="scss">
.layer-edit-tool{
  .tool-item{
    .tox-menu.tox-swatches-menu.tox-selected-menu{
      left:auto !important;
    }
    .el-select {
      .el-input__inner {
        border: none;
        height: 28px;
        padding: 0;
        line-height: 28px;
        width: 45px;
        background: transparent;
      }
      .el-input__suffix {
        top: -5px;
        right: -5px;
        .el-select__caret {
          transform: rotateZ(0);
        }
        .el-icon-arrow-up:before {
          content: "\e6df";
          font-size: 12px;
          color: #333;
        }
      }
    }
    .el-color-picker {
      display: block;
      &.el-color-picker--mini {
        height: 20px;
      }
      .el-color-picker__trigger {
        width: 40px;
        height: 20px;
        padding: 0;
        border: 0;
      }
    }
    .el-color-picker__icon {
      color: #333;
      left: 115%;
      font-size: 16px;
      &:before {
        content: '\e6df';
        font-size: 12px;
      }
    }
    .layer-text-toolbar{
      .tox-menu{
        max-height: 200px !important;
      }
    }
  }
}
.layeredit-dropdown-item{
  &:hover {
    background-color: #F5F7FA  !important;
    color: #606266 !important;
  }
}
</style>
<style scoped lang="scss">
.tool{
  display: flex;
  align-items: center;
  position: relative;
  .tool-item{
    margin-right: 20px;
    &:hover{
      cursor: pointer;
    }
    &.editor{
      margin-right: 0;
      /* margin-bottom: 50px; */
    }
  }
  .disabled {
    color: #bbb;
    background: rgba(0, 0, 0, 0.08);
    cursor: not-allowed;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>
