<template>
  <div class="workdetail" v-loading="loading">
    <el-card>
      <!-- <div style="color: #050026;font-size: 18px;font-weight: 400;">{{userName}}的作业</div> -->
      <div class="problemContent">
        <div class="title">{{problemName}}</div>
        <div class="problemList">
          <div v-for="(item, index) in problemData" :key="index">
            <div class="problem-list">
              <div>
                <div class="pro-title">{{index+1}}、{{item.problem}}【{{problemTypeData[item.problemType]}}】</div>
                <el-radio-group disabled v-if="item.problemType==0" v-model="item.result" size="large">
                  <el-radio style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">{{item.options[i]}}</el-radio>
                </el-radio-group>
                <el-checkbox-group disabled v-if="item.problemType==1" v-model="item.result" size="large">
                  <el-checkbox style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">{{item.options[i]}}</el-checkbox>
                </el-checkbox-group>
                <el-radio-group disabled v-if="item.problemType==2" v-model="item.result" size="large">
                  <el-radio label="1">对</el-radio>
                  <el-radio label="2">错</el-radio>
                </el-radio-group>
              </div>
              <div class="flex" style="margin-left: 50px;">
                <span class="nowrap">全市作答正确率：</span>
                <el-progress type="circle" :width="72" :stroke-width="12" color="#4BBC88" :percentage="item.right_percent" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      operateId: "",
      // userName: "",
      problemName: "",
      problemData: [],
      problemTypeData: ["单选题", "多选题", "判断题"],
    }
  },
  methods: {
    initData() {
      this.loading = true;
      request({
        url: '/yzy/zy_kczy/detail',
        data: {
          yzk_id: this.yzk_id
        }
      }).then(res => {
        if (res.code == 1) {
          let data = res.data.one_info;
          console.log(data)
          //    this.userName = data.yzzx_student_realname;
          this.problemName = data.yzz_name;
          if (data.yzk_content_json) {
            this.problemData = JSON.parse(
              data.yzk_content_json
            );
          }
          //   this.problemData = JSON.parse(data.yzzx_content_json);
          console.log(this.problemData)
          // this.problemData.map((item) => {
          //   item.percentage = 24;
          // })
          this.loading = false;
        }
      })
    }
  },
  created() {
    if (this.$route.params.id != "") {
      this.yzk_id = this.$route.params.id;
      this.initData();
    }
  },


}

</script>

<style lang="scss" scoped>
.workdetail {
  .el-card {
    min-height: 350px;
    margin-bottom: 15px;
  }
  .flex {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .nowrap {
    white-space: nowrap;
  }
  .problemContent {
    width: 90%;
    // width: 945px;
    margin: auto;
    margin-top: 30px;
    .title {
      text-align: center;
    }
    .problemList {
      margin-top: 40px;
      .problem-list {
        padding: 0 20px;
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
        .pro-title {
          font-size: 14px;
          color: #00101a;
        }
        ::v-deep .el-progress {
          .el-progress__text {
            color: #4bbc88;
            font-size: 16px !important;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>