<template>
  <div class="editQuestions" v-loading="loading">
    <div class="top-box">
      <div class="left">
        <div class="questions-name">{{ title }}</div>
        <div class="total">共{{ list.length }}题</div>
      </div>
      <div class="right">
        <el-button size="small" plain @click="handleResult">结果配置</el-button>
        <el-button size="small" type="primary" plain @click="handleAdd"
          >单题录入</el-button
        >
      </div>
    </div>

    <div class="item" v-for="(item, index) in list" :key="item.id">
      <div class="top">
        <div class="left">{{ index + 1 }}</div>
        <div class="right">
          <el-button type="text" size="small" @click="handleEdit(item)"
            >编辑</el-button
          >
          <el-button
            type="text"
            class="red"
            size="small"
            @click="handleDel(item.questionsId)"
            >删除</el-button
          >
        </div>
      </div>
      <div class="content">
        <div class="title">{{ item.questionsName }}</div>
        <div class="radio-item" v-for="(i, d) in item.answers" :key="d">
          {{ d + 1 }}、{{ i.answer }}
        </div>
      </div>
    </div>
    <el-dialog :title="title" width="600px" :visible.sync="dialogFormVisible">
      <el-form label-width="100px" :model="setQuery" ref="setQuery">
        <el-form-item
          label="题干:"
          prop="questionsName"
          :rules="[{ required: true, message: '请输入题干', trigger: 'blur' }]"
        >
          <el-input
            v-model="setQuery.questionsName"
            class="item-width-400"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="答案:"
          :prop="'answers.' + index + '.answer'"
          v-for="(item, index) in setQuery.answers"
          :key="index"
          :rules="[{ required: true, message: '请输入答案', trigger: 'blur' }]"
        >
          <div class="aswer-item" :key="index">
            <el-input v-model="item.answer" class="item-width-300"></el-input>
            <el-select
              v-model="item.columnId"
              clearable
              class="item-width-200 ml10"
              placeholder="请选择栏目"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <i class="el-icon-circle-plus-outline ml10" @click="add"></i>
            <i class="el-icon-remove-outline ml10" @click="del(index)"></i>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="结果配置" custom-class="result-dialog" width="600px" :visible.sync="dialogFormVisible1">
      <el-form label-width="100px" :model="result" ref="result" v-loading="loading1">
        <div class="form-box" v-for="(item,index) in result.results" :key="item.columnId">
          <div class="notice">
            结果最大值为 <span class="red">{{item.columnName}}</span>时
          </div>
          <el-form-item
            label="结果标题:"
            :prop="'results.'+index+'.resultTitle'"
            :rules="[{ required: true, message: '请输入结果标题', trigger: 'blur' }]"
          >
            <el-input
              v-model="result.results[index].resultTitle"
              class="item-width-300"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="结果内容描述:"
            :prop="'results.'+index+'.resultMsg'"
            :rules="[{ required: true, message: '请输入结果内容描述', trigger: 'blur' }]"
          >
            <el-input
              v-model="result.results[index].resultMsg"
              type="textarea"
              :rows="6"
              maxlength="100"
              show-word-limit
              class="item-width-300"
              placeholder="限100字"
              >
          </el-input>
          </el-form-item>
        </div>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="saveResult"
          >确 定</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Upload from "@/components/Upload";
