<template>
  <div id="attr-select">
    <!--选中-->
    <div class="attr-select" v-if="type==='baseLine'">
      <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"
            :max="9"
            @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"
          v-model="borderStyle"
          :default-value="borderLineOption[0].id"
          @change="changeBorder"
        >
          <a-select-option
            v-for="item in borderLineOption"
            :key="item.id"
            :label="item.src"
            :value="item.id"
          >
            <img :src="item.src" alt width="180" />
          </a-select-option>
        </a-select>
      </div>
    </div>
    <!--文字内容-->
    <div class="attr-select" v-if="type==='baseText'">
      <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"
            :swatches="swatchesFont"
            popover-x="left"
            @close="changeFontColor"
          />
        </div>
      </div>
      <div class="row">
        <div class="row-tit">背景色</div>
        <div class="color-choice">
          <swatches
            v-model="backColor"
            :swatches="swatches"
            popover-x="left"
            @close="changebackColor"
          />
        </div>
      </div>
    </div>
    <!--图片-->
    <div class="attr-select" v-if="type=='baseImage'">
      <span class="grid-title">图片</span>
      <section class="grid">
        <div class="grid-content">
          <a-upload-dragger
            name="file"
            accept="image/*"
            :customRequest="customRequest"
            :showUploadList="false"
            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"
            :max="9"
            @change="changeLineWidth"
            style="width: 168px"
          />
        </div>
        <div class="color-choice">
          <swatches v-model="borderColor" popover-x="left" @close="changeBorderColor" />
        </div>
      </div>
    </div>

    <!--针对“设备/位置/管线/分区”属性示例-->
    <div class="attr-select" v-show="type =='Image'|| type == 'Line' || type == 'Zone'">
      <div v-if="type =='Image'|| type == 'Line'">
        <div class="row">
          <div class="row-tit">显示名称</div>
          <a-button
            type="link"
            class="edit-option-btn"
            @click="OpenEditStatus"
          >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
        </div>
        <div :class="['row' ,type == 'Line'?'disabled-textarea':'']">
          <a-textarea
            :disabled="type == 'Line' "
            placeholder
            v-model="lengedName"
            allow-clear
            @change="changeLengedName"
            :rows="2"
          />
          <!--          <a-input v-model="lengedName" @change="changeLengedName" />-->
        </div>
        <div class="row" v-show="type =='Image'">
          <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"
              :swatches="swatchesFont"
              @close="changeFontColor"
              popover-x="left"
            />
          </div>
        </div>
        <!-- 当为设备状态时 -->
        <div class="row" v-if="type =='Image'">
          <div class="row-tit">数量</div>
          <div class="grid-content">
            <a-input-number
              v-model="imageNum"
              :min="attrCards.length==imageNum?imageNum:1"
              @change="changeImageNum"
              style="width: 208px"
            />
          </div>
        </div>
        <!-- 当为管道状态时 -->
        <div class="row" v-if="type =='Line'">
          <div class="row-tit">线宽</div>
          <div class="grid-content">
            <a-input-number
              v-model="lineWidth"
              :min="1"
              :max="9"
              @change="changeLineWidth"
              style="width: 208px"
            />
          </div>
        </div>
      </div>
      <div v-if="type == 'Zone'">
        <div v-if="SubType=='FHFQ'">
          <!-- 防火分区 -->
          <div class="row-tit">颜色</div>
          <div class="row">
            <swatches @input="fhfqchangefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
          </div>
          <div class="row">
            <div class="row-tit">显示名称</div>
            <a-button
              type="link"
              class="edit-option-btn"
              @click="OpenEditStatus"
            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <a-textarea
              placeholder
              v-model="lengedName"
              allow-clear
              @change="changeLengedName"
              :rows="2"
            />
            <!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
          </div>
          <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"
                :swatches="swatchesFont"
                @close="changeFontColor"
                popover-x="left"
              />
            </div>
          </div>
        </div>
        <div v-if="SubType=='SCPZ'">
          <!-- 石材铺装 -->
          <div class="row">
            <div class="row-tit">图例说明</div>
            <a-button
              type="link"
              class="edit-option-btn"
              @click="OpenEditStatus"
            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <a-textarea @change="changeitemExplain" v-model="itemExplain" :rows="4" />
          </div>
          <div class="row">
            <div class="row-tit">描边</div>
            <div class="grid-content">
              <a-input-number
                v-model="lineWidth"
                :min="1"
                :max="9"
                @change="changeLineWidth"
                style="width: 168px"
              />
            </div>
            <div class="color-choice">
              <swatches v-model="borderColor" @close="changeBorderColor" popover-x="left" />
            </div>
          </div>
          <div class="row">
            <div class="row-tit">填充</div>
            <div class="color-choice">
              <swatches v-model="fillColor" @close="changefillColor" popover-x="left" />
            </div>
          </div>
        </div>
        <div v-if="SubType=='CUSTOM'">
          <!-- 自定义 -->
          <div class="row-tit">
            <span style="margin-right:10px;color:#8d9399">填充颜色</span>
            <el-color-picker
              show-alpha
              v-model="CUSTOMbgColor"
              @change="changBgColor"
              style="vertical-align:middle;"
            ></el-color-picker>
          </div>
          <div class="row-tit">
            <span style="margin-right:10px;color:#8d9399">边框颜色</span>
            <el-color-picker
              show-alpha
              v-model="CUSTOMbdColor"
              @change="changBdColor"
              style="vertical-align:middle;"
            ></el-color-picker>
          </div>
          <div class="row">
            <div class="row-tit">显示名称</div>
            <a-button
              type="link"
              class="edit-option-btn"
              @click="OpenEditStatus"
            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <a-textarea
              placeholder
              v-model="lengedName"
              allow-clear
              @change="changeLengedName"
              :rows="2"
            />
          </div>
          <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"
                :swatches="swatchesFont"
                @close="changeFontColor"
                popover-x="left"
              />
            </div>
          </div>
        </div>
        <div v-show="!SubType">
          <!-- 普通分区 -->
          <div class="row">
            <!-- 修改图例 -->
            <div class="row-tit">图例名称</div>
            <div>
              <a-dropdown :trigger="['click']">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()" >
                 afdaf<a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">1st menu item</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">2nd menu item</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">3rd menu item</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
          <div class="row">
            <div class="row-tit">显示名称</div>
            <a-button
              type="link"
              class="edit-option-btn"
              @click="OpenEditStatus"
            >{{isEdit? "取消编辑" : editStatus[type]}}</a-button>
          </div>
          <div class="row">
            <a-textarea
              placeholder
              v-model="lengedName"
              allow-clear
              @change="changeLengedName"
              :rows="2"
            />
            <!--            <a-input v-model="lengedName" @change="changeLengedName" />-->
          </div>
          <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"
                :swatches="swatchesFont"
                @close="changeFontColor"
                popover-x="left"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--设备/工程信息化ID/工程信息化中的位置类型-->

    <div
      class="attr-select attr-select-bottom"
      v-if="type =='Zone' || type =='Image'||type == 'Line'"
    >
      <a-spin :spinning="spinning">
        <div class="row">
          <span class="edit-option-text">{{type =='Zone'?`工程信息化中的位置类型`:'工程信息化中的设备类型'}}</span>
          <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
        </div>

        <div class="grid-content" style="margin-top: 12px;">
          <a-card
            class="attr-card"
            v-for="(item,index) in attrCards"
            :key="index"
          >{{item.sbjc ||item.wzjc}}</a-card>
        </div>
      </a-spin>
    </div>
    <!--    快捷操作提示-->
    <div style="position: fixed;bottom: 0;width: 280px;" class="key-boards">
      <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" :style="customStyle">
          <template slot="header">
            <div style="font-size: 12px;color: #8D9399;">
              <a-icon type="exclamation-circle" />
              <span style="margin-left: 5px;">键盘操作提示</span>
            </div>
          </template>

          <p
            v-for="item in keyboardOperation"
            :key="item.value"
            style="display: flex;margin-top: 13px;"
          >
            <span>{{item.value}}</span>
            <span class="key-board">{{item.keys}}</span>
            <span v-if="item.events" style="margin: 0 5px;">
              +
              <img style="width:13px;height:18px;" src="./../../assets/images/shubiao.png" alt />
            </span>
            <span>{{item.events}}</span>
          </p>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <editDialog
      ref="dialog"
      :attrCards="attrCards"
      :GraphElementId="GraphElementId"
      :InfoLocal="InfoLocal"
      :sysNum="imageNum"
      :key="keys"
    />
    <!--    <editDialog ref="dialog" :attrCards="attrCards" :getmajorId="getmajorId" :InfoLocal="InfoLocal" :sysNum="imageNum" :key="new Date().getTime()" />-->
    <!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'1001'" :sysNum="5" />-->
  </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 { SLineStyle } from "@saga-web/graph/lib";
