<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible="confVisible"
      custom-class="bbsl-location-dialog"
      title="配置出卷"
      top="5vh"
      append-to-body
      width="80%"
    >
      <div class="disposition">
        <div class="disposition-left">
          <div class="common-tree-title"><i class="el-icon-menu"></i> 课目</div>
          <div class="common-tree-content">
            <el-tree
              ref="tree"
              :current-node-key="currentKey"
              :data="subjectlist"
              :expand-on-click-node="false"
              :props="defaultProps"
              default-expand-all
              highlight-current
              node-key="id"
              style="border: none;"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
        <div class="disposition-right">
          <div
            class="bbsl-table-content"
            style="height:100%;padding:0;margin:0"
          >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-table
                  ref="multipleTable"
                  :data="EquipmentList"
                  :row-key="binRowKey"
                  border
                  height="90%"
                  @select="handleSelect"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    align="center"
                    reserve-selection
                    type="selection"
                    width="40"
                  >
                  </el-table-column>
                  <el-table-column label="类型" prop="typeName" width="55">
                    <template #default="scope">
                      <div class="rightBox-type">{{ scope.row.typeName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="待选择题目" prop="question">
                    <template #default="scope">
                      <span v-html="scope.row.question"></span>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column align="right">
                    <template slot="header" slot-scope="">
                      <el-input v-model="search" size="mini" clearable placeholder="输入关键字搜索" />
                    </template>
                  </el-table-column> -->
                </el-table>
                <el-pagination
                  :current-page="queryParam.pageBean.page"
                  :page-size="queryParam.pageBean.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </el-col>

              <el-col :span="12" class="right">
                <el-table
                  ref="multipleTable"
                  :data="reEquipmentList"
                  border
                  height="90%"
                >
                  <!-- 	<el-table-column type="selection" width="40">
                  </el-table-column> -->
                  <el-table-column label="序号" type="index" width="55">
                  </el-table-column>
                  <el-table-column label="类型" prop="typeName" width="60">
                    <template #default="scope">
                      <div class="rightBox-type">{{ scope.row.typeName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="已选择题目" prop="question">
                    <template #default="scope">
                      <span v-html="scope.row.question"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="分数" prop="score" width="80">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.score"
                        clearable
                        size="mini"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="handleClose" v-if="isActive==3">确认</el-button> -->
        <el-button type="primary" @click="confirmTopic">确 认</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dictUtils from '@/components/dict/DictSelectUtils.js'
import paperMenu from '@/api/examination/paperMenu.js'

export default {
  name: 'configurationDIalog',
  data() {
    return {
      search: '',
      EquipmentList: [],
      reEquipmentList: [],
      multipleSelection: [],
      multipleSelection1: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      queryParam: {
        pageBean: {
          page: 1,
          pageSize: 10
        }
      },
      querys: [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'q.sub_id_',
          relation: 'AND',
          value: ''
        }
      ],
      topicList: [],
      id: '',
      total: 0,
      currentKey: null,
      subjectlist: [],
      confVisible: false
    }
  },
  created() {
    // this.loadData(1)
    this.topicList = dictUtils.getDictItemsFromCache('sttx')
  },
  watch: {
    currentKey: {
      handler(value) {
        console.log(value)
        if (value) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentKey)
          })
        }
      },
      immediate: true,
      valType: false
    }
  },
  methods: {
    add(val, list) {
      console.log(val, list)
      this.confVisible = true
      this.subjectlist = val
      this.paperQuestionSettings = list
      this.reEquipmentList = list.map(i => ({
        ...i,
        typeName: i.questionTypeName,
        question: i.questionsInfo.question
      }))
      this.currentKey = this.subjectlist[0]?.id || ''
      this.subjectId = this.subjectlist[0]?.subjectId || ''
      this.querys[0].value = this.currentKey
      this.id = this.currentKey
      // this.$refs.tree.setCurrentKey(this.currentKey)
      this.getData()
      // console.log(this.currentKey)
    },
    //开始组卷
    handleNodeClick(val) {
      if (val) {
        this.id = val.id
        this.subjectId = val.subjectId
      }
      this.getData()
    },
    getData() {
      this.queryParam.querys = [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'q.sub_id_',
          relation: 'AND',
          value: this.subjectId
        }
      ]
      if (this.paperQuestionSettings.length > 0) {
        let ids = ''
        this.paperQuestionSettings.forEach((p, pi) => {
          if (pi == 0) {
            ids = p.questionId
          } else {
            ids += ',' + p.questionId
          }
        })
        this.queryParam.querys.push({
          group: 'main',
          operation: 'NOT_IN',
          parentGroup: '',
          property: 'q.id_',
          relation: 'AND',
          value: ids
        })
      }
      paperMenu.getTopic(this.queryParam, res => {
        if (res.rows) {
          this.EquipmentList = res.rows
          this.total = res.total
          this.EquipmentList.forEach(e => {
            this.topicList.forEach(t => {
              if (e.type == t.value) {
                e.typeName = t.name
              }
            })
          })
          console.log(this.EquipmentList, this.reEquipmentList)
          this.reEquipmentList.forEach(s => {
            this.EquipmentList.forEach(u => {
              if (s.id === u.id) {
                this.$refs.multipleTable.toggleRowSelection(u, true)
              }
            })
          })
        }
      })
    },
    binRowKey(row) {
      return row.id
    },

    // 选中改变
    handleSelectionChange(val) {
      this.reEquipmentList = Array.from(
        new Map(
          [...this.reEquipmentList, ...val].map(item => {
            const questionId = item.questionId || item.id
            return [questionId, item]
          })
        ).values()
      )
      console.log(this.reEquipmentList)
    },

    // 选中或取消
    handleSelect(selection, row) {
      const isSelected = selection.some(i => i.id === row.id)
      console.log(selection, isSelected)

      if (isSelected) {
      } else {
        this.reEquipmentList = this.reEquipmentList.filter(item => {
          const questionId = item.questionId || item.id
          return row.id !== questionId
        })
      }
    },

    // 已
    handleSelectionChange1(val) {
      this.multipleSelection1 = val
    },
    // 赋值
    // rightChang() {
    // 	this.reEquipmentList = this.reEquipmentList.concat(this.multipleSelection)
    // 	this.EquipmentList = this.EquipmentList.filter(
    // 		item => !this.reEquipmentList.some(citem => citem.question == item.question)
    // 	)
    // 	console.log(this.reEquipmentList);
    // },
    // leftChang() {
    // 	this.EquipmentList = this.EquipmentList.concat(this.multipleSelection1)
    // 	this.reEquipmentList = this.reEquipmentList.filter(
    // 		item2 => !this.EquipmentList.some(citem2 => citem2.question == item2.question)
    // 	)
    // },
    handleClose() {
      this.confVisible = false
      this.id = ''
      this.currentKey = ''
      this.$emit('closeFormDiao')
    },
    //确认题目
    confirmTopic() {
      if (this.reEquipmentList.length > 0) {
        let scoreType = this.reEquipmentList.every(item => !!item.score)
        if (!scoreType) {
          this.$message({
            message: '请输入题目分数',
            type: 'warning'
          })
          return
        } else {
          this.$emit('questions', this.reEquipmentList)
        }
        this.handleClose()

        // 向父组件传递
      } else {
        this.$message({
          message: '请选择题目',
          type: 'warning'
        })
      }
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.handleNodeClick()
      console.log(`当前条: ${val}`)
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.handleNodeClick()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style>
.disposition span p {
  margin: 0;
}
</style>

<style lang="scss" scoped>
.disposition {
  width: 100%;
  min-height: 73vh;
  display: flex;

  .disposition-left {
    width: 15%;
  }

  .disposition-right {
    width: 85%;
  }
}

.rightBox-type {
  text-align: center;
  padding: 0 3px;
  color: #36aafd;
  border: 1px solid #36aafd;
}

.el-row {
  height: 100%;
}

.el-col {
  height: 100%;
}

.el-table {
  height: calc(100% - 50px);
  margin-bottom: 10px;
}

.buttons {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
