<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">

              <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>

                </view>
              </view>
            </view> -->


            <x-dropdown @open="open1" @close="close1" ref="uDropdownRef">
              <view class="trigger">
                <view class="avatar-wrapper touxbox">
                  <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>
                    </view>
                  </view>
                </view>
              </view>

              <template #menu>
                <view class="custom-menu">
                  <!-- <view class="custom-menu-item" v-for="(item, index) in customMenuList" :key="index"
                    @click="handleCustomClick(item, index)">
                    <image :src="item.icon" class="menu-icon" />
                    <text class="menu-text">{{ item.label }}</text>
                  </view> -->
                  <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>
                </view>
              </template>
            </x-dropdown>





            <!-- <u-dropdown ref="uDropdownRef" @open="open1" title="" menu-icon="" @close="close1"
              :class="!useropen?'newudropdown nonenewudropdown':'newudropdown'"
              style="position: absolute; right: 0; height: 50px; top:20px; 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> -->
            <!--    <u-dropdown ref="uDropdownRef" @open="open1" title="54565465654" @close="close1"
              :class="!useropen?'newudropdown nonenewudropdown':'newudropdown'">
              <u-dropdown-item v-model="value1" :options="userlist">
                <view class="slot-content">
                  <view class="item-box dropdown-menu">
                    <view class="item dropdown-item" @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 class="menufhbox">
        <view @click="fanhui()" style="display: flex; align-items: center; margin-left:10px;"><u-icon
            name="arrow-leftward" color="#fff" size="20"></u-icon>返回</view>
        <view style="display: flex; align-items: center; margin-right: 20px;">
          {{userStore.parentmenutitle}}/{{userStore.childrenmenutitle}}
        </view>
        <!--  <view @click="shauxin()" style="display: flex; align-items: center; margin-right:10px;"><u-icon name="reload"
            color="#fff" size="20"></u-icon>刷新</view> -->


      </view>
    </view>
    <uni-drawer ref="showLeft" mode="left" :width="200" :mask-click="true">
      <view class="menu_back">
        <view class="menu_logo_back" style="display: flex; flex-direction: row; justify-content: center;">
          <image :src="logoimg" style="width:40px;height: 40px; margin-top: 12px;"></image>
          <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:18px;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)" style="border-top:1rpx solid #575555"
                :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";
  import checkVersion from '@/pages/lq-upgrade/checkVersion';
  import {
    getappConfigKey
  } from "@/apis/system/user"
  import logoimg from '@/static/logo-DN6OD_0Z.png'
  export default {
    data() {
      return {
        useropen: false,
        value1: '',
        logoimg,
        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'
        },
        appVersion: '',
        erweimaurl: '',
        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: 'settings-filled'
            },
            data: [{
              title: "检查表",
              path: "/pages/zhixing/jianchabiao",
            }, {
              title: "调查问卷",
              path: "/pages/zhixing/wenjuan",
            }]
          },
          // {
          //   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: {
      fanhui() {
        uni.navigateBack({
          delta: 1, // 默认返回上一页，数值越大返回层数越多
          success: () => {
            console.log('返回成功')
          }
        });
      },
      shauxin() {
        // 在页面方法中调用
        // uni.reload();
        this.$emit('reloadym')
      },
      open1(index) {
        this.useropen = true;
        this.$refs.uDropdownRef.highlight();

      },
      close1(index) {

        this.$refs.uDropdownRef.highlight(index);
        this.useropen = false;
      },
      usertagClick(index) {
        // debugger
        if (index == 0) {
          this.$refs.uDropdownRef.close();


          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) {
        //debugger
        this.collapse_item_path = this.menu_data[index].data[i].path;
        this.userStore.setparentmenutitle(this.menu_data[index].title);
        this.userStore.setchildrenmenutitle(this.menu_data[index].data[i].title);
        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)
      },
      // 下方是自动更新
      upgrade() {
        //判断是否为安卓去更新版本
        let shebeitype = uni.getSystemInfoSync().osName; //判断是否Android或ios 'android', 'ios'
        //	debugger
        //console.log('环境', shebeitype);

        if (shebeitype == 'android') {
          //获取版本号 并且请求接口获取最新app 进行比较是否更新
          let _self = this;

          plus.runtime.getProperty(plus.runtime.appid, (info) => {
            //console.log('获取出来的', JSON.stringify(info));
            this.appVersion = info.version;
            //1:android, 2:ios, 3:harmony framework:app:query
            getappConfigKey('1').then(res => {
              //	debugge
              //res.msg = 'http://111.15.191.198:8096/profile/app/20240116_android_223_v1.3.1.apk';
              console.log("更新", res.data)
              if (res.data) {
                if (!res.data.url) return;
                _self.erweimaurl = this.userStore.allurl + res.data.url || '';
                let happVersion = res.data.appVersion;

                let msgdatalist = happVersion.split('v');
                if (msgdatalist.length < 1) return; //如果数组长度小于1 说明地址为空
                // let appversionnumber = msgdatalist[1].split('.apk')[0];
                let appversionnumber = msgdatalist[1];
                let name = 'v' + appversionnumber; //新版本名称
                let code = appversionnumber; //新版本号（数字）
                // let content = `1.新增完善部分功能<br>2.优化用户体验度`; //更新内容
                let content = res.data.remark ? `${res.data.remark}` : '优化用户体验度'; //更新内容
                let url = _self.erweimaurl; //app下载链接，（演示请换成真正在下载链接）
                //	url = 'http://111.15.191.198:8096/profile/app/20240116_android_223_v1.3.1.apk';
                let forceUpdate = false; //是否强制更新
                let selfVersionCode = _self.appVersion; //线上版本号
                //console.log('返回的下载地址', url);
                checkVersion({
                  selfVersionCode, //线上版本号
                  name, //最新版本名称
                  code, //最新版本号
                  content, //更新内容
                  url, //下载链接
                  forceUpdate //是否强制升级			  
                })


              }
            });
          });

        }


      },
    },
    mounted() {
      this.getNotice()
      setTimeout(() => {
        this.getMessage()
      }, 500);
      // getappConfigKey(
      //   '1'
      // ).then(res => {
      //   debugger
      // });
      // #ifdef APP-PLUS
      this.upgrade(); //获取版本号 并且请求接口获取最新app 进行比较是否更新
      // #endif
    }
  }
</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: 18px;

    // 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;

      }
    }

    // ::v-deep .u-dropdown__content__mask {
    //   display: none !important;
    // }

  }

  .nonenewudropdown {
    ::v-deep.u-dropdown__content {
      display: none !important;
    }
  }

  .menufhbox {
    width: 100%;
    background: rgba(60, 156, 255, 0.8);
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
  }
</style>