import { SItemStatus } from "@saga-web/big";
import {
  uploadImg,
  queryGlsmsLocation,
  queryGlsmsAsset
} from "@/api/editer.js";
import { getUrlMsg } from "@/components/urlMsg.js";
// mapclass里边的没有透明度
import { hexify } from "@/utils/rgbaUtil";
import { SCustomLegendItem } from "@/lib/items/SCustomLegendItem";
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: "拖动画布：", keys: "Space", events: "Click" },
        { value: "加选对象：", keys: "Ctrl", events: "Press" },
        { value: "确认操作：", keys: "Enter" },
        { value: "取消对象：", keys: "Enter" }
      ],
      numberValue: 3,
      fontSize: 12, //字体大小
      lineWidth: 0,
      textMsg: "", //
      color: "#1CA085",
      fontColor: "#1CA085", //文字颜色
      borderColor: "", // 边框颜色 直线，折线，多边形等
      backColor: "", //背景色 用于text文字
      borderStyle: "solid",
      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")
        }
      ],
      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: {
        Image: "编辑设备",
        Line: "管道编辑",
        Zone: "编辑区域"
      },
      swatchess: ["#57C5FC", "#5F6CE1", "#71B312", "#00A177"],
      swatches: [
        "#f7f9facc",
        "#1FBC9C",
        "#1CA085",
        "#2ECC70",
        "#27AF60",
        "#3398DB",
        "#2980B9",
        "#A463BF",
        "#8E43AD",
        "#3D556E",
        "#222F3D",
        "#00000000"
      ],
      swatchesFont: [
        "#1fbc9c",
        "#1ca085",
        "#2ecc70",
        "#27af60",
        "#3398db",
        "#2980b9",
        "#a463bf",
        "#8e43ad",
        "#646c73",
        "#1f2429",
        "#f2c511",
        "#f39c19",
        "#e84b3c",
        "#c0382b",
        "#dde6e8",
        "#bdc3c8"
      ],
      lengedName: "", // 图例名称
      imageNum: 1, //设备数量
      fillColor: "", //修改填充色 （主要针对防火风区以及石材铺装）
      SubType: "", //空间类型，区分石材铺装
      itemExplain: "", //图例说明 只针对石材铺装
      attrCards: [],
      spinning: false,
      isEdit: false,
      getmajorId: "",
      InfoLocal: [],
      GraphElementId: "", //图例Id
      CUSTOMbgColor: "rgba(0,0,0,0.15)", // 自定义多边形背景色
      CUSTOMbdColor: "rgba(0,0,0,1)", // 自定义多边形线条色
      keys: new Date().getTime(),
      dataSelect: [
        { id: "totalEnergy", name: "总量" },
        { id: "singleParty", name: "单平米" }
      ],
      selVal: "totalEnergy",
      selText: "总量"
    };
  },
  methods: {
    onChange(e) {
      this.precision = e.target.checked === true ? false : true;
    },
    changeBorder(value) {
      bus.$emit("changeBorder", 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() {
      if (this.borderColor) {
        bus.$emit("changeBorderColor", this.borderColor);
      }
    },
    // 改变字体颜色
    changeFontColor(color) {
      if (color) {
        bus.$emit("changeFontColor", color);
      }
    },
    changebackColor(color) {
      if (color) {
        bus.$emit("changebackColor", color);
      }
    },
    // 用户自定义多边形 修改背景色
    changBgColor(val) {
      const color = hexify(val); // 转为16进制
      bus.$emit("CUSTOMbgColor", color);
    },
    // 用户自定义多边形 修改现调颜色
    changBdColor(val) {
      const color = hexify(val); // 转为16进制
      bus.$emit("CUSTOMbdColor", 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.$message.success(
            `${info.file.name} file uploaded successfully.`
          );
        } else {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      });
    },
    //更改图例名称
    changeLengedName() {
      bus.$emit("changeLengedName", this.lengedName);
    },
    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.keys = new Date().getTime();
      setTimeout(() => {
        this.$refs.dialog.showModal();
      });
    },
    // 修改设备数量
    changeImageNum() {
      if (this.imageNum < this.attrCards.length) {
        this.imageNum = this.attrCards.length;
        return false;
      }
      if (!this.imageNum) {
        this.imageNum = 1;
      }
      bus.$emit("changeImageNum", this.imageNum);
    },
    // 石材铺装
    changefillColor() {
      if (this.fillColor) {
        bus.$emit("changefillColor", this.fillColor);
      }
    },
    // 防火分区
    fhfqchangefillColor() {
      if (this.fillColor) {
        bus.$emit("changeBorderColor", this.fillColor);
        bus.$emit("changefillColor", this.fillColor);
      }
    },
    //设置缩小item为编辑状态
    OpenEditStatus() {
      this.isEdit = !this.isEdit;
      bus.$emit("OpenEditStatus");
    },
    // 编辑图例说明
    changeitemExplain() {
      bus.$emit("changeitemExplain", this.itemExplain);
    },
    // 更改工程信息化数据
    changeAttachObjectIds(arr) {
      bus.$emit("changeAttachObjectIds", arr);
    },
    xxx(val){
      alert(val)
    }
  },
  watch: {
    focusItemList: function(newval) {
      console.log("------------");
      console.log(FENGMAP);
      console.log("newval", newval);
      const Item = newval.itemList[0];
      this.GraphElementId = Item.data.GraphElementId;
      this.imageNum = 1; //切换item初始化
      if (Item.data && Item.data.SubType) {
        this.SubType = Item.data.SubType;
      } else {
        this.SubType = "";
      }
      this.getmajorId = Item.data.Properties.InfoSystemId;
      this.InfoLocal = Item.data.Properties.InfoLocal;
      //判断点 面 带回专业类
      // let InfoTypeIdArr = [];
      // if( Item.data.Properties.InfoTypeId.length){
      //   let InfoTypeId = Item.data.Properties.InfoTypeId;
      //   console.log('poiList',11111111111111,FENGMAP.poiList);
      //   console.log('spaceType',2222222222222222,FENGMAP.spaceType);
      //   if(FENGMAP.poiList.length){
      //     FENGMAP.poiList.join(',').split(',').map((item,index)=>{
      //       let n = InfoTypeId.includes(item)
      //       if(n){
      //         InfoTypeIdArr.push(item);
      //       }
      //     })
      //   }else if(FENGMAP.spaceType.length){
      //     FENGMAP.spaceType.join(',').split(',').map((item,index)=>{
      //       let n = InfoTypeId.includes(item)
      //       if(n){
      //         InfoTypeIdArr.push(item);
      //       }
      //     })
      //   }else{
      //     this.getmajorId = '';
      //   }
      // }
      // InfoTypeIdArr.length? this.getmajorId = InfoTypeIdArr[0]:this.getmajorId ='';
      //结束

      if (newval.itemList.length == 1) {
        if (newval.itemType == "baseText") {
          this.textMsg = Item.text;
          this.fontSize = Item.font.size;
          this.fontColor = Item.color.value;
          this.backColor = Item.backgroundColor.value;
        } else if (newval.itemType == "baseLine") {
          this.lineWidth = Item.lineWidth;
          this.borderColor = Item.strokeColor.value;
          if (Item.lineStyle == SLineStyle.Solid) {
            this.borderStyle = "solid";
          } else if (Item.lineStyle == SLineStyle.Dashed) {
            this.borderStyle = "dashed";
          } else if (Item.lineStyle == SLineStyle.Dotted) {
            this.borderStyle = "dotted";
          }
        } else if (newval.itemType == "baseImage") {
          this.lineWidth = Item.lineWidth;
          this.borderColor = Item.strokeColor.value;
        } else if (
          newval.itemType == "Zone" ||
          newval.itemType == "Line" ||
          newval.itemType == "Image"
        ) {
          setTimeout(() => {
            this.isEdit = Item.status == SItemStatus.Edit;
          }, 300);
          if (newval.itemType == "Image") {
            this.imageNum = Item.num;
            this.lengedName = Item.name;
            this.color = Item.color.value;
            this.fontSize = Item.font.size;
          } else if (newval.itemType == "Line") {
            // this.color = Item.color.value;
            this.fillColor = Item.fillColor.value;
            this.borderColor = Item.strokeColor.value;
            this.lineWidth = Item.lineWidth;
            this.lengedName = Item.name;
          } else if (newval.itemType == "Zone") {
            this.lengedName = Item.name;
            this.fontSize = Item.font.size;
            this.fontColor = Item.color.value;
            this.lineWidth = Item.lineWidth;
            this.borderColor = Item.strokeColor ? Item.strokeColor.value : "";
            this.fillColor = Item.fillColor ? Item.fillColor.value : "";
            this.itemExplain = "";
            if (Item.data.Properties.ItemExplain) {
              this.itemExplain = Item.data.Properties.ItemExplain
                ? Item.data.Properties.ItemExplain
                : "";
            }
            if (newval.itemList.length) {
              if (newval.itemList[0] instanceof SCustomLegendItem) {
                const fColor = newval.itemList[0].fillColor;
                this.CUSTOMbgColor = `rgba(${fColor.red}, ${fColor.green}, ${
                  fColor.blue
                }, ${fColor.alpha / 100})`;

                const bColor = newval.itemList[0].strokeColor;
                this.CUSTOMbdColor = `rgba(${bColor.red}, ${bColor.green}, ${
                  bColor.blue
                }, ${bColor.alpha / 100})`;
              }
            }
          }
        }
      }
      const locationList = [];
      const assetnumList = [];
      let params = {};
      this.attrCards = [];
      if (Item.data.AttachObjectIds && Item.data.AttachObjectIds.length) {
        Item.data.AttachObjectIds.map(item => {
          if (item.type == "Zone") {
            locationList.push(item.id);
          } else if (item.type == "Image") {
            assetnumList.push(item.id);
          }
        });
      }
      // if(newval.itemType == 'Zone'){
      this.spinning = true;
      if (locationList.length) {
        params = { locationList: locationList };
      } else {
        params = { locationList: [""] };
      }
      queryGlsmsLocation({ plazaId: getUrlMsg().projectId }, params)
        .then(res => {
          this.spinning = false;
          if (res.data.result == "success") {
            console.log(res.data);
            if (res.data.data && res.data.data.length) {
              const ZoneData = res.data.data;
              ZoneData.map(item => {
                item.type = "Zone";
              });
              this.attrCards = this.attrCards.concat(ZoneData);
            }
          } else {
            // this.$message.error("工程信息化中的位置信息获取失败");
          }
        })
        .catch(() => {
          this.spinning = false;
          // this.$message.error("工程信息化中的位置信息获取失败");
        });
      // }else if(newval.itemType == 'Image'){
      this.spinning = true;
      if (assetnumList.length) {
        params = { assetnumList: assetnumList };
      } else {
        params = { assetnumList: [""] };
      }
      queryGlsmsAsset({ plazaId: getUrlMsg().projectId }, params)
        .then(res => {
          this.spinning = false;
          if (res.data.result == "success") {
            console.log(res.data);
            if (res.data.data && res.data.data.length) {
              const data = res.data.data;
              data.map(item => {
                item.type = "Image";
              });
              this.attrCards = this.attrCards.concat(data);
            }
          } else {
            // this.$message.error("工程信息化中的设备信息获取失败");
          }
        })
        .catch(() => {
          this.spinning = false;
          // this.$message.error("工程信息化中的设备信息获取失败");
        });
      // }
      console.log(this.attrCards);
    },

    selVal(n, o) {
      if (n === o) return;
      this.selText = this.dataSelect.find(d => d.id === n).name;
    }
  }
};
</script>

