<template>
  <div class="edit_box">
    <div class="e_add" v-show="showLeftMenu" v-if="false">
      <div class="title" style="margin-bottom: 20px">题目添加</div>
      <span
        class="e_a_foldIcon"
        style="right: 0;"
        @click="showLeftMenu = false"
      >
        <svg
          t="1728443188732"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5721"
          width="200"
          height="200"
        >
          <path
            d="M110.9 128.34a32 32 0 0 1 32-32h773a32 32 0 0 1 0 64h-773a32 32 0 0 1-32-32z m4.58 402.15L260 651.38c15.62 13.07 39.4 2 39.4-18.41V391.19c0-20.37-23.78-31.48-39.4-18.41L115.48 493.67a24 24 0 0 0 0 36.82z m800.41-50.41H405.54a32 32 0 1 0 0 64h510.35a32 32 0 0 0 0-64z m0 383.58h-773a32 32 0 1 0 0 64h773a32 32 0 0 0 0-64z"
            p-id="5722"
          ></path>
        </svg>
      </span>
      <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_viewFile"
      v-show="viewFile"
      :style="
        `margin-right:${!showLeftMenu ? '20px' : 0};margin-left:${
          showLeftMenu ? '20px' : '0'
        }`
      "
    >
      <iframe
        ref="viframe"
        v-if="fileData && fileData.url"
        style="width: 100%; height: 100%; border: none"
        :src="
          'https://view.officeapps.live.com/op/view.aspx?src=' +
            encodeURIComponent(fileData.url)
        "
      ></iframe>
    </div>

    <div
      class="e_content"
      :style="
        `margin-right:${showRightMenu ? '20px' : '0'};margin-left:${
          showLeftMenu ? '20px' : '0'
        };`
      "
			ref="eContentRef"
    >
      <div v-if="!isEditing" class="title" @click="editTitle">
        {{ title ? title : "请填写表单标题" }}
      </div>
      <input
        v-if="isEditing"
        class="titleInput"
        ref="title"
        v-model="titleValue"
        @blur="save"
        @keyup.enter="save"
        placeholder="请填写表单标题"
      />
      <div v-if="!isEditing2" class="detail" @click="editBref">
        {{ brief ? brief : "请填写表单说明" }}
      </div>
      <input
        v-if="isEditing2"
        class="briefInput"
        ref="detail"
        v-model="briefValue"
        @blur="save2"
        @keyup.enter="save2"
        placeholder="请填写表单说明"
      />
      <div class="e_order_box">
        <checkOrder
					ref="checkOrderEditRef"
          :checkC.sync="checkC"
          :checkJson="manualJson"
          @changeJson="changeJson"
          etype="edit"
          :cJson.sync="cJson"
          @addCheck="addCheck"
          @addQtype="addQtype"
        >
        </checkOrder>
        <addCheckPopover
          v-if="manualJson.length == 0 || checkC == ''"
          @addCheck="addCheck"
          @addQtype="addQtype"
        />
      </div>
    </div>
    <div class="e_order" v-show="showRightMenu">
      <div class="title">
        大纲
        <span style="font-size: 14px; color: #373737">总分：{{ score }}分</span>
      </div>
      <span
        class="e_a_foldIcon"
        style="left: 0;transform: rotate(180deg);"
        @click="showRightMenu = false"
      >
        <svg
          t="1728443188732"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5721"
          width="200"
          height="200"
        >
          <path
            d="M110.9 128.34a32 32 0 0 1 32-32h773a32 32 0 0 1 0 64h-773a32 32 0 0 1-32-32z m4.58 402.15L260 651.38c15.62 13.07 39.4 2 39.4-18.41V391.19c0-20.37-23.78-31.48-39.4-18.41L115.48 493.67a24 24 0 0 0 0 36.82z m800.41-50.41H405.54a32 32 0 1 0 0 64h510.35a32 32 0 0 0 0-64z m0 383.58h-773a32 32 0 1 0 0 64h773a32 32 0 0 0 0-64z"
            p-id="5722"
          ></path>
        </svg>
      </span>
      <div class="e_order_box" style="margin-top: 20px">
        <checkOrder
          :checkC.sync="checkC"
          :checkJson="manualJson"
          @changeJson="changeJson"
          etype="order"
					@scrollPage="scrollPage"
          :cJson.sync="cJson"
        >
        </checkOrder>
      </div>
    </div>

    <span
      class="e_outside_foldIcon"
      v-if="!showLeftMenu && false"
      style="left: 0;transform: rotate(180deg);"
      @click="showLeftMenu = true"
    >
      <svg
        t="1728443188732"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5721"
        width="200"
        height="200"
      >
        <path
          d="M110.9 128.34a32 32 0 0 1 32-32h773a32 32 0 0 1 0 64h-773a32 32 0 0 1-32-32z m4.58 402.15L260 651.38c15.62 13.07 39.4 2 39.4-18.41V391.19c0-20.37-23.78-31.48-39.4-18.41L115.48 493.67a24 24 0 0 0 0 36.82z m800.41-50.41H405.54a32 32 0 1 0 0 64h510.35a32 32 0 0 0 0-64z m0 383.58h-773a32 32 0 1 0 0 64h773a32 32 0 0 0 0-64z"
          p-id="5722"
        ></path>
      </svg>
    </span>

    <span
      class="e_outside_foldIcon"
      v-if="!showRightMenu"
      style="right: 0;"
      @click="showRightMenu = true"
    >
      <svg
        t="1728443188732"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5721"
        width="200"
        height="200"
      >
        <path
          d="M110.9 128.34a32 32 0 0 1 32-32h773a32 32 0 0 1 0 64h-773a32 32 0 0 1-32-32z m4.58 402.15L260 651.38c15.62 13.07 39.4 2 39.4-18.41V391.19c0-20.37-23.78-31.48-39.4-18.41L115.48 493.67a24 24 0 0 0 0 36.82z m800.41-50.41H405.54a32 32 0 1 0 0 64h510.35a32 32 0 0 0 0-64z m0 383.58h-773a32 32 0 1 0 0 64h773a32 32 0 0 0 0-64z"
          p-id="5722"
        ></path>
      </svg>
    </span>
  </div>
