<template>
  <a-tabs type="card" class="components-layout-right">
    <a-tab-pane key="1" tab="外观">
      <a-form layout="horizontal">
        <a-form-item label="id">
          <p>
            {{ selectSvgInfo.id }}
          </p>
        </a-form-item>
        <a-form-item label="类型">
          <p>{{ selectSvgInfo.typeName }}</p>
        </a-form-item>

        <a-form-item
          label="名称"
          v-if="selectSvgInfo.length <= 0 ? false : true"
        >
          <a-input
            v-model:value="selectSvgInfo.title"
            placeholder="请输入组件名称"
          />
        </a-form-item>

        <a-form-item
          label="X轴坐标"
          v-if="selectSvgInfo.length <= 0 ? false : true"
        >
          <a-input-number
            v-model:value="selectSvgInfo.svgPositionX"
            :min="0"
            :max="1920"
          />
        </a-form-item>

        <a-form-item
          label="Y轴坐标"
          v-if="selectSvgInfo.length <= 0 ? false : true"
        >
          <a-input-number
            v-model:value="selectSvgInfo.svgPositionY"
            :min="0"
            :max="1080"
          />
        </a-form-item>

        <a-form-item
          label="颜色"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('svgColor') > -1
          "
        >
          <input type="color" v-model="selectSvgInfo.svgColor" />
        </a-form-item>

        <a-form-item
          label="大小"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('size') > -1
          "
        >
          <a-input-number
            v-model:value="selectSvgInfoSize"
            :min="1"
            :max="10"
            step="0.1"
            maxlength="4"
          />
        </a-form-item>

        <a-form-item
          label="长度"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('height') > -1
          "
        >
          <a-input-number
            v-model:value="selectSvgInfo.height"
            :min="2"
            :max="3000"
            step="1"
          />
        </a-form-item>

        <a-form-item
          label="旋转"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('angle') > -1
          "
        >
          <a-input-number
            v-model:value="msgFilteredHTML"
            :min="0"
            :max="360"
            maxlength="3"
          />
        </a-form-item>

        <a-form-item
          label="文本"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('svgText') > -1
          "
        >
          <a-input v-model:value="selectSvgInfo.svgText" placeholder="请输入" />
        </a-form-item>

        <a-form-item
          label="字体大小"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('fontSize') > -1
          "
        >
          <a-input-number
            v-model:value="selectSvgInfo.fontSize"
            :min="1"
            :max="100"
          />
        </a-form-item>

        <a-form-item
          label="表格行数"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('tableRowCount') > -1
          "
        >
          <a-input-number
            v-model:value="selectSvgInfo.tableRowCount"
            :min="2"
            :max="100"
          />
        </a-form-item>

        <a-form-item
          label="表格列数"
          v-if="
            selectSvgInfo.length <= 0
              ? false
              : selectSvgInfo.elementBool.indexOf('tableColCount') > -1
          "
        >
          <a-input-number
            v-model:value="selectSvgInfo.tableColCount"
            :min="2"
            :max="100"
          />
        </a-form-item>

        <a-form-item
          label="设备名称"
          v-if="selectSvgInfo.length <= 0 ? false : true"
        >
          <a-select
            :default-value="selectSvgInfo.deviceId"
            :placeholder="ElMessage"
            style="width: 160px"
            @change="deviceSelectChange"
          >
            <a-select-option
              v-for="list in deviceSelectList"
              :key="list"
              :value="list.id"
            >
              {{ list.monitorDeviceName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="变量名称"
          v-if="selectSvgInfo.deviceId != null && selectSvgInfo.deviceId != ''"
        >
          <a-select
            @change="hookupSelectChange"
            :default-value="selectSvgInfo.variableId"
            :placeholder="ElMessage"
            style="width: 160px"
          >
            <a-select-option
              v-for="list in variableIdSelectList"
              :key="list"
              :value="list.id"
            >
              {{ list.variableName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="数据">
      <div class="bg-code">{{ selectSvgInfo }}</div>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
import api from "@/api/site/systemImg";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      deviceSelectList: [],
      variableIdSelectList: [],
      ElMessage: "",
    };
  },
  props: ["svgInfo"],
  computed: {
    selectSvgInfo() {
      return this.svgInfo;
    },
    msgFilteredHTML: {
      get() {
        return this.selectSvgInfo.angle;
      },
      set(val) {
        //控制元器件旋转
        if (val == "" || val == null) {
          this.selectSvgInfo.angle = 0;
        } else {
          this.selectSvgInfo.angle = val;
        }
      },
    },
    selectSvgInfoSize: {
      get() {
        return this.selectSvgInfo.size;
      },
      set(val) {
        //控制元器件大小
        if (val == "" || val == null) {
          this.selectSvgInfo.size = 1;
        } else if (val.toString().indexOf(".") != -1) {
          if (
            val.toString().split(".")[1] == "" ||
            val.toString().split(".")[1] == null
          ) {
            this.selectSvgInfo.size = 1;
          } else {
            console.log(val);
            this.selectSvgInfo.size = val;
          }
        } else {
          this.selectSvgInfo.size = val;
        }
      },
    },
    // selectSvgInfo.angle==''&&selectSvgInfo.angle==null?:
  },
  mounted() {
    //调用设备名称下拉列表接口事件
    this.getDeviceAttributeList();
  },
  methods: {
    //设备名称下拉列表接口事件
    getDeviceAttributeList() {
      api
        .getDeviceAttributeList({ siteId: this.$store.state.siteId })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            if (requset.data.length > 0) {
              this.ElMessage = "请选择设备名称";
              this.deviceSelectList = requset.data;
            } else {
              this.deviceSelectList = [];
              this.ElMessage = "暂无数据";
            }
          } else {
            ElMessage.error(requset.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //变量名称下拉列表接口事件
    getDeviceAnalogVariableList(value) {
      api
        .getDeviceAnalogVariableList({ monitoringDeviceId: value })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            if (requset.data.length > 0) {
              this.ElMessage = "请选择变量名称";
              this.variableIdSelectList = requset.data;
              if (
                this.selectSvgInfo.variableId == null ||
                this.selectSvgInfo.variableId == ""
              ) {
                this.selectSvgInfo.variableId = this.variableIdSelectList[0].id;
              }
            } else {
              this.variableIdSelectList = [];
              this.ElMessage = "暂无数据";
            }
          } else {
            ElMessage.error(requset.msg);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //设备名称下拉列表事件
    deviceSelectChange(value) {
      this.selectSvgInfo.variableId = null;
      this.selectSvgInfo.deviceId = value;
      //调用变量名称下拉列表接口事件
      this.getDeviceAnalogVariableList(value);
    },
    //变量名称下拉列表事件
    hookupSelectChange(value) {
      this.selectSvgInfo.variableId = value;
    },
  },

  watch: {
    selectSvgInfo: function (newVal) {
      console.log(this.selectSvgInfo.length);
      if (
        this.deviceSelectList.length > 0 &&
        this.selectSvgInfo.length == undefined
      ) {
        if (newVal.deviceId == null || newVal.deviceId == "") {
          this.selectSvgInfo.deviceId = this.deviceSelectList[0].id;
        }

        //调用变量名称下拉列表接口事件
        this.getDeviceAnalogVariableList(newVal.deviceId);
      }
    },
    "selectSvgInfo.tableRowCount": function (newVal) {
      this.$emit(
        "setTableAttr",
        this.selectSvgInfo.id,
        newVal,
        this.selectSvgInfo.tableColCount
      );
    },
    "selectSvgInfo.tableColCount": function (newVal) {
      this.$emit(
        "setTableAttr",
        this.selectSvgInfo.id,
        this.selectSvgInfo.tableRowCount,
        newVal
      );
    },
  },
};
</script>
<style lang="less">
.components-layout-right {
  .ant-tabs-bar {
    margin-bottom: 0 !important;
  }
  .ant-form-item-label {
    width: 100px !important;
    flex-shrink: 0;
  }
  .ant-input-number,
  input {
    width: 160px;
    border-radius: 4px;
    border-color: #ddd;
  }
  .ant-form-item-control {
    line-height: 24px !important;

    p {
      margin-bottom: 0 !important;
    }
  }

  .ant-form-item {
    display: flex;
    align-items: center;
    flex-flow: nowrap;
    position: relative;
    margin-bottom: 0;
    padding: 8px 0;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 15px;
      bottom: 0;
      height: 1px;
      background: #f2f2f2;
    }

    &:last-child::after {
      content: unset;
    }
  }
}
</style>
<style scoped lang="less">
.btn-sure {
  width: 260px;
  margin: 20px;
}
.bg-code {
  background: #444;
  color: #fff;
  width: calc(100% - 20px);
  margin: 20px 10px;
  border-radius: 4px;
  padding: 10px;
}
</style>