<template>
  <div class="Investigat">
    <!-- <TitleHead text="【调研】管理者进阶腾飞班 - 培训阶段性调研"></TitleHead> -->

    <div class="notice">
      <div class="noticebox">
        <div class="mani">
          <!-- <div class="dir">
            <div class="samegt pre"></div>
            <div class="sameg">上一个</div>
            <div class="sameg" style="margin-left: 15.5px">下一个</div>
            <div class="samegt next"></div>
          </div> -->
          <div
            class="question"
            v-for="(value, index) in question"
            :key="index"
            :style="{ 'margin-top': '20px' }"
          >
            <div class="text">{{ value.text }}</div>
            <div class="answerLcontainer">
              <div class="answerL">
                <div>完全没用</div>
                <div>非常好</div>
              </div>
            </div>
            <div class="answer">
              <div class="answerC">
                <div class="itemwrap">
                  <div
                    class="answerCitem"
                    v-for="(item, key) in select"
                    :key="key"
                    :style="{
                      background:
                        value.selectAnswer === item
                          ? 'rgba(86, 163, 249, 1)'
                          : 'rgba(86, 163, 249, 0)',
                      color:
                        value.selectAnswer === item
                          ? '#fff'
                          : 'rgba(86, 163, 249, 1)',
                    }"
                    @click="score(value, item)"
                  >
                    <div>{{ item }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="question" style="margin-top: 20px">
            <div class="text">4、类似相应的课程，您认为适合哪些人观看？</div>
            <div
              v-for="(value, index) in viewpeople"
              :key="index"
              style="display: flex; align-items: center"
              :style="{ 'margin-top': '22px' }"
              @click="selectPeople(value)"
            >
              <div class="conn">
                <div class="peoplecontainer">
                  <img
                    style="width: 14px; height: 13px"
                    :src="
                      value.select
                        ? require('../../assets/image/investigat/checkbox.png')
                        : require('../../assets/image/investigat/checkbox2.png')
                    "
                  />
                  <div
                    class="people"
                    style="
                      font-size: 13px;
                      margin-left: 7px;
                      margin-top: -2.5px;
                    "
                  >
                    {{ value.text }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="question" style="margin-top: 21px">
            <div class="text">5、您的其他意见</div>
            <div style="margin-top: 21px; position: relative">
              <div class="inputcon">
                <el-input
                  style="width: 87%"
                  v-model="textarea1"
                  :autosize="{ minRows: 5, maxRows: 5 }"
                  resize="none"
                  maxlength="200"
                  type="textarea"
                  @input="textareaInput"
                />
              </div>
              <div class="words">{{ textarealength }}/200</div>
            </div>
          </div>
          <div style="display: flex; justify-content: center">
            <div class="submit">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
// import TitleHead from "@/components/TitleHead.vue";
export default {
  name: "InvestigatPage",
  components: {
    // TitleHead,
  },
  setup() {
    const state = reactive({
      question: [
        {
          id: 1,
          text: "1、您觉得课程对您是否有用？",
          selectAnswer: 0,
        },
        {
          id: 2,
          text: "2、您是否会推荐课程给其他同事？",
          selectAnswer: 0,
        },
        {
          id: 3,
          text: "3、后续该讲师有其他课程是否会参与？",
          selectAnswer: 0,
        },
      ],
      select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      viewpeople: [
        {
          id: 1,
          text: "基础员工",
          select: false,
        },
        {
          id: 2,
          text: "中层管理",
          select: false,
        },
        {
          id: 3,
          text: "专业人员",
          select: false,
        },
        {
          id: 4,
          text: "高级管理",
          select: false,
        },
      ],
      textarea1: "",
      textarealength: 0,
    });
    const score = (value, item) => {
      let arr = state.question;
      arr.map((i) => {
        if (i.id === value.id) {
          i.selectAnswer = item;
        }
      });
      state.question = arr;
    };
    const selectPeople = (value) => {
      let arr = state.viewpeople;
      arr.map((i) => {
        if (i.id === value.id) {
          i.select = !i.select;
        }
      });
      state.viewpeople = arr;
    };
    const textareaInput = (e) => {
      // console.log("eee", e);
      state.textarea1 = e;
      state.textarealength = e.length;
    };
    return {
      ...toRefs(state),
      score,
      selectPeople,
      textareaInput,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}
.Investigat {
  width: 100%;
  padding-bottom: 20px;
  .notice {
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-top: -17.5px;
    margin-top: 20px;
    .noticebox {
      // width: 90%;
      width: 100%;
      background: #fff;
      border-radius: 4px;
      position: relative;
      display: flex;
      justify-content: center;
      .mani {
        width: 90%;
        // margin-top: 20px;

        .dir {
          width: 100%;
          height: 20px;
          // background-color: red;
          margin-bottom: 20px;
          display: flex;
          justify-content: right;
          font-size: 12px;
          color: #2478ff;
          .samegt {
            margin-top: 3px;
            height: 12px;
            width: 12px;
          }
          .samege {
            line-height: 12px;
          }
          .pre {
            margin-right: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/pre.png);
          }
          .next {
            margin-left: 5px;
            // background-size: 100%;
            background-image: url(../../assets/image/ballotpage/next.png);
          }
        }
        .conn {
          width: 100%;
          display: flex;
          justify-content: right;
          // background-color:yellow;
          .peoplecontainer {
            // background-color: yellowgreen;
            display: flex;
            width: 94%;
          }
        }
        .question {
          .text {
            font-size: 14px;
            font-weight: 500;
            color: #333330;
          }
          .answerLcontainer {
            width: 100%;
            display: flex;
            justify-content: center;
            .answerL {
              width: 87%;
              margin-bottom: -20px;
              margin-top: 12px;
              font-size: 13px;
              // width: 100%;
              color: #56a3f9;
              display: flex;
              justify-content: space-between;
            }
          }
          .answer {
            margin-top: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
            color: #56a3f9;
            .answerC {
              // width: 540px;
              // width: 100%;
              width: 86%;
              height: 43px;
              border: 1px solid #d7e5fd;
              border-radius: 8px;
              display: flex;
              align-items: center;
              // margin-left: 11px;
              // margin-right: 11px;
              justify-content: center;
              .itemwrap {
                width: 92%;
                display: flex;
                justify-content: space-between;
                .answerCitem {
                  width: 24px;
                  height: 24px;
                  border: 1px solid #56a3f9;
                  border-radius: 4px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  // margin-left: 10px;
                }
              }
            }
          }
        }

        .question .answer .question .people {
          font-size: 13px;
          font-weight: 500;
          color: #333330;
          margin-left: 6px;
        }
        .question .words {
          position: absolute;
          right: 35px;
          bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          color: #333330;
        }
        .inputcon {
          width: 100%;
          display: flex;
          justify-content: center;
        }

        .question .el-textarea__inner {
          border-radius: 8px;
          background-color: rgba(245, 246, 247, 1);
        }
        .submit {
          // width: 126px;
          width: 87%;
          height: 31.5px;
          background: #2478ff;
          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
          border-radius: 4px;
          font-size: 14px;
          font-weight: 800;
          color: #ffffff;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10.5px;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>
