<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="menueSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="display:flex"
    >
      <el-submenu index="1">
        <template slot="title">文件</template>
        <el-menu-item index="new">新建文件</el-menu-item>
        <el-menu-item index="open">打开文件...</el-menu-item>
        <el-menu-item index="save">保存</el-menu-item>
        <el-menu-item index="donwloadJson">下载JSON文件</el-menu-item>
        <el-menu-item index="donwloadPNG">下载为PNG</el-menu-item>
        <el-menu-item index="donwloadSVG">下载为SVG</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">编辑</template>
        <el-menu-item index="undo">撤销 Ctrl + X</el-menu-item>
        <el-menu-item index="redo">恢复 Ctrl + Shift+ Z</el-menu-item>
        <el-menu-item index="cut" divided>剪切 Ctrl + X</el-menu-item>
        <el-menu-item index="copy">复制 Ctrl + C</el-menu-item>
        <el-menu-item index="paste">粘贴 Ctrl + V</el-menu-item>
      </el-submenu>
      <div style="display: flex;  flex: 1;  float: right;  justify-content: flex-end;">
        <el-menu-item>
          <div>
            <span>画板背景颜色:</span>
            <el-color-picker
              v-model="paintColor"
              size="small"
              :predefine="predefineColors"
              :active-change="setPaintColor(paintColor)"
            ></el-color-picker>
            <el-divider direction="vertical"></el-divider>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div>
            <span>元素默认颜色:</span>
            <el-color-picker
              v-model="elementColor"
              size="small"
              :predefine="predefineColors"
              :active-change="setElementColor(elementColor)"
            ></el-color-picker>
            <el-divider direction="vertical"></el-divider>
          </div>
        </el-menu-item>
        <el-menu-item>
          <el-dropdown>
            <span class="el-dropdown-link">
              连线样式:
              <i
                :class="'iconfont icon-'+lineStyleName"
                style="color: #03A9F4;font-size: 35px;"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in lineStyleNames" :key="item.name">
                <p @click="setLineStyleName(item.value)">
                  <span>{{item.name}}：</span>
                  <i :class="'iconfont icon-'+item.value" style="color:#03A9F4;font-size: 30px;"></i>
                </p>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
        </el-menu-item>
        <el-menu-item>
          <el-dropdown>
            <span class="el-dropdown-link">
              起点箭头:
              <i
                :class="'iconfont icon-from-'+fromArrowType"
                style="color: #03A9F4;font-size: 35px;"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in arrowTypes" :key="item">
                <i
                  :class="'iconfont icon-from-'+item"
                  style="color:#03A9F4;font-size: 35px;"
                  @click="setFromArrowType(item)"
                ></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
        </el-menu-item>
        <el-menu-item>
          <el-dropdown>
            <span class="el-dropdown-link">
              终点箭头:
              <i
                :class="'iconfont icon-to-'+toArrowType"
                style="color: #03A9F4;font-size: 35px;"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in arrowTypes" :key="item">
                <i
                  :class="'iconfont icon-to-'+item"
                  style="color:#03A9F4;font-size: 35px;"
                  @click="setToArrowType(item)"
                ></i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
        <el-menu-item>
          <i
            :class="!isLock ? 'el-icon-unlock':'el-icon-lock'"
            @click="menueSelect('lock',isLock ? 0 : 1);isLock=!isLock"
          ></i>
        </el-menu-item>
        <el-menu-item>
          <a @click=";">
            <i class="el-icon-view"></i>预览
          </a>
        </el-menu-item>
        <el-menu-item>
          <div>
            <el-divider direction="vertical"></el-divider>
            <span>视图 : {{ scale * 100 | number }}%</span>
            <a v-if="scale != 1" @click="menueSelect('scale', 1)" style="padding-left: 20px;">还原</a>
          </div>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<style lang="css">
.el-color-picker__trigger {
  padding: 0 !important;
  border: 0px !important;
}
.el-color-picker__icon {
  display: none !important;
}
.el-color-picker__empty {
  display: none !important;
}
</style>
<style scope>
.menuright {
  display: flex;
  flex: 1;
  float: right;
  justify-content: flex-end;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fefeff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script>

import { Store } from "le5le-store";
import store from '@/store/index'


export default {
  data()  
  {
    return {
      lineStyleNames: this.$store.state.designsetting.lineStyleNames,
      arrowTypes: this.$store.state.designsetting.arrowTypes,
      predefineColors: this.$store.state.designsetting.predefineColors,
      paintColor: this.$store.state.designsetting.paintColor,
      elementColor: this.$store.state.designsetting.elementColor,
      isLock: false,
    }
  },
  computed:
  {
    scale()
    {
      return this.$store.state.canvas.data.scale;
    },
    lineStyleName()
    {
      return this.$store.state.designsetting.lineStyleName;
    },
    fromArrowType()
    {
      return this.$store.state.designsetting.fromArrowType;
    },
    toArrowType()
    {
      return this.$store.state.designsetting.toArrowType;
    },
    vPaintColor()
    {
      return this.$store.state.designsetting.paintColor;
    }
    ,
    velementColor()
    {
      return this.$store.state.designsetting.elementColor;
    }
  },
  watch:
  {
    vPaintColor(newV, oldV)
    {
      let tmpe = newV.length == 9 ? '#' + newV.substring(3, 6) : newV;
      if (this.paintColor != tmpe) {
        this.paintColor = tmpe;
      }
    },
    velementColor(newV, oldV)
    {
      let tmpe = newV.length == 9 ? '#' + newV.substring(3, 6) : newV;
      if (this.elementColor != tmpe) {
        this.elementColor = tmpe;
      }
    }
  },
  methods: {
    setLineStyleName(styleName)
    {
      this.$store.dispatch('setLineStyleName', styleName);
    },
    setFromArrowType(fromArrowType)
    {
      this.$store.dispatch('setFromArrowType', fromArrowType);
    },
    setToArrowType(toArrowType)
    {
      this.$store.dispatch('setToArrowType', toArrowType);
    },
    setPaintColor(paintColor)
    {
      this.$store.dispatch('setPaintColor', paintColor);
      this.$emit("onMessage", 'refresh', '');
    },
    setElementColor(elementColor)
    {
      this.$store.dispatch('setElementColor', elementColor);
      this.$emit("onMessage", 'setElementColor', elementColor);
    },


    jumpToView()
    {
      this.$router.push({
        path: "/viewer",
        query: {
          id: "example.json"
        }
      })
    },

    menueSelect(key, keyPath)    
    {
      if (key && key != "") {
        this.$emit("onMenu", key, keyPath);
      }
    },

  },
  filters:
  {
    //保留2位小数点过滤器 不四舍五入
    number(value)
    {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    }
  }
};
</script>



