<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"
          @current-change="goodTypeTableChange"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          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"
          @selection-change="changeGoodInfoTableData"
          @select="selectGoodInfo"
          @select-all="changeAllGoodInfoTableData"
          row-key="row_key"
          style="width: 100%"
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            align="center"
            label="规格名称"
            property="specification_name"
            style="word-break: keep-all;white-space:nowrap;"
          ></el-table-column>
          <el-table-column
            align="center"
            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('form')">取 消</el-button>
    <el-button type="primary" @click="comfirm('form')">保 存</el-button>
  </span>
  </el-dialog>

</template>

<script>
  import { GetGoodInfoByGoodId } from '@/api/stock'

  export default {
    name: 'stockInDialog',
    data() {
      return {
        goodInfo: [],
        goodInfoTableData: [],
        keywords: '',
        multipleSelection: [],
        currentGoodTypeId: 0,
        isClose: false,
        visibility: false,
        SelectedDatas: [],
        table_current_index: -1
      }
    },
    props: {
      propForm: {
        type: Object
      }
    },
    methods: {
      hide: function() {
        this.visibility = false
        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) {
        let keyName = ''
        for (var key in currentRow) {
          if (key != 'index') {
            keyName = key
          }
        }
        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])
            })
          }
        }

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

      },
      comfirm: function(formName) {
        this.goodInfo = []
        this.goodInfoTableData = []
        this.$emit('dialog-comfirm', this.getValue())
        this.$refs.multipleTable.clearSelection()
        this.$refs.table.setCurrentRow(null)
      },
      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 obj = {
          selectedGoodInfo: this.multipleSelection,
        }
        return obj
      }, goodTypeSelect: function(id) {
        this.tempGoodInfo = []
        this.goodInfo = []
        for (let i = 0; i < this.propForm.goodInfo.length; i++) {
          if (this.propForm.goodInfo[i].good_type_id == id) {
            this.tempGoodInfo.push(this.propForm.goodInfo[i])
          }
        }
      }, 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) {
      }, 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)

      }, newGroupObject: function() {
        return Object.assign(
          {},
          {
            id: 0,
            info: []
          }
        )
      }, 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
          }
        }
      }, 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
              }
            }
          }
        }

      }
    }

  }

</script>

<style scoped>

</style>
