<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="operate-left">
          <i class="el-icon-plus" @click="add"></i>
          <i class="el-icon-delete"></i>
        </div>
        <el-input
          :placeholder="$t('equipment_type.EnterKeywordsForFiltering')"
          v-model="queryParams"
        ></el-input>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
        >
          <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>
      </el-col>
      <el-col :span="19">
        <div class="right">
          <el-button
            type="primary"
            @click="add"
            v-if="!show && (type == 0 || type == 1)"
            >{{ $t("equipment_type.AddDevice") }}</el-button
          >
          <i
            class="el-icon-close closeBtn"
            v-if="show && type == 0"
            @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="EquipmentTypeName"
              >
                <el-input
                  v-model="formData.EquipmentTypeName"
                  :placeholder="
                    $t('share.PleaseEnter') +
                    $t('equipment_type.EnterKeywordsForFiltering')
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('equipment_type.EquipmentCategoryNumber')"
                prop="EquipmentCategoryNumber"
              >
                <el-input
                  v-model="formData.EquipmentCategoryNumber"
                  :placeholder="
                    $t('share.PleaseEnter') +
                    $t('equipment_type.EquipmentCategoryNumber')
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="$t('equipment_type.ProfessionalAffiliation')"
                prop="ProfessionalAffiliation"
              >
                <el-input
                  v-model="formData.ProfessionalAffiliation"
                  :placeholder="
                    $t('share.PleaseEnter') +
                    $t('equipment_type.ProfessionalAffiliation')
                  "
                ></el-input>
              </el-form-item>

              <el-form-item
                :label="$t('equipment_type.NumberOfPhases')"
                v-if="type !== 0 && type !== 1"
              >
                <el-radio-group v-model="formData.resource">
                  <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="type !== 0 && type !== 1"
              >
                <el-radio-group v-model="formData.resource">
                  <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>

export default {
  name: "equipment_type",
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          type: 1,
          children: [
            {
              label: "二级 1-1",
              type: 2,
              children: [
                {
                  label: "三级 1-1-1",
                  type: 3,
                  children: [
                    {
                      label: "四级 1-1-1-1",
                      type: 4,
                    },
                    {
                      label: "四级 1-1-1-2",
                      type: 4,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      rightTitle: this.$t("equipment_type.AddDevice"),
      queryParams: "",
      formData: {},
      show: false,
      type: 0,
      rules: {
        EquipmentTypeName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") + this.$t("share.EquipmentTypeName"),
            trigger: "blur",
          },
        ],
        EquipmentCategoryNumber: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("share.EquipmentCategoryNumber"),
            trigger: "blur",
          },
        ],
        ProfessionalAffiliation: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") +
              this.$t("share.ProfessionalAffiliation"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data.type);
      this.type = data.type;

      if (data.type == 0) {
        this.rightTitle = this.$t("equipment_type.AddDevice");
        this.show = true;
      } else if (data.type !== 0 && data.type !== 1) {
        this.show = true;
        this.rightTitle = this.$t("equipment_type.EditEquipment");
      } else if (data.type == 1) {
        this.show = false;
      }
    },
    add() {
      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) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.operate-left {
  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 {
  padding: 0 50px;
  width: 50%;
  .right-title {
    font-size: 20px;
    margin: 20px 0;
  }
  .closeBtn {
    font-size: 30px;
    cursor: pointer;
  }
}
</style>
