<template>
  <div>
    <el-popover
      placement="bottom-start"
      width="400"
      trigger="click"
      v-model="show"
    >
      <div class="addBox">
        <div class="ab_base">
          <div class="ab_title">基础题型</div>
          <div class="ab_list">
            <div
              class="ab_l_item"
              v-for="(item, index) in options"
              :key="`base_${index}`"
            >
              <button
                class="pub_test_btn"
                @click="addCheckBase(item, index)"
                :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,
                  pub_test_btn_number:item.value == 13
                }"
              >
                {{ item.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="ab_module">
          <div class="ab_title">平台组件</div>
          <div class="ab_list">
            <div
              class="ab_l_item"
              v-for="(item, index) in optionsPin"
              :key="`module_${index}`"
            >
              <button
                class="pub_test_btn"
                @click="addCheckModule(item, index)"
                :class="{
                  pub_test_btn_course: item.value == 6 || item.value == 11
                }"
              >
                {{ item.label }}
              </button>
            </div>
          </div>
        </div>

        <div class="ab_addModule">
          <div class="ab_title">添加组件</div>
          <div class="ab_list">
            <div
              class="ab_l_item"
              v-for="(item, index) in buttonOptions"
              :key="`addModule_${index}`"
            >
              <button
                class="pub_test_btn"
                @click="addCheckAddModule(item, index)"
                :class="{
                  pub_test_btn_group: item.type == 1,
                  pub_test_btn_page: item.type == 2
                }"
              >
                {{ item.name }}
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="addBtn" slot="reference">
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.11133 2.66675H8.88911V13.3334H7.11133V2.66675Z"
            fill="black"
            fill-opacity="0.6"
          />
          <path
            d="M13.3332 7.11108V8.88886H2.6665V7.11108H13.3332Z"
            fill="black"
            fill-opacity="0.6"
          />
        </svg>
        插入题目
      </div>
      <!-- <el-button type="primary" size="small" slot="reference"
        >添加题目</el-button
      > -->
    </el-popover>
  </div>
</template>

<script>
import minxinVue from "../minxins/minxin";
export default {
  mixins: [minxinVue],
  data() {
    return {
      show: false
    };
  },
  methods: {
    addCheckBase(item, index) {
      this.$emit("addCheck", item.value);
      this.show = false;
    },
    addCheckModule(item, index) {
      this.$emit("addCheck", item.value);
      this.show = false;
    },
    addCheckAddModule(item, index) {
      this.$emit("addQtype", item.type);
      this.show = false;
    }
  }
};
</script>

<style scoped>
.addBox {
  width: 400px;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
}

.addBox > div {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.ab_title {
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  /* margin */
}

.ab_title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #3681fc;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}

.ab_list {
  display: flex;
  flex-wrap: wrap;
}

.ab_l_item {
  margin-bottom: 10px;
}

.addBtn{
	width: 95px;
	padding: 12px 0px;
	display: flex;
	align-items: center;
	background-color: #F0F2F5;
	border-radius: 5px;
	color: #00000099;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
	font-weight: bold;
	justify-content: center;
}

.addBtn:hover{
	background-color: #e0e0e0;
}

.addBtn>svg{
	margin-right: 5px;
}
</style>
