<template>
  <div class="sjBox" v-if="askJSONC && askJSONC.askJson">
    <div class="a_add_title">
      <div style="font-size: 25px"><spna style="color:rgb(113, 113, 113);">投票标题：</spna>{{ askJSONC.askTitle }}</div>
    </div>
    <div class="a_addBox">
      <div
        class="a_add_box"
        v-for="(item, index) in askJSONC.askJson"
        :key="index"
      >
        <div class="a_add_head">
          <div>
            <span>{{ index + 1 + "、" + item.askstitle }}</span>
          </div>
          <!-- <el-button
            type="primary"
            @click="getA(checkJson[index].checkPerson, item.checkList)"
            >查看</el-button
          > -->
        </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
                  ><span
                    style="max-width: calc(100% - 40px); width: auto"
                    v-html="item.checkList[checkIndex]"
                  ></span
                ></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>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="900px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div>
        <div v-for="(item, index) in timu" :key="index" class="borderB">
          <div v-html="item" class="s_title"></div>
          <div class="stuBox" style="margin-top: 20px; align-items: flex-start">
            <div style="margin: 0 0 10px 0; min-width: 70px; color: #adadad">
              选择：
            </div>
            <div class="stuBox" style="flex-wrap: wrap">
              <span
                class="studentClass"
                v-for="(pe, pi) in person[index]"
                :key="index + '-' + pi"
                >{{ pe }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["askJSON", "checkJson"],
  data() {
    return {
      askJSONC: {},
      dialogVisible: false,
      person: [],
      timu: [],
      checkJson2: [],
    };
  },
  watch: {
    askJSON(val) {
      this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
    getA(person, timu) {
      this.person = person;
      this.timu = timu;
      this.dialogVisible = true;
    },
  },
  watch: {
    checkJson: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.askJSONC = this.askJSON ? this.askJSON : {};
        for (var i = 0; i < this.checkJson.length; i++) {
          // debuggerA
          let el = this.checkJson[i];
          console.log(el);
        }
        this.checkJson2 = this.checkJson;
      },
    },
  },
  mounted() {
    // this.askJSONC = this.askJSON ? JSON.parse(this.askJSON)[0] : {};
    this.askJSONC = this.askJSON ? this.askJSON : {};
    for (var i = 0; i < this.checkJson.length; i++) {
      let el = this.checkJson[i];
      console.log(el);
    }
    this.checkJson2 = this.checkJson;
  },
};
</script>

<style scoped>
.sjBox {
  margin-top: 25px;
  /* max-height: 420px; */
  overflow: auto;
}

.a_addBox {
  margin: 20px 0;
  background: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}

.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);
}

.right {
  color: rgb(0 123 255);
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* .right::after {
  content: "";
  background-image: url(../../assets/right.png);
  min-width: 15px;
  min-height: 15px;
  background-size: 100% 100%;
  margin: 0 10px;
} */

.dialog_diy >>> .el-dialog__header,
.dialog_diy1 >>> .el-dialog__header {
  background: #002e81 !important;
  padding: 15px 20px;
}

.dialog_diy >>> .el-dialog__title,
.dialog_diy1 >>> .el-dialog__title {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn,
.dialog_diy1 >>> .el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover,
.dialog_diy1 >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.dialog_diy1 >>> .el-dialog__body {
  padding: 0;
}

.dialog_diy >>> .el-dialog__body,
.dialog_diy >>> .el-dialog__footer,
.dialog_diy1 >>> .el-dialog__footer {
  background: #fafafa;
}

.s_title {
  /* margin-top: 10px; */
  font-size: 18px;
  margin-bottom: 10px;
  word-break: break-word;
  /* min-width: calc(100% / 2 - 200px); */
}

.stuBox {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
}

.studentClass {
  background: #46a1eb;
  color: #fff;
  width: 90px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  margin: 0 15px 0 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-bottom: 10px;
}

.borderB {
  margin-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
</style>