<template>
  <div class="question-form">
    <van-form scroll-to-error :show-error-message="true" @submit="submit" @failed="notValidPass">
      <van-cell-group class="question-form-item">
        <div class="question-form-item__wrap">
          <div class="question-form-item__top">
            <div class="question-form-item__index">
              <span :class="{ 'question-form-item__hide-required': true }">*</span>
              01
            </div>
            <div class="question-form-item__title">{{ info.question.title }}</div>
            <div class="question-form-item__type">单选</div>
          </div>
          <div class="question-form-item__content" @click="judgeLogin">
            <van-field v-model="answer" class="ques-radio ques-radio--tag">
              <template v-if="!isJoined" #input>
                <van-radio-group v-if="info.question.options.length" :value="answer" @input="input">
                  <van-radio v-for="(item, index) in info.question.options" :key="index"  :disabled="isJoined" :name="`${index}`" :style="{
                      '--textColor': isJoined ?  '#fff' : '#2C7AFA',
                      '--btnBackground': isJoined ?  '#4E99FF' : '#e5f0ff'
                    }">
                    <template v-if="true" #icon>
                      <span class="ques-radio__text">{{ item.name }}</span>
                      <img v-if="item.pic" v-lazy="item.pic" class="ques-radio__img" alt @click.stop="previewImg(item.pic)" />
                    </template>
                  </van-radio>
                </van-radio-group>
              </template>
              <template v-else #input>
                <van-radio-group v-if="info.question.options.length" class="ques-radio__group">
                  <van-radio v-for="(item, index) in info.question.options" :key="index" :name="`${index}`" :style="{
                      '--textColor': item.isRight ?  '#29AE62' : Number(answer) === index ? '#F83B3B' : '#333',
                      '--btnBackground': item.isRight ?  '#EAF7EE' : Number(answer) === index ? '#FFEBEB' : '#f9f9f9'
                    }">
                    <template v-if="true" #icon>
                      <div style="opacity: 0;">
                        <img v-if="item.isRight" class="ques-radio__img" src="@/assets/images/lottery/correct.png" alt="">
                        <img v-else-if="Number(answer) === index" style="width: 17px;" class="ques-radio__img" src="@/assets/images/lottery/wrong.png" alt="">
                      </div>
                      <span class="ques-radio__text">{{ item.name }}</span>
                      <img v-if="item.pic" v-lazy="item.pic" class="ques-radio__img" alt @click.stop="previewImg(item.pic)" />
                      <img v-if="item.isRight" class="ques-radio__img" src="@/assets/images/lottery/correct.png" alt="">
                      <img v-else-if="Number(answer) === index" style="width: 17px;" class="ques-radio__img" src="@/assets/images/lottery/wrong.png" alt="">
                    </template>
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </div>
      </van-cell-group>
      <div v-if="!isJoined" class="question-form__submit">
        <van-popup v-model="isShowStatement" class="question-form__submit-popup" round :close-on-click-overlay="false">
          <div style="height: 100%">
            <div class="popup-top">
              <div class="popup-top__close"></div>
              <div class="popup-top__title">信息采集声明</div>
              <div class="popup-top__close"></div>
            </div>
            <div class="popup-content">
              <div class="popup-content__block">
                您在使用由
                <span>{{ company }}</span>
                （以下简称“我司”）发起的问卷报表功能（以下简称“本功能”）时，应当充分阅读、理解并接收本声明的内容。一旦您使用本功能并点击保存提交，即表示您同意本声明项下与我司的所有约定。若您不同意本声明项下的内容，请勿使用本功能。
              </div>
              <div class="popup-content__block">
                1、本功能由
                <span>{{ company }}</span>
                向您发起，您已认真阅读并清楚知悉我司于问卷报表页面向您展示的信息采集用途及采集的信息类型。
              </div>
              <div class="popup-content__block">
                2、您同意并授权我司仅在基于为您提供服务的目的下使用和保留您所提供的个人信息，但不得超过该等信息的预定使用目的而必须的时间，或任何合同或相关法律所规定的时间。
              </div>
              <div class="popup-content__block">
                3、您承诺，您使用本功能向我司提交信息（含个人信息）的行为系您本人真实的意思表示。
              </div>
              <div class="popup-content__block">
                4、您已知悉，即使您已通过本功能向我司提交了你的个人信息，您有权随时向我司提出删除个人信息的要求。一旦您要求我司停止使用及/或删除保留的您的个人信息，若我司未在合理期限内停止使用及/或删除，您有权追究我司相关责任。
              </div>
            </div>
            <div class="popup-bottom">
              <van-button native-type="button" round @click="closeStatement">我已知悉</van-button>
            </div>
          </div>
        </van-popup>
        <van-button
          round
          block
          :disabled="isButtonDisabled || isJoined"
          :class="{ 'van-button--unreaded': !isReaded || isJoined }"
          class="question-form__submit-button"
          native-type="submit"
          >{{ buttonText }}</van-button
        >
        <div ref="confirm" class="agreement">
          <van-radio-group v-model="isReaded">
            <van-radio :name="true" icon-size="16px" :checked="true" @click="cancelSelected(1)"></van-radio>
          </van-radio-group>
          <div style="margin-left: 7.5px; line-height: 12px">
            我已阅读并同意<a href="javascript:void(0)" @click="openStatement">《信息采集声明》</a>
          </div>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { cloneDeep } from 'lodash'
