<template>
  <div class="readyexamination">
    <!-- <TitleHead text="考试模式"></TitleHead> -->
    <div class="notice">
      <div class="noticebox">
        <div class="main">
          <div class="re_title">管理者进阶腾飞班 - 第一次考试</div>
          <!-- <div class="lefttitle">
            <div class="img"></div>
            <div class="rightmain">
              <div class="time">剩余时间</div>
              <div class="box">29分钟53秒</div>
            </div>
          </div> -->
          <div class="questiontype clearfix">
            <div class="type">判断题</div>
          </div>

          <!-- 循环遍历生成判断题的问题和选项 -->
          <div class="questions"
                v-for="(q,index) in questions"
                :key="index">
            <div class="questiontitle"                            >
                {{q.text}}
            </div>
            <div class="btnswitch" v-for="(o,index) in q.options"
            :key="index"
            @click="selectBtn(o)"
            >
                <div class="checkoutbtn"
                :style="{
                    backgroundImage:
                    'url('+( o.select === true? Images.checkboxImg : Images.checkbox2Img )+')'
                }"
                ></div>
                <div class="select">{{o.text}}</div>
            </div>
          </div>

          <!-- <div class="questions">
                    <div class="questiontitle">
                        1、控制计划是由工艺部门完成 （4分）
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">正确</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">错误</div>
                    </div>
                </div>
                <div class="questions">
                    <div class="questiontitle">
                        2、.PFMEA假定所设计的产品能满足设计要求
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">正确</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">错误</div>
                    </div>
                </div>
                <div class="questions">
                    <div class="questiontitle">
                        3、PFMEA假定所设计的产品能满足设计要求 （4分）
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">正确</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">错误</div>
                    </div>
                </div> -->

          <div class="questiontype clearfix">
            <div class="type">选择题</div>
          </div>

          <!-- 循环遍历生成选择题的问题和选项 -->
          <div class="questions" v-for="(q, index) in s_questions" :key="index">
            <div class="questiontitle">
              {{ q.text }}
            </div>
            <div
              class="btnswitch"
              v-for="(s, index) in s_options"
              :key="index"
              @click="selectBtn2(s)"
            >
              <div
                class="checkoutbtn"
                :style="{
                  backgroundImage:
                    'url(' +
                    (s.selected === true
                      ? Images.checkboxImg
                      : Images.checkbox2Img) +
                    ')',
                }"
              ></div>
              <div class="select">{{ s.text }}</div>
            </div>
          </div>

          <!-- <div class="questions">
                    <div class="questiontitle">
                        4、.FMEA 是一种（ ）工具（4分）
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">问题解决</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">项目策划</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">过程分析</div>
                    </div>
                    <div class="btnswitch">
                        <div class="checkoutbtn"></div>
                        <div class="select">风险分析</div>
                    </div>
                </div> -->

          <div class="btnbox">
            <div class="submitbtn">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import Images from "../../assets/image/index";
