<template>
    <div>
        <a-modal :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle" :centered="true" :bodyStyle="{'padding':'0','background-color':'#f2f2f2'}"
            width="1200px" :maskClosable="false" :destroyOnClose="true">
            <div slot="title">[{{testingEntity.name}}]选择试题</div>
            
            <div class="modal-box flex flex-align">
              <div :style="{height:divHeight,'overflow-y':'auto','padding':'8px','flex':'1'}">
                <a-spin :spinning="spinning">
                  <template v-if="questionData.length > 0">
                    <div v-for="item in questionData" :key="item.id" class="question-item">
                      <div class="flex flex-align question-item-tool">
                        <div class="flex">
                          <div class="m-r36">题型：{{item.disciplineQuestionType}}</div>
                          <div>难度：{{item.difficulty}}</div>
                        </div>
                        <div class="flex">
                          <a class="m-r16" @click="addItem(item)" v-show="!item.inbox">加入测验</a>
                          <a class="m-r16" @click="delItem(item)" v-show="item.inbox">移出测验</a>
                        </div>
                      </div>
                      <div class="question-item-info">
                        <div v-html="$options.filters.concatTIP(item.html?item.html:'')" />
                      </div>
                    </div>
                  </template>
                  <a-empty v-else description="暂无试题数据" />
                </a-spin>
                <!-- 底部分页 -->
                <div class="paging-box" v-if="pagination.total>1">
                    <oPagination :pagination="pagination" @change="handleChange" />
                </div>
              </div>
              <div :style="{height:divHeight}" class="testing-box">
                <a-spin :spinning="testingQuestionSpinning">
                  <template v-if="testingQuestionData.length > 0">
                    <div style="line-height:25px;">已选试题</div>
                    <div v-for="(item,index) in testingQuestionData" :key="index" class="testing-item">
                      <div class="flex flex-align">
                        <div style="font-size:16px; font-weight:bold">
                          {{item.disciplineQuestionType}}({{item.data.length}})
                        </div>
                        <div>
                          <a @click="delTestingItem(item)">移出</a>
                        </div>
                      </div>
                    </div>
                  </template>
                  <a-empty v-else description="没有选择试题" />
                </a-spin>
              </div>
            </div>
        </a-modal>
    </div>
