<template>
  <div class="workContent" v-loading="loading">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">上传作业</span>
        <span class="subTitle">作业 - <span style="color: #000;">上传作业</span></span>
      </div>
    </el-card>

    <el-card>
      <div style="color: #050026;font-size: 18px;font-weight: 400;">上传作业</div>
      <div class="workContainer" :style="{paddingBottom: problemData.length==0 && problemName=='' ? '20px' : '80px'}">
        <div class="btnDiv" v-if="!isLook">
          <div>
            <el-button v-for="(item, index) in problemTypeData" :key="index" type="primary" plain @click="handleAdd(index)">添加{{item}}</el-button>
          </div>
          <el-button type="primary" v-show="problemData.length!=0 && problemName!=''" @click="commitData" :loading="commitLoading">创建完成</el-button>
        </div>
        <div class="problemContent">
          <div class="title titleDiv">
            <div v-if="!problemNameEdit" style="font-size: 20px;color: #00101A;">{{problemName}}</div>
            <el-input v-if="problemNameEdit" v-model="problemName" placeholder="请输入作业名称" @blur="handleBlur"></el-input>
            <div v-if="!problemNameEdit && problemName!='' && !isLook" class="operateBtn" style="top: 0; right: 108px;">
              <el-button type="primary" plain @click="problemNameEdit=!problemNameEdit">编辑</el-button>
            </div>
          </div>
          <div class="problemList">
            <div v-for="(item, index) in problemData" :key="index">
              <div class="problem-list" v-if="!item.edit">
                <div class="operateBtn" v-if="!isLook">
                  <el-button type="primary" plain @click="handleEdit(item)">编辑</el-button>
                  <el-button type="primary" plain @click="handleDelete(index)">删除</el-button>
                </div>
                <div class="pro-title">{{index+1}}、{{item.problem}}【{{problemTypeData[item.problemType]}}】</div>
                <el-radio-group 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 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 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 v-else class="problemEdit">
                <div class="flex title">
                  <el-input v-model="item.problem" placeholder="请输入问题"></el-input>
                  <span class="type">【{{problemTypeData[item.problemType]}}】</span>
                </div>
                <div class="optionDiv">
                  <el-radio-group class="single" v-if="item.problemType==0" v-model="item.result" size="large">
                    <el-radio v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">
                      <el-input v-model="item.options[i]" :placeholder="'选项'+(i+1)"></el-input>
                      <el-icon color="#F35421" :size="20" @click.stop="handleRemove(item, i)">
                        <RemoveFilled />
                      </el-icon>
                    </el-radio>
                  </el-radio-group>
                  <el-checkbox-group v-if="item.problemType==1" v-model="item.result" size="large">
                    <el-checkbox v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">
                      <el-input v-model="item.options[i]" :placeholder="'选项'+(i+1)"></el-input>
                      <el-icon color="#F35421" :size="20" @click.stop="handleRemove(item, i)">
                        <RemoveFilled />
                      </el-icon>
                    </el-checkbox>
                  </el-checkbox-group>
                  <el-radio-group 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>
                  <el-button v-if="item.problemType!=2" style="margin-left: 20px;" type="primary" @click="addOption(item)">添加选项</el-button>
                </div>
                <div class="operateBtn">
                  <el-button type="primary" plain @click="handleDelete(index)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { RemoveFilled } from '@element-plus/icons-vue';
