<template>
  <div class="app-container equipment-type-page">
    <el-row :gutter="14" class="equipment-type-layout">
      <el-col :span="5" class="equipment-type-left">
        <div class="operate-left">
          <i class="el-icon-plus" @click="addBtn"></i>
          <i class="el-icon-delete" @click="handleDelete"></i>
        </div>
        <el-input
          :placeholder="$t('equipment_type.EnterKeywordsForFiltering')"
          v-model="queryParams"
        ></el-input>
        <div class="treeScroll">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <!-- <span slot-scope="{ node, data }" class="slot-node">
              <template>
                <i
                  class="el-icon-box"
                  v-if="data.type == 1 || data.type == 2 || data.type == 3"
                ></i>
                <i
                  class="el-icon-s-operation"
                  v-if="data.type == 4"
                  :class="{
                    'el-icon-folder': !node.expanded,
                    'el-icon-folder-opened': node.expanded,
                    'el-icon-s-operation': data.type === 4,
                  }"
                ></i>
                <span>{{ node.label }}</span>
              </template>
            </span> -->
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19" class="equipment-type-right">
        <div class="right">
          <el-button type="primary" @click="addBtn" v-if="!show">{{
            $t("equipment_type.AddDevice")
          }}</el-button>
          <i class="el-icon-close closeBtn" v-if="show" @click="close"></i>
          <div v-if="show">
            <div class="right-title">{{ rightTitle }}</div>

            <el-form :model="formData" :rules="rules" ref="ruleForm">
              <el-form-item
                :label="$t('equipment_type.EquipmentTypeName')"
                prop="devicetypeName"
              >
                <el-input
                  v-model="formData.devicetypeName"
                  :placeholder="
                    $t('share.PleaseEnter') +
                    $t('equipment_type.EnterKeywordsForFiltering')
                  "
                ></el-input>
              </el-form-item>

              <el-form-item
                :label="$t('equipment_type.EquipmentCategoryNumber')"
                prop="devicetypeCode"
              >
                <el-input
                  v-model="formData.devicetypeCode"
                  :placeholder="
                    $t('share.PleaseEnter') +
                    $t('equipment_type.EquipmentCategoryNumber')
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('equipment_type.ProfessionalAffiliation')"
                prop="professionType"
              >
                <el-select
                  v-model="formData.professionType"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="disabledForm"
                >
                  <el-option
                    v-for="item in professionTypeData"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item :label="$t('equipment_type.NumberOfPhases')">
                <el-radio-group v-model="formData.phaseNum" :disabled="disabledForm">
                  <el-radio
                    :label="$t('equipment_type.NoPhaseNumber')"
                  ></el-radio>
                  <el-radio
                    :label="$t('equipment_type.singlePhase')"
                  ></el-radio>
                  <el-radio :label="$t('equipment_type.threePhase')"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                :label="$t('equipment_type.Farewell')"
                v-if="formData.phaseNum == '单相'"
              >
                <el-radio-group v-model="formData.phase" :disabled="disabledForm">
                  <!-- <el-radio
                    :label="$t('equipment_type.NoPhaseNumber')"
                  ></el-radio> -->
                  <el-radio label="A"></el-radio>
                  <el-radio label="B"></el-radio>
                  <el-radio label="C"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="subunit()">{{
                  $t("share.confirm")
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getProDeviceTypeTreeSelect,
  profession_type,
  update,
  remove,
  add,
} from "@/api/equipment/equipment_type";
export default {
  name: "equipment_type",
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "devicetypeName",
      },
      rightTitle: this.$t("equipment_type.AddDevice"),
      queryParams: "",
      formData: {},
      show: false,
      type: 0,
      rules: {
        devicetypeName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("equipment_type.EquipmentTypeName"),
            trigger: "blur",
          },
        ],
        devicetypeCode: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("equipment_type.EquipmentCategoryNumber"),
            trigger: "blur",
          },
        ],
        professionType: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("equipment_type.ProfessionalAffiliation"),
            trigger: "change",
          },
        ],
      },
      professionTypeData: [],
      devicetypeId: null,
      disabledForm:true,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getProDeviceTypeTreeSelect().then((res) => {
        if (res.code == 200) {
          this.treeData = res.data;
          this.$message({
            message: "查询成功",
            type: "success",
          });
        }
      });
      profession_type().then((res) => {
        if (res.code == 200) {
          this.professionTypeData = res.data;
        }
      });
    },
    handleNodeClick(data) {
      this.disabledForm=true;
      console.log(data);
      // this.type = data.type;
      this.devicetypeId = data.devicetypeId;
      if (data.devicetypeId == 1) {
        this.rightTitle = this.$t("equipment_type.AddDevice");
        this.show = false;
        this.type = 0;
      } else {
        this.type = 1;
        this.rightTitle = this.$t("equipment_type.EditEquipment");
        this.formData = JSON.parse(JSON.stringify(data));
        this.show = true;
      }
    },
    addBtn() {
      this.disabledForm=false;
      this.formData = {};
      this.show = true;
      this.type = 0;
      this.rightTitle = this.$t("equipment_type.AddDevice");
    },
    close() {
      this.show = false;
    },
    subunit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.formData.phaseNum == "无相数") {
            this.formData.phase = 0;
          } else if (this.formData.phaseNum == "三相") {
            this.formData.phase = "ABC";
          }
          this.formData.powerMainEquFlag = "Yes";
          if (this.type == 0) {
            this.formData.parentId = this.devicetypeId;
            add(this.formData).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.init();
                this.show = false;
              }
            });
          } else {
            update(this.formData).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.init();
                this.show = false;
              }
            });
          }
        }
      });
    },
    // 删除
    handleDelete() {
      if (this.show) {
        this.$confirm("是否确定删除", "系统提示", {
          confirmButtonText: this.$t("share.confirm"),
          cancelButtonText: this.$t("share.cancel"),
          type: "warning",
        }).then(() => {
          remove(this.formData.devicetypeId).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.init();
              this.show = false;
            }
          });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.equipment-type-page {
  overflow: hidden;
}

.equipment-type-layout {
  flex: 1 1 auto !important;
  min-height: 0;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.equipment-type-left,
.equipment-type-right {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.equipment-type-left {
  display: flex;
  flex-direction: column;
  padding: 12px !important;
  background: #0f124a;
  border: 1px solid #0b2567;
}

.equipment-type-right {
  display: flex;
  flex-direction: column;
  padding-left: 14px !important;
  padding-right: 0 !important;
}

.operate-left {
  flex: 0 0 auto;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  i {
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
  }
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  color: #4a9de7 !important;
  // color: #fff !important;
}
.right {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 0 50px;
  width: 100%;
  background: #0f124a;
  border: 1px solid #0b2567;
  .right-title {
    font-size: 20px;
    margin: 20px 0;
  }
  .closeBtn {
    font-size: 30px;
    cursor: pointer;
  }
}
.treeScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  margin-top: 10px;
}
::v-deep .el-tree-node__content {
  height: 30px;
}
</style>
