<template>
  <div class="box">
    <div class="content">
      <div class="btn">
        <p @click="send">发布题目</p>
      </div>

      <div class="container">
        <div class="title">题目推荐</div>

        <div class="item" v-for="(item, index) in list" :key="index">
          <img :src="item.questionImage" alt="" />
          <div class="item_box">
            <p>{{ item.questionTitle }}</p>
            <p>{{ item.content }}</p>
            <div class="bottom_item">
              <p class="time">{{ item.questionTitle }} 发布于 {{ item.createTime }}</p>
              <div class="btns">
                <p @click="answer(item.id)">答题</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog
        title="发布题目"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <!-- <p style="text-align: center;">发布题目</p> -->
        <el-upload
          class="avatar-uploader"
          action="https://9miao.fun:6838/prod-api/common/alibabaUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headerObj"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="题目名称">
              <el-input v-model="form.questionTitle"></el-input>
            </el-form-item>
            <el-form-item label="发布人">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="发布内容">
              <el-input v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item label="选项A">
              <el-input v-model="form.content1"></el-input>
            </el-form-item>
            <el-form-item label="选项B">
              <el-input v-model="form.content2"></el-input>
            </el-form-item>
            <el-form-item label="选项C">
              <el-input v-model="form.content3"></el-input>
            </el-form-item>
            <el-form-item label="选项D">
              <el-input v-model="form.content4"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upload">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="答题"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose"
      >
        <div class="radio">
          <el-radio v-for="(iteme,ind) in sublist" v-model="radio" :key="ind" :label="iteme.optionName">{{iteme.content}}</el-radio>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploads">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { apiServe }  from '@/api/api.js'
export default {
  name: "WenhuaWebuiZhiShi",

  data() {
    return {
      list: [
      ],
      headerObj: {
      "Content-Type": "application/json",
            "saToken" : localStorage.getItem('token')
        },
      dialogVisible: false,

      dialogVisible1: false,

      form: {},

      imageUrl: "",

      radio: "",
      sublist:'',
    };
  },

  mounted() {
    let token =  localStorage.getItem('token')
    console.log(token);
    if(!token){
      if(!token){
        this.$confirm("您还未登录，是否前去登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 跳转登录
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.$router.push("/");
        });
      }
    }
    this.searchUser()
  },

  methods: {
    send() {
      this.dialogVisible = true;
    },
    searchUser() {
      
      apiServe.getWishData('').then((res) => {
        console.log(res);
        this.list = res.data.data
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },

    upload() {
                // 若验证成功 此时应该调登录接口
      let data = {
        questionTitle: this.form.questionTitle,
          questionImage: this.imageUrl,
          content: this.form.content,
          optionReqVo:[
            {
              "optionName":"Option 1",
              "questionId": 1,
              "content":this.form.content1,
              "isCorrect": 0
            },
            {
              "optionName":"Option 2",
              "questionId": 2,
              "content":this.form.content2,
              "isCorrect": 0
            },
            {
              "optionName":"Option 3",
              "questionId": 3,
              "content":this.form.content3,
              "isCorrect": 0
            },
            {
              "optionName":"Option 4",
              "questionId": 4,
              "content":this.form.content4,
              "isCorrect": 0
            }
          ]

      }
      apiServe.getWish(data).then((res) => {
        console.log(res);
        this.$message({
            message: '发布成功',
            type: 'success'
            })
            setTimeout(() => {
                      this.dialogVisible = false;
                      location.reload();
                    }, 1000);
      });
                
               
      setTimeout(() => {
        this.dialogVisible = false;
      }, 1000);
    },

    uploads() {
      apiServe.getwishdt(this.radio).then((res) => {
        console.log(res);
        this.$message({
        message: "答题成功",
        type: "success",
      });
      setTimeout(() => {
        this.dialogVisible1 = false;
      }, 1000);
      });
      
     
    },

    answer(id) {
      apiServe.getwishxx(id).then((res) => {
        console.log(res);
        this.sublist = res.data.data
      });
      this.dialogVisible1 = true;
    },
  },
};
</script>

<style scoped lang="less">
.box::v-deep {
  height: 100%;
  //   background-color: #ccc;
  padding: 50px 60px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 1000px;
    // height: 300px;
    background-color: #ffffff;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;

    .radio {
        display: flex;
        flex-direction: column;
        // align-items: c;
        margin-left: 20px;
    }

    .btn {
      // width: 100px;
      // background-color: rgba(0, 0, 0, alpha);
      //   padding: 15px 30px;
      box-sizing: border-box;

      p {
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: rgba(22, 155, 213, 1);
        font-size: 14px;
        border-radius: 7px;
        color: #ffffff;
      }
    }
  }

  .container {
    width: 100%;

    .title {
      margin-top: 20px;
      // margin-left: 30px;
      margin-bottom: 20px;
      color: #333;
      font-size: 20px;
    }

    .item {
      width: 100%;
      display: flex;
      //   align-items: center;
      padding: 30px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 10px;
      margin-bottom: 20px;
      position: relative;
      margin-top: 20px;
      border: 1px solid #ccc;

      img {
        width: 120px;
        height: 120px;
        border-radius: 5px;
      }

      .item_box {
        margin-left: 20px;

        .options {
          display: flex;
          flex-direction: column;

          .el-radio {
            margin-bottom: 5px;
          }
        }

        .bottom {
          margin-top: 10px;
        }

        p:first-child {
          margin-bottom: 5px;
          font-size: 20px;
        }

        p:nth-child(2) {
          // margin-bottom: 30px;
          //   width: 600px;
          font-size: 16px;
          color: #979797;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3; //显示几行
        }
      }

      .bottom_item {
        width: 600px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 10px;
        right: 30px;
        // position: relative;

        .time {
          font-size: 14px !important;
          color: #ffffff;
          display: flex;
          align-items: center;
        }

        .btns {
          // width: 100px;
          // background-color: rgba(0, 0, 0, alpha);
          //   padding: 15px 30px;
          box-sizing: border-box;
          position: absolute;
          right: 0;

          p {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: rgba(22, 155, 213, 1);
            font-size: 10px;
            border-radius: 7px;
            color: #ffffff;
          }
        }
      }
    }
  }
  

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>