<template>
  <div class="cpt-nest-list-item wih100">
    <div class="nest-group_box">
      <div class="group-title_box">
        <div class="title-box">
          <span :title="data.name" class="title">{{ data.name }}</span>
        </div>
        <div class="line-box w210">
          (
          <span class="cf">共 {{ data.online + data.offline }} 架</span>
          <span class="healthy--un ml5" style="color: #31db24">{{ data.online }} 架在线</span>
          <span>/</span>
          <span class="healthy--total" style="color: #cad8d9">{{ data.offline }} 离线</span>)
        </div>
      </div>
    </div>

    <div class="nest-children" :class="{ collapse: listCollapse }">
      <template v-if="data && data.nests && data.nests.length">
        <div class="nest-device-list">
          <div
            v-for="device in data.nests"
            :key="`device_${device.id}`"
            class="nest-device-item"
            :class="{ online: device.online === 1 }"
          >
            <!-- 最前面的选项框 -->
            <div class="title-box">
              <el-tooltip
                :content="device.online === 1 ? '在线' : '离线'"
                placement="top"
                :enterable="false"
              >
                <el-checkbox
                  :disabled="device.online !== 1"
                  :value="device.isCheck"
                  @change="(e) => handClick(e, device)"
                ></el-checkbox>
              </el-tooltip>
              <span :title="device.name" class="title">{{ device.name }}</span>
              <span class="li" v-if="device.online != 1">（离线）</span>
              <span class="zai" v-else>（在线）</span>
              <span
                :title="device.comment || '异常'"
                v-if="device.state == 2"
                style="color: red"
                class="status-icon iconfont icon-yichang1"
              ></span>
              <span
                :title="device.comment || '维修'"
                v-if="device.state == 3"
                class="status-icon iconfont icon-weixiu"
              ></span>
              <span
                :title="device.comment || '保养'"
                v-if="device.state == 4"
                class="status-icon iconfont icon-baoyang"
              ></span>
            </div>

            <div class="icon-box">
              <span class="type fr" v-if="device.status">{{ typeName(device.status) }}</span>
              <span @click="itemLocation(device)" class="iconfont fr icon-dingwei1"></span>
            </div>
          </div>
        </div>
      </template>
      <div class="nest-child_group_box" v-if="data.childs && data.childs.length">
        <Item v-for="(item, i) in data.childs" :data="item" :key="`device_child_${i}`" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Item",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  inject: ['rootNode'],
  data() {
    return {
      device: {},
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["listCollapse"]),
    ...mapState("MMCFlightControlCenter/hangar", ["showPanel", "hangar"]),
    ...mapState("MMCFlightControlCenter/uav", ["uav"]),
  },
  methods: {
    typeName(val) {
      let name = "";
      switch (val) {
        case 1:
          name = "正常";
          break;

        case 2:
          name = "维修中";
          break;

        case 3:
          name = "损坏";
          break;

        case 4:
          name = "保养中";
          break;
      }
      return name;
    },
    handClick(isCheck, device) {
      console.log("checkbox", isCheck, device);

      this.data.nests.forEach((item) => {
        this.$set(item, "isCheck", false);
      });
      if (isCheck) {
        device.isCheck = true;
      }

      // 切换订阅的机库, 需要先取消订阅旧机库, 再重新订阅新机库
      this.hangar &&
          this.$store.dispatch("MMCFlightControlCenter/hangar/unsubscribe");
        this.uav &&
          this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");

      // todo 由于unsubscribe操作会将hangar设置为null, 所以unsubscribe操作要放在if判断之后再执行
      if (isCheck) {
        this.$store.commit("MMCFlightControlCenter/hangar/setState", {
          key: "showPanel",
          value: true,
        });

        this.$store.commit("MMCFlightControlCenter/hangar/setState", {
          key: "hangar",
          value: {
            ...device,
            showPanel: true,
          },
        });
        this.$store.dispatch("MMCFlightControlCenter/hangar/subscribe");

        // 切换订阅的无人机, 需要先取消订阅旧无人机, 再重新订阅新无人机
        this.uav &&
          this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
        if (device.uav) {
          this.$store.commit("MMCFlightControlCenter/uav/setState", {
            key: "uav",
            value: device.uav,
          });
          this.$store.dispatch("MMCFlightControlCenter/uav/subscribe");
        } else {
          this.$message.error("该机库中没有无人机!");
        }
      } else {
        this.$store.commit("MMCFlightControlCenter/hangar/setState", {
          key: "showPanel",
          value: false,
        });
        this.$store.commit("MMCFlightControlCenter/hangar/setState", {
          key: "hangar",
          value: null,
        });
      }
      if (this.showPanel) {
        this.$store.commit("MMCFlightControlCenter/setState", {
          key: "listCollapse",
          value: true,
        });
      }
      this.rootNode.$emit('hangarChange', { hangar: this.hangar });   //根节点发出机库更换事件
    },
  },
};
</script>

