<template>
  <div  class="filemain">
    <el-tabs @tab-click="tabClick" type="card">
      <div class="filemainbar">
        <div class="row-item">
          <span>页面路径</span>
          <el-input size="mini" value placeholder="/" v-model="page.path" ></el-input>
          <!-- @focus="centerDialogVisible = true" -->
        </div>
        <div class="row-item">
          <span>页面名称</span>
          <el-input size="mini" value placeholder="页面名称" v-model="page.name" ></el-input>
        </div>
        <div class="row-item">
          <span style="width: 23%;">元素默认颜色</span>
          <el-color-picker
            size="small"
            v-model="elementColor"
            :predefine="predefineColors"
            @active-change="setElementColor(elementColor)"
            @change="setElementColor(elementColor)"
          ></el-color-picker>
        </div>

        <div class="row-item">
          <span style="width: 23%;">画板背景色</span>
          <el-color-picker
            size="small"
            v-model="paintColor"
            :predefine="predefineColors"
            @active-change="setPaintColor(paintColor)"
            @change="setPaintColor(paintColor)"
          ></el-color-picker>
        </div>
      </div>

      <div class="row-item">
        <span style="width: 23%;">背景网格</span>
        <el-switch
          v-model="isShowGrid"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="true"
          inactive-value="false"
          @change="showGrid(isShowGrid)"
        ></el-switch>
      </div>

      <div class="tips">
        <span>小提示</span>
        <ul>
          <li>方向键：控制节点移动5个像素</li>
          <li>Ctrl + 方向键：控制节点移动1个像素</li>
          <li>Ctrl + 鼠标移动：移动整个画布</li>
          <li>Ctrl + 鼠标滚轮：缩放</li>
        </ul>
      </div>

      <!--
          <el-tab-pane label=" 外观" name="A">
    </el-tab-pane>

    <el-tab-pane label="动效" name="B">
      <div class="disflex"></div>
    </el-tab-pane>
    <el-tab-pane label="数据" name="C">
      <div class="disflex"></div>
    </el-tab-pane>



        <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      append-to-body="true"
      width="80%"
      center
    >
      <treepath />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
      -->
    </el-tabs>
  </div>
</template>

<style lang="css" scoped>
.filemain{
  width: 100%;
  display: flex;
  box-sizing: border-box;
}
.filemainbar {
  width: 100%;
  padding: 0 10px;
}
.row-item {
  width: 100%;
  margin-top: 10px;
  font-size: 10px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.row-item span {
  display: inline-flex;
  width: 30%;
}
.tips {
  font-size: 10px;
  padding: 0 10px;
}
.tips span {
  display: inline-flex;
  width: 100%;
  border-bottom: 1px solid rgb(32, 32, 32);
  padding: 10px 0;
  margin-bottom: 10px;
}
.tips ul li {
  padding: 3px 0;
}
</style>

<script>
import treepath from './treepath'
export default {
  props: ["canvas", "page"],
  data()  
  {
    return {
      predefineColors: this.$store.state.designsetting.predefineColors,
      paintColor: this.$store.state.designsetting.paintColor,
      elementColor: this.$store.state.designsetting.elementColor,
      isShowGrid: false,
    }
  },
  components: {
    treepath
  },
  methods: {
    tabClick()
    {
      console.log("tabclick");
    },
    setPaintColor(paintColor)
    {
      this.$store.dispatch('setPaintColor', paintColor);
      this.$emit("onMessage", 'refresh', '');
      this.page.paintColor = paintColor;
    },
    setElementColor(elementColor)
    {
      this.$store.dispatch('setElementColor', elementColor);
      this.$emit("onMessage", 'setElementColor', elementColor);
      this.page.elementColor = elementColor;
    },
    showGrid(value)
    {
      console.log( this.page)
      console.log(this.isShowGrid)
      //this.$emit("onMessage", 'showGrid', value);
    },
  },
  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;
      }
    }
  },
  computed:
  {
    vPaintColor()
    {
      return this.$store.state.designsetting.paintColor;
    },
    velementColor()
    {
      return this.$store.state.designsetting.elementColor;
    }
  },
}
</script>
