<template>
  <div>
    <el-table :data="test">
      <el-table-column><template slot-scope="scope">
          <el-input v-model="scope.row.t1" @change="changeInput(scope.row, scope.$index)"></el-input>
        </template></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-select v-model="scope.row.t2" @change="numChange($event, scope.row, scope.$index)">
          <el-option v-for
 
="item in data1" :label="item" :value="item" :key="item">
          </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-select v-model="scope.row.t3"  @change="numChange($event, scope.row, scope.$index, false)">
          <el-option v-for
 
="item in data2" :label="item" :value="item" :key="item">
          </el-option>
          </el-select>
        </template>
        </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
        <el-input v-model.number="scope.row.num"></el-input>
        </template>
        </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
        <el-button @click="ClickTest(scope.row, scope.$index)">批量加</el-button>
        </template>
        </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
        <el-button @click="DelTest(scope.row, scope.$index)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import _ from 
 
'lodash'
  export default {
    data() {
      return {
        data1: [0,1,2,3,4,5,6,7,8,9,10],
        data2: [0,1,2,3,4,5,6,7,8,9,10],
        data3: [],
        data4: [],
        test: [{
          t1: 'abc',
          t2: '',
          t3: '',
          num: 1,
        }],
        arr1: [],
        arr2: [],
        arr3: [],
        judgeInputChange: false
      }
    },
    methods: {
      ClickTest(row, index) {
        if(row.t1 !== ''&&row.t2 !== ''&&row.t3 !== ''&&row.num !== 0 && this.data1.length > 0 && this.data2.length > 0) {
          // 此時判斷是否達到最大限制進行提示
          const maxLength = this.data1.length > this.data2.length ? this.data2.length : this.data1.length
          row.num = maxLength > row.num ? row.num : maxLength - 1
          this.data1.sort((a,b) => a-b)
          this.data2.sort((a,b) => a-b)
          // 是否此時只有一項
          if(this.test.length === 1) {
            this.arr1.push(row.t1)
            this.arr2.push(row.t2)
            this.arr3.push(row.t3)
            let tempIndexOne = 0
            let tempIndexTwo = 0
            for (let i = 0; i < row.num; i++) {
              let obj = _.cloneDeep(row)
              obj.num = 1
              obj.t1 = row.t1 + (i + 1)
              if (this.data1.indexOf(row.t2)+i+1 > this.data1.length - 1) {
                obj.t2 = this.data1[tempIndexOne]
                tempIndexOne ++
              } else {
                obj.t2 = this.data1[this.data1.indexOf(row.t2)+i+1]
              }
              if (this.data2.indexOf(row.t3)+i+1 > this.data2.length - 1) {
                obj.t3 = this.data2[tempIndexTwo]
                tempIndexTwo ++
              } else {
                obj.t3 = this.data2[this.data2.indexOf(row.t3)+i+1]
              }
              this.test.push(_.cloneDeep(obj))
              this.arr1.push(obj.t1)
              this.arr2.push(obj.t2)
              this.arr3.push(obj.t3)
            }
            // 進行去重操作
            this.data1 = this.data1.filter(x => !this.arr2.some(y => y === x))
            this.data2 = this.data2.filter(x => !this.arr3.some(y => y === x))
          } else if (!this.arr1.includes(row.t1)) {
            this.arr1[index] = this.judgeInputChange ? row.t1 : this.arr1[index]
            console.log(row.t1, this.arr1);
          // 是否有相同的名字
            const val2Max = Math.max.apply(null, this.arr2)
            const val3Max = Math.max.apply(null, this.arr3)
            let n = 0
            let m = 0
            // 找出當前data1陣列中根據輸入的最大的索引值
            for (const key in this.data1) {
              console.log('------key', key);
              if (this.data1[key] > val2Max) {
                n = key
                break
              }
            }
            for (const key in this.data2) {
              console.log('------key', key);
              if (this.data2[key] > val3Max) {
                m = key
                break
              }
            }
            let a = this.data1.slice(n)
            let b = a === this.data1.length ? [] : this.data1.slice(0,n)
            this.data1 = a.concat(b)
            let a1 = this.data2.slice(m)
            let b1 = a1 === this.data2.length ? [] : this.data2.slice(0,m)
            this.data2 = a1.concat(b1)
            for (let i = 0; i < row.num; i++) {
              let obj = _.cloneDeep(row)
              obj.t1 = row.t1 + (i + 1)
              obj.t2 = this.data1[i]
              obj.t3 = this.data2[i]
              this.data1.shift()
              this.data2.shift()
              obj.num = 1
              this.test.push(_.cloneDeep(obj))
              this.arr1.push(obj.t1)
              this.arr2.push(obj.t2)
              this.arr3.push(obj.t3)

            }
            this.judgeInputChange = false
          } else{
            this.$message.warning('名字重複了')
          }
        } else {
          this.$message.warning('達到上限不可再新增')
        }
      },
      // 選擇數字改變時觸發
      numChange(value, row, index, judge = true) {
        // console.log(123);
        if (this.arr2.length > 0 && this.arr3.length > 0 && this.test.length > 1) {
          // console.log(value, row, index);
          let n, m = ''
          // 原來的值
          n = this.arr2[index]
          m = this.arr3[index]
          if (judge ) {
            // 進行替換操作、
            this.arr2.splice( index, 1, value)
            this.data1.splice( this.data1.indexOf(value), 1, n)
          } else {
            // 進行替換操作、
            this.arr3.splice(index, 1, value)
            this.data2.splice(this.data2.indexOf(value), 1, m)
            console.log(2);
          }

        }

      },
      DelTest (row, index) {
        console.log(this.test.length);
        if (this.test.length > 1) {
          this.data1.push(row.t2)
          this.data2.push(row.t3)
          this.arr1.splice(this.arr1.indexOf(row.t1), 1)
          this.arr2.splice(this.arr2.indexOf(row.t2), 1)
          this.arr3.splice(this.arr3.indexOf(row.t3), 1)
          this.test.splice(index, 1)
        } else {
          this.$message.error('最後一項了不可以再刪除')
        }

      },
      changeInput (row, index) {
        if (this.test.length > 1) {
          this.judgeInputChange = true
        }
      }
    }

  }
</script>

<style lang="scss" scoped>

</style>