<style lang="scss" scoped>
.cpt-nest-list-item {
  .nest-group_box {
    width: 100%;

    .group-title_box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      height: 40px;

      .title-box {
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;

        .iconfont {
          color: #ccedff;
          transform: rotate(90deg);
          transition: 0.3s;
          cursor: pointer;

          &.collapse {
            transform: rotate(0deg);
          }
        }

        .title {
          font-family: Microsoft YaHei;
          font-size: 14px;
          color: #ccedff;
          font-weight: 400;
          margin-left: 5px;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .line-box {
        display: flex;
        flex-shrink: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #ccedff;
        line-height: 19px;
        font-weight: 400;
        text-align: right;
        margin: 0 44px 0 0;
      }
    }
  }

  .nest-children {
    overflow: hidden;

    &.collapse {
      height: 0;
    }

    .nest-device-list {
      .nest-device-item {
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .iconfont {
          font-size: 22px;
          color: #9baaac;
        }

        &.online {
          .title-box {
            .iconfont {
              // color: #fff;
            }

            .title {
              color: #fff;
            }
          }
        }

        .title-box::v-deep {
          height: 100%;
          white-space: nowrap;
          .el-checkbox {
            &.is-checked {
              .el-checkbox__input {
                .el-checkbox__inner {
                  border-color: #08c2d1;

                  &::after {
                    border-color: #08c2d1;
                  }
                }
              }
            }

            .el-checkbox__input {
              .el-checkbox__inner {
                border-radius: 0;
                width: 18px;
                height: 18px;
                background: #000000;
                // border-color: #08c2d1;
                border-color: #fff;
                box-sizing: border-box;

                &::after {
                  height: 10px;
                  left: 5px;
                  top: 1px;
                  width: 5px;
                }
              }
            }
          }

          .iconfont {
            font-size: 20px;
            color: #ccedff;
          }

          .title {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #9baaac;
            font-weight: 400;
            margin-left: 8px;
          }
          .status-icon {
            margin-left: 12px;
            font-size: 14px;
            color: RGBA(251, 192, 1, 1);
          }
        }

        .icon-box {
          display: flex;
          align-items: center;
        }
      }
    }

    .nest-child_group_box {
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
}
.li {
  font-size: 16px;
  color: #9baaac;
  font-weight: 400;
}
.zai {
  color: #31db24;
  font-weight: 400;
  font-size: 16px;
}
.type {
  cursor: default;
  font-weight: 400;
  font-size: 10px;
  height: 22px;
  line-height: 22px;
  transform: scale(0.9);
  border: 1px solid #c0aaaa;
  padding: 0 4px;
  border-radius: 4px 4px;
  color: #fff;
  background-color: #224563;
}
.el-checkbox__inner::v-deep {
  background: transparent !important;
}
</style>

<style>
.el-popover .popper__arrow::after {
  border-bottom-color: transparent !important;
}
</style>
