<style>
  .app-attr .box {
    line-height: 64px;
    border-top: 1px solid #E8EAEE;
    border-left: 1px solid #E8EAEE;
    border-right: 1px solid #E8EAEE;
    padding: 0 16px;
  }

  .app-attr .box .batch {
    margin-left: -10px;
    margin-right: 20px;
  }

  .app-attr .el-select .el-input {
    width: 130px;
  }

  .app-attr .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-attr .header-require:before {
    content: '*';
    color: #F56C6C;
    margin-right: 2px;
  }

  .app-attr .priceComTable {
    width: 100%;
    border-collapse: collapse;
  }

  .app-attr .priceComTable tr th {
    height: 48px;
    font-size: 14px;
    color: #909399;
    border: 1px solid #EBEEF5;
    font-weight: bold;
  }

  .app-attr .priceComTable tr {
    background: #fff;
    text-align: center;
    height: 50px;
  }

  .app-attr .priceComTable tr td {
    font-size: 14px;
    border: 1px solid #EBEEF5;
  }

  .app-attr .fx_inner:hover td {
    background-color: #F5F7FA;
  }

  .app-attr .priceComTable td {
    transition: background-color .25s ease;
  }

</style>
<!--阶梯团价格库存设置-->
<template>
  <div class="app-attr">
    <div class="box">
      <el-form label-width="180px">
        <el-checkbox v-model="attrBatch" @change="selectClick">全选</el-checkbox>
        <el-form-item label="批量设置" size="small" style="margin-bottom:0;padding:18px 0;display:inline-block;">
          <el-input @keyup.enter.native="batchAttr()" size="small" type="number" v-model="batchNum">
            <el-select v-model="selectData" slot="prepend">
              <!-- <el-option label="不限" :value="0"></el-option> -->
              <el-option v-for="(item, index) in cList" :value="index" :key="item.Id" :label="item.name">
                {{item.name}}
              </el-option>
            </el-select>
            <template slot="append">
              <el-button @click="batchAttr()">
                确定
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <table class="priceComTable">
      <thead>
        <tr>
          <td style="width:55px;">
            <!-- <el-checkbox v-model="groupPriceList[0].isChecked"></el-checkbox> -->
          </td>
          <td v-for="(headerItem,headerIndex) in attrGroups" :key="headerIndex">{{headerItem.Name}}</td>

          <td>
            <div class="header-require">拼团价</div>
          </td>
          <td>
            <div class="header-require">拼团库存</div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(rootItem,rootIndex) in groupPriceList" :key="rootIndex">
          <td>
            <el-checkbox v-model="rootItem.isChecked" @change="getCheck(rootItem)"></el-checkbox>
          </td>
          <template v-for="(attrItem, attrIndex) in attrGroups">
            <td v-if="attrIndex == index2" v-for="(item2, index2) in rootItem.AttrList" :key="index2">
              {{ rootItem.AttrList[index2].SVName }}
            </td>
          </template>
          <td>
            <el-input type="number" v-model="rootItem.PinTuanPrice"  @keyup.native="checkPrice(rootItem,'PinTuanPrice')" size="small" style="padding:0 10px" />
          </td>
          <td>
            <el-input type="number" v-model="rootItem.PinTuanStock"  @keyup.native="checkPrice(rootItem,'PinTuanStock')" size="small" style="padding:0 10px" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {
    props: ["groupPriceList", "attrGroups"],
    data() {
      return {
        attrBatch: false, //是否全选
        cList: [{
          Id: 0,
          name: '拼团价'
        }, {
          Id: 1,
          name: '拼团库存'
        }],
        selectData: '',
        //批量设置价格
        batchNum: '',
        number:0
      };
    },
    created() {
      if(this.groupPriceList&&this.groupPriceList.length>0){
        this.groupPriceList.forEach(x => {
           x.isChecked=false;
        });
      }
    },
    methods: {
      //单选
      getCheck(item){
        this.$forceUpdate();
        if(item.isChecked){
          this.number++
        }else{
          this.number--
        }
        if(this.number==this.groupPriceList.length){
          this.attrBatch=true;
        }else{
          this.attrBatch=false;
        }
      },
      //点击全选
      selectClick() {
        this.number=0;
        if(this.attrBatch){
          this.groupPriceList.forEach(x => {
            x.isChecked=true;
            this.number++;
          });
        }else{
          this.groupPriceList.forEach(x => {
            x.isChecked=false;
          });
        }
      },
      //点击批量设置确定
      batchAttr() {
        if(this.number==0){
          this.Error('请选择需要设置的项');
        }else{
          this.groupPriceList.forEach(x=>{
            if(x.isChecked){
              if(this.selectData==0){
                x.PinTuanPrice=this.batchNum;
              }
              if(this.selectData==1){
                x.PinTuanStock=this.batchNum;
              }
            }
          })
        }
      }
    },
    mounted() {
    },
    computed: {

    },
  };

</script>
