<template>
  <div :style="{width}">
    <div>
      <el-input v-model="search" clearable placeholder="题号、题目模糊搜索" size="mini" suffix-icon="el-icon-search">
        <!--        <el-button slot="append" icon="el-icon-delet"></el-button>-->
        <span slot="prepend">
          已选择 {{ checkedList.length }} 题
        </span>
      </el-input>

    </div>
    <el-table
        ref="table"
        v-loading="loading"
        :data=" questionList.filter(it => it.title.indexOf(search) != -1 || it.code.indexOf(search) != -1)"
        :default-sort="{prop: 'sort', order: 'ascending'}"
        :height="height"
        :row-key="(row)=>row.sort"
        class="question-table"
        @cell-mouse-enter="hoverCall"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          :reserve-selection="true"
          align="center"
          type="selection"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          label="序号"
          prop="sort"
          sortable
          width="80">
      </el-table-column>
      <el-table-column
          :sort-method="sortPinyin"
          align="center"
          label="题号"
          prop="code"
          sortable
          width="120">
        <template slot="header">
          题号
          <el-tooltip class="item" content="自动提取当前题目[、.]前的数字作为题号" effect="dark" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          align="left"
          header-align="center"
          label="题目"
          prop="title"
          sortable>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>


export default {
  name: 'question',
  inject: ['getToken', 'getSetting'],
  data () {
    return {
      loading: false,
      search: '',
      checkedList: [],
      number: 0,
    }
  },
  props: {
    questionList: [Array, Object],
    width: {
      type: String,
      default () {
        return '430px'
      }
    },
    height: {
      type: String,
      default () {
        return '300px'
      }
    },
    // 选中数据
    data: {
      type: [Array, Object]
    },
    show: [Boolean]
  },
  watch: {
    show: {
      handler (bool) {
        if (bool) {
          // 获取数据
          // this.getList()
          this.defaultSelect(this.data)
        }
        // 关闭后 更新数据
        else {
          let arr = []
          for (let i = 0; i < this.checkedList.length; i++) {
            arr.push(this.checkedList[i]['code']) //属性
          }
          this.$emit('update:data', arr)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // table sort
    sortPinyin (a, b) {
      return a.code.localeCompare(b.code) > 0
    },
    getList () {
      this.loading = true
      console.log('获取question 数据', this.getSetting())
      const { shortId,method,host, hostSuffix, questionListPath } = this.getSetting()
      this.$tool.request({
        url: host + hostSuffix + questionListPath,
        headers: {
          Authorization: this.getToken(),
          way: 1
        },
        method: method,
        params: {
          shortId: shortId
        }
      }).then(res => {
        if (res.code === 200) {
          this.questionList = res.data
          this.defaultSelect(this.data)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取当前选中数据
    getValue () {
    },
    // 拖动选中
    hoverCall: function (row, column, cell, event) {
      if (event.which == 1) {
        this.$refs.table.toggleRowSelection(row)
      }
    },
    // 默认选中
    defaultSelect (data) {
      // 数值转字符串
      let init_data_select = data.map(String)
      this.$nextTick(() => {
        this.questionList.forEach(item => {
          if (init_data_select.includes(item.code.toString())) {
            // 过滤已选过的对象 防止再次添加
            if (!this.checkedList.some(it => it.code == item.code)) {
              this.checkedList.push(item)
              this.$refs.table.toggleRowSelection(item, true)
            }
          }
        })
        let isNotFonudQuestionList = init_data_select.filter(code => !(this.checkedList.some(item => item.code == code)))
        if (this.checkedList.length != init_data_select.length) {
          this.$message.error(`未匹配到[${isNotFonudQuestionList}]题号`)
        }
      })
    },
    handleSelectionChange (rows) {
      console.log('handleSelectionChange:', rows)
      this.checkedList = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.checkedList.push(row)
          }
        })
      }
    },
  }
}
</script>

<style scoped>
.el-table {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

::v-deep .question-table ::-webkit-scrollbar {
  width: 1px;
}

/*滚动条样式*/
::v-deep .question-table ::-webkit-scrollbar {
  width: 5px;
  /*height: 4px;*/
}

::v-deep .question-table ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

::v-deep .question-table ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
