<template>
  <div class="menuTrainListOut" :style="{top: offset-5 +'px'}">
    <div v-if="drawer" class="menuTrainListContent">
      <div>
        <div v-for="(item, index) in questionList" :key="index">
          <div style="text-align: center;font-size: 16px;">{{ item.name }}</div>
          <div style="text-align: left;font-size: 14px;margin-top: 5px;">{{ '描述:'+item.description }}</div>
        </div>
      </div>
      <div class="menuTrainListBtn1In" style=";position: absolute; top: 98%;left:150px;z-index: 2;" @click="clickBtn">
        <i class="el-icon-more" style="font-size: 20px;transform-origin: 50% 50%;" />
      </div>
    </div>
    <div v-else class="menuTrainListBtn1" @click="clickBtn">
      <div class="menuTrainListBtn1In">
        <i class="el-icon-more" style="font-size: 20px;transform-origin: 50% 50%;" />
      </div>
    </div>

  </div>
</template>

<script>
export default {
    name: 'JsQuestion',
    props: {
        offset: {
            type: Number,
            required: true
        },
        questionList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            drawer: true
        };
    },
    methods: {
        clickBtn() {
            this.drawer = !this.drawer;
        }
    }
};
</script>

<style lang="scss" scoped>
	.menuTrainListBtn1In{
		width: 40px;
		height: 20px;
		background: #fff;
		text-align: center;
		border-radius: 0 0 6px 6px;
		cursor:pointer;
		/*border: 1px #adadad solid;*/
	}
	.menuTrainListBtn1{
		position: absolute;
	}
	.menuTrainListContent{
		background: #fff;
		text-align: center;
		border-radius:0 0 6px 6px;
		padding: 10px;
		position: absolute;
		width: 350px;
		left: -150px;
		z-index: 3;
		cursor:pointer;
	}
	.menuTrainListOut{
		position: absolute;
		right: 30%;
		height: 70%;
	}
	.menuTrainList{
		width: 400px;
		height:100%;
		border-radius: 10px 0px 0px 10px;
		// padding: 5px;
		background: #fff;
	}
	.topTrainListInfo,.bottomTrainListInfo{
		padding: 10px 10px;
		background: #cde2ef;
		font-size: 13px;
		border-radius: 5px 0px 0px 0px;
	}
</style>