<style scoped lang="less">
.disabled-textarea {
  /deep/ .ant-input {
    resize: none;
  }
}
/deep/ .ant-spin-nested-loading {
  height: 100% !important;
  .ant-spin-container {
    height: 100% !important;
  }
}
.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 {
      width: 26px;
      height: 26px;
      & /deep/ .vue-swatches__trigger {
        width: 26px !important;
        height: 26px !important;
        border-radius: 2px !important;
        border: 1px solid #dcdcdc;
      }
    }
    .row-tit {
      color: #8d9399;
      font-size: 14px;
    }
  }
  .row:first-child {
    margin-top: 0;
  }
  .grid {
    margin: 10px 15px;
    .grid-title {
      font-size: 12px;
      color: #8d9399;
    }
  }

  .grid-content {
    /*margin-top: 12px;*/
    height: calc(100% - 48px);
    overflow-y: scroll;
    position: relative;
  }

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

  .edit-option-text {
    color: #8d9399;
    height: 32px;
    line-height: 32px;
    /*margin-top: -5px;*/
  }

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

  .attr-card {
    width: 243px;
    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;
  }
}
.key-boards {
  .key-board {
    width: 52px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid rgba(195, 199, 203, 1);
    font-size: 14px;
    color: #646a73;
    text-align: center;
  }
  /deep/ .ant-collapse-content {
    border-top: 1px solid #eff0f1;
  }
}
#attr-select {
  width: 100%;
  height: 100%;
  .attr-select-bottom {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow-y: auto;
    padding-bottom: 400px;
  }
}
</style>