<template>
  <view class="zbp-head-wrapper">
    <view class="color-lump"></view>
    <view class="bg-img">
      <img :src="bgColor" alt="">
    </view>
    <view class="site-box flex_a_c_j_sb">
      <view class="place_wrapper flex_a_c" @click="selectLocation">
        <view class="iconfont icon-weizhi"></view>
        <view class="town_name">{{street}}</view>
      </view>
      <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
        <view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
      </navigator>
    </view>
    <!-- 搜索栏 -->
    <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
      <view class="flex_a_c">
        <view class="iconfont icon-sousuo"></view>
        <input type="text" v-model="keyword" placeholder="搜索产品或店铺" disabled>
      </view>
      <button class="search_btn">搜索</button>
    </navigator>
    <!-- 轮播图 -->
    <view class="supply_chains-head">
      <swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
        :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
        indicator-active-color="#fff">
        <block v-for="(item,index) in swiper['url']" :key="index">
          <swiper-item class="swi_item" @click="swiperClick(item)">
            <u--image :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx" mode="aspectFill">
            </u--image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
      @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
  </view>
</template>

<script>
  import { getArea, getStreet } from '@/api/article.js';
  import { getIndexData, getDiy } from '@/api/api.js'
  import { getGeocoder } from '@/api/store.js';
  import { mapGetters } from 'vuex'
  import { Toast } from '../libs/uniApi';
  import Cache from '@/utils/cache';
  export default {
    props: {
      isSelectPlace: {
        type: Boolean,
        default: false
      },
      location_Arr: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        defaInd: [0, 0],
        street: '',
        showPicker: false,
        styleConfig: [],
        columnData: [],
        homeCombData: [],
        keyword: '',
        bgColor: '',
        swiper: {
          url: [{
            img: ''
          }],
          indicatorDots: true, // 显示面板指示点
          vertical: false, // 滑动方向是否为纵向
          autoplay: true, // 是否自动切换
          interval: 2000, // 自动切换时间间隔
          duration: 400 // 滑动动画时长
        },
      }
    },
    computed: mapGetters(['location']),
    watch: {
      location: {
        handler(newVal, oldVal) {
          if (newVal.address_component?.street) this.street = newVal.address_component.street
        },
        immediate: true
      }
    },
    created() {
      this.getBanner()
      this.Area()
      if (this.location.address_component?.street) this.street = this.location.address_component.street
    },
    methods: {
      swiperClick(item) {
        const url = item.info[1].value
        uni.navigateTo({
          url: url
        })
      },
      selectLocation() {
        this.isSelectPlace ? this.showPicker = true : ''
      },
      confirm(e) {
        this.street = e.value[1].name  
        this.showPicker = false
        this.$emit('selectPlce', e)
		let adress = Cache.get('LOCATION_DATA',true)
		adress.address_component.street=e.value[1].name
		Cache.set('LOCATION_DATA',adress)
      },
      changeHandler(e) {
        const {
          columnIndex,
          value,
          values,
          index,
          picker = this.$refs.uPicker
        } = e;
        if (columnIndex === 0) {
          getStreet({ area_code: value[0]['code'] }).then(res => {
            picker.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);
        });
      },

      swiperChange(e) {
        let { current, source } = e.detail;
        if (source === 'autoplay' || source === 'touch') {
          this.bgColor = this.swiper.url[e.detail.current]['img']
        }
      },
      // 对象转数组
      objToArr(data) {
        let obj = Object.keys(data).sort();
        let m = obj.map(key => data[key]);
        return m;
      },
      async getBanner(id) {
        let that = this;
        const { data } = await getDiy({ id: 0 })
        that.styleConfig = that.objToArr(data.value);
        /* 循环数组得到数据*/
        that.styleConfig.forEach((item, index, arr) => {
          if (item.name == 'headerSerch' || item.name == 'homeComb') {
            if (item.name == 'homeComb') {
              that.swiper.url = item.swiperConfig.list
            }
          }
        })
        this.bgColor = this.swiper.url[0].img
      },
    }
  }
</script>

<style lang="scss">
  .zbp-head-wrapper {
    position: relative;
    padding-top: 78.95rpx;
    overflow: hidden;

    .color-lump {
      z-index: 1;
      position: absolute;
      bottom: -86px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 102%;
      height: 133px;
      border-radius: 30px 30px 0 0;
      background-color: #fff;
    }

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      /* #ifdef MP || APP-PLUS */
      z-index: -1;
      /* #endif */
      /* #ifdef H5 */
      z-index: 0;
      /* #endif */
      z-index: 0;
      filter: blur(0);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        filter: blur(30rpx);
        transform: scale(1.5);
      }
    }

    .site-box {
      margin: 0 auto;
      width: 694.74rpx;
      height: 66.67rpx;
      margin-bottom: 26.32rpx;
      position: relative;

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

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

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

    .my-main {
      transition: background-color .5s ease;
    }

    .search_content {
      margin: 0 auto;
      width: 694.74rpx;
      height: 61.4rpx;
      padding: 2px 2px 2px 21.05rpx;
      border-radius: 100px;
      background: #fff;
      margin-bottom: 17.54rpx;
      position: relative;
      box-sizing: border-box;

      .icon-sousuo {
        font-size: 26.32rpx;
        font-weight: bold;
        color: #c8c7c6;
        margin-right: 17.54rpx;
      }

      .search_btn {
        color: #fff;
        width: 105.26rpx;
        height: 52.63rpx;
        line-height: 52.63rpx;
        background: #f84221;
        border-radius: 100px;
        font-size: 28.07rpx;
      }
    }

    .supply_chains-head {
      margin-bottom: 17.54rpx;
      position: relative;
      z-index: 2;

      .swiper {
        width: 694.74rpx;
        height: 242.11rpx;
        margin: 0 auto;
        border-radius: 15px;
        overflow: hidden;

        .swi_item {
          width: 100%;
          height: 242.11rpx;
        }
      }
    }
  }
</style>