<!-- 基本图片的属性框 -->
<template>
  <div class="base-image">
    <div class="title">属性</div>
    <ul>
      <li>
        <div class="small-title">尺寸大小</div>
        <div class="property">
          <div>
            <span>W</span>
            <el-input
              style="width: 74px; margin-left: 6px"
              size="mini"
              v-model="width"
              @input="changeWidth"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div>
            <span>H</span>
            <el-input
              style="width: 74px; margin-left: 6px"
              size="mini"
              v-model="height"
              @input="changeHeight"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-link"></i>
          </el-upload>
        </div>
      </li>
      <li>
        <div class="small-title">边框</div>
        <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 class="line-width">
            <el-input-number
              style="width: 80px"
              v-model="linewidth"
              controls-position="right"
              @change="changeLineWidth"
              size="mini"
              :min="1"
              :max="20"
              :maxlength="100"
            ></el-input-number>
            <span>线宽</span>
          </div>
          <div class="line-width">
            <a-select
              style="width: 80px"
              v-model="linestyle"
              :default-value="borderLineOption[0].id"
              @change="changeLineStyle"
            >
              <a-select-option
                v-for="item in borderLineOption"
                :key="item.id"
                :label="item.src"
                :value="item.id"
              >
                <img :src="item.src" alt width="60" />
              </a-select-option>
            </a-select>
            <span>线型</span>
          </div>
        </div>
      </li>
      <li>
        <div class="small-title">图片</div>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <el-button size="small" plain>点击上传</el-button>
        </el-upload>
      </li>
      <li v-show="isSvg">
        <div class="small-title">滤镜（只针对svg）</div>
        <div class="color-box">
          <div class="cololorSelect">
            <el-color-picker
              show-alpha
              @change="changeFilterColor"
              class="fix-box-1"
              v-model="filterColor"
            ></el-color-picker>
          </div>
          <span>颜色</span>
        </div>
      </li>
      <li v-show="isSvg">
        <div class="small-title">旋转角度</div>
        <div>
          <span>度</span>
          <el-input
            style="width: 74px; margin-left: 6px"
            size="mini"
            v-model="rotate"
            @input="changeRotate"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import bus from "@/bus/bus";
//////////////////////////////////////
// 常量
// 图服务路径
const imgBaseUrl = window.__systemConf.imgServeUri;
// 图上传路径
const imgServeUpload = window.__systemConf.imgServeUpload;
import { uploadGroup, getImageGroup } from "@/api/editer";
export default {
  props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "isSvg", "Rotate"],
  data() {
    return {
      width: 0,
      height: 0,
      color: "#cccccc", //颜色
      linewidth: 1,
      borderLineOption: [
        {
          id: "Solid",
          src: require("@/assets/images/solidLine.png"),
        },
        {
          id: "Dashed",
          src: require("@/assets/images/dashedLine.png"),
        },
        {
          id: "Dotted",
          src: require("@/assets/images/dotLine.png"),
        },
      ],
      linestyle: "solid",
      url: "",
      filterColor: "",
      rotate: 0, // 对象旋转角度
    };
  },
  methods: {
    changeHeight(val) {
      bus.$emit("updateStyle", "height", val);
    },
    changeWidth(val) {
      bus.$emit("updateStyle", "width", val);
    },
    changeLineWidth(val) {
      bus.$emit("updateStyle", "lineWidth", val);
    },
    // 改变线样式
    changeLineStyle(val) {
      bus.$emit("updateStyle", "lineStyle", val);
    },
    // 改变颜色
    changeColor(val) {
      bus.$emit("updateStyle", "strokeColor", val);
    },
    // 改变旋转角度
    changeRotate(val) {
      if (val.length > 0 && !isNaN(Number(val))) {
        if (val > 360) {
          val = 360;
        } 
        if (val < -360) {
          val = -360;
        }
        bus.$emit("updateStyle", "rotate", Number(val));
      }
    },
    beforeAvatarUpload(file) {
      let that = this;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file); //读取图片
      const ftype = file.type;
      const fname = file.name;
      const uploadKey = file.uid;
      const imgType = ftype.split(".")[ftype.length - 1];
      fileReader.addEventListener("load", function () {
        // 读取完成
        let res = fileReader.result;
        //将canvas的base64位图片转换成图片png的file
        var blob = that.dataURLtoBlob(res, ftype);
        //将其转换成file对象
        let file = new File([blob], fname, {
          type: ftype,
          lastModified: Date.now(),
        }); //blob转file

        // try sending
        let reader = new FileReader();
        let fileType = file.name.split(".");
        let imgType = fileType[fileType.length - 1];
        let CreateTime = that.formatDate(new Date(file.lastModified));
        reader.onloadend = function () {
          // 这个事件在读取结束后，无论成功或者失败都会触发
          if (reader.error) {
          } else {
            // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
            var xhr = new XMLHttpRequest();
            xhr.open(
              /* method */
              "POST",
              /* target url */
              imgServeUpload + uploadKey + "." + imgType
            );
            xhr.send(reader.result);
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                  that.url = uploadKey + "." + imgType;
                  bus.$emit("updateStyle", "url", uploadKey + "." + imgType);
                }
              }
            };
          }
        };
        reader.readAsArrayBuffer(file);
      });
    },
    dataURLtoBlob(dataURI, type) {
      var binary = atob(dataURI.split(",")[1]);
      var array = [];
      for (var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], { type: type });
    },
    formatDate(now) {
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        (date > 10 ? date : "0" + date) +
        " " +
        hour +
        ":" +
        (minute > 10 ? minute : "0" + minute) +
        ":" +
        (second > 10 ? second : "0" + second)
      );
    },
    // 改变图片滤镜颜色
    changeFilterColor(val) {
      bus.$emit("updateStyle", "filterColor", val);
    },
  },

  watch: {
    strokeColor(val) {
      this.color = val;
    },
    lineWidth(val) {
      this.linewidth = val;
    },
    lineStyle(val) {
      this.linestyle = val;
    },
    Width(val) {
      this.width = val;
    },
    Height(val) {
      this.height = val;
    },
    Url(val) {
      this.url = val;
    },
    Rotate(val) {
      this.rotate = val;
    }
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.base-image {
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  ul {
    width: calc(~"100% - 24px");
    margin: -1px 12px 0 12px;
    li {
      border-top: 1px solid #979797;
      margin-bottom: 16px;
      .small-title {
        font-size: 12px;
        color: #8d9399;
        margin: 12px 0;
      }
      .property {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .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>