<template>
  <view class="gather">
    <view @click="selectLocation" v-if="isFshow">
     
      	<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
      
      		<view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
      			<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;">
      			</view>
      			<view class="town_name" style="color:#000;">{{street}}</view>
      		</view>
      		<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
      			<view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
      		</navigator>
      	</view>
      	<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
      		<view class="bg-img">
      			<img :src="bgColor" alt="">
      		</view>
      	</view> -->
      
      </view>

    <zbpSwiper
      :isSelectPlace="true"
      :location_Arr="locationArr"
      :town="street"
      @kkchange="kkchange"
    ></zbpSwiper>
    <u-empty
      :show="jurisdiction"
      mode="permission"
      :text="emptyText"
      icon="/static/empty/permission.png"
    ></u-empty>
    <view class="business com special_work" v-if="jurisdiction == false">
      <view class="title project">
        <view>更多功能</view>
        <view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
        <view v-else class="edit" @click="editComfirm">完成</view>
      </view>
      <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="
                editFlag ? removeMenu(item) : clickMenu(item.type, item.data)
              "
            >
              <image
                class="icon_img"
                :src="`${prefix}${item.icon}`"
                mode="aspectFit"
              >
              </image>
              <u-icon
                v-if="editFlag"
                class="icon"
                name="minus-circle-fill"
                color="red"
              ></u-icon>
              <text class="text">{{ item.name }}</text>
            </view>
          </u-transition>
        </block>
        <view
          v-else-if="!editFlag"
          @click="editFlag = true"
          style="text-align: center; width: 100%; color: #aaa"
          >还没有应用,点我添加应用</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="pushMenu(item)">
            <image
              class="icon_img"
              :src="`${prefix}${item.icon}`"
              mode="aspectFit"
            >
            </image>
            <u-icon class="icon" name="plus-circle-fill"></u-icon>
            <text class="text">{{ item.name }}</text>
          </view>
        </u-transition>
      </view>
    </view>

    <!-- <view class="" v-if="jurisdiction == false && isShow == false">
      <emptyPage title="暂无信息"></emptyPage>
    </view> -->
  </view>
</template>

<script>
import Cache from '@/utils/cache';
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
import emptyPage from '@/components/emptyPage.vue';
import zbpSwiper from '@/components/zbpSwiper'
import {
  getArea,
  getStreet
} from '@/api/article.js';
import {
  mapState,
  mapGetters
} from 'vuex'
import {
  getWorkArticleCount,
  getSlideAPI
} from '@/api/article.js'
import {
  getStoreList,
  getUserInfo
} from '@/api/user.js'
import {
  getGeocoder,
  microSeachBarCode,
  microEadtProduct
} from '@/api/store.js'
import {
  Toast
} from '@/libs/uniApi';
import {
  getDiy
} from '@/api/api.js';
// #ifdef APP-PLUS
import uniMP from '@/utils/uniMP.js';
// #endif

