<template>
  <el-dialog title="选择商品" :visible.sync="visibility"  :close-on-click-modal="isClose"
             :close-on-press-escape="isClose">

    <div class="filter-container">
      <el-input style="width: 150px;" class="filter-item" placeholder="规格名称" v-model="keywords"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-table
          :data="propForm.goods"
          ref="table"
          border
          highlight-current-row
          max-height="250"
          :row-class-name="tableRows"
          @row-click="onRowClicks"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          @current-change="goodTypeTableChange"
          style="width: 100%">
          <el-table-column
            align="center"
            label="商品类型">
            <template slot-scope="scope">
              <span>{{getGoodTypeName(scope.row)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <el-table
          :data="goodInfoTableData"
          border
          ref="multipleTable"
          max-height="250"
          @row-click="clickRow"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          @select="selectGoodInfo"
          @selection-change="changeGoodInfoTableData"
          @select-all="changeAllGoodInfoTableData"
          row-key="row_key"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="规格名称"
            property="specification_name"
            style="word-break: keep-all;white-space:nowrap;"
          ></el-table-column>
          <el-table-column
            label="单位"
            property="good_unit"
          >
            <template slot-scope="scope">
              <span>{{getName(scope.row.good_unit)}}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="单价"
            property="buy_price"
          >
            <template slot-scope="scope">
              <span>{{scope.row.buy_price}}</span>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
    <el-button @click="cancle()">取 消</el-button>
    <el-button type="primary" @click="comfirm()">保 存</el-button>
  </span>
  </el-dialog>

</template>

<script>
  export default {
    name: 'salesReturnDialog',
    data() {
      return {
        visibility:false,
        goodInfo: [],
        goodInfoTableData: [],
        keywords: '',
        multipleSelection: [],
        currentGoodTypeId: 0,
        isClose: false,
        table_current_index: -1

      }
    },
    props: {
      propForm: {
        type: Object
      },

    },
    methods: {
      hide:function(){
        this.visibility = false
        this.goodInfoTableData = []
        for (let i = 0; i < this.propForm.goods.length; i++) {
          for (let key in this.propForm.goods[i]) {
            if (key != 'index') {
              this.propForm.goods[i][key].isSelected = false
            }
          }
        }

      },
      show:function(){
        this.visibility = true
        for (let i = 0; i < this.propForm.goods.length; i++) {
          for (let key in this.propForm.goods[i]) {
            if (key != 'index') {
              this.propForm.goods[i][key].isSelected = false
            }
          }
        }
      },
      goodTypeTableChange: function(currentRow, oldCurrentRow) {
        console.log(currentRow)
        let keyName = ''
        for (var key in currentRow) {
          if (key != 'index') {
            keyName = key
          }
        }
        console.log(keyName)
        this.goodInfoTableData = []
        this.goodInfo = []
        if (keyName.length > 0) {
          this.currentGoodTypeId = parseInt(keyName)
          this.goodInfo = currentRow[keyName]
          this.goodInfoTableData = (currentRow[keyName])
        }

        for (let i = 0; i < this.goodInfoTableData.length; i++) {
          if (this.goodInfoTableData[i].isSelected) {
            this.$nextTick(function() {
              this.$refs.multipleTable.toggleRowSelection(this.goodInfoTableData[i])
            })
          }
        }
        //
        //
        //
        //
        // for (let i = 0; i < this.propForm.goodInfo.length; i++) {
        //   if (this.currentGoodTypeId == this.propForm.goodInfo[i].good_type_id) {
        //       this.goodInfo.push(this.propForm.goodInfo[i])
        //       this.goodInfoTableData.push(this.propForm.goodInfo[i])
        //   }
        // }
      },
      cancle: function() {
        this.$emit('dialog-cancle', this.getValue())
        this.$refs.multipleTable.clearSelection()
        this.$refs.table.setCurrentRow(null);
        this.goodInfoTableData = []

      },
      comfirm: function() {
        this.$emit('dialog-comfirm', this.getValue())
        this.$refs.multipleTable.clearSelection()
        this.$refs.table.setCurrentRow(null);
        this.goodInfoTableData = []

      },
      getValue: function() {
        this.multipleSelection = []
        for (let i = 0; i < this.propForm.goods.length; i++) {
          for (let key in this.propForm.goods[i]) {
            if (key != 'index') {
              for(let a= 0; a < this.propForm.goods[i][key].length; a++){
                if (this.propForm.goods[i][key][a].isSelected) {
                  this.multipleSelection.push(this.propForm.goods[i][key][a])
                }
              }
            }
          }
        }

        const obj3 = {}
        this.multipleSelection =  this.multipleSelection.reduce((cur, next) => {
          obj3[next.id] ? '' : obj3[next.id] = true && cur.push(next)
          return cur
        }, [])

        const obj = {
          selectedGoodInfo: this.multipleSelection,
          goodTypeId: this.currentGoodTypeId
        }

        console.log(obj)


        return obj
      }, goodTypeSelect: function(id) {
        this.tempGoodInfo = []
        this.goodInfo = []
        console.log(this.propForm.manufacturer )
        console.log(this.propForm.dealers )


      }, goodInfoSelect: function(id) {
        let index = 0
        for (let i = 0; i < this.propForm.goodInfo.length; i++) {
          if (this.propForm.goodInfo[i].id == id) {
            index = i
          }
        }
        this.form.good_type_id = this.propForm.goodInfo[index].good_type_id
      }, getName: function(id) {
        if (id == 0) {
          return ''
        }

        for (let i = 0; i < this.propForm.goodUnit.length; i++) {
          if (this.propForm.goodUnit[i].id == id) {
            return this.propForm.goodUnit[i].name
          }
        }
      }, search: function() {
        if (this.keywords.length <= 0) {
          this.$message.error('搜索关键字不能为空')
          return
        }
        const searchArr = []
        for (let i = 0; i < this.goodInfoTableData.length; i++) {
          if (this.goodInfoTableData[i].specification_name.indexOf(this.keywords) != -1) {
            searchArr.push(this.goodInfoTableData[i])
          }
        }
        this.goodInfoTableData = []
        for (let i = 0; i < searchArr.length; i++) {
          this.goodInfoTableData.push(searchArr[i])
        }
      }, changeGoodInfoTableData: function(val) {
        this.multipleSelection = val
      }, changeAllGoodInfoTableData: function(selection) {
        var goodInfos = this.propForm.goods[this.table_current_index][this.currentGoodTypeId]
        for (let y = 0; y < goodInfos.length; y++) {
          goodInfos[y].isSelected = false
        }
        if (selection.length > 0) {
          for (let y = 0; y < goodInfos.length; y++) {
            for (let i = 0; i < selection.length; i++) {
              if (goodInfos[y].id == selection[i].id) {
                goodInfos[y].isSelected = true
              }
            }
          }
        }
      },clickRow:function(row) {
        // this.$refs.multipleTable.toggleRowSelection(row)

      }, tableRows({ row, rowIndex }) {
        // 把每一行的索引放进row
        row.index = rowIndex
      },
      onRowClicks(row, event, column) {
        this.table_current_index = row.index
      }, selectGoodInfo(selection, row) {
        var goodInfos = this.propForm.goods[this.table_current_index][this.currentGoodTypeId]
        for (let y = 0; y < goodInfos.length; y++) {
          goodInfos[y].isSelected = false
        }
        if (selection.length > 0) {
          for (let y = 0; y < goodInfos.length; y++) {
            for (let i = 0; i < selection.length; i++) {
              if (goodInfos[y].id == selection[i].id) {
                goodInfos[y].isSelected = true
              }
            }
          }
        }

      }, getGoodTypeName: function(val) {
        let keyName = ''
        for (var key in val) {
          if (key != 'index') {
            keyName = key
          }
        }
        let keys = parseInt(keyName)
        for (let i = 0; i < this.propForm.goodType.length; i++) {
          if (this.propForm.goodType[i].id == keys) {
            return this.propForm.goodType[i].type_name
          }
        }
      }
    }
  }

</script>

<style scoped>

</style>
