<template>
  <div class="equipmentAssets">
    <transition name="left">
      <div class="assetsLeft" v-show="menuShow">
        <div class="btnLeft">
          <div
            v-for="(item, index) in menusArr"
            :key="index"
            :style="{
              backgroundImage:
                btnAc != index
                  ? 'url(' + btnBG.pic + ')'
                  : 'url(' + btnBG.actPic + ')',
              marginLeft: btnAc == index ? '15px' : '0px',
            }"
            class="btnList"
            @click="handelBtn(index)"
          >
            <div class="textArr">
              <p :text="item.text">{{ item.text }}</p>
            </div>
          </div>
          <img
            src="../assets/images/shebeijiantou.png"
            class="jiantou"
            @click="menuHandel"
            v-show="arrow"
          />
        </div>
      </div>
    </transition>
    <transition name="right">
      <div class="assetsRight" v-show="menuShow">
        <div class="rightOne" v-if="btnAc == 0">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightOne" v-if="btnAc == 1">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称二</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightOne" v-if="btnAc == 2">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称三</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightOne" v-if="btnAc == 3">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称四</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightOne" v-if="btnAc == 4">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称五</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightOne" v-if="btnAc == 5">
          <div class="assetsTitle">
            <p text="设备名称" style="font-family: 'maleGod'">设备名称六</p>
          </div>
          <div class="asstesContent1">
            <div class="models">
              <div class="assetsStatus">
                <p style="margin-left: 15px">正常</p>
              </div>
              <div class="modelsImg">
                <img src="@/assets/images/shebeimoxing.png" />
              </div>
            </div>
            <div class="modelIntroduction">
              {{ modelIntroduction }}
            </div>
            <div class="assetsList">
              <div
                v-for="(item, index) in assetsList"
                :key="index"
                class="assetsArr"
              >
                <div class="listContent">
                  <div>{{ item.name }}</div>
                  <div
                    style="
                      font-family: 'maleGod';
                      color: rgb(76, 181, 209);
                      font-size: 20px;
                    "
                  >
                    {{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <img
      src="../assets/images/shebeijiantoufan.png"
      class="jiantoufan"
      @click="menuHandelShow"
      v-show="!arrow"
    />
  </div>
</template>

<script>
// import index from "./index.vue";
export default {
  //   components: { index },
  name: "equipmentAssets",
  data() {
    return {
      arrow: false, //箭头隐藏
      menuShow: false, //菜单隐藏动画
      modelIntroduction: `具有自助交电费、查询账单、
                        打印发票以及智能管理功能，具备24小时无人值守的自助服务特性，
                        最大限度拓宽业务办理渠道、业务场所及最大限度拓宽业务办理渠道、业务场所及最大程度
                        的人性化服务。`, //模型介绍
      btnAc: 0,
      btnBG: {
        pic: require("@/assets/images/assetsBtn.png"),
        actPic: require("@/assets/images/assetsBtnAc.png"),
      },
      menusArr: [
        {
          text: "设备名称一",
        },
        {
          text: "设备名称二",
        },
        {
          text: "设备名称三",
        },
        {
          text: "设备名称四",
        },
        {
          text: "设备名称五",
        },
        {
          text: "设备名称六",
        },
      ],
      assetsList: [
        {
          name: "当日业务量(个)：",
          count: "24",
        },
        {
          name: "当日平均办理时间(分钟)：",
          count: "26",
        },
        {
          name: "当日最长办理时间(分钟)：",
          count: "68",
        },
        {
          name: "当日最长等待时间(分钟)：",
          count: "23",
        },
        {
          name: "平均等待时间(分钟)：",
          count: "17",
        },
      ],
    };
  },
  mounted() {
      this.menuHandelShow()
  },
  methods: {
    handelBtn(index) {
      this.btnAc = index;
    },
    //隐藏菜单按钮
    menuHandel() {
      let that = this;
      this.menuShow = false;
      window.setTimeout(() => {
        that.arrow = false;
      }, 1000);
    },
    //显示菜单按钮
    menuHandelShow() {
      this.arrow = true;
      this.menuShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.equipmentAssets {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .assetsLeft {
    width: 15.5%;
    height: 100%;
    position: absolute;
    left: 0;
    background: url("../assets/images/assetsLeft.png") no-repeat;
    background-size: 100% 100%;
    .btnLeft {
      height: 60%;
      width: 100%;
      position: absolute;
      top: 18%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      .btnList {
        width: 224px;
        height: 50px;
        .textArr {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ffffff;
        }
        .textArr ::before {
          content: attr(text);
          position: absolute;
          z-index: 10;
          //   bottom: 0;
          color: rgb(163, 227, 245);
          -webkit-mask: linear-gradient(
            to top,
            rgba(163, 227, 245, 0.7),
            transparent
          );
        }
      }
      .jiantou {
        position: absolute;
        width: 14px;
        height: 29px;
        top: 48%;
        right: 3%;
        cursor: pointer;
      }
    }
  }
  .assetsRight {
    width: 20.6%;
    height: 100%;
    position: absolute;
    right: 0;
    .rightOne {
      position: absolute;
      height: 100%;
      width: 100%;
      background: url("../assets/images/assetsRight.png") no-repeat;
      background-size: 100% 100%;
      .assetsTitle {
        color: #ffffff;
        height: 5.5%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        padding-left: 10%;
        box-sizing: border-box;
      }
      .assetsTitle ::before {
        content: attr(text);
        position: absolute;
        z-index: 10;
        color: rgb(135, 216, 238);
        -webkit-mask: linear-gradient(
          to top,
          rgba(163, 227, 245, 0.7),
          transparent
        );
      }
      .asstesContent1 {
        height: calc(100% - 5.5%);
        width: 100%;
        padding: 0% 3%;
        box-sizing: border-box;
        .models {
          width: 100%;
          height: 50.5%;
          background: url("../assets/images/assets1.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          .assetsStatus {
            width: 81px;
            height: 31px;
            position: absolute;
            top: 0;
            right: 0;
            background: url("../assets/images/zhuangtaikuang.png") no-repeat;
            background-size: 100% 100%;
            color: chartreuse;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .modelsImg {
            width: 41%;
            height: 90%;
          }
        }
        .modelIntroduction {
          height: 18%;
          color: #ffffff;
          letter-spacing: 2px;
          text-align: justify;
          text-indent: 30px;
          margin-top: 10px;
          line-height: 30px;
          overflow-y: auto;
        }
        .modelIntroduction::-webkit-scrollbar {
          width: 0 !important;
        }
        .assetsList {
          height: calc(100% - 70.5%);
          width: 100%;
          display: flex;
          align-content: space-between;
          flex-wrap: wrap;
          overflow-y: auto;
          .assetsArr {
            background: url("../assets/images/assetsArr.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: 16%;
            .listContent {
              margin-left: 10%;
              width: 80%;
              height: 100%;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              align-items: center;
              color: #ffffff;
            }
          }
        }
        .assetsList::-webkit-scrollbar {
          width: 0 !important;
        }
      }
    }
  }
  //箭头
  .jiantoufan {
    position: absolute;
    width: 14px;
    height: 29px;
    top: 48%;
    left: 0;
    cursor: pointer;
  }
}
//left动画
@keyframes donghua1 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}
.left-leave,
.left-leave-active,
.left-leave-to {
  animation: donghua1 1s linear;
}

.left-enter,
.left-enter-active,
.left-enter-to {
  animation: donghua1 1s linear reverse;
}
//right动画
@keyframes donghua2 {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
.right-leave,
.right-leave-active,
.right-leave-to {
  animation: donghua2 1s linear;
}

.right-enter,
.right-enter-active,
.right-enter-to {
  animation: donghua2 1s linear reverse;
}
</style>