</template>

<script>
import checkOrder from "../../components/checkOrder.vue";
import minxinVue from "../../minxins/minxin";
import addCheckPopover from "../../../add/components/addCheckPopover.vue";
export default {
  components: {
    checkOrder,
    addCheckPopover
  },
  mixins: [minxinVue],
  props: {
    checkJson: {
      type: Array
    },
    title: {
      type: String
    },
    brief: {
      type: String
    },
    viewFile: {
      type: Boolean,
      default: false
    },
    fileData: {
      type: Object,
      default: () => ({ fileName: "", url: "" })
    }
  },
  data() {
    return {
      manualJson: [],
      checkC: "",
      cJson: {},
      isEditing: false,
      titleValue: "",
      isEditing2: false,
      briefValue: "",
      showLeftMenu: false,
      showRightMenu: true
    };
  },
  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: {
    editTitle() {
      this.isEditing = true;
      this.titleValue = this.title
        ? JSON.parse(JSON.stringify(this.title))
        : "";
      this.$nextTick(() => {
        // 聚焦到输入框
        this.$refs["title"].focus();
      });
    },
    save() {
      this.isEditing = false;
      this.$emit("updateTitle", this.titleValue);
    },
    editBref() {
      this.isEditing2 = true;
      this.briefValue = this.brief
        ? JSON.parse(JSON.stringify(this.brief))
        : "";
      this.$nextTick(() => {
        // 聚焦到输入框
        this.$refs["brief"].focus();
      });
    },
    save2() {
      this.isEditing2 = false;
      this.$emit("updateBrief", this.briefValue);
    },
    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: ""
          };
        } else if (topicType == 12) {
          json.json = {
            title: "",
            detail: ""
          };
        }else if (topicType == 13) {
          json.json = {
            title: "",
            detail: "",
            type:'1'
          };
        }
        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
          };
					console.log("👉",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: ""
            };
          } else if (topicType == 12) {
            json1.json = {
              title: "",
              detail: ""
            };
          } else if (topicType == 13) {
            json1.json = {
              title: "",
              detail: "",
              answer:'',
              type:"1",//1：整数、2：保留一位小数、3：保留两位小数 4：百分数
            };
          }
          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);
    },
		scrollPage(index){
			this.$refs.checkOrderEditRef.scrollPage(index)
		}
  },
  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;
  position: relative;
}

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

.e_content {
  height: 100%;
  flex: 1;
  /* margin: 0 20px; */
  /* width: calc(100% - 640px); */
  background: #fff;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
}

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

.titleInput {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  border: none;
  outline: none;
}

.briefInput {
  font-size: 14px;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  border: none;
  outline: none;
  width: 100%;
}

.e_content > .detail {
  font-size: 14px;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
  color: #00000066;
}

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

.e_add > .title,
.e_order > .title {
  /* text-align: center; */
	text-indent: 1.1em;
  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%;
}

.e_a_foldIcon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 15px;
  border-radius: 5px 0 0 5px;
  background-color: #409eff;
  cursor: pointer;
}

.e_a_foldIcon > svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.e_outside_foldIcon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 15px;
  border-radius: 5px 0 0 5px;
  background-color: #409eff;
  cursor: pointer;
}

.e_outside_foldIcon > svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.e_viewFile {
  height: 100%;
  flex: 1;
  margin-left: 0px;
  background-color: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  overflow-y: hidden;
}

.e_addBox {
  width: 400px;
  height: 300px;
  background-color: red;
}
</style>
