<template>
  <div class="app-container">
    <button-bar view-title="选择优惠包" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
    <div class="main-content">
      <div class="">
        <el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;">
          <el-table-column label="优惠名称" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.discountName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价值" align="center" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.discountPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="优惠项目说明" header-align="center" align="left" min-width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.discountInfo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="剩余数量" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.discountLeaveNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="本次赠送数量" align="center" width="200">
            <template slot-scope="scope">
              <el-input :disabled="scope.row.discountLeaveNum == '0'" @change="changeByDiscountNum($event, scope.row)" v-model="scope.row.discountNum" placeholder=""/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import ButtonBar from '@/components/ButtonBar'

export default {
  name: 'selectpackage',
  components: {
    ButtonBar
  },
  data() {
    return {
      viewTitle: '',
      tableKey: 0,
      listLoading: false,
      btndisabled: false,
      list: [],
      vinSid: '', // 车辆sid
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: '',
          btnKey: 'doCreate',
          btnLabel: '确定'
        },
        {
          type: 'info',
          size: 'small',
          icon: '',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ]
    }
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  methods: {
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'doCreate':
          this.doCreate()
          break
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    showData(discountUse, discountLeave, vinSid) {
      const aa = []
      for (var i = 0; i < discountLeave.length; i++) {
        for (var k = 0; k < discountUse.length; k++) {
          if (discountLeave[i].discountSid === discountUse[k].discountSid) {
            aa.push({
              discountSid: discountUse[k].discountSid,
              discountName: discountUse[k].discountName,
              discountPrice: discountUse[k].discountPrice,
              discountInfo: discountUse[k].discountInfo,
              discountLeaveNum: parseInt(discountUse[k].discountNum) + parseInt(discountLeave[i].discountLeaveNum),
              discountNum: discountUse[k].discountNum
            })
          }
        }
      }
      this.list = aa
      this.vinSid = vinSid
    },
    changeByDiscountNum(val, row) {
      if (parseInt(row.discountLeaveNum) - parseInt(val) < 0) {
        row.discountNum = row.discountLeaveNum
      } else {
        row.discountNum = val
      }
    },
    doCreate() {
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].discountNum === '') {
          this.list[i].discountNum = 0
        }
      }
      this.$emit('backData', this.list, this.vinSid)
    },
    doClose() {
      this.$emit('doback')
    }
  }
}
</script>

<style scoped></style>
