<template>
  <div class="edit_box">
    <div class="e_add">
      <div class="title" style="margin-bottom: 20px">题目添加</div>
      <div class="e_add_box">
        <div class="title">基础题型</div>
        <div class="e_add_ci">
          <!-- <div class="title">基础题型</div> -->
          <div class="box">
            <div
              class="btn"
              v-for="item in options"
              :key="item.label"
              @click="addCheck(item.value)"
            >
              <!-- <el-button type="primary"
                                size="mini">{{ item.label }}</el-button> -->
              <button
                class="pub_test_btn"
                :class="{
                  pub_test_btn_text: item.value == 3,
                  pub_test_btn_choose: item.value == 1 || item.value == 10,
                  pub_test_btn_file: item.value == 5,
                  pub_test_btn_course: item.value == 6,
                  pub_test_btn_eva: item.value == 7,
                  pub_test_btn_time: item.value == 8,
                  pub_test_btn_choose2: item.value == 9,
									pub_test_btn_sweep:item.value==12
                }"
              >
                {{ item.label }} 
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="e_add_box">
        <div class="title">平台组件</div>
        <div class="e_add_ci">
          <div class="box">
            <div
              class="btn"
              v-for="item in optionsPin"
              :key="item.label"
              @click="addCheck(item.value)"
            >
              <button
                class="pub_test_btn"
                :class="{
                  pub_test_btn_course: item.value == 6 || item.value == 11,
                }"
              >
                {{ item.label }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="e_add_box">
        <div class="title">添加组件</div>
        <div class="e_add_ci">
          <div class="box">
            <div
              class="btn"
              v-for="item in buttonOptions"
              :key="item.name"
              @click="addQtype(item.type)"
            >
              <!-- <el-button type="primary"
                                size="mini">{{ item.name }}</el-button> -->
              <button
                class="pub_test_btn"
                :class="{
                  pub_test_btn_group: item.type == 1,
                  pub_test_btn_page: item.type == 2,
                }"
              >
                {{ item.name }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="e_content">
      <div class="title">{{ title }}</div>
      <div class="e_order_box">
        <checkOrder
          :checkC.sync="checkC"
          :checkJson="manualJson"
          @changeJson="changeJson"
          etype="edit"
          :cJson.sync="cJson"
        >
        </checkOrder>
      </div>
    </div>
    <div class="e_order">
      <div class="title">
        题目排序
        <span style="font-size: 14px; color: #373737">总分：{{ score }}分</span>
      </div>
      <div class="e_order_box" style="margin-top: 20px">
        <checkOrder
          :checkC.sync="checkC"
          :checkJson="manualJson"
          @changeJson="changeJson"
          etype="order"
          :cJson.sync="cJson"
        >
        </checkOrder>
      </div>
    </div>
  </div>
</template>

<script>
import checkOrder from "../../components/checkOrder.vue";
import minxinVue from "../../minxins/minxin";
export default {
  components: {
    checkOrder,
  },
  mixins: [minxinVue],
  props: {
    checkJson: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      manualJson: [],
      checkC: "",
      cJson: {},
    };
  },
  watch: {
    checkJson: {
      handler(newVal) {
        this.manualJson = this.depthCopy(newVal);
      },
      deep: true,
    },
  },
  computed: {
    score() {
      let score = 0;
      this.manualJson.forEach((el) => {
        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
          el.array.forEach((item) => {
            if (item.ttype == 2 && item.array.length > 0) {
              item.array.forEach((item2) => {
                if (item2.ttype == 1 && item2.json) {
                  score += item2.json.score ? parseFloat(item2.json.score) : 0;
                }
              });
            } else if (item.ttype == 1 && item.json) {
              score += item.json.score ? parseFloat(item.json.score) : 0;
            }
          });
        } else if (el.ttype == 1 && el.json) {
          score += el.json.score ? parseFloat(el.json.score) : 0;
        }
      });
      return score > 0 ? score : "未设置分数";
    },
  },
  methods: {
    changeJson(json) {
      this.manualJson = json;
      this.$emit("changeJson", json);
    },
    addCheck(topicType) {
      let type = 1;
			// if(this.manualJson.filter(i=>i.type==6).length>=1){
			// 	return this.$message.error("一个表单只能添加一个课程组件");
			// }
			function checkType(obj){
				if(obj.filter(i=>i.array).length>0){
					let bol = false;
					obj.forEach(i=>{
						console.log(i.array)
						if(bol)return;
						bol = checkType(i.array);
					})
					return bol;
				}else if(obj.filter(i=>i.type==6).length>=1){
					return true;
				}else{
					return false;
				}
			}
			if(topicType == 6 && checkType(this.manualJson)){
				return this.$message.error("一个表单只能添加一个课程组件");
			}
      if (this.manualJson.length > 0) {
        for (var i = 0; i < this.manualJson.length; i++) {
          if (this.manualJson[i].ttype == 2) {
            type = 2;
          } else if (this.manualJson[i].ttype == 3) {
            type = 3;
          }
        }
      }

      if (this.checkC) {
        let _check = this.checkC.replace("x", "").split("-");
        let _json = this.manualJson[_check[0]];
        let _topicType = ''
        if(topicType == 9 || topicType == 10){
          _topicType = 1 
        }else {
          _topicType = topicType
        }
        let json = {
          ttype: 1,
          type: _topicType,
        };
        if (topicType == 1) {
          json.json = {
            title: "标题",
            type: 1,
            array: [
              { option: "选项1", img: "" },
              { option: "选项2", img: "" },
            ],
            answer: "",
          };
        } else if (topicType == 3) {
          json.json = {
            title: "标题",
            type: 1,
            answer: "",
          };
        } else if (topicType == 5) {
          json.json = {
            title: "标题",
            type: 1,
            detail: "",
          };
        } else if (topicType == 6) {
          json.json = {
            title: "标题",
            detail: "",
            courses:[]
          };
        } else if (topicType == 7) {
          json.json = {
            title: "标题",
            detail: "",
            small: 0,
            big: 10,
          };
        } else if (topicType == 8) {
          json.json = {
            title: "标题",
            detail: "",
          };
        }else if (topicType == 9) {
          json.json = {
            title: "标题",
            type: 1,
            array: [
              { option: "选项1", img: "" },
              { option: "选项2", img: "" },
            ],
            answer: "",
          };
        }else if (topicType == 10) {
          json.json = {
            title: "标题",
            type: 2,
            array: [
              { option: "选项1", img: "" },
              { option: "选项2", img: "" },
            ],
            answer: "",
          };
        } else if (topicType == 11) {
          json.json = {
            title: "标题",
            detail: ""
          };
        }
        if (_json.array) {
          if (type == 3 && _check.length == 2) {
            if (this.manualJson[_check[0]].array[_check[1]].array) {
              this.manualJson[_check[0]].array[_check[1]].array.push(json);
            } else {
              this.manualJson[_check[0]].array.splice(
                parseInt(_check[1]) + 1,
                0,
                json
              );
            }
          } else if (type == 3 && _check.length == 3) {
            this.manualJson[_check[0]].array[_check[1]].array.splice(
              parseInt(_check[2]) + 1,
              0,
              json
            );
          } else if (type == 2 && _check.length == 2) {
            this.manualJson[_check[0]].array.splice(
              parseInt(_check[1]) + 1,
              0,
              json
            );
          } else if (type == 2 && _check.length == 1) {
            this.manualJson[_check[0]].array.push(json);
          } else if (type == 3 && _check.length == 1) {
            if (
              this.manualJson[_check[0]].array[0] &&
              this.manualJson[_check[0]].array[0].array
            ) {
              this.manualJson[_check[0]].array[0].array.push(json);
            } else {
              this.manualJson[_check[0]].array.push(json);
            }
          }
        } else {
          this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
        }
      } else {
        if (type == 1) {
          let _topicType = ''
          if(topicType == 9 || topicType == 10){
            _topicType = 1 
          }else {
            _topicType = topicType
          }
          let json1 = {
            ttype: 1,
            type: _topicType,
          };

          if (topicType == 1) {
            json1.json = {
              title: "标题",
              type: 1,
              array: [
                { option: "选项1", img: "" },
                { option: "选项2", img: "" },
              ],
              answer: "",
            };
          } else if (topicType == 3) {
            json1.json = {
              title: "标题",
              type: 1,
              answer: "",
            };
          } else if (topicType == 5) {
            json1.json = {
              title: "标题",
              type: 1,
              detail: "",
            };
          } else if (topicType == 6) {
            json1.json = {
              title: "标题",
              detail: "",
              courses:[]
            };
          } else if (topicType == 7) {
            json1.json = {
              title: "标题",
              detail: "",
              small: 0,
              big: 10,
            };
          } else if (topicType == 8) {
            json1.json = {
              title: "标题",
              detail: "",
            };
          } else if (topicType == 9) {
            json1.json = {
              title: "标题",
              type: 1,
              array: [
                { option: "选项1", img: "" },
                { option: "选项2", img: "" },
              ],
              answer: "",
            };
          } else if (topicType == 10) {
            json1.json = {
              title: "标题",
              type: 2,
              array: [
                { option: "选项1", img: "" },
                { option: "选项2", img: "" },
              ],
              answer: "",
            };
          } else if (topicType == 11) {
            json1.json = {
              title: "标题",
              detail: ""
            };
          }
          this.manualJson.push(json1);
          this.$forceUpdate()
        } else if (type == 3 || type == 2) {
          this.$message.error("请选中分页或者分组添加题目");
          return;
        }
      }
      topicType = "";
      this.$forceUpdate()
      this.$emit("changeJson", this.manualJson);
    },
    addQtype(type) {
      if (type == 1) {
        let type = 1;
        if (this.manualJson.length > 0) {
          for (var i = 0; i < this.manualJson.length; i++) {
            if (this.manualJson[i].ttype == 1) {
              type = 2;
            } else if (this.manualJson[i].ttype == 3) {
              type = 3;
            }
          }
        }
        let json = {
          ttype: 2,
          array: [],
          isopen: true,
        };
        if (type == 1) {
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");
            this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
          } else {
            this.manualJson.push(json);
          }
        } else if (type == 2) {
          this.manualJson = [
            {
              ttype: 2,
              array: this.depthCopy(this.manualJson),
              isopen: true,
            },
          ];
        } else if (type == 3) {
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");

            if (
              _check.length > 1 &&
              this.manualJson[_check[0]].array[0] &&
              this.manualJson[_check[0]].array[0].array
            ) {
              this.manualJson[_check[0]].array.splice(
                parseInt(_check[1]) + 1,
                0,
                json
              );
            } else if (
              this.manualJson[_check[0]].array[0] &&
              !this.manualJson[_check[0]].array[0].array
            ) {
              this.manualJson[_check[0]].array = [
                {
                  ttype: 2,
                  array: this.depthCopy(this.manualJson[_check[0]].array),
                  isopen: true,
                },
              ];
            } else {
              this.manualJson[_check[0]].array.push(json);
            }
          } else {
            this.$message.error("请选中分页添加分组");
            return;
          }
        }
      } else if (type == 2) {
        let type = 1;
        if (this.manualJson.length > 0) {
          for (var i = 0; i < this.manualJson.length; i++) {
            if (
              this.manualJson[i].ttype == 1 ||
              this.manualJson[i].ttype == 2
            ) {
              type = 2;
            }
          }
        }
        if (type == 1) {
          let json = {
            ttype: 3,
            array: [],
            isopen: true,
          };
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");

            this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
          } else {
            this.manualJson.push(json);
          }
        } else {
          this.manualJson = [
            {
              ttype: 3,
              array: this.depthCopy(this.manualJson),
              isopen: true,
            },
          ];
        }
      }
      this.$emit("changeJson", this.manualJson);
    },
  },
  mounted() {
    this.manualJson = this.depthCopy(this.checkJson);
  },
};
</script>

