<template>
  <zj-page-layout :hasFooter="true" bgColor="#ffffff">
    <view class="swiper-container" v-if="bannerList.length > 0">
    	<swiper class="banner-swiper" @change="changeBanner" :autoplay="true">
    		<block v-for="(item, index) in bannerList" :key='index'>
    			<swiper-item>
    				<image :src="item" mode="aspectFill"></image>
    			</swiper-item>
    		</block>
    	</swiper>
    	<view class="dots-conatiner">
    		<view class="con" :style="'width:'+(bannerList.length * 20)+'rpx;'" >
    			<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "  ></view>
    		</view>
    	</view>
      <view class="explain" @tap="toExplain">活动说明</view>
    </view>

    <view class="all-container">
      <view class="form-container">
        <view class="row" v-if="applyDetail.customWebsitName">
          <view class="label">所属网点</view>
          <view class="value">{{applyDetail.customWebsitName}}</view>
        </view>
        <view class="row">
          <view class="label"><text>*</text>您的姓名</view>
          <view class="value">{{applyDetail.userName}}</view>
        </view>
        <view class="row">
          <view class="label"><text>*</text>您的电话</view>
          <view class="value">{{applyDetail.userMobile}}</view>
        </view>
        <view class="row">
          <view class="label"><text>*</text>您的地址</view>
          <view class="value">{{applyDetail.userAddress}}</view>
        </view>
      </view>

      <block v-for="(item, index) in applyDetail.items" :key="index">
        <view class="picker-container" v-if="item.type == 1 || item.type == 2">
          <view class="label"><text v-if="item.isRequire">*</text>{{item.question}}（{{{1: '单选', 2: '多选'}[item.type]}}）</view>
          <view class="img-list" v-if="item.answerType == 1 || item.answerType == 3">
            <view
              class="item active"
              v-for="(it, idx) in item.answer.filter(o => o.active)"
              :key="idx">
              <image :src="it.option_files[0].url" mode="aspectFill"></image>
              <view class="text" v-if="item.answerType == 1">{{it.option_value}}</view>
            </view>
          </view>
          <view class="text-list" v-else>
            <view
              class="item active"
              v-for="(it, idx) in item.answer.filter(o => o.active)"
              :key="idx">
              {{it.option_value}}
            </view>
          </view>
        </view>
        <view class="input-container" v-else-if="item.type == 3">
          <view class="label"><text v-if="item.isRequire">*</text>{{item.question}}</view>
          <u--textarea
            disabled
            autoHeight
            :placeholder="`请输入${item.question}`"
            border="none"
            v-model="item.answer[0].option_value"
          ></u--textarea>
        </view>
        <view class="input-container" v-else-if="item.type == 4">
          <view class="label"><text v-if="item.isRequire">*</text>{{item.question}}</view>
          <view class="images" v-if="item.answer[0].option_value.length">
            <view class="img" v-for="(it, idx) in item.answer[0].option_value" :key="idx">
              <image :src="it" mode="aspectFill" @tap="prevImg(it, item.answer[0].option_value)"></image>
            </view>
          </view>
        </view>
        <view class="input-container" v-else-if="item.type == 5">
          <view class="label"><text v-if="item.isRequire">*</text>{{item.question}}</view>
          <view class="images" v-if="item.answer[0].option_value.length">
            <view v-for="(it, idx) in item.answer[0].option_value" :key="idx" class="img" style="width:100%;">
              <video :src="it" style="width:100%;height: 240px;"></video>
            </view>
          </view>
        </view>
      </block>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="返回" @click="backPage"></u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        aid: '',
				bannerList: [], // 轮播图列表
				bannerCurrent: 0, // 轮播图当前值

        detailData: {},
        applyDetail: {},

        name: '',
        phone: '',
        address: '',
      }
    },

    onLoad({id, aid}) {
      this.id = id;
      this.aid = aid;
      this.getDetail();
      this.getApplyDetail();
    },

    methods: {
      //预览图片
      prevImg(url, urls) {
      	uni.previewImage({
      		current: url,
      		urls: urls
      	})
      },

      backPage() {
        this.$navToPage({
        	delta: 1
        }, 'navigateBack')
      },

      getDetail() {
        this.$api.post('/promotion/questionnaire/detail', {
          id: this.id
        }).then(res => {
          this.detailData = res.data;
          this.bannerList = res.data.detailImgs.split(',');
        })
      },

      getApplyDetail() {
        this.$api.post('/promotion/activity/detail', {
          promotionActivityId: this.aid
        }).then(res => {
          res.data.items.forEach(item => {
            item.answer = JSON.parse(item.answer);
          })
          this.applyDetail = res.data;
        })
      },

      // 切换广告图
      changeBanner(e) {
      	this.bannerCurrent = e.detail.current;
      },

      toExplain() {
        this.$navToPage({
          url: `/packageHome/pages/codeActivity/activityExplain?id=${this.id}`
        })
      },

      submitData() {
        this.$api.postJson('/material/parts/apply/add', {
          orderBaseId: this.id,
          items: this.partsList.map(item => {
            return {
              name: item.name,
              qty: item.num
            }
          }),
          remark: this.remark,
        }).then(res => {
          this.$successToast('提交成功');
          this.$navToPage({
            url: `/packageMaterial/pages/partsApply/list`
          }, 'redirectTo')
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
.swiper-container {
  position: relative;
  .explain {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    width: 160rpx;
    height: 60rpx;
    border-radius: 60rpx;
    background: #FFFFFF;
    font-size: 28rpx;
    color: $assist-color;
    border: 1px solid $assist-color;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner-swiper {
    height: 600rpx;
    image, video {
      height: 600rpx;
      width: 750rpx;
      display: block;
      margin: 0 auto 0;
      overflow: hidden;
    }
  }
  .dots-conatiner {
    position: absolute;
    width: 100%;
    bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .con {
      border-radius: 4rpx;
      overflow: hidden;
      height: 4rpx;
      background-color: rgba($color: #FFFFFF, $alpha: 0.3);
    }
    .dot {
      width: 20rpx;
      height: 4rpx;
      background-color: #FFFFFF;
      transition: all .3s;
    }
  }
}

.all-container {
  padding: 0 20rpx 40rpx;
}

.form-container {
  .row {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    .label {
      font-size: 28rpx;
      font-weight: 500;
      flex-shrink: 0;
      margin-right: 30rpx;
      text {
        color: red;
      }
    }
    .value {
      font-size: 28rpx;
      text-align: right;
    }
  }
}

.input-container {
  margin-top: 40rpx;
  .label {
    font-size: 28rpx;
    font-weight: 500;
    text {
      color: red;
    }
  }
  ::v-deep .u-textarea {
    margin-top: 20rpx;
    background: #f5f5f5;
  }
  .images {
    display: flex;
    flex-wrap: wrap;
    .img {
      position: relative;
      margin-right: 20rpx;
      margin-top: 20rpx;
      &:nth-child(4n) {
        margin-right: 0;
      }
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: block;
      }
      video {
        width: 100%;
        height: 240px;
      }
      text {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #FF3F42;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 40rpx;
        display: block;
      }
    }
  }
}

.picker-container {
  margin-top: 40rpx;
  .label {
    font-size: 28rpx;
    font-weight: 500;
    text {
      color: red;
    }
  }
  .text-list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-top: 20rpx;
      margin-right: 20rpx;
      width: calc((100% - 40rpx) / 3);
      height: 60rpx;
      border-radius: 60rpx;
      background: #f5f5f5;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &.active {
        border: 1px solid $assist-color;
        color: $assist-color;
        background: #ffffff;
      }
    }
  }
  .img-list {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-top: 20rpx;
      margin-right: 20rpx;
      width: calc((100% - 40rpx) / 3);
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 10rpx;
      image {
        width: 100%;
        height: 120rpx;
      }
      .text {
        font-size: 28rpx;
        margin-top: 12rpx;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}

</style>
