<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="grid-content">
          <div class="operate-left">
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('share.new')"
              placement="top-start"
            >
              <i
                class="el-icon-plus"
                @click="add"
                :class="addIcon ? 'addIcon' : ''"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('share.delete')"
              placement="top-start"
            >
              <i
                class="el-icon-delete"
                @click="remove"
                :class="deleteIcon ? 'deleteIcon' : ''"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('share.export')"
              placement="top-start"
            >
              <i class="el-icon-download"></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('share.import')"
              placement="top-start"
            >
              <i class="el-icon-upload2"></i>
            </el-tooltip>
          </div>
          <el-input
            :placeholder="$t('entry.SearchForDeviceName')"
            v-model="queryParams"
            style="margin-bottom: 10px"
          ></el-input>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            ref="tree"
          >
            <span slot-scope="{ node, data }" class="slot-node">
              <template>
                <i
                  class="el-icon-box"
                  v-if="data.areaName"
                  style="margin-right: 5px"
                ></i>
                <i
                  class="el-icon-takeaway-box"
                  v-if="data.powerMainEquFlag == 'Yes'"
                  style="margin-right: 5px; color: #409eff"
                ></i>
                <i
                  class="el-icon-set-up"
                  v-if="data.powerMainEquFlag == 'No'"
                  style="margin-right: 5px; color: #a9c52b"
                ></i>
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <el-empty
          :description="$t('entry.RightSidePrompt')"
          v-if="!show"
        ></el-empty>
        <div class="grid-content-right" v-if="show">
          <div class="titleName">{{ titleName }}</div>
          <el-form
            ref="ruleForm"
            :model="form"
            label-width="200px"
            :rules="rules"
          >
            <el-form-item :label="$t('entry.EquipmentName')" prop="deviceName">
              <el-input
                v-model="form.deviceName"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.EquipmentName')
                "
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('entry.DeviceType')" prop="devicetypeId">
              <el-select
                v-model="form.devicetypeId"
                :placeholder="$t('share.PleaseEnter') + $t('entry.DeviceType')"
              >
                <el-option
                  :label="item.deviceTypeName"
                  :value="item.deviceTypeId"
                  v-for="item in deviceTypeData"
                  :key="item.deviceTypeId"
                ></el-option>
                <!-- deviceTypeData -->
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('entry.EquipmentNumber')"
              prop="deviceCode"
            >
              <el-input
                v-model="form.deviceCode"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.EquipmentNumber')
                "
              ></el-input>
              <span class="serial-number">{{
                $t("entry.EquipmentNumberPrompt")
              }}</span>
            </el-form-item>
            <el-form-item :label="$t('entry.DisplaySorting')">
              <el-input-number
                v-model="form.orderNum"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
            <el-form-item :label="$t('entry.physicalObject')">
              <el-input
                v-model="form.phyassetId"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.physicalObject')
                "
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('entry.MonitoringIndexNumber')">
              <el-input
                v-model="form.monitorIndexNo"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.MonitoringIndexNumber')
                "
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('entry.EquipmentModel')">
              <el-input
                v-model="form.deviceModel"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.EquipmentModel')
                "
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('entry.EquipmentManufacturer')">
              <el-input
                v-model="form.manufacturer"
                :placeholder="
                  $t('share.PleaseEnter') + $t('entry.EquipmentManufacturer')
                "
              ></el-input>
            </el-form-item>

            <el-form-item :label="'x' + $t('entry.coordinate')">
              <el-input-number
                v-model="form.positionX"
                controls-position="right"
                :min="-20"
                :max="20"
                :step="0.1"
              ></el-input-number>
              <span class="number-title"
                >({{ $t("entry.suggestion")+" "  + $t("entry.minimumValue") }}-20
                {{ $t("entry.minimumValue") }}20 )</span
              >
            </el-form-item>
            <!-- 建议最小值-20，最大值20 -->
            <el-form-item :label="'y' + $t('entry.coordinate')">
              <el-input-number
                v-model="form.positionY"
                controls-position="right"
                :min="66"
                :step="0.1"
              ></el-input-number>
              <span class="number-title">({{ $t("entry.suggestion") }}66)</span>
            </el-form-item>

            <el-form-item :label="'z' + $t('entry.coordinate')">
              <el-input-number
                v-model="form.positionZ"
                controls-position="right"
                :min="-6"
                :max="20"
                :step="0.1"
              ></el-input-number>
              <span class="number-title"
                >({{ $t("entry.suggestion")+" " + $t("entry.minimumValue") }}-6
                {{ $t("entry.minimumValue") }}20 )</span
              >
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{
                $t("entry.save")
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script >
import {
  treeAreaDeviceSelect,
  devicetypeList,
  deviceQuery,
  insertMainDeviceAndCommByDeviceType,
  deviceRemove,
} from "@/api/equipment/entry";
export default {
  name: "entry",
  data() {
    return {
      queryParams: "",
      treeData: [],
      defaultProps: {
        children: "children",
        // label: "areaName",
        label: function (data) {
          return data.areaName || data.deviceName;
        },
      },
      titleName: "",
      form: {
        orderNum: 0,
        positionX: 0,
        positionY: 66,
        positionZ: 0,
        handerType: 0,
        boolAdd: 1,
        deviceId: "",
      },
      show: false,
      deleteIcon: true,
      addIcon: true,
      deviceTypeData: [],
      deviceId: "",
      rules: {
        deviceName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") + this.$t("enrty.EquipmentName"),
            trigger: "blur",
          },
        ],
        devicetypeId: [
          {
            required: true,
            message:
              this.$t("share.PleaseChoose") + this.$t("enrty.DeviceType"),
            trigger: "change",
          },
        ],
        deviceCode: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") + this.$t("enrty.EquipmentNumber"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
    devicetypeList().then((res) => {
      console.log(res);
      if (res.code == 200) {
        let arr = res.data.filter((item) => item.deviceTypeId !== 1);
        this.deviceTypeData = arr;
      }
    });
  },
  methods: {
    init() {
      treeAreaDeviceSelect().then((res) => {
        if (res.code == 200) {
          this.treeData = res.data;
        }
      });
    },
    handleNodeClick(data, e) {
      console.log(data, e);
      this.deviceId = data.deviceId;
      this.titleName = data.areaName || data.deviceName;
      // this.form.boolAdd = 1;
      (this.form.parentName = data.areaName), (this.form.areaId = data.areaId);

      if (data.areaName) {
        this.show = false;
        this.deleteIcon = true;
        this.addIcon = false;
      } else if (data.deviceName) {
        this.show = true;
        this.titleName = this.$t("share.edit") + " " + data.deviceName;
        this.deleteIcon = false;
        this.addIcon = true;
        deviceQuery(data.deviceId).then((res) => {
          console.log(res, 1111);
          if (res.code == 200) {
            // this.form=res.data;
          }
        });
      }
    },
    add() {
      this.show = true;
    },
    remove() {
      this.$confirm("是否确定删除", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deviceRemove(this.deviceId).then((res) => {
          console.log(res, 1111);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.init();
          }
        });
      });
    },
    onSubmit() {
      this.$refs["ruleForm"].validate((v) => {
        if (v) {
          insertMainDeviceAndCommByDeviceType(this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              // this.show = false;
              this.form = {
                orderNum: 0,
                positionX: 0,
                positionY: 66,
                positionZ: 0,
                handerType: 0,
                boolAdd: 1,
                deviceId: "",
              };
              this.init();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.operate-left {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  i {
    font-size: 20px;
    margin-left: 5px;
    cursor: pointer;
  }
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  color: #4a9de7 !important;
  // color: #fff !important;
}
::v-deep .el-tree-node__content {
  height: 34px !important;
}
/*节点失焦时的背景颜色*/
//   .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
//     background-color: #4a9de7 !important;
//     color: #fff !important;
//   }
.grid-content-right {
  padding: 0 10%;
}
.titleName {
  font-size: 26px;
  padding: 10px;
}
.number-title {
  margin-left: 10px;
}
.serial-number {
  color: #999;
  font-size: 12px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.deleteIcon,
.addIcon {
  color: #dddddd;
  cursor: not-allowed;
}
</style>