export default {
  data() {
    return {
      loading: false,
      workType: "1",
      operateId: "",
      isLook: "",
      problemTypeData: ["单选题", "多选题", "判断题"],
      problemType: "",
      problemName: "",
      problemNameEdit: false,
      problemData: [],
      commitLoading: false,
      // problemObj: {
      //   problem: "111", //问题
      //   problemType: 0, //问题类型
      //   answer: "", //正确答案
      //   options: ["", ""]
      // }
    }
  },
  components: { RemoveFilled },
  methods: {
    initDetailInfo() {
      this.loading = true;
      if (this.workType == 1) {
        request({
          url: '/yzy/zy_zbkc/detail',
          data: {
            yzz_id: this.operateId
          }
        }).then(res => {
          if (res.code == 1) {
            let data = res.data.one_info;
            this.problemName = data.yzz_name;
            this.problemData = JSON.parse(data.yzz_content_json);
            this.loading = false;
          }
        })
      } else if (this.workType == 2) {
        request({
          url: '/yzy/zy_kczy/detail',
          data: {
            yzk_id: this.operateId
          }
        }).then(res => {
          if (res.code == 1) {
            let data = res.data.one_info;
            this.problemName = data.yzk_name;
            this.problemData = JSON.parse(data.yzk_content_json);
            this.loading = false;
          }
        })
      }
    },
    handleAdd(type) {
      this.problemType = type;

      if (this.problemName == "") {
        this.problemNameEdit = true;
      }

      // this.problemData = this.problemData.filter(item => item.problem == "" && item.edit);

      this.problemData.map((item) => {
        item.edit = false;
      })
      let obj = {
        edit: true,
        problem: "",
        problemType: type,
        result: type != 1 ? "1" : ["1"],
        options: ["", ""]
      }
      this.problemData.push(obj);
    },
    handleBlur() {
      if (this.problemName != "") {
        this.problemNameEdit = false;
      }
    },
    handleRemove(data, index) {
      data.options.splice(index, 1);
    },
    addOption(data) {
      data.options.push("");
    },
    handleEdit(data) {
      this.problemData.map((item) => {
        item.edit = false;
      })
      data.edit = true;
    },
    handleDelete(index) {
      this.problemData.splice(index, 1);
    },
    commitData() {
      this.problemData.map((item) => {
        item.edit = false;
        if (item.problemType == 1) {
          item.answer = item.result.join(",");
        } else {
          item.answer = item.result;
        }
      })
      this.commitLoading = true;
      if (this.workType == 1) {
        if (this.operateId == "") {
          request({
            url: '/yzy/zy_zbkc/add',
            data: {
              yzy_zy_zbkc: {
                yzz_name: this.problemName,
                yzz_content_json: JSON.stringify(this.problemData)
              }
            }
          }).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.$router.go(-1);
            }
          })
        } else {
          request({
            url: '/yzy/zy_zbkc/edit',
            data: {
              yzz_id: this.operateId,
              yzy_zy_zbkc: {
                yzz_name: this.problemName,
                yzz_content_json: JSON.stringify(this.problemData)
              }
            }
          }).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.$router.go(-1);
            }
          })
        }
      } else if (this.workType == 2) {
        if (this.operateId == "") {
          request({
            url: '/yzy/zy_kczy/add',
            data: {
              yzy_zy_kczy: {
                yzk_name: this.problemName,
                yzk_content_json: JSON.stringify(this.problemData)
              }
            }
          }).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.$router.go(-1);
            }
          })
        } else {
          request({
            url: '/yzy/zy_kczy/edit',
            data: {
              yzk_id: this.operateId,
              yzy_zy_kczy: {
                yzk_name: this.problemName,
                yzk_content_json: JSON.stringify(this.problemData)
              }
            }
          }).then(res => {
            if (res.code == 1) {
              this.$message.success("保存成功！");
              this.$router.go(-1);
            }
          })
        }
      }
    }
  },
  created() {
    this.workType = this.$route.params.workType;
    this.isLook = this.$route.query.isLook;
    this.operateId = this.$route.query.id || "";
    if (this.operateId != "") {
      this.initDetailInfo();
    }
  }
}
</script>

<style lang="scss" scoped>
.workContent::v-deep {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
  }
  .pointer {
    cursor: pointer;
  }
  .title {
    font-size: 18px;
    color: #050026;
  }
  .subTitle {
    font-size: 14px;
    color: #949494;
    margin-left: 45px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .workContainer {
    width: 945px;
    margin: auto;
    padding-bottom: 80px;
    position: relative;
    .btnDiv {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: absolute;
      bottom: 0;
      .el-button {
        width: 120px;
        height: 40px;
        text-align: center;
        border-radius: 10px;
        &.el-button--primary.is-plain {
          border: 1px solid #00a3ff;
          color: #00a3ff;
          background: transparent;
        }
      }
      .el-button + .el-button {
        margin-left: 25px;
      }
    }
    .problemContent {
      .operateBtn {
        position: absolute;
        right: 20px;
        top: -5px;
        .el-button {
          width: 62px;
          height: 32px;
          text-align: center;
          border-radius: 6px;
          &.el-button--primary.is-plain {
            border: 1px solid #00a3ff;
            color: #00a3ff;
            background: transparent;
          }
        }
        .el-button + .el-button {
          margin-left: 25px;
        }
      }
      .title {
        text-align: center;
        .el-input {
          height: 44px;
          width: 516px;
          .el-input__wrapper {
            width: 100%;
            box-shadow: none;
            background: #f9f9f9;
            border-radius: 6px;
          }
        }
        &.titleDiv {
          .el-input {
            .el-input__inner {
              text-align: center;
            }
          }
        }
      }
      .problemList {
        margin-top: 40px;
        .problem-list {
          padding: 0 20px;
          margin-bottom: 40px;
          position: relative;
          .pro-title {
            font-size: 14px;
            color: #00101a;
          }
        }
      }
      .problemEdit {
        border: 1px solid #ebebeb;
        border-radius: 10px;
        padding: 20px;
        position: relative;
        margin-bottom: 40px;
        .type {
          white-space: nowrap;
          font-size: 12px;
          color: #00101a;
        }
        .optionDiv {
          margin-top: 10px;
          .el-radio-group.single {
            margin: 0;
            width: 100%;
            .el-radio {
              margin: 0 0 10px;
              .el-radio__input {
                margin-left: 12px;
              }
              .el-radio__label {
                display: flex;
                align-items: center;
              }
            }
          }
          .el-checkbox-group {
            width: 100%;
            .el-checkbox {
              margin: 0 0 10px;
              .el-checkbox__input {
                margin-left: 12px;
              }
              .el-checkbox__label {
                display: flex;
                align-items: center;
              }
            }
          }
          .el-radio-group.judge {
            .el-radio {
              margin: 0 15px;
            }
          }
          .el-input {
            width: 482px;
            height: 40px;
            border: 1px solid #e4e6e8;
            border-radius: 6px;
            .el-input__wrapper {
              width: 100%;
              box-shadow: none;
              border-radius: 6px;
            }
          }
          .el-icon {
            margin-left: 10px;
          }
        }
        .operateBtn {
          top: 26px;
          right: 20px;
        }
      }
    }
  }
}
</style>