import { getUserSimpleInfo, saveAnswer } from '@/api/modules/lottery'
import rulesConstruct from '@/utils/rulesConstruct'
import Bus from '@/utils/Bus'
import { ImagePreview } from 'vant'

export default {
  name: 'QuestionForm',
  components: {
    // QuestionFormItem,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      rulesConstruct,
      formData: [],
      isReaded: false,
      oldIsReaded: null,
      isShowStatement: null,
      userInfo: {},
      answer: null,
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
    }),
    isJoined() {
      return !!this.info.answerStatus
    },
    isButtonDisabled() {
      // const { questionnaireInfo } = this
      return false
    },
    buttonText() {
      return '提交'
    },
    company() {
      return this.userInfo.company
    },
  },
  mounted() {
    // 初始化信息采集声明同意按钮状态
    this.isReaded = this.isJoined
    this.oldIsReaded = this.isReaded ? 1 : null
  },
  methods: {
    judgeLogin() {
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录',
          duration: 1500,
          onClose: () => {
            Bus.$emit('showLogin')
          }
        })
        return
      }
    },
    submitAnswer(data) {
      saveAnswer(data).then((res) => {
        if (res.code === 200 && res.errorCode === 0) {
          if (this.info.question.options[Number(this.answer)].isRight) {
            this.$toast('回答正确！点击抽奖进行抽奖')
          } else {
            this.$toast('回答错误！谢谢参与')
          }
          this.info.answerStatus = 1
          setTimeout(() => {
            if (this.$route.query.backUrl) {
              window.location.href = this.$route.query.backUrl
            }
            Bus.$emit('LotteryInfoUpdate', {
              id: this.$route.query.id,
              playId: this.$route.query.sessionId,
            })
          }, 1500)
        } else {
          this.$toast(res.errorMessage)
        }
      })
    },
    submit() {
      if (this.isReaded === false) {
        this.$toast('请阅读并同意《信息采集声明》')
        return false
      }
      this.$dialog
        .confirm({
          title: '提示',
          message: '提交后无法修改，是否提交？',
        })
        .then(() => {
          // on confirm
          this.submitAnswer({
            id: this.$route.query.id,
            answerIndex: Number(this.answer) + 1,
            uin: this.$route.query.uin,
            playId: this.$route.query.sessionId,
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    notValidPass() {
      this.$toast('您还没有填完问卷哦~')
    },
    openStatement() {
      // 获取用户简单数据
      const { uin } = this.$route.query
      getUserSimpleInfo({ uin }).then((res) => {
        const { data } = res
        if (res.code === 200 && res.errorCode === 0) {
          this.userInfo = data
          this.isShowStatement = true
        } else {
          this.$toast(res.errorMessage)
        }
      })
    },
    closeStatement() {
      this.isShowStatement = false
    },
    cancelSelected(index) {
      if (this.isJoined) {
        return 0
      }
      if (index === this.oldIsReaded) {
        	this.isReaded = false;
	        this.oldIsReaded = null;
    	} else {
        	this.oldIsReaded = index;
	    }
    },
    input(val) {
      if (this.isJoined) {
        return false
      }
      console.log(val)
      this.answer = val
    },
    previewImg(url) {
      ImagePreview([url])
    },
  },
}
</script>

<style lang='less' scoped>
@--main-color: #3F7DF7;
.question-form {
  /deep/ .van-form {
    height: 100%;
  }
  .question-form-item {
    background: #fff;
    margin-top: 15px;
    &:after {
      display: none;
    }
    &:first-child {
      margin-top: 0;
    }
    &__top {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      min-height: 40px;
      font-size: 14px;
    }
    &__index {
      align-self: flex-start;
      padding: 5px 8px 0;
      height: 20px;
      line-height: 20px;
      color: @--main-color;
      font-size: 18px;
      font-weight: 500;
      > span {
        color: #ee0a24;
        line-height: 21px;
        vertical-align: middle;
        display: inline-block;
        transform: translateY(1px);
      }
    }
    &__hide-required {
      visibility: hidden;
    }
    &__title {
      padding: 5px 8px 5px 0;
      text-align: left;
      flex: 1;
      line-height: 20px;
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
    &__type {
      align-self: start;
      color: #217fff;
      height: 20px;
      line-height: 20px;
      margin-right: 14px;
      padding-top: 5px;
    }
    &__content {
      padding: 10px 20px;
    }
  }
  &__submit {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 96px;
    padding: 14.5px 0 14.5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 10%, rgba(255, 255, 255, 1));
    .van-button {
      width: 175px;
      height: 40px;
    }
    .agreement {
      display: flex;
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: 12px;
      margin-top: 11px;
      justify-content: center;
      align-items: center;
      a {
        color: #1677ff;
      }
    }
    .popup-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10.5px 0 5.5px 0;
      border-radius: 20px 20px 0 0;
      background-color: white;
      &__title {
        flex: 1;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 24px;
        text-align: center;
      }
      &__close {
        width: 35px;
        height: 21px;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #357bf0;
        line-height: 21px;
        text-align: right;
      }
    }
    .popup-content {
      display: flex;
      height: calc(100% - 40px - 68px);
      flex-direction: column;
      padding: 0 16px 16px 16px;
      overflow-y: scroll;
      &__block {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        margin-bottom: 10px;
        span {
          color: #1677ff;
        }
      }
    }
    .popup-bottom {
      width: 100%;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 12px;
      font-size: 16px;
      line-height: 22.5px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      .van-button {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #0d62ef;
        line-height: 20px;
        border: 2px solid #dddddd;
      }
    }
  }
  &__submit-button {
    width: 140px;
    height: 40px;
    color: #1677ff;
    box-shadow: 0px 2px 21px 2px rgba(232, 232, 232, 0.5);
  }
  &__submit-popup {
    width: 298px;
    height: 460.5px;
  }
  .van-button--unreaded {
    background: #e0e0e0;
    color: #898989;
    opacity: 1;
  }
}
.ques-radio {
    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: #F5F5F5;
      border-radius: 16px 16px 0px 0px;
      overflow: hidden;
      .tip {
        width: 100%;
        height: 57px;
        border-bottom: 1px solid #EEEEEE;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .list {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        max-height: 50vh;
        overflow: auto;
        &-item {
          width: 100%;
          height: 57px;
          border-bottom: 1px solid #EEEEEE;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          padding: 0 20px;
        }
      }
      &-bottom {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        &__button {
          width: 100%;
          height: 57px;
          border-top: 1px solid #EEEEEE;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          background-color: #ffffff;
        }
        .ios {
          background: #fff;
          height: 20px;
          border-top: 1px solid #EEEEEE;
        }
      }
    }
    .select {
      width: 100%;
      height: 40px;
      background: #F9F9F9;
      border-radius: 16.5px;
      padding: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-placeholder {
        height: 100%;
        display: flex;
        align-items: center;
        color: #B7B7B7;
        padding: 0;
        margin: 0;
      }
      img {
        width: 16px;
        height: 16px;
        transform: rotate(90deg);
      }
    }
    &--tag {
      /deep/ .van-radio-group {
        width: 100%;
        .van-radio {
          width: 100%;
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .van-radio__icon {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          background-color: #f9f9f9;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: #333;
          min-height: 40px;
          font-weight: 400;
          padding: 10px;
          &--checked {
            font-weight: 500;
            background-color: var(--btnBackground);
            color: var(--textColor);
          }
          i {
            display: none;
          }
        }
      }
    }
    /deep/ .van-popup {
      background-color: transparent;
    }
    &.van-cell {
      padding: 0;
    }
    .van-radio {
      min-height: 40px;
      line-height: 40px;
    }
    /deep/ .van-radio__label {
      font-size: 0;

      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    &__text {
      font-size: 14px;
      flex: 1;
    }
    &__img {
      // height: 20px;
      width: 20px;
      display: inline-block;
      font-size: 0;
    }
    &__group {
      /deep/ .van-radio__icon{
        background-color: var(--btnBackground) !important;
        color: var(--textColor) !important;
      }
    }
  }
</style>
