<template>
  <view class="topviewbox">
    <view class="box-bg">
      <uni-nav-bar shadow="true" leftWidth="0rpx" rightWidth="0rpx" height="50px">
        <!-- <template v-slot:left>
          <view class="menu">
            <uni-icons type="bars" size="28" color="#fff" @click="open()"></uni-icons>
          </view>
        </template> -->
        <!--  <view class="input-view" ><view class="" style="width:300rpx">
            <uni-easyinput focus confirm-type="search" prefixIcon="search" v-model="search_value" @confirm="search()"
              placeholder="请输入搜索内容"></uni-easyinput>
          </view> </view> -->
        <view class="center-view"
          style="width:100%; display: flex; flex-direction: row; justify-content: space-between;">
          <view class="menu" style=" margin-top: 20rpx;">
            <uni-icons type="bars" size="28" color="#fff" @click="open()"></uni-icons>
          </view>
          <view style="font-size:48rpx; letter-spacing: 4rpx; color: #fff; line-height:50px ;">
            火灾与建筑物安全隐患管理平台
          </view>
          <view class="user_right" style="position: relative;">
            <!--  dfdsfsdfsdf -->
            <!-- <text class="user_name">金刚小子</text>
            <image class="image_user" :src="src"></image> -->
            <!-- <uni-icons type="notification-filled" :color="head_icon.notice" size="30" class="title_icon"></uni-icons>
            <uni-icons type="chatbubble-filled" :color="head_icon.message" size="30" class="title_icon"></uni-icons> -->
            <view class="avatar-wrapper touxbox">
              <!-- @click="toggleDropdown" -->
              <view style="border:1px solid #fff; width: 40px; height: 40px; border-radius: 30px;">
                <u-image :src="userStore.avatar" style="margin-top:0px; " shape="circle" class="user-avatar"
                  width="40px" height="40px" />
              </view>
              <view style="display: flex;flex-direction: column;align-items: center;  ">
                <view class="mingzi" style="display: flex;flex-direction: row;align-items: center;">
                  <view class="username" style="line-height:50px;">{{ userStore.name }}</view>
                  <!-- <el-icon class="userjiao"><caret-bottom /></el-icon> -->
                </view>
              </view>
            </view>
            <u-dropdown ref="uDropdownRef" @open="open1" title="userStore.name" @close="close1" class="newudropdown"
              style="position: absolute; right: 0; height: 50px; top:0; cursor: pointer;  width:100px;">
              <u-dropdown-item v-model="value1" :options="userlist">
                <view class="slot-content">
                  <view class="item-box dropdown-menu">
                    <view class="item dropdown-item" :class="[item.active ? 'active' : '']" @tap="usertagClick(index)"
                      v-for="(item, index) in userlist" :key="index">
                      {{item.label}}
                    </view>
                  </view>

                </view>
              </u-dropdown-item>

            </u-dropdown>

          </view>
        </view>
      </uni-nav-bar>
    </view>
    <uni-drawer ref="showLeft" mode="left" :width="250" :mask-click="true">
      <view class="menu_back">
        <view class="menu_logo_back">
          <text class="menu_logo_title">安全隐患管理平台 </text>
          <br>
          <!-- <text class="menu_logo_adress">火灾与建筑物安全隐患管理平台</text> -->
        </view>
        <uni-collapse v-model="collapse_value" :show-animation="true" :accordion="true" @change="getCollapse">
          <uni-collapse-item v-for="(menu,index) in menu_data" :key="index" :name="'coll'+index" title-border="none"
            :border="false" :show-arrow="false">
            <template v-slot:title>
              <view :class="collapse_value=='coll'+index?'menu_title_back_active':'menu_title_back'">
                <uni-icons :type="menu.title_icon.type" :color="menu.title_icon.color" :size="menu.title_icon.size"
                  style="float: left;margin-top: 15px;">
                </uni-icons>
                <text style="float:left; margin-top:13px;margin-left: 10px;">{{menu.title}}</text>
                <uni-icons :type="collapse_value=='coll'+index?'minus':'plus'" color="#fff" size="25"
                  style="float: right;margin-top: 15px;">
                </uni-icons>
              </view>
            </template>
            <view v-for="(item,i) in menu.data" :key="i" class="menu_item_back">
              <view @click="getItem(index,i)" :class="collapse_item_path==item.path?'menu_item_active':'menu_item'">
                <text style="float: left;margin-top:15px;margin-left: 35px;">{{item.title}}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </uni-drawer>
    <!-- 普通弹窗 -->
    <!--  <u-popup ref="popup" :show="showDropdown" mode="top" background-color="#fff" @change="change"
      class="custom-center-popup" :customStyle="{'width':'100px','right':'0px', 'left':'inherit !important'}">
      <view class="dropdown-menu">
        <view v-for="(item, index) in xialaList" :key="index" class="dropdown-item" @click="handleSelect(item)">
          <text>{{ item.label }}</text>
        </view>
      </view>
    </u-popup> -->

  </view>
