<template>
  <div id="attr-select">
    <!--选中-->
    <div class="attr-select" v-if="type==='line'">
      <span class="grid-title">外观</span>
      <div class="row">
        <div class="row-tit">线宽</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
        </div>
      </div>
      <div class="row">
        <div class="row-tit">线型</div>
        <a-select
          style="width: 208px"
          :default-value="borderLineOption[0].id"
          @change="handleChange"
        >
          <a-select-option
            v-for="item in borderLineOption"
            :key="item.id"
            :label="item.src"
            :value="item.id"
          >
            <img :src="item.src" alt />
          </a-select-option>
        </a-select>
      </div>
    </div>
    <!--文字内容-->
    <div class="attr-select" v-if="type==='text'">
      <span class="grid-title">文字内容</span>
      <div class="grid-content">
        <a-textarea
          placeholder="请在此处输入文字！"
          v-model="textMsg"
          allow-clear
          @change="changeTextArea"
          :rows="4"
        />
      </div>
      <span class="grid-title">外观</span>
      <div class="row">
        <div class="row-tit">字号</div>
        <div class="grid-content">
          <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
        </div>
        <div class="color-choice">
          <swatches v-model="fontColor" popover-x="left" @close="changeFontColor" />
        </div>
      </div>
      <div class="row">
        <div class="row-tit">背景色</div>
        <div class="color-choice">
          <swatches v-model="backColor" popover-x="left" @close="changebackColor"  />
        </div>
      </div>
    </div>
    <!--图片-->
    <div class="attr-select" v-if="type==='images'">
      <span class="grid-title">文字内容</span>
      <section class="grid">
        <div class="grid-content">
          <a-upload-dragger
            name="file"
            :customRequest="customRequest"
            action="https://jsonplaceholder.typicode.com/posts/"
            @change="changeImage"
          >
            <p class="icon-image">
              <a-icon type="cloud-upload" />
            </p>
            <p class="ant-upload-text">将图片拖动到这里替换</p>
            <p class="ant-upload-hint">本地上传</p>
          </a-upload-dragger>
        </div>
      </section>
      <span class="grid-title">外观</span>
      <div class="row">
        <div class="row-tit">边框</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="color" popover-x="left" />
        </div>
      </div>
    </div>

    <!--针对“设备/位置/管线/分区”属性示例-->
    <div
      class="attr-select"
      v-if="type =='equipment' || type =='pipeline' ||type == 'fire-area' ||type == 'position'"
    >
      <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
      <div class="row" v-if="type == 'fire-area'">
        <swatches :swatches="swatchess" v-model="color" inline></swatches>
      </div>
      <div class="row">
        <div class="row-tit">名称显示</div>
        <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
      </div>
      <div class="row">
        <a-input />
      </div>
      <div class="row">
        <div class="row-tit">字号</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="color" popover-x="left" />
        </div>
      </div>
      <!-- 当为设备状态时 -->
      <div class="row" v-if="type =='equipment'">
        <div class="row-tit">数量</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            @change="changeLineWidth"
            style="width: 208px"
          />
        </div>
      </div>
      <!-- 当为管道状态时 -->
      <div class="row" v-if="type =='pipeline'">
        <div class="row-tit">线宽</div>
        <div class="grid-content">
          <a-input-number
            v-model="lineWidth"
            :min="1"
            @change="changeLineWidth"
            style="width: 208px"
          />
        </div>
      </div>
    </div>
    <!--设备/工程信息化ID/工程信息化中的位置类型-->
    <div
      class="attr-select attr-select-bottom"
      v-if="type =='equipment' || type =='pipeline' || type =='fire-area' ||type == 'position'"
    >
      <div class="row">
        <span>{{`工程信息化ID`}}</span>
        <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
      </div>

      <div class="grid-content">
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
        <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
      </div>
    </div>
    <!--    快捷操作提示-->
    <div style="position: fixed;bottom: 0;width: 280px;">
      <a-collapse :bordered="false" expand-icon-position="right">
        <template #expandIcon="props">
          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0" />
        </template>
        <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
          <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <editDialog ref="dialog" />
  </div>
</template>