import { addOrUpdateQuestions, getTestList, getAllColumn,delQuestions,setResult,getResult } from "@/api/study";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      result:{
        "paperId": 0,
        "results": []
      },
      title: "",
      loading: false,
      loading1: false,
      btnLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      setQuery: {
        answers: [
          {
            answer: "",
            columnId: "",
          },
        ],
        id: 0,
        paperId: 0,
        questionsName: "",
      },
      rules: {
        answers: [
          { required: true, message: "请上传banner图", trigger: "change" },
        ],
      },
      
      list: [],
      options: [],
    };
  },
  methods: {
    handleResult(){
      this.dialogFormVisible1 = true
      this.getResult()
    },
    add() {
      if(this.setQuery.answers.length==5){
        return this.$message({
            message: '最多可设置5个答案',
            type: 'error'
          });
      }
      this.setQuery.answers.push({
        answer: "",
        columnId: "",
      });
    },
    del(index) {
      this.setQuery.answers.splice(index, 1);
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.setQuery = {
        answers: [
          {
            answer: "",
            columnId: 0,
          },
        ],
        paperId: this.$route.query.id,
        questionsName: "",
      };
    },
    // 删除
     handleDel(id) {
       this.$confirm(`此操作将删除该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delQuestions({id}).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.getTestList();
            }
          })
        })
    },
    handleEdit(row) {
        this.dialogFormVisible = true;
        this.setQuery = {
            answers: row.answers,
            id:row.questionsId,
            paperId: this.$route.query.id,
            questionsName: row.questionsName,
        };
    },
    getAllColumn() {
      getAllColumn({belongType:2}).then((res) => {
        if (res.state == "Success") {
          res.content.map((item) => {
            this.options.push({
              value: item.id,
              label: item.columnName,
            });
            this.result.results.push({
              "columnId": item.id,
              "columnName": item.columnName,
              "resultMsg": "",
              "resultTitle": ""
            })
          });
        }
      });
    },
    getTestList() {
      this.loading = true;
      getTestList({ paperId:this.$route.query.id }).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.list = res.content;
        }
      });
    },
    save() {
      this.$refs.setQuery.validate((v) => {
        if (v) {
          this.btnLoading = true;
          addOrUpdateQuestions(this.setQuery).then((res) => {
            this.btnLoading = false;
            if (res.state == "Success") {
                this.dialogFormVisible = false
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
              this.getTestList();
            }
          });
        }
      });
    },
    saveResult(){
      this.$refs.result.validate((v) => {
        if (v) {
          this.btnLoading = true;
          setResult(this.result).then((res) => {
            this.btnLoading = false;
            if (res.state == "Success") {
                this.dialogFormVisible1 = false
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
            }
          });
        }
      })
      
    },
    getResult(){
      this.loading1 = true
      getResult({paperId:this.$route.query.id}).then(res=>{
        this.loading1 = false
        if (res.state == "Success") {
          if(res.content.length){
                res.content.map(item=>{
                  this.result.results.map(i=>{
                    if(item.columnId == i.columnId){
                       i.resultTitle = item.resultTitle
                       i.resultMsg = item.resultMsg
                    }
                  })
                })
              }
        }
      })
    }
  },
  created() {
    this.title = sessionStorage.getItem("questionsTitle");
    this.result.paperId = this.$route.query.id
    this.getTestList();
    this.getAllColumn();
  },
};
</script>

<style lang="scss" >
.editQuestions {
  padding-bottom: 40px;
  .top-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    position: relative;
    top: -20px;
    padding: 15px;
    border-top: 1px solid #ccc;
    .left {
      display: flex;
      align-items: center;
      height: 30px;
      .questions-name {
        font-size: 14px;
        font-weight: bold;
        color: #666;
        vertical-align: bottom;
      }
      .total {
        color: #2836fe;
        margin-left: 10px;
        font-size: 12px;
        margin-top: 2px;
      }
    }
    .right {
    }
  }
  .item {
    margin: 15px 15px 0;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    }
    .content {
      .title {
        font-size: 14px;
        font-weight: bold;
        color: #666;
        margin: 10px 0;
      }
      .radio-item {
        padding: 10px 0 10px 30px;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 8px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #ccc;
          transform: translateY(-50%);
        }
      }
    }
  }

  .aswer-item {
    display: flex;
    align-items: center;
    i {
      font-size: 26px;
      color: #ccc;
    }
  }
  .result-dialog{
    .el-dialog__body{
      max-height: 60vh;
      overflow: auto;
      .notice{
        margin-left: 20px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>