// import TitleHead from "@/components/TitleHead.vue";
export default {
    name: "ReadyExamination",
    // components: {
    //     TitleHead,
    // },
    setup() {
        const state = reactive({
            questions: [
                {
                    id: 1,
                    type: "judge",
                    text: "1、控制计划是由工艺部门完成 （4分）",
                    options: [
                        {   
                            id:1,
                            text: "正确",
                            select:"flase",
                        },
                        {
                            id:2,
                            text: "错误",
                            select:"flase",
                        },
                    ]
                },
                {
                    id: 2,
                    type: "judge",
                    text: "2、.PFMEA假定所设计的产品能满足设计要求  （4分）",
                    options: [
                        {   
                            id:1,
                            text: "正确",
                            select:"flase",
                        },
                        {
                            id:2,
                            text: "错误",
                            select:"flase",
                        },
                    ]
                },
                {
                    id: 3,
                    type: "judge",
                    text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
                    options: [
                        {
                            id:1,
                            text: "正确",
                            select:"flase",
                        },
                        {
                            id:2,
                            text: "错误",
                            select:"flase",
                        },
                    ]
                },
            ],
            //判断题问题和选项（暂时被questions替代）
            // j_questions: [
            //     {
            //         type: "judge",
            //         id: 1,
            //         text: "1、控制计划是由工艺部门完成 （4分）",
            //     },
            //     {
            //         type: "judge",
            //         id: 2,
            //         text: "2、.PFMEA假定所设计的产品能满足设计要求",
            //     },
            //     {
            //         type: "judge",
            //         id: 3,
            //         text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
            //     },
            // ],
            // j_options: [
            //     {
            //         id: 1,
            //         text: "正确",
            //         selected: false,
            //     },
            //     {
            //         id: 2,
            //         text: "错误",
            //         selected: false,
            //     },
            // ],

            s_questions: [
                {
                    type: "choice",
                    id: 1,
                    text: "4、.FMEA 是一种（ ）工具（4分）",
                },
            ],
            s_options: [
                {
                    id: 1,
                    text: "问题解决",
                    selected: false,
                },
                {
                    id: 2,
                    text: "项目策划",
                    selected: false,
                },
                {
                    id: 3,
                    text: "过程分析",
                    selected: false,
                },
                {
                    id: 4,
                    text: "风险分析",
                    selected: false,
                },
            ]
        });
        const selectBtn = (value) => {
            value.select = !value.select
        };
        const selectBtn2 = (value) => {
            let arr = state.s_options;
            arr.map((i) => {
                if (i.id === value.id) {
                    i.selected = !i.selected;
                }
            });
            state.s_options = arr;
        };
        return {
            ...toRefs(state),
            selectBtn,
            selectBtn2,
            Images,
        };
    }
};
</script>
<style lang="scss" scoped>
// .clearfix:before,
// .clearfix:after {
//   content: " ";
//   display: table;
//   clear: both;
// }
.readyexamination {
  width: 100%;
  background-color: #F2F5F7;
  font-size: 14px;
  font-weight: normal;
  color: #333330;
}
.notice {
  width: 100%;
  background-color: #ffffff;
  margin-top: 10px;
  .noticebox {
    width: 100%;
    // position: relative;
    // display: flex;
    // justify-content: center;
    .main {
      width: 90%;
      margin: 0 auto;
      padding-top: 19.5px;
      // .lefttitle {
      //   display: flex;
      //   margin-bottom: 21.5px;
      //   .img {
      //     width: 16px;
      //     height: 18.5px;
      //     background-image: url(../../assets/image/readyexamination/sandclock.png);
      //     background-size: 100% 100%;
      //   }
      //   .rightmain {
      //     display: flex;
      //     margin-left: 4.5px;
      //     font-size: 14px;
      //     .time {
      //       color: #56a3f9;
      //     }
      //     .box {
      //       margin-left: 9.5px;
      //       color: #ee423d;
      //     }
      //   }
      // }
      .re_title{
        margin-bottom: 23.5px;
        color: #04243C;
        font-weight: 600;
      }
      .questiontype {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        margin-bottom: 20px;
        background-color: #F2F5F7;
        line-height: 40px;
        font-weight: 500;
        .type {
          margin-left: 11px;
        }
      }
      .questions {
        width: 100%;
        margin-left: 9px;
        .questiontitle {
          margin-bottom: 18px;
          font-weight: 500;
        }
        .btnswitch {
          display: flex;
          height: 13.6px;
          line-height: 13.6px;
          margin-left: 23px;
          margin-bottom: 15px;
          .checkoutbtn {
            width: 13.6px;
            height: 13.6px;
            background-size: 100% 100%;
            margin-right: 6.5px;
          }
          .select {
            font-size: 13px;
          }
        }
      }
      .btnbox {
        width: 301.5px;
        height: 33px;
        background-color: #2478ff;
        border-radius: 6px;
        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
        font-size: 14px;
        margin: 30px auto 24px auto;
        text-align: center;
        line-height: 33px;
        .submitbtn {
          border: none;
          border-radius: 6px;
          background-color: #2478ff;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
