<template>
  <div class="radio position-relative" v-if="loaded">
    <h3 class="weight-normal f14">
      {{action==1?'小题':'题目'}}{{index+1}}：
      <p v-html="item.title"></p>
    </h3>
    <p v-if="item.is_hearing">
      <audio class="success" :src="item.tkinfo.audiofile" controls ></audio>
    </p>
    <div class="test-option f14 darkgray-font line-height26">
      <div v-if="action==1">
        <p v-for="(oitem,i) in item.tkinfo.content" :key="i">
          <label>
            <input
              type="radio"
              :name="'test'+parentid+'xt'+index"
              class="radiobox vertical-align"
              :checked="oitem.checked"
              @change="getIfdoexam2(oitem.order,parentid,index)"
            >

            <span class="vertical-align">
              <font v-if="item.tktype!=4">{{oitem.order}}.</font>
              <span v-html="oitem.name"></span>
            </span>
          </label>
        </p>
      </div>
      <div v-else>
        <p v-for="oitem in item.tkinfo.content" :key="oitem.order">
          <label>
            <input
              type="radio"
              :name="'test'+item.tkid"
              class="radiobox vertical-align"
              :checked="oitem.checked"
              @change="getIfdoexam(oitem.real_answer,item.tkid)"
              v-if="item.tktype==2"
            >
            <input
              type="radio"
              :name="'test'+item.tkid"
              class="radiobox vertical-align"
              :checked="oitem.checked"
              @change="getIfdoexam(oitem.order,item.tkid)"
              v-else
            >
            <span class="vertical-align">
              <font v-if="item.tktype!=4">{{oitem.order}}.</font>
              <span v-html="oitem.name"></span>
            </span>
          </label>
        </p>
      </div>
    </div>
    <div class="right-box darkgray-font" v-if="action!=1">
      <span class="mr10" @click="redress(item)" v-if="item.iscorrection">
        <i class="iconfont icon-iconzhuanqu04 f20 vertical-align"></i>
        <b class="weight-normal vertical-align">纠错</b>
      </span>
      <span class="mr10" @click="setFlag(item)">
        <i
          :class="item.flag==0?'iconfont icon-thin-_pin_bookma f16 vertical-align':'iconfont icon-biaoji green-font f16 vertical-align'"
        ></i>
        <b class="weight-normal vertical-align">标记</b>
      </span>
      <span @click="setCollect(item)" v-if="isshow_collect">
        <i
          :class="item.collect==0?'iconfont icon-shoucang f18 vertical-align':'iconfont icon-shoucang1 yellow-font f18 vertical-align'"
        ></i>
        <b class="weight-normal vertical-align">收藏</b>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Radio",
  props: [
    "item",
    "index",
    "action",
    "parentid",
    "isshow_collect",
    "is_saveanswer",
    "is_powertf"
  ],
  data(){
    return{
      currNewCon:[],
      loaded:false
    }
  },
  watch:{
    item:{
      handler(item){
        if(!item.isReset){
          this.resetRadioItem(item)
          item.isReset = true
        }
      },
      deep:true,
      immediate:true
    }
  },
  mounted() {
    if (this.item.useranswer && this.item.useranswer.length) {
      if (this.action == 1) {
        if (this.item.tktype == 2) {
          this.currNewCon.map(uitem => {
            if (this.item.useranswer.toString() == uitem.order) {
              uitem.checked = true;
            } else {
              uitem.checked = false;
            }
          });
        } else {
          let newuseranawer;
          if (this.item.useranswer == 0) {
            newuseranawer = "A";
          } else {
            newuseranawer = "B";
          }
          this.currNewCon.map(uitem => {
            if (newuseranawer == uitem.order) {
              uitem.checked = true;
            } else {
              uitem.checked = false;
            }
          });
        }
      } else {
        if (this.item.tktype == 2) {
          this.currNewCon.map(uitem => {
            if (this.item.useranswer.toString() == uitem.real_answer) {
              uitem.checked = true;
            } else {
              uitem.checked = false;
            }
          });
        } else {
          let newuseranawer;
          if (this.item.useranswer == 0) {
            newuseranawer = "A";
          } else {
            newuseranawer = "B";
          }
          this.currNewCon.map(uitem => {
            if (newuseranawer == uitem.order) {
              uitem.checked = true;
            } else {
              uitem.checked = false;
            }
          });
        }
      }
      this.loaded = true
    } else {
      this.item.ifdoexam = 0;
      this.loaded = true
    }
    // if (this.is_saveanswer == 1||this.is_powertf==1) {
    //   if (this.item.useranswer && this.item.useranswer.length) {
    //     if (this.action == 1) {
    //       if (this.item.tktype == 2) {
    //         this.currNewCon.map(uitem => {
    //           if (this.item.useranswer.toString() == uitem.order) {
    //             uitem.checked = true;
    //           } else {
    //             uitem.checked = false;
    //           }
    //         });
    //       } else {
    //         let newuseranawer;
    //         if (this.item.useranswer == 0) {
    //           newuseranawer = "A";
    //         } else {
    //           newuseranawer = "B";
    //         }
    //         this.currNewCon.map(uitem => {
    //           if (newuseranawer == uitem.order) {
    //             uitem.checked = true;
    //           } else {
    //             uitem.checked = false;
    //           }
    //         });
    //       }
    //     } else {
    //       if (this.item.tktype == 2) {
    //         this.currNewCon.map(uitem => {
    //           if (this.item.useranswer.toString() == uitem.real_answer) {
    //             uitem.checked = true;
    //           } else {
    //             uitem.checked = false;
    //           }
    //         });
    //       } else {
    //         let newuseranawer;
    //         if (this.item.useranswer == 0) {
    //           newuseranawer = "A";
    //         } else {
    //           newuseranawer = "B";
    //         }
    //         this.currNewCon.map(uitem => {
    //           if (newuseranawer == uitem.order) {
    //             uitem.checked = true;
    //           } else {
    //             uitem.checked = false;
    //           }
    //         });
    //       }
    //     }
    //   } else {
    //     this.item.ifdoexam = 0;
    //   }
    //   this.loaded = true
    // }else{
    //   this.item.ifdoexam = 0;
    //   this.loaded = true
    // }
  },
  methods: {
    /**
     * 重新构造单选题对象结构
     * @param {Object} 单选题原对象
     */
    resetRadioItem(item){
      let newCon = [];
      this.item.tkinfo.content.map((oitem, i) => {
        newCon.push({
          name: oitem,
          order: this.getEN(i)
        });
      });

      if (item.tktype == 2 && item.tkinfo.real_answer) {
        this.item.tkinfo.real_answer.map((ritem, r) => {
          newCon[r].real_answer = ritem;
        });
      }
      this.currNewCon = newCon;
      this.item.tkinfo.content = newCon;
    },
    redress(data) {
      this.$emit("redressStatus", data.tkid);
    },
    setFlag(data) {
      data.flag ? (data.flag = 0) : (data.flag = 1);
      this.$emit("flagStatus", data.flag, data.tkid);
    },
    setCollect(data) {
      data.collect ? (data.collect = 0) : (data.collect = 1);
      this.$emit("collectStatus", data.collect, data.tkid);
    },
    getIfdoexam(order, tkid) {
      this.$emit("ifDoexam", order, tkid);
    },
    getIfdoexam2(order, parentid, i) {
      this.$emit("ifDoexam", order, parentid, i);
    },
    //A-Z
    getEN(index) {
      var arr = [];
      for (var i = 65; i < 91; i++) {
        arr.push(String.fromCharCode(i));
      }
      return arr[index];
    }
  }
};
</script>
<style scoped>
.radio {
  line-height: 22px;
  padding-bottom: 40px;
}
.radio h3 {
  margin-bottom: 25px;
}
.right-box {
  position: absolute;
  right: 0;
  bottom: 0;
}
.right-box span {
  cursor: pointer;
}
.success {
  margin-top: 20px;
  width: 400px;
}
.childtk h3 {
  margin-bottom: 10px !important;
}
</style>