<style scoped>
.edit_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 0 0 0;
  box-sizing: border-box;
}

.e_add {
  height: 100%;
  width: 300px;
  background: #fff;
  overflow: auto;
  padding: 20px 10px;
  box-sizing: border-box;
  border-right: 1px solid #e5e5e5;
}

.e_content {
  height: 100%;
  width: calc(100% - 600px);
  background: #fff;
  overflow: auto;
  padding: 20px 0;
  box-sizing: border-box;
}

.e_content > .title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}

.e_order {
  height: 100%;
  width: 300px;
  background: #fff;
  overflow: auto;
  padding: 20px 10px;
  box-sizing: border-box;
}

.e_add > .title,
.e_order > .title {
  text-align: center;
  font-size: 20px;
}

.e_add_box {
  width: 100%;
  /* border: 1px solid #dcdcdc; */
  margin-top: 10px;
  border-radius: 3px;
  /* background: #f4f4f4; */
  box-sizing: border-box;
  padding: 0 20px 0;
}

.e_add_box > .title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.e_add_box > .title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(54, 129, 252);
  margin-right: 10px;
  display: block;
}

.e_add_box > .e_add_ci {
  margin-top: 10px;
}

.e_add_box > .e_add_ci > .title {
  font-size: 14px;
  margin-bottom: 10px;
}

.e_add_box > .e_add_ci > .box {
  display: flex;
  flex-wrap: wrap;
}

.e_add_box > .e_add_ci > .box > .btn {
  margin-bottom: 10px;
  width: 50%;
}
</style>