<template>
  <div
    class="sjBox"
    v-if="askJSONC && askJSONC.askJson"
  >
    <div class="a_add_title">
      <div style="font-size: 25px">{{ askJSONC.askJson.askTitle }}</div>
    </div>
    <div class="a_addBox">
      <div
        class="a_add_box"
        v-for="(item, index) in askJSONC.askJson.askJson"
        :key="index"
      >
        <div class="a_add_head">
          <div>
            <span>{{ index + 1 + "、" + item.askstitle }}</span>
          </div>
        </div>
        <div class="a_add_body">
          <div class="a_add_input width100">
            <div class="a_add_persent a_add_persent_div a_add_persent_title">
              <span>选项</span><span>小计</span><span>比例</span>
            </div>
            <div class="a_add_persent">
              <div
                class="a_add_persent_div"
                v-for="(item1, checkIndex) in item.askItem"
                :key="checkIndex"
              >
                <span>{{ item.checkList[checkIndex] }}</span>
                <span>{{
                  checkJson[index].checkCount[checkIndex]
                    ? checkJson[index].checkCount[checkIndex]
                    : 0
                }}</span>
                <span>
                  <el-progress
                    :percentage="
                      checkJson[index].checkPerent[checkIndex]
                        ? checkJson[index].checkPerent[checkIndex]
                        : 0
                    "
                    :show-text="false"
                  ></el-progress>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["askJSON", "checkJson"],
  data() {
    return {
      askJSONC: {},
    };
  },
  watch: {
    askJSON(val) {
      this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
    },
  },
  mounted() {
    this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
  },
};
</script>

<style>
.sjBox {
  margin-top: 25px;
  max-height: 420px;
  overflow: auto;
}
.a_addBox {
  margin: 20px 0;
  background: #fff;
}
.a_add_box {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.a_add_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 18px;
}
.a_add_head .a_add_head_input {
  width: 300px;
}
.a_add_head .a_add_head_div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a_add_head_div img {
  cursor: pointer;
  width: 23px;
}
.a_add_head_div img + img {
  margin-left: 10px;
}
.a_add_body {
  display: flex;
  align-items: center;
}
.a_add_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* width: 100%; */
}
.width100 {
  width: 100%;
}
.a_add_input .a_add_persent {
  /* display: flex; */
  /* flex-direction: column; */
  width: 100%;
}
.a_add_persent_div {
  width: 100%;
  display: flex;
  align-items: center;
}
.a_add_persent_div span {
  margin: 5px 0;
}
.a_add_persent_div span:nth-child(1) {
  width: 30%;
}
.a_add_persent_div span:nth-child(2) {
  width: 7%;
}
.a_add_persent_div span:nth-child(3) {
  width: 40%;
}

.sjBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.sjBox::-webkit-scrollbar {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.sjBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>