<style lang="scss" scoped>
  .gather {
    .gather-header {
      background-color: #40AE36;

      .location {
        height: 98rpx;
        padding: 0 28rpx;

        .box {
          height: 98rpx;
        }

        .town_name {
          color: #fff;
          margin-left: 18rpx;
          font-size: 30rpx;
        }
      }
    }

    .swiperBg {
      z-index: 1;

      .colorBg {
        position: absolute;
        left: 0;
        top: 0;
        height: 130rpx;
        width: 100%;
      }

      .page_swiper {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 10rpx;
        overflow-x: hidden;
        z-index: 8;
        padding: 0 10rpx;

        swiper-item {
          border-radius: 10rpx;
        }

        .swiper-item,
        image,
        .acea-row.row-between-wrapper {
          width: 100%;
          margin: 0 auto;
          border-radius: 10rpx;
        }

        swiper {
          width: 100%;
          display: block;
          height: auto;

          &.scalex {
            /deep/.uni-swiper-slide-frame {
              transform: translate(0, 0) !important;
            }
          }
        }

        image {
          transform: scale(0.93);
          transition: all 0.6s ease;
        }

        swiper-item.active,
        swiper-item.scalex {
          image {
            transform: scale(1);
          }
        }

        /*用来包裹所有的小圆点  */
        .dots {
          width: 156rpx;
          height: 36rpx;
          display: flex;
          flex-direction: row;
          position: absolute;
          left: 320rpx;
          bottom: 0;
        }

        /*未选中时的小圆点样式 */
        .dot {
          width: 16rpx;
          height: 6rpx;
          border-radius: 6rpx;
          margin-right: 6rpx;
          background-color: rgba(255, 255, 255, .4);

          /*选中以后的小圆点样式  */
          &.active {
            width: 32rpx;
            height: 6rpx;
            background-color: rgba(255, 255, 255, .4);
          }
        }
      }
    }

    .title-img {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;

      image {
        width: 340rpx;
        height: 42rpx;
      }

      .title {
        height: 42rpx;
        padding: 0 80rpx;
        font-size: 34rpx;
        color: $theme-color;
        font-weight: bold;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: left center;
      }
    }
  }