export default {
  components: {
    mTabbar,
    zbpSwiper,
    emptyPage
  },
  data () {
    return {
      locationArr: ({}),
      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,
      bgColor: '',
      isFshow: false,
      street: '',
      // 编辑中标记
      editFlag: false,
      // 所有菜单的按钮
      AllMenuList: [{
        name: '商户平台',
        icon: 'spgl.png',
        data: '/pages/moreProject/moreProject',
        type: 2,
      },
      {
        name: '供销平台',
        icon: 'shsz.png',
        data: '__UNI__B5B1EDD',
        type: 1,
      },
      ],
      nowMenuList: [],
      street: '',
      showPicker: false,
      columnData: [],
      bgColor: '',
      isFshow: false,
      backColor: 'rgba(252, 252, 252, 0)'
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'location', 'isLogin'])
  },
  created () { },
  onLoad () {
    this.Area()
    this.initMenu();
  },

  onShow () {
    if (this.isLogin) {
      this.emptyText = '暂无可用应用'
      this.jurisdiction = false
    } else {
      this.emptyText = '请登录'
      this.jurisdiction = true
    }
    this.getUserInfo()

  },

  onPullDownRefresh () {
    this.getUserInfo()
    uni.stopPullDownRefresh()
  },
  beforeDestroy () {
    // 销毁监听事件
    this.$bus.$off('value-updated')
  },
  mounted () {
    if (this.street.length <= 0) {
      this.appLocation()
    }
    // #ifdef  H5
    // 监听页面滚动事件
    window.addEventListener("scroll", this.scrolling);
    // #endif

    this.$bus.$on('value-updated', (newValue) => {
      // 更新父组件的值 
      this.street = newValue.split(',')[0]
    });

  },
  // #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

  methods: {
    scrolling () {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop;
      // console.log("header 滚动距离 ", scrollTop);
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;

      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //你想做的事情
        // console.log("header  你已经到底部了");
      }


      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


      }


    },
    // 初始化菜单
    initMenu () {
      let all = uni.getStorageSync('gatherAllMenuList');
      let now = uni.getStorageSync('gatherNowMenuList');
      if (all) {
        this.AllMenuList = JSON.parse(all);
      }
      if (now) {
        this.nowMenuList = JSON.parse(now);
      }
    },
    clickMenu (e, data) {
      switch (e) {
        case 1:
          this.getUniMp(data);
          break;
        case 2:
          this.navigator(data);
          break;
      }
    },
    // 添加菜单
    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('gatherAllMenuList', JSON.stringify(this.AllMenuList));
      uni.setStorageSync('gatherNowMenuList', JSON.stringify(this.nowMenuList));
    },
    getUniMp (appid) {
      console.log('点击小程序');
      // #ifdef APP-PLUS
      uniMP.loadMP(appid);
      return;
      // #endif
      uni.showToast({
        icon: 'none',
        title: 'H5不支持打开小程序'
      })
    },
    changeHandler (e) {
      const {
        columnIndex,
        value,
        values,
        index,
        picker = this.$refs.uPicker
      } = e;
      if (columnIndex === 0) {
        getStreet({
          area_code: value[0]['code']
        }).then(res => {
          this.$refs.uPicker.setColumnValues(1, res.data);
        });
      }
    },

    Area () {
      getArea({
        city_code: 510500
      }).then(res => {
        this.$refs.uPicker.setColumnValues(0, res.data);
        this.Street(res.data[0]['code']);
      });
    },
    Street (code) {
      getStreet({
        area_code: code
      }).then(res => {
        this.$refs.uPicker.setColumnValues(1, res.data);
      });
    },
    selectLocation () {
      this.showPicker = true
    },
    confirm (e) {
      this.street = e.value[1].name

      this.$nextTick(() => {
        this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);

      })
      this.showPicker = false
    },
    appLocation () {
      uni.getLocation({
        type: 'wgs84',
        timeout: '10',
        success: (res) => {
          // console.log(res)

          let latitude, longitude;
          latitude = res.latitude.toString();
          longitude = res.longitude.toString();
          getGeocoder({
            lat: latitude,
            long: longitude
          }).then(res => {
            let town = res.data.address_reference.town.title
            let street_id = res.data.address_reference.town.id
            this.street = res.data.address_component.street
            this.$nextTick(() => {
              this.$bus.$emit('value-updated', this.street + ',' + street_id);

            })

          }).catch(err => {
            uni.showToast({
              title: err,
              icon: 'none'
            })
          })
        },
        fail: (err) => {

          uni.showToast({
            title: "获取定位超时",
            icon: 'none',
            duration: 2000
          });
        }
      });
    },


    kkchange (e) {
      this.bgColor = e
    },

    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;
        // 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);
        }
        // console.log(that.userInfoData);
      });
    }
  }
};
</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-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 */

  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;
  margin-top: 52.63rpx;
  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: 63.16rpx;
        height: 63.16rpx;
      }

      .icon {
        position: absolute;
        top: 0rpx;
        right: 25rpx;
      }

      .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;
}
</style>