<template>
  <div id="paper">
    <div class="title">背景</div>
    <ul>
      <!-- <li>
        <div class="property">
          <div class="color-box">
            <span>页面尺寸</span>
            <el-button-group>
              <el-button type="primary" icon="el-icon-edit"></el-button>
              <el-button type="primary" icon="el-icon-share"></el-button>
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </div>
        </div>
      </li> -->
      <li>
        <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>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
import bus from "@/bus/bus";
export default {
  data() {
    return {
      color: "",
    };
  },
  computed: {
    ...mapState(["viewBackground"]),
  },
  watch: {
    viewBackground: function (val) {
      if (val) {
        this.color = val;
      }
    },
  },
  methods: {
    changeColor(val) {
      bus.$emit("changeBackgroundColor", val);
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#paper {
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
    line-height: 47px;
    font-weight: bold;
  }
  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: start;
        .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>