<script>
import editDialog from "./edit-dialog";
import Swatches from "vue-swatches";
import bus from "@/bus";
import "vue-swatches/dist/vue-swatches.css";
import { ItemColor } from "@saga-web/big/lib";
import { uploadImg } from "@/api/editer.js";
export default {
  name: "attr_select",
  props: ["type", "focusItemList"],
  components: { editDialog, Swatches },
  data() {
    return {
      precisionList: [{ value: 10 }, { value: 20 }, { value: 30 }],
      precision: true,
      customStyle:
        "background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
      keyboardOperation: [
        { value: "拖动画布：" },
        { value: "加选对象：" },
        { value: "确认操作：" },
        { value: "取消对象：" }
      ],
      numberValue: 3,
      fontSize: 12, //字体大小
      lineWidth: 0,
      textMsg: "", //
      color: "#1CA085",
      fontColor: "#1CA085", //文字颜色
      borderColor: "", // 边框颜色 直线，折线，多边形等
      backColor:'', //背景色 用于text文字
      borderLineOption: [
        {
          id: "solid",
          src: require("@/assets/images/1pxline.jpg")
        },
        {
          id: "dashed",
          src: require("@/assets/images/dashedLine.jpg")
        },
        {
          id: "dotted",
          src: require("@/assets/images/dotLine.jpg")
        }
      ],
      linepxOption: [
        {
          id: 1,
          src: require("@/assets/images/1pxline.jpg")
        },
        {
          id: 2,
          src: require("@/assets/images/2pxline.jpg")
        },
        {
          id: 3,
          src: require("@/assets/images/3pxline.jpg")
        }
      ],
      editStatus: {
        equipment: "编辑设备",
        pipeline: "管道编辑",
        "fire-area": "编辑区域",
        position: "编辑区域"
      },
      swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"]
    };
  },
  methods: {
    onChange(e) {
      this.precision = e.target.checked === true ? false : true;
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    changeNumber() {
      bus.$emit("changeFont", this.fontSize);
    },
    // 改变字体大小
    changeFont() {
      bus.$emit("changeFont", this.fontSize);
    },
    // 改变线宽
    changeLineWidth() {
      bus.$emit("changeLineWidth", this.lineWidth);
    },
    // 改变文案
    changeTextArea() {
      bus.$emit("changeText", this.textMsg);
    },
    // 改变线的颜色
    changeBorderColor(color) {
      bus.$emit("changeBorderColor", color);
    },
    // 改变字体颜色
    changeFontColor(color) {
      bus.$emit("changeFontColor", color);
    },
    changebackColor(color){
      bus.$emit("changebackColor", color);
    },
    customRequest(info){
      const formData = new FormData()
      formData.append('file', info.file)
      const postParams = formData;
      uploadImg({ postParams }).then(res => {
        if (res.Result == 'success') {
          bus.$emit('upadataImageUrl',res.EntityList[0])
          // this.$set(this.ruleForm, 'Url', res.EntityList[0])
          this.$message.success(`${info.file.name} file uploaded successfully.`);
        }else{
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      })
    },
    changeImage(info) {
      const status = info.file.status;
      console.log(status);
      if (status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    handleEdit() {
      this.$refs.dialog.showModal();
    }
  },
  watch: {
    focusItemList: function(newval) {
      const Item = newval.itemList[0];
      if (newval.itemList.length == 1) {
        if (newval.itemType == "text") {
          this.textMsg = Item.text;
          this.fontSize = Item.font.size;
          this.fontColor = Item.color;
          this.backColor = Item.backgroundColor;
        } else if (newval.itemType == "line") {
          this.lineWidth = Item.lineWidth;
          this.borderColor = Item.strokeColor;
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.attr-select {
  padding: 12px 16px;
  box-sizing: border-box;
  .grid-title {
    font-size: 12px;
    color: #8d9399;
  }
  .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    .color-choice {
      & /deep/ .vue-swatches__trigger {
        width: 26px !important;
        height: 26px !important;
        border-radius: 0px !important;
      }
    }
    .row-tit {
      color: #1f2429;
      font-size: 14px;
    }
  }
  .grid {
    margin: 10px 15px;
    .grid-title {
      font-size: 12px;
      color: #8d9399;
    }
  }

  .grid-content {
    // margin-top: 10px;
    position: relative;
  }

  .icon-image {
    font-size: 25px;
  }

  .edit-option-btn {
    float: right;
    margin-top: -5px;
  }

  .attr-card {
    width: 250px;
    margin-bottom: 10px;
    white-space: normal;
    box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
    border-radius: 4px;
  }

  .ant-upload.ant-upload-drag p.ant-upload-text {
    font-size: 14px;
    color: #c3c7cb;
  }

  .ant-upload.ant-upload-drag p.ant-upload-hint {
    color: #0091ff;
  }
}
#attr-select {
  width: 100%;
  height: 100%;
  .attr-select-bottom {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto;
    padding-bottom: 400px;
  }
}
</style>