<template>
  <div class="search-head">
    <p>请确保已上传相机拍摄的VR模型。</p>
    <el-input v-model="search.keyword" placeholder="输入关键字" class="input"  suffix-icon="el-icon-search"></el-input>
  </div>
  <div style="width: 100%; overflow: hidden">
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      style="width: 100%"
      @row-click="selectRow"
      @selection-change="dataList.changeSelectRows"
      >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="封面" prop="name"></el-table-column>
      <el-table-column label="VR模型和标题" prop="name"></el-table-column>
    </el-table>
  </div>    
</template>

<script>
import getTableState from '@/state/tableRef'

const equaItemsAndIds = (items, ids) => {
  let temp1 = items.map(({id}) => id).join('')
  let temp2 = ids.join('')

  return temp1 === temp2
}

export default {
  props: ['modelValue'],
  setup() {
    const state = getTableState({
      searchAttr: { keyword: "" },
      isSelect: true
    })
    return { ...state }
  },
  watch: {
    'dataList.selectRows'() {
      if (!equaItemsAndIds(this.dataList.selectRows, this.modelValue)) {
        this.$emit(
          'update:modelValue', 
          this.dataList.selectRows.map(({id}) => id)
        )
      }
    },
    modelValue() {
      if (!equaItemsAndIds(this.dataList.selectRows, this.modelValue)) {
        this.dataList.selectRows = this.modelValue
          .map(fid => this.dataList.find(({id}) => fid === id))
          .filter(item => item)
      }
    }
  },
  methods: {
    synchro() {
      this.dataList.selectRows = this.modelValue
        .map(fid => this.dataList.state.find(({id}) => id === fid))
        .filter(item => item)

      this.$refs.multipleTable.clearSelection();
      this.dataList.selectRows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    }
  },
  mounted() {
    this.synchro()
  }
}
</script>

<style lang="scss" scoped>
.search-head {
  margin-bottom: 12px;

  p {
    font-size: 0.825rem;
    margin-bottom: 9px;
  }

  .input {
    width: 224px;
  }
}
</style>