</style>
<template>
  <view class="gather" @click.stop="clickWhite">
    <!--顶部定位-->
    <view class="gather-header">
      <view style="height: var(--status-bar-height);"></view>
      <view class="location">
        <view class="box flex_a_c_j_sb">
          <view class="place_wrapper flex_a_c" @click="changeMap">
            <view class="iconfont icon-weizhi" style="color:#fff;font-size:40rpx;"></view>
            <view class="town_name">{{street||'定位中' }}</view>
          </view>
          <view class="flex_a_c_j_sb">
            <view style="margin-right: 30rpx;" @click="scanQRcode" hover-class="none">
              <view class="iconfont icon-saoma" style="color:#fff;font-size:40rpx;"> </view>
            </view>
            <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
              <view class="iconfont icon-xiaoxi" style="color:#fff;font-size:40rpx;"> </view>
            </navigator>
          </view>
        </view>
      </view>
    </view>

    <!--轮播图-->
    <view class="swiperBg" style="margin-top: 12px;">
      <view class="swiper page_swiper">
        <swiper :autoplay="true" loop indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"
          :current="swiperCur" style="height:330rpx;margin: 0 auto;width:710rpx;" @change="swiperChange">
          <block v-for="(item,index) in imgUrls" :key="index">
            <swiper-item :class="{ active: index == swiperCur }" @click="changeSwiper(item.info)">
              <view class='slide-navigator acea-row row-between-wrapper'>
                <image :src="item.img" class="slide-image aa" style="height:330rpx;" mode="aspectFill">
                </image>
              </view>
            </swiper-item>
          </block>
        </swiper>
        <view class="dots">
          <block v-for="(item,index) in imgUrls" :key="index">
            <view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
          </block>
        </view>
      </view>
    </view>

    <view class="title-img">
      <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/807b8202403111125379295.webp" mode=""></image>
    </view>

    <view class="business com special_work" v-if="jurisdiction == false">
      <view class="content">
        <block v-if="nowMenuList.length > 0">
          <u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
            <view class="examine" @click.stop="editFlag ? removeMenu(item) : clickMenu(item)"  @longpress="editFlag = true">
              <image class="icon_img" :src="item.pic" mode="aspectFit">
              </image>
              <!-- <u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon> -->
              <view v-if="editFlag" class="icon" style="background-color: red;">删除</view>
              <text class="text">{{ item.name }}</text>
            </view>
          </u-transition>
        </block>
        <view class="add-box examine"
          style="display: flex;justify-content: center;flex-direction: column;align-items: center;"
          @click.stop="editFlag = true" @longpress="editFlag = true" v-if="!editFlag">
          <view class="add-box-icon"
            style="margin-bottom: 14rpx; width:84rpx;height:84rpx;border: 2rpx solid #40AE36;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;">
            <u-icon name="plus" size="25" :bold="true" color="#40AE36"></u-icon>
          </view>
          <text>添加应用</text>
        </view>
      </view>
    </view>
    <view v-if="editFlag" class="business com special_work edit_card">
      <view class="title project" style="padding: 0 28rpx">
        <view>编辑功能</view>
        <view class="edit2" @click="editComfirm">完成</view>
      </view>
      <view class="content">
        <u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
          <view class="examine" @click.stop="pushMenu(item)">
            <image class="icon_img" :src="item.pic" mode="aspectFit"> </image>
            <!-- <u-icon class="icon" name="plus-circle-fill"></u-icon> -->
            <view class="icon">添加</view>
            <text class="text">{{ item.name }}</text>
          </view>
        </u-transition>
      </view>
    </view>
    <Loading></Loading>

    <!--自定义底部tab栏-->
    <customTab :newData="newData" :activeRouter="activeRouter"></customTab>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  import {
    getStoreList,
    getUserInfo
  } from '@/api/user.js'
  import {
    Toast
  } from '@/libs/uniApi';
  import {
    applet
  } from '@/api/public.js';
  import customTab from '@/components/customTab';
  import {
    getVersion,
    getNavigation
  } from "@/api/public";
  // #ifdef APP-PLUS
  import uniMP from '@/utils/uniMP.js';
  // #endif

  export default {
    components: {
      customTab
    },
    data() {
      return {
        imgUrls: [{
          img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e2f0520240203154207556.png'
        }],
        swiperCur: 0,
        locationArr: ({}),
        isshow: false,
        emptyText: '暂无可用应用',
        jurisdiction: false, // 是否有权限
        mer_id: '',
        userInfoData: {
          mer_info: {
            type_id: 0
          }
        },
        prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
        isShow: false,
        isFshow: false,
        // 编辑中标记
        editFlag: false,
        // 所有菜单的按钮
        AllMenuList: [],
        nowMenuList: [],
        street: '',
        showPicker: false,
        columnData: [],
        isFshow: false,
        backColor: 'rgba(252, 252, 252, 0)',
        newData: {},
        activeRouter: '',
      };
    },
    computed: {
      ...mapGetters(['userInfo', 'location', 'isLogin'])
    },
    created() {},
    onLoad() {},
    onShow() {
      this.street = this.$store.state.storage.address.townName;
      this.getNav();
      if (this.isLogin) {
        this.emptyText = '暂无可用应用'
        this.jurisdiction = false
        this.initAllAppLet();
      } else {
        this.emptyText = '请登录'
        this.jurisdiction = true
      }
      this.getUserInfo();
      this.imgUrls = uni.getStorageSync('swiperImgList');
    },
    onPullDownRefresh() {
      this.getUserInfo()
      uni.stopPullDownRefresh()
    },
    beforeDestroy() {},
    mounted() {},
    // #ifdef APP-PLUS
    onPageScroll(e) {
      const scrollTop = e.scrollTop;
      if (scrollTop <= 20) {
        this.backColor = 'rgba(252, 252, 252, 0)'
        this.isFshow = false
      } else if (20 < scrollTop && scrollTop <= 100) {
        this.backColor = 'rgba(252, 252, 252, .5)'
        this.isFshow = true
      } else if (scrollTop > 100) {
        this.backColor = 'rgba(252, 252, 252, 1)'
        this.isFshow = true
      }
    },
    // #endif
    onHide() {
      uni.$emit('showLoading', false);
    },
    methods: {
      changeSwiper(e){
        if(e.length>0 && e[1].value){
          uni.navigateTo({
            url:e[1].value
          })
        }
      },
      swiperChange(e) {
      	let {
      		current,
      		source
      	} = e.detail;
      	if (source === 'autoplay' || source === 'touch') {
      		this.swiperCur = e.detail.current;
      		this.bgColor = this.imgUrls[e.detail.current]['img']
      	}
      },
      getNav() {
        getNavigation().then(res => {
          this.newData = res.data
          if (this.newData.status && this.newData.status.status) {
            uni.hideTabBar()
          } else {
            uni.showTabBar()
          }
        })
      },
      async scanQRcode() {
        // #ifdef APP-PLUS
        let result = await this.$store.dispatch("permission/requestPermissions",
          'CAMERA')
        if (result !== 1) return;
        // #endif
        uni.scanCode({
          success: (res) => {
            console.log(res);
            if (res.result && res.result.includes('pages/payment/get_payment')) {
              let url = res.result.replace(/.*lihaink.cn/g, '');
              uni.navigateTo({
                url: url,
                fail: () => {
                  Toast('跳转页面失败')
                }
              })
            } else {
              Toast('无效的二维码')
            }
          }
        })
      },
      // 选择位置
      changeMap() {
        uni.navigateTo({
          url: `/pages/select_address_n/select_address_n`,
          success: () => {
            uni.$once('changeAddress', (e) => {
              this.street = e.street.name;
              this.town = e.street.name;
              this.$store.commit('setAddress', {
                street_id: e.street.code,
                townName: this.town
              });
              if (e.longitude) {
                this.longitude = e.longitude;
                this.latitude = e.latitude;
                this.$store.commit('setLocation', {
                  lat: e.latitude,
                  long: e.longitude,
                });
              }
            })
          }
        })
      },
      initAllAppLet() {
        applet().then(res => {
          this.AllMenuList = res.data;
          this.initMenu();
          this.showControllerAllLet();
        }).catch(e => {
          console.log(e);
        })
      },
      // 根据类型来判断是否显示
      showControllerAllLet() {
        let user;
        if (typeof this.$store.state.app.userInfo == 'string') {
          user = JSON.parse(this.$store.state.app.userInfo)
        } else user = JSON.parse(JSON.stringify(this.$store.state.app.userInfo))
        if (!user?.show_controller_applet) {
          this.AllMenuList = this.AllMenuList.filter(item => item.app_id != "__UNI__83ABA97"); //隐藏大屏控制
        }
      },
      // 初始化菜单
      initMenu() {
        let nowMenu = uni.getStorageSync('gatherMenuList');
        try {
          let list = JSON.parse(nowMenu || '[]');
          let now = [];
          let all = [];
          this.AllMenuList.forEach((item) => {
            if (list.find(t => t.name == item.name)?.name != item.name) all.push(item);
            else now.push(item)
          })
          this.AllMenuList = all;
          this.nowMenuList = now;
        } catch (e) {
          this.nowMenuList = [];
        }
      },
      clickMenu(data) {
        this.getUniMp(data);
      },
      // 添加菜单
      pushMenu(data) {
        this.nowMenuList.push(data);
        this.AllMenuList = this.AllMenuList.filter((item) => {
          return item.name != data.name;
        })
      },
      // 移除菜单
      removeMenu(data) {
        this.AllMenuList.push(data);
        this.nowMenuList = this.nowMenuList.filter((item) => {
          return item.name != data.name;
        })
      },
      // 编辑完成
      editComfirm() {
        this.editFlag = false;
        uni.setStorageSync('gatherMenuList', JSON.stringify(this.nowMenuList));
      },
      getUniMp(data) {
        let that = this;

        // #ifdef APP-PLUS
        if (data.version) return uniMP.loadAppletMP(data);
        else switch (data.type) {
          case 1:
            uniMP.loadMP(data.data);
            break;
          case 2:
            uniMP.loadMPx(data.data);
            break;
          case 3:
            uniMP.loadMPurl(data.data);
            break;
          case 4:
            uniMP.loadMPdns(data.data);
            break;
        }
        return;
        // #endif
        // #ifdef H5
        // if (type == 2) {
        // 	this.navigator(`/pages/moreProject/moreProject`);
        // } else {
        // 	uni.showToast({
        // 		icon: 'none',
        // 		title: 'H5不支持打开小程序'
        // 	})
        // }
        uni.showToast({
          icon: 'none',
          title: 'H5不支持打开小程序'
        })
        // #endif

      },
      navigator(url, t) {
        // if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
        uni.navigateTo({
          url: url
        })
      },
      getUserInfo: function() {
        let that = this;
        getUserInfo().then(res => {
          that.userInfoData = res.data;
          that.$store.commit('SET_USERINFO', res.data);
          // console.log(res.data.service);
          if (res.data.service == null) {
            // console.log('123');
            this.isShow = false
          } else {
            this.isShow = true
            this.mer_id = res.data.service.mer_id
          }

          if (!res.data.mer_info) {
            that.$set(this, 'jurisdiction', false);
          }
        });
      },
      // 点击空白区域完成添加
      clickWhite(){
        if(this.editFlag) this.editFlag = false;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .gather {
    padding-bottom: 164.91rpx;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
    position: relative;
  }

  .sitebox {
    animation-name: fadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .site-box1 {
    width: 706rpx;
    /* #ifdef MP || APP-PLUS */
    height: 160rpx;
    /* #endif */
    /* #ifdef H5 */
    height: 120rpx;
    /* #endif */
    margin-bottom: 26.32rpx;
    position: absolute;
    top: 45rpx;
    left: 20rpx;

    z-index: 999;

    // 位置
    .place_wrapper {
      color: #fff;
      margin-right: 0rpx;

      font-size: 30rpx;

      .town_name {
        margin-left: 21rpx;
      }
    }

    .iconfont {
      font-size: 35.09rpx;
    }
  }

  .site-box {
    width: 100%;
    /* #ifdef MP || APP-PLUS */
    height: 160rpx;
    /* #endif */
    /* #ifdef H5 */
    height: 120rpx;
    /* #endif */
    margin-bottom: 26.32rpx;
    position: absolute;
    top: 0rpx;
    position: fixed;
    z-index: 999;
    /* #ifdef MP || APP-PLUS */
    padding-top: 75rpx;
    /* #endif */
    /* #ifdef H5 */
    padding-top: 25rpx;
    /* #endif */
    // background-color: #e5e5e5;
    // background: url("@/static/images/bg2.png") no-repeat;
    background-size: 100% 100%;
    padding-right: 20rpx;

    // 位置
    .place_wrapper {
      color: #fff;
      margin-right: 24.56rpx;
      font-size: 30rpx;

      opacity: 0;

      .town_name {
        margin-left: 21rpx;
      }
    }

    .iconfont {
      opacity: 0;
      font-size: 30rpx;
      font-size: 35.09rpx;
    }
  }

  .top_box {
    // padding-top: 180rpx;
    background: linear-gradient(#36a2ff, #fff);
  }

  .com {
    margin-left: 50%;
    transform: translate(-50%);
  }

  .business {
    width: 694.74rpx;
    // margin-bottom: 175rpx;
  }

  .special_work {
    // padding: 17.54rpx;
    width: 694.74rpx;
    padding-top: 30rpx;
    border-radius: 17.54rpx;
    // box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);

    .title {
      font-size: 31.58rpx;
      font-weight: 700;
      margin-bottom: 38.6rpx;
    }

    .project {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .edit {
        font-size: 26rpx;
        font-weight: 400;

        &::after {
          content: ">";
          margin-left: 10rpx;
        }
      }

      .edit2 {
        font-size: 26rpx;
        font-weight: 400;
      }
    }

    .content {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      // justify-content: space-between;

      .examine {
        margin-bottom: 35rpx;
        width: 173.68rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        // margin: 0 0 33.33rpx 33.33rpx !important;

        .icon_img {
          width: 83.16rpx;
          height: 83.16rpx;
        }

        .icon {
          position: absolute;
          top: -5rpx;
          right: 25rpx;
          background-color: green;
          color: #fff;
          border-radius: 50rpx;
          font-size: 22rpx;
          padding: 5rpx 10rpx;
        }

        .text {
          font-size: 26.32rpx;
          margin-top: 21.05rpx;
          color: #000;
        }
      }

      .text {
        font-size: 29.82rpx;
        color: #a4a4a4;
      }
    }

    .cont_jus {
      margin-top: 56.14rpx;
      justify-content: flex-start;

      &:first-child {
        // margin-right: 33rpx;
      }

      .examine {
        margin-right: 48rpx;

        &:first-child {
          margin-right: 48rpx;
        }
      }
    }
  }

  .edit_card {
    background-color: #fff;
    padding-top: 28rpx;
  }

  .rotate-box {
    transform: rotate(0deg);
    transition: transform .5s ease-out;
  }

  .rotate-box:active {
    transform: rotate(360deg);
  }

  // .location {
  // 	background-color: #f6f6f6;
  // 	width: 680rpx;
  // 	height: 150rpx;
  // 	position: absolute;
  // 	top: 0;
  // 	z-index: 9999;
  // 	border-radius: 20rpx;
  // 	left: 50%;
  // 	margin-left: -340rpx;
  // 	margin-top: 80rpx;
  // 	padding-left: 20rpx;

  // 	.locationa {
  // 		font-size: 28rpx;
  // 		color: #000;
  // 		font-weight: 500;
  // 		margin-top: 30rpx;
  // 		margin-bottom: 15rpx;
  // 	}

  // 	.locationb {
  // 		font-size: 20rpx;
  // 		color: #5a5a5a;
  // 	}

  // 	.locationx {
  // 		color: #000;
  // 		position: absolute;
  // 		top: 10rpx;
  // 		right: 20rpx;
  // 	}
  // }
</style>