</template>

<script>
  import useUserStore from "@/store/user";

  export default {
    data() {
      return {
        value1: '',
        userlist: [{
            label: '个人资料',
            value: 1,
          },
          {
            label: '退出登录',
            value: 2,
          },
        ],
        xialaList: [{
            label: '个人中心',
            path: '/pages/profile'
          },
          {
            label: '退出登录',
            action: 'logout'
          }
        ],
        showDropdown: false,
        userStore: useUserStore(),
        head_icon: {
          notice: '#3cf9c4',
          message: '#ffb92c'
        },
        search_value: '',
        src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
        collapse_value: "coll0",
        collapse_item_path: '',
        menu_data: [{
            title: "主页",
            title_icon: {
              color: '#fff',
              size: '22',
              type: 'home'
            },
            data: [{
              title: "数据监控",
              path: "/pages/admin/home",
            }]
          },
          {
            title: "设备管理",
            title_icon: {
              color: '#fff',
              size: '22',
              type: 'settings-filled'
            },
            data: [{
                title: "设备中心",
                path: "/pages/admin/equipment/equipment_center",
              },
              {
                title: "设备秘钥管理",
                path: "/pages/admin/equipment/equi_key",
              },
              {
                title: "新增设备",
                path: "/pages/admin/equipment/add_equi",
              }
            ]
          },
          {
            title: "调试设备",
            title_icon: {
              color: '#fff',
              size: '22',
              type: 'vip'
            },
            data: [{
                title: "Socket测试",
                path: "/pages/admin/test/socket",
              },
              {
                title: "设备调试",
                path: "/pages/admin/test/equi",
              }
            ]
          },
          {
            title: "用户管理",
            title_icon: {
              color: '#fff',
              size: '22',
              type: 'person'
            },
            data: [{
                title: "用户管理",
                path: "/pages/admin/user/user",
              },
              {
                title: "角色管理",
                path: "/pages/admin/user/userlabel",
              }
            ]
          }

        ]
      }
    },
    methods: {
      open1(index) {
        this.$refs.uDropdownRef.highlight();
      },
      close1(index) {
        this.$refs.uDropdownRef.highlight(index);
      },
      usertagClick(index) {
        // debugger
        if (index == 0) {
          uni.navigateTo({
            url: "/pages/mine/allnew"
          })
        } else if (index == 1) {

          this.$modal.confirm('确定要退出系统吗？').then(() => {
            this.userStore.userlogOut();

          });

        }
      },
      toggleDropdown() {
        //debugger
        this.$refs.popup.open('top')
        this.showDropdown = !this.showDropdown;
      },
      getItem(index, i) {
        this.collapse_item_path = this.menu_data[index].data[i].path
        uni.navigateTo({
          url: this.collapse_item_path
        })
        this.$refs.showLeft.close()
      },
      getCollapse(e) {
        console.log(e);
      },
      open() {
        this.$refs.showLeft.open();
      },
      getNotice() {
        if (this.head_icon.notice == "#fff") {
          this.head_icon.notice = "#3cf9c4"
        } else {
          this.head_icon.notice = "#fff"
        }
        setTimeout(() => {
          this.getNotice()
        }, 1000)
      },
      getMessage() {
        if (this.head_icon.message == "#fff") {
          this.head_icon.message = "#ffb92c"
        } else {
          this.head_icon.message = "#fff"
        }
        setTimeout(() => {
          this.getMessage()
        }, 1000)
      },
      search() {
        alert(this.search_value)
      }
    },
    mounted() {
      this.getNotice()
      setTimeout(() => {
        this.getMessage()
      }, 500)
    }
  }
