<template>
  <view>
    <view class="bgImg">
      <image src="/static/homeBg.png"  mode="scaleToFill" />
    </view>
    <view class="centerBox">
      <view style="margin-bottom: 32rpx">
        <u-search
          placeholder="请输入姓名"
          bgColor="#fff"
          placeholderColor="rgba(0,0,0,0.26)"
          searchIconColor="#7cbdf4"
          :showAction="false"
          @search="searchHandler"
          :height="32"
          v-model="keyword"
        ></u-search>
      </view>

      <view>
        <swiper class="swiper" @change="changeSwiperHandler">
          <swiper-item v-for="item in peopleList" :key="index+'x'">
            <view class="flexA AAA">
              <view class="itemBox" v-for="it in item" :key="it.id" @click="toDetail">
                <image :src="it.imageUrl" style="width: 218rpx; height: 218rpx; border-radius: 8rpx 8rpx 0 0" />
                <view class="Box flexA">
                  <view style="font-size: 28rpx;">{{ it.name }}</view>
                  <!-- 未投票 -->
                  <image src="/static/star1.png" mode="scaleToFill"  @click.stop="vote" />
                  <!-- 已投票 -->
                  <!-- <image src="/static/star11.png" mode="scaleToFill" /> -->
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 指示器 -->
      <view class="flexC" style="margin-top: 16rpx">
        <view class="curP" v-for="(item, index) in peopleList" :class="index == curP ? 'blue' : ''" :key="index+'j'"></view>
      </view>

      <!-- 提示文本 -->
      <view class="flexC TText">每人只有3次投票机会，不能投给同一人</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      peopleList: [
        [
          {
            id: 1,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
            voteState: 1,
          },
          {
            id: 2,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 3,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 4,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 5,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 6,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
        ],
        [
          {
            id: 7,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 8,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id:9,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 10,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 11,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
          {
            id: 12,
            name: '张三',
            imageUrl:
              'https://ts1.cn.mm.bing.net/th/id/R-C.6f300ca4cdab1dc50fc88252d018a6e8?rik=nPkC3v2CjshTuA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2fw1401h939%2f20171225%2fc8d8-fypyuva9796252.png&ehk=q3GWeRMU98%2bLYo0sm5uNeDXoHKGtn%2bqLMFFXCxQaUEc%3d&risl=&pid=ImgRaw&r=0',
          },
        ],
      ],
      curP: 0,
    }
  },
  methods: {
    searchHandler(val) {
      console.log(val)
    },
    changeSwiperHandler(e) {
      console.log(e)
      this.curP = e.detail.current
    },
    toDetail(){
        uni.navigateTo({
          url:'/pages/index/vote'
        })
    },
    vote(){
      console.log('点击投票了');
    }
  },
}
</script>

<style lang="scss">
page {
  // background: #fff;
}

.curP {
  /* margin: 0 auto; */
  width: 12rpx;
  height: 12rpx;

  border-radius: 50%;
  background: #d8d8dc;
  margin-right: 12rpx;
  /* background: red; */
}
.blue {
  width: 28rpx;
  height: 12rpx;
  background: #79c1ef;
  margin-right: 12rpx;
  border-radius: 20rpx;
}
.bgImg {
  position: relative;
  width: 100vw;
  height: 498rpx;
  // background: #ade1ff;
  image {
    // position: absolute;
    // left: 0;
    // top: 0;
    height: 100%;
    width: 100%;
  }
}
.centerBox {
  position: absolute;
  width: 100%;
  height: 1200rpx;
  border-radius: 16rpx 16rpx 0 0;
  background: #eff8ff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 16rpx;
  margin-top: -10rpx;
  z-index: 2;
}
.TText {
  color: rgba(0, 0, 0, 0.26);
  font-size: 22rpx;
  margin-top: 42rpx;
}
.AAA {
  flex-wrap: wrap;
}
.itemBox {
  flex-wrap: wrap;
  width: 218rpx;
  /* margin-bottom: 20rpx; */
  margin: 0 8rpx 20rpx;
}
.Box {
  flex-direction: column;
  padding: 12rpx 20rpx;
  box-sizing: border-box;
  background: #fff;
  view {
    margin: 12rpx 0 8rpx;
    color: rgba(0, 0, 0, 1);
    font-size: 28rpx;
  }
  image {
    width: 178rpx;
    height: 48rpx;
  }
}
.swiper {
  height: 750rpx;
}
</style>