<!--  -->
<template>
  <div class="activity-type">
    <div class="wrapper">
      <div class="top">
        <img
          class="bg"
          :src="require('@/assets/images/activity-type-top-bg.png')"
          alt=""
        />
      </div>
      <div class="bottom">
        <img
          class="bg"
          :src="require('@/assets/images/survey-type-bottom-bg.png')"
          alt=""
        />

        <div class="content">
          <div class="nav">
            <img
              class="bg"
              :src="require('@/assets/images/survey-type-nav-bg.png')"
              alt=""
            />
            <div class="nav-con">
              <div class="nav-con-title">活动</div>
              <div class="nav-con-type">
                <ul>
                  <li
                    :class="{ cur: activityType === 'onLine' }"
                    @click="switchType('onLine')"
                  >
                    <a>线上活动</a>
                    <div class="arrow" v-if="activityType === 'onLine'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: activityType === 'volunteer' }"
                    @click="switchType('volunteer')"
                  >
                    <a>志愿者服务</a>
                    <div class="arrow" v-if="activityType === 'volunteer'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                  <li
                    :class="{ cur: activityType === 'satisfaction' }"
                    @click="switchType('satisfaction')"
                  >
                    <a>满意度调查</a>
                    <div class="arrow" v-if="activityType === 'satisfaction'">
                      <img :src="require('@/assets/images/arrow.png')" alt="" />
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="questionCard" v-show="activityType === 'satisfaction'" :class="{suck:move}">
              <div class="card">
                <ul>
                  <div class="ques-title">题目</div>
                  <li
                    v-for="(item, index) in question"
                    :key="index"
                    :class="{
                      selected:
                        item.type === 'radio'
                          ? !!item.Answer
                          : !!item.Answer && item.Answer.length,
                    }"
                  >
                    <a>
                      {{ index + 1 }}
                    </a>
                  </li>
                </ul>
              </div>
              <div class="information">
                <div class="information-con">
                  <div class="inf-name">
                    <span>填写姓名</span>
                    <input
                      type="text"
                      v-model="name"
                      placeholder="请输入姓名"
                    />
                  </div>
                  <div class="inf-phone">
                    <span>手机号</span>
                    <input
                      type="text"
                      v-model="phone"
                      placeholder="请输入手机号码"
                    />
                  </div>
                  <div class="inf-btn" @click="save()">提交</div>
                </div>
                <div class="information-errTip" v-if="questionComplete">
                  <img
                    class="tip-bg"
                    :src="require('@/assets/images/question-tip-bg.png')"
                    alt=""
                  />
                  <img
                    class="tip-close"
                    @click="questionComplete = false"
                    :src="require('@/assets/images/close.png')"
                    alt=""
                  />
                  <img
                    class="tip-icon"
                    :src="require('@/assets/images/question-error.png')"
                    alt=""
                  />
                  <div class="tip-txt">问卷未填写完整!</div>
                </div>
              </div>
            </div>
          </div>
          <div class="con">
            <!-- <div class="back" @click="back">
              <img :src="require('@/assets/images/back.png')" alt="" />
            </div> -->
            <img
              class="bg"
              :src="require('@/assets/images/survey-type-con-bg.png')"
              alt=""
            />
            <div
              class="list"
              v-show="activityType === 'onLine' || activityType === 'volunteer'"
            >
              <ul>
                <li
                  v-for="(item, index) in dataList"
                  :key="index"
                  @click="toDetail(item)"
                >
                  <div class="desc">
                    <div class="desc-title">{{ item.name || "--" }}</div>
                    <div class="desc-time">{{ item.createTime || "--" }}</div>
                  </div>
                </li>
              </ul>
              <el-empty
                :image-size="200"
                v-if="dataList.length === 0"
              ></el-empty>
              <div class="my-paging" v-if="dataList.length">
                <Paging
                  v-if="paging.total"
                  :paging="paging"
                  @changeCurrent="pageChange"
                />
              </div>
            </div>
            <!-- 问卷调查 -->
            <div class="satisfaction" v-show="activityType === 'satisfaction'">
              <div class="s-title">{{ entity.name }}</div>
              <div class="s-des">
                为了更好地发挥大理市博物馆在宣传展示和社会服务方面的作用，我们希望能够通过您对这些问题的回答，提高我们的工作质量，我们会认真考虑您的意见和建议。非常感谢您对我们工作的配合和支持！
              </div>
              <ul>
                <li v-for="(item, index) in question" :key="index">
                  <div class="line"></div>
                  <div class="question">
                    <div class="q-title">
                      {{ index + 1 }}. {{ item.question
                      }}{{ item.type === "multiple" ? `(可多选)` : `` }}:
                      <span
                        v-if="item.type === 'multiple'"
                        v-html="`<br>`"
                      ></span>
                    </div>
                    <ul class="q-answer">
                      <!-- 单选 -->
                      <div class="single" v-if="item.type === 'radio'">
                        <li
                          v-for="(choose, optionIndex) in item.answer"
                          :key="optionIndex"
                        >
                          <!-- :id="`${question.id}`" -->
                          <a>
                            <input
                              type="radio"
                              v-model="item.Answer"
                              :value="choose.value"
                            />
                            <label>{{ choose.value }}</label>
                          </a>
                        </li>
                      </div>
                      <!-- 多选题 -->
                      <ul class="multiple" v-if="item.type === 'multiple'">
                        <li
                          v-for="(choose, optionIndex) in item.answer"
                          :key="optionIndex"
                        >
                          <!-- :id="`${question.id}`" -->
                          <a>
                            <input
                              type="checkbox"
                              :value="choose.value"
                              v-model="item.Answer"
                            />
                            <label>{{ choose.value }}</label>
                          </a>
                        </li>
                      </ul>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Paging from '@/components/pagination'