</script>

<style lang="scss">
  $nav-height: 30px;

  .topviewbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

  }

  .box-bg {
    //  background-color: #F5F5F5;
    // background-color: #007aff;
    padding: 0px 0;

    ::v-deep .uni-navbar__header {
      background: #045dbd !important;
    }
  }

  .menu_item_active {
    background-color: #2a323f;
    color: white;
    height: 50px;
  }

  .menu_item:hover {
    background-color: #50627f;
    color: white;
    height: 50px;
  }

  .menu_item {
    background-color: #353f4f;
    color: white;
    height: 50px;
  }

  .menu_title_back_active {
    background-color: #353f4f;
    color: #fff;
    height: 50px;
  }

  .menu_title_back:hover {
    background-color: #353f4f;
    color: #fff;
    height: 50px;
  }

  .menu_title_back {
    background-color: #424f63;
    color: #fff;
    height: 50px;
  }

  .menu_logo_adress {
    position: absolute;
    top: 40px;
    left: 45px
  }

  .menu_logo_title {
    font-size: 22px;

    // position: absolute;
    // top: 10px;
    // left: calc(50% - 70px);
  }

  .menu_logo_back {
    height: 65px;
    color: white;
    text-align: center;
    line-height: 65px;
  }

  .menu_back {
    //  background-color: #424f63;
    background-color: #045dbd;

    width: 100%;
    height: 100%;
  }

  .user_name {
    float: right;
    margin-left: 10rpx;
    font-size: 15px;
    margin-top: 5px;
    margin-left: 5px;
    color: #587d8c;
  }

  .title_icon {
    float: right;
    margin-right: 10rpx;
    margin-top: 5px
  }

  .user_head {
    width: 100%;
    // background-color: #2bd19a;
    height: 38px;
    word-wrap: break-word;
    /*强制换行*/
    overflow: hidden;
    /*超出隐藏*/
  }


  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    width: 500px;
    flex: 1;
    // background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 15px 0;
    line-height: $nav-height;
  }

  .title {
    height: 65px;
    width: 100%;
    background-color: #2bd19a;
  }

  .image_user {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    float: right;
    margin-top: 5px;
  }

  .touxbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    // margin-bottom: 30px;
    cursor: pointer;

    ::v-deep .username {
      color: #fff;
      margin-left: 5px;
      font-size: 30rpx;
    }

    .userjiao {

      right: -15px !important;
      top: 25px;
      font-size: 12px;
      color: #ccc;
    }

  }












  .dropdown-menu {
    // position: absolute;
    // top: 120rpx;
    // right: 20rpx;
    // transform: translateX(-50%);
    width: 300rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 10rpx 0;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    text-align: center;
    // opacity: 0;
    // transition: all 0.3s ease;

    &.active {
      opacity: 1;
    }

    .dropdown-item:first-of-type {
      border-bottom: 1px dashed #ccc;
    }

    .dropdown-item {
      // width: 100%;
      padding: 24rpx 32rpx;
      font-size: 28rpx;
      color: #333;
      // display: flex;
      // align-items: center;
      cursor: pointer;

      &:active {
        background: #f5f5f5;
      }

      &:hover {
        background: #e8e8e8;
      }
    }
  }

  :v-deep.custom-center-popup .u-popup__content—transition {
    left: inherit !important;
    top: 60px !important;
  }

  /* 通过样式穿透修改居中弹窗的样式 */
  .custom-center-popup :v-deep.uni-popup__wrapper {
    width: 200px !important;
    height: 60vh !important;
    /* 还可以调整 top, left 等属性进行微调 */
  }
</style>
<style lang="scss" scoped>
  .newudropdown {
    ::v-deep.u-dropdown__content {
      // height: 200px !important;
      // width: 200px !important;
      left: initial !important;
      right: 0px !important;
      top: 50px !important;
      position: fixed;
      display: flex !important;
      flex-direction: row !important;
      justify-content: end !important;

      .u-dropdown__content__popup {
        width: 300rpx;
        // background: #fff;
        // height: 200px;
        height: 100px;
        overflow: hidden;
        margin-right: 10px;

      }
    }
  }
</style>