</template>
<script>

    import { myPagination } from '@/mixins/myPagination.js'
    import oPagination from '@/components/myPagination'

    import { QuestionGetList, TestingQuestionGetList, TestingQuestionUpdate } from '@/api/api'
    export default {
        mixins: [myPagination],
        components: {
            oPagination
        },
        data() {
            return {
                confirmLoading: false,
                testingEntity:{},
                questionData: [],//试题列表
                visible: false,
                spinning:false,
                testingQuestionSpinning:false,
                KeyWord:'',
                testingQuestionData:[],
                divHeight: '300px'
            };
        },
        computed: {
        },
        mounted() {
          const height = window.innerHeight -55-53-24-24-2-80;
          this.divHeight = `${height}px`
        },
        methods: {
            showModal(data) {
              this.testingEntity = data;
              this.visible = true;
              this.getTestingQuestionList()
            },
            handCancle() {
              this.questionData = []
              this.pagination.current = 1
              this.pagination.total = 0
              this.visible = false;
              this.questionData = []
              this.testingQuestionData = []
            },
            handOK(e){
              const self = this;
              e.preventDefault();
              if(self.testingQuestionData.length === 0) {
                self.$message.warning('没有要保存的数据,请先选择试题')
                return;
              }
              const postData = {
                testingId: self.testingEntity.id,
                questionIds: []
              };
              self.testingQuestionData.forEach(item => {
                item.data.forEach(itemC => {
                  postData.questionIds.push(itemC.questionId)
                })
              })
              
              self.confirmLoading = true;

              TestingQuestionUpdate(postData)
              .then(res => {
                self.confirmLoading = false;
                self.$message.success('更新成功')
                self.$parent._TestingGetList();
                self.handCancle()
              })
              .catch(err=>{
                self.confirmLoading = false;
              })

            },
            getTestingQuestionList(){
              const self = this;
              self.spinning = true;
              self.testingQuestionSpinning = true;
              const data = {
                testingId: self.testingEntity.id
              }
              TestingQuestionGetList(data)
              .then(res=>{
                self.testingQuestionSpinning = false;
                const data = []
                res.forEach(item=>{
                  const filterItem = data.filter(f => f.disciplineQuestionType === item.disciplineQuestionTypeName)
                  if (filterItem.length > 0) {
                    filterItem[0].data.push({ questionId: item.questionId })
                  } else {
                    data.push({ disciplineQuestionType: item.disciplineQuestionTypeName, data:[ {questionId: item.questionId} ] })
                  }
                })
                self.testingQuestionData =  data
                self.getQuestionList()
              })
              .catch(err => {
                self.testingQuestionSpinning = false;
                self.testingQuestionData = []
              })
            },
            //试题列表
            getQuestionList(params = {}) {
              const self = this;
              self.spinning = true;
              const data = {
                    DisciplineId: self.testingEntity.disciplineId,
                    DisciplineQuestionTypeId: null,//this.activeQuestionType[0],//学科细分题型Id 666
                    Difficulty: null,//this.activeDifficulty[0], //666
                    IsActive: null,
                    ChapterId: self.testingEntity.chapterId,//章节id
                    IncludeChildChapter: true,//是否包括子章节(默认包括)
                    IncludeAncestor: false,//是否包括父级知识点(默认不包括)
                    KeyWord: self.KeyWord,//关键字
                    SkipCount: (self.pagination.current - 1) * self.pagination.pageSize,
                    MaxResultCount: self.pagination.pageSize,
                    ...params
                }
                QuestionGetList(data).then(res => {
                    self.questionData = res.items.map(item => {
                      const filterItem = self.testingQuestionData.filter(f => f.disciplineQuestionType === item.disciplineQuestionType)
                      if (filterItem.length > 0) {
                        let arr = filterItem[0].data.filter(v => v.questionId == item.id);
                        if (arr.length > 0) {
                            item.inbox = true;
                        } else {
                            item.inbox = false;
                        }
                      }
                      return item;
                    })
                    self.pagination.total = res.totalCount;
                    self.spinning = false;
                }).catch(err => {
                    self.spinning = false;
                })
            },
            handleChange(pagination) {
                this.getQuestionList();
            },
            addItem(item) {
              const self = this;
              item.inbox = true;
              const filterItem = self.testingQuestionData.filter(f => f.disciplineQuestionType === item.disciplineQuestionType)
              if (filterItem.length > 0) {
                filterItem[0].data.push({ questionId: item.id })
              } else {
                self.testingQuestionData.push({ disciplineQuestionType: item.disciplineQuestionType, data:[ {questionId: item.id} ] })
              }
            },
            delItem(item) {
              const self = this;
              item.inbox = false;
              const filterItem = self.testingQuestionData.filter(f => f.disciplineQuestionType === item.disciplineQuestionType)
              if (filterItem.length > 0) {
                const index = filterItem[0].data.findIndex(v => v.questionId == item.id)
                filterItem[0].data.splice(index, 1);
                if (filterItem[0].data.length === 0) {
                  const pIndex = self.testingQuestionData.findIndex(v => v.disciplineQuestionType == item.disciplineQuestionType)
                  self.testingQuestionData.splice(pIndex, 1);
                }
              }
            },
            delTestingItem(item) {
              const self = this;
              const filterItem = self.testingQuestionData.filter(f => f.disciplineQuestionType === item.disciplineQuestionType)
              self.questionData.forEach(fitem => {
                 const arr = filterItem[0].data.filter(v => v.questionId == fitem.id);
                 if (arr.length > 0) {
                   fitem.inbox = false;
                 }
              })
              const pIndex = self.testingQuestionData.findIndex(v => v.disciplineQuestionType == item.disciplineQuestionType)
              self.testingQuestionData.splice(pIndex, 1);
            }
        },
    };
</script>
<style scoped>

.modal-box{
  padding: 0;
}

.question-item {
  background-color:#fff;
  padding: 8px;
  margin-bottom: 8px;
}
.question-item-tool{
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 8px;
}
.question-item-info{
  padding-top: 8px;
}
.paging-box {
        width: 100%;
        height: 50px;
        background-color: #fff;
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

.testing-box{
  width:200px;
  padding:8px;
  background-color:#fff;
}
.testing-item{
  padding-bottom:8px;
}
</style>