import { checkPhone } from '@/common/common.js'

// 答题跟随屏幕滚动

export default {
  name: 'survey',
  // import引入的组件需要注入到对象中才能使用
  components: {
    Paging
  },
  data () {
    // 这里存放数据
    return {
      move: false,
      offsetTop: '',
      activityType: 'onLine',
      dataList: [],
      paging: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        showSize: 10,
        current: 1
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        type: ''
      },
      typeChange: {
        onLine: 'online',
        volunteer: 'volunteer',
        satisfaction: 'satisfaction'
      },
      questionnaireList: [
        {
          id: 0,
          title: '问题1问题1问题1问题1问题1问题1问题1',
          type: 'single',
          chooseList: [
            '选项1',
            '选项2',
            '选项3',
            '选项4',
            '选项5',
            '选项6',
            '选项7',
            '选项8'
          ]
        },
        {
          id: 1,
          title: '问题2问题2问题2问题2问题2问题2问题2',
          type: 'single',
          chooseList: ['选项1', '选项2', '选项3', '选项4']
        },
        {
          id: 2,
          title: '多选1多选1多选1多选1多选1多选1多选1',
          type: 'multiple',
          chooseList: [
            '选项1',
            '选项2',
            '选项3',
            '选项4',
            '选项5',
            '选项6',
            '选项7',
            '选项8',
            '选项9',
            '选项10',
            '选项11',
            '选项12',
            '选项13'
          ],
          answer: []
        },
        {
          id: 3,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 5,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 6,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 7,
          title: '多选1多选1多选1多选1多选1多选1多选1',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 8,
          title: '多选1多选1多选1多选1多选1多选1多选1',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 9,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 10,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 11,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'single',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: ''
        },
        {
          id: 12,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        },
        {
          id: 13,
          title: '多选2多选2多选2多选2多选2多选2多选2',
          type: 'multiple',
          chooseList: ['选项1', '选项2', '选项3', '选项4'],
          answer: []
        }
      ],
      name: '',
      phone: '',
      questionComplete: false,
      entity: {},
      question: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    paging: {
      deep: true,
      handler: function () {}
    }
  },
  // 方法集合
  methods: {
    // 问卷提交
    async saveSubmit (data) {
      let res = await this.$http({
        method: 'post',
        url: '/api/web/questionGroup/save',
        data
      })
      if (res.code === 0) {
        this.$message.success('提交成功')
        this.getQuestion()
        this.name = this.phone = ''
      }
      console.log(999, res)
    },
    async getList () {
      let result = await this.$http({
        method: 'post',
        url: '/api/web/activity/list',
        data: this.params
      })
      this.dataList = result.data.list
      this.paging.total = result.data.total
      console.log('this.dataList', this.dataList)
    },
    async getQuestion () {
      let result = await this.$http({
        method: 'get',
        url: '/api/web/questionGroup/getIndex'
      })
      console.log('result', result)
      this.entity = result && result['data'] && result['data']['entity']
      this.question = result && result['data'] && result['data']['question']
      this.question = this.question.map((item) => {
        return {
          ...item,
          answer: JSON.parse(item.answer),
          Answer: item.type === 'multiple' ? [] : ''
        }
      })
    },
    switchType (type) {
      this.activityType = type
      this.params['type'] = this.typeChange[this.activityType]
      this.params['pageNum'] = 1
      this.paging.current = 1
      if (type !== 'satisfaction') {
        this.getList()
      } else {
        this.getQuestion()
      }
    },
    back () {
      this.$router.push({ path: '/activity' })
    },
    pageChange (val) {
      console.log(val)
      this.paging.current = val
      this.params.pageNum = val
      this.getList()
    },
    toDetail (item) {
      this.$router.push({
        path: '/activity-detail',
        query: { ...item, navType: this.activityType }
      })
    },
    save () {
      // 点击提交
      this.question.forEach((item) => {
        if (item.type === 'radio' && !item.Answer) {
          this.questionComplete = true
        }
        if (
          (item.type === 'multiple' && !item.Answer) ||
          (!!item.Answer && item.Answer.length === 0)
        ) {
          this.questionComplete = true
        }
      })
      if (this.questionComplete === true) return
      if (!this.name) {
        this.$message.warning('请输入姓名')
        return
      }
      if (!this.phone) {
        this.$message.warning('请输入手机号码')
        return
      }
      if (!checkPhone(this.phone)) {
        this.$message.warning('请输入正确的手机号码')
      }
      // 处理数据
      const answer = []
      const objTemp = {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
        6: 'G',
        7: 'H',
        8: 'I',
        9: 'J',
        10: 'K',
        11: 'L',
        12: 'M',
        13: 'N',
        14: 'O',
        15: 'P'
      }
      const obj = {}
      this.question.forEach((v, i) => {
        // 单选
        if (v.type === 'radio') {
          v.answer.forEach((p, pI) => {
            // 有几个选项就变成ABC
            if (v.Answer === p.value) answer.push({answer: objTemp[pI], num: i + 1})
          })
        } else if (v.type === 'multiple') {
          v.Answer.forEach((p1, i1) => {
            v.answer.forEach((p2, i2) => {
              if (p1 === p2.value) answer.push({answer: objTemp[i2], num: i + 1})
            })
          })
        }
      })
      obj.phone = this.phone
      obj.realName = this.name
      obj.questionGroupId = this.question[0].questionGroupId
      obj.answer = answer
      this.saveSubmit(obj)
      // console.log(9999999999, obj)
    },
    // 答题卡吸顶
    handleScroll () {
      let topMove = document.documentElement.scrollTop
      // console.log(topMove, '---', this.offsetTop)
      if (topMove > this.offsetTop) this.move = true
      else this.move = false
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.activityType =
      (this.$route.query && this.$route.query['type']) || 'onLine'
    this.params['type'] = this.typeChange[this.activityType]
    if (this.params['type'] === 'satisfaction') {
      this.getQuestion()
      return
    }
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 答题卡吸顶
    window.addEventListener('scroll', this.handleScroll)
    // 监听dom渲染完成
    this.$nextTick(function () {
      let header = document.querySelector('.questionCard')
      if (this.$route.query.type === 'satisfaction') {
        // 获取元素距离浏览器顶部的距离
        this.offsetTop = header.getBoundingClientRect().top
      } else this.offsetTop = 700
      // console.log(66666, this.offsetTop)
    })
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.activity-type {
  width: 100%;
  margin-bottom: 98px;
  .wrapper {
    width: 100%;
    .top {
      width: 100%;
      height: 278px;
      position: relative;
    }
    .bottom {
      width: 100%;
      position: relative;
      .content {
        min-width: 1090px;
        margin: 0 auto;
        width: 57%;
        display: flex;
        justify-content: center;
        .nav {
          flex: 1;
          margin-right: 1%;
          margin-top: -68px;
          position: relative;
          .nav-con {
            width: 85%;
            margin: 94px auto 0;
            .nav-con-title {
              background: #945335;
              padding: 14.5px 0 14.5px 46px;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ffffff;
              opacity: 1;
            }
            .nav-con-type {
              margin-top: 3px;
              background: rgba(148, 83, 53, .6);
              overflow: hidden;
              > ul {
                width: 100%;
                margin-top: 21px;
                margin-bottom: 105px;
                > li {
                  width: 100%;
                  padding: 8px 0 8px 51px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #000000;
                  position: relative;
                  cursor: pointer;
                  .arrow {
                    position: absolute;
                    top: 10px;
                    right: 11.5px;
                    width: 10.5px;
                    height: 18px;
                    > img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
                .cur {
                  background: linear-gradient(180deg, #585a5a 0%, #949198 100%);
                  color: #ffffff;
                }
              }
            }
          }

          .questionCard {
            width: 85%;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            padding: 12px;
            .card {
              width: 100%;
              > ul {
                width: 100%;
                border: 1px solid rgba(148, 145, 152, 0.38);
                border-radius: 4px;
                box-sizing: content-box;
                .ques-title {
                  display: inline-block;
                  width: 64px;
                  height: 35px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 35px;
                  text-align: center;
                  color: #ffffff;
                  background: linear-gradient(180deg, #585a5a 0%, #949198 100%);
                  border-radius: 4px 0px 4px 0px;
                  opacity: 1;
                }
                > li {
                  display: inline-block;
                  width: 22px;
                  height: 22px;
                  background: rgba(148, 145, 152, 0.47);
                  border-radius: 50%;
                  text-align: center;
                  margin: 6px;
                  cursor: pointer;
                  line-height: 18px;
                  > a {
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                  }
                }
                li.selected {
                  background: #945335;
                }
              }
            }
            .information {
              width: 100%;
              position: relative;
              .information-con {
                width: 100%;
                border: 1px solid rgba(148, 145, 152, 0.38);
                border-radius: 4px;
                margin-top: 7px;
                .inf-name,
                .inf-phone {
                  width: 90%;
                  margin: 0 auto;
                  margin-top: 22px;
                  display: flex;
                  > span {
                    display: inline-block;
                    width: 40%;
                    height: 30px;
                    line-height: 30px;
                    background: rgba(32, 32, 32, 0.5);
                    text-align: center;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 300;
                    color: #ffffff;
                    border-radius: 4px 0 0 4px;
                  }
                  > input {
                    width: 60%;
                    height: 30px;
                    display: inline-block;
                    border: 1px solid rgba(148, 145, 152, 0.38);
                    border-radius: 0 4px 4px 0;
                    padding-left: 8px;
                    &::placeholder {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #949198;
                      opacity: 0.61;
                    }
                  }
                }
                .inf-phone {
                  width: 90%;
                  margin: 0 auto;
                  width: 90%;
                  margin-top: 22px;
                }
                .inf-btn {
                  width: 60%;
                  margin: 22px auto;
                  height: 30px;
                  text-align: center;
                  line-height: 30px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffffff;
                  background: #945335;
                  border-radius: 4px;
                  cursor: pointer;
                }
              }
              .information-errTip {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                .tip-close {
                  width: 13px;
                  position: absolute;
                  right: 8px;
                  top: 18px;
                  cursor: pointer;
                }
                .tip-bg {
                  width: 100%;
                }
                .tip-icon {
                  width: 22%;
                  position: absolute;
                  left: 50%;
                  top: 48px;
                  transform: translateX(-50%);
                }
                .tip-txt {
                  width: 100%;
                  position: absolute;
                  left: 0;
                  top: 95px;
                  text-align: center;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  line-height: 40px;
                  color: #ffffff;
                  opacity: 1;
                }
              }
            }
          }
          .suck{
            width: 229px;
            position: fixed;
            top: 0;
            margin-left: 20px;
          }

        }
        .con {
          flex: 3;
          margin-top: -68px;
          position: relative;
          .back {
            width: 19px;
            position: absolute;
            left: 26px;
            top: 97px;
            cursor: pointer;
            > img {
              width: 100%;
            }
          }
          .list {
            > ul {
              margin: 94px 19px 38px;
              > li {
                background: linear-gradient(
                  180deg,
                  rgba(222, 222, 222, 0.6) 0%,
                  rgba(255, 255, 255, 0.6) 100%
                );
                cursor: pointer;
                border-radius: 4px;
                display: flex;
                justify-content: flex-start;
                margin-bottom: 8px;
                padding: 17px 27px;
                &:nth-last-child(1) {
                  margin-bottom: 0;
                }
                .desc {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  .desc-title {
                    font-size: 20px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 26px;
                    color: #202020;
                    opacity: 1;
                    &::before {
                      content: "";
                      display: inline-block;
                      width: 6px;
                      height: 6px;
                      background: linear-gradient(
                        180deg,
                        #585a5a 0%,
                        #949198 100%
                      );
                      margin-bottom: 3px;
                      margin-right: 14px;
                      border-radius: 50%;
                    }
                  }
                  .desc-time {
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 24px;
                    color: #202020;
                    opacity: 0.6;
                  }
                }
              }
              > li:hover {
                box-shadow: 0px 3px 6px rgba(0, 0, 0, 1);
              }
            }
            .my-paging {
              margin: 25px auto;
              text-align: right;
            }
          }
          .satisfaction {
            margin: 94px 32px 95px;
            .s-title {
              width: 100%;
              text-align: center;
              font-size: 18px;
              font-family: Arial;
              font-weight: bold;
              line-height: 24px;
              color: #000000;
            }
            .s-des {
              width: 100%;
              margin-top: 25px;
              margin-bottom: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              line-height: 27px;
              color: #202020;
            }
            > ul {
              width: 100%;
              li {
                width: 100%;
                .line {
                  height: 4px;
                  background: linear-gradient(
                    90deg,
                    rgba(88, 90, 90, 0.3),
                    rgba(148, 145, 152, 0.3)
                  );
                }
                .question {
                  margin: 23px auto 13px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #202020;
                  font-size: 16px;
                  .q-title {
                    color: rgba(160, 28, 38, 1);
                    margin-right: 15px;
                    display: inline;
                  }
                  .q-answer {
                    display: inline;
                    .single,
                    .multiple {
                      width: 100%;
                      display: inline;
                      > li {
                        display: inline;
                        margin-right: 30px;
                        line-height: 30px;

                        // > input[type="radio"] + label {
                        //   font-size: 16px;
                        //   font-family: Microsoft YaHei;
                        //   font-weight: 400;
                        //   line-height: 27px;
                        //   color: #202020;
                        //   opacity: 1;
                        // }
                        // > input[type="radio"] {
                        //   width: 20px;
                        //   height: 20px;
                        // }
                        // > input[type="radio"] + label {
                        //   cursor: pointer;
                        // }
                        // > input[type="radio"] + label::before {
                        //   content: "";
                        //   display: inline-block;
                        //   vertical-align: middle;
                        //   font-size: 18px;
                        //   width: 17px;
                        //   height: 17px;
                        //   margin-right: 0.4em;
                        //   border-radius: 50%;
                        //   border: 1px solid #949198;
                        //   text-indent: 0.15em;
                        //   line-height: 1;
                        // }
                        // > .radioCurrent + label::before {
                        //   background-color: rgba(160, 28, 38, 1);
                        // }
                        // > input[type="radio"]:checked + label::before {
                        //   background-color: rgba(160, 28, 38, 1);
                        // }
                        // > input[type="radio"] {
                        //   position: absolute;
                        //   clip: rect(0, 0, 0, 0);
                        // }
                      }
                    }
                    .multiple {
                      width: 80%;
                      display: block;
                      margin: 0 auto;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
