<style>
  .header-require:before {
    content: '*';
    color: #F56C6C;
    margin-right: 2px;
  }

</style>
<!--阶梯团基础信息设置-->
<template>
  <div>
    <el-form>
      <el-form-item label-width="0">
        <div>阶梯团设置</div>
        <el-table style="margin-bottom: 15px;width: 100%" v-if="group_list.length > 0" :data="group_list" border>
          <el-table-column width="200">
            <template slot="header">
              <div class="header-require">拼团人数</div>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.People_Num" size="small" type="text" maxlength="5"
                oninput="this.value = this.value.replace(/[^0-9]/, '')" placeholder="请输入拼团人数"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="团长优惠" width="200">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.Preferential_Price" size="small" placeholder="请输入团长优惠">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column width="400">
            <template slot="header">
              <div class="header-require">拼团时间</div>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.Pintuan_Time" maxlength="4" type="text" size="small"
                oninput="this.value = this.value.replace(/[^0-9]/, '')" placeholder="请输入拼团时间">
                <template slot="append">小时</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="最多开团数量" :render-header="delegation" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.Group_Num" type="text" size="small" maxlength="5"
                oninput="this.value = this.value.replace(/[^0-9]/, '')" placeholder="请输入团长数量">
                <template slot="append">个</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" @click="destroyPintuan(scope.$index)" circle type="text">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <img src="../../../assets/img/userman/del.png" alt="">
                </el-tooltip>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="text" @click="addPintuan">
          <i class="el-icon-plus" style="font-weight: bolder;margin-left: 5px;"></i>
          <span style="color: #353535;font-size: 14px">新增阶梯团</span>
        </el-button>
      </el-form-item>

      <el-card v-for="(item, index) in group_list" style="margin-top: 24px;" :key="index" shadow="never">
        <div slot="header">
          <el-tag type="danger">{{item.People_Num}}人团</el-tag>
        </div>
        <el-form-item>
          <div>价格与库存</div>
          <groupPrice :attrGroups="new_attr_groups" :groupPriceList="item.StepPriceList">
          </groupPrice>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>
<script>
  import groupPrice from "@/components/pintuan/pintuanPlugin/groupPrice.vue"
  export default {
    props: ['SpecList', "GroupPriceList", "SpecPriceList"],
    components: {
      groupPrice //拼团与库存组件
    },

    data() {
      return {
        group_list: this.GroupPriceList,
        new_attr_groups:this.SpecList,
        new_SpecPriceList: this.SpecPriceList,
      };
    },
    watch: {
      'group_list':{
        handler: function (val, oldval) {
          this.$emit('setNewVal', val); //params是传递的参数
        },
        deep:true
      }
    },
    created() {},
    methods: {
      //表头提示样式
      delegation(h, {
        column
      }) {
        return h(
          "el-popover", {
            props: {
              placement: "top",
              trigger: "hover",
              popperClass: "popperClassResOut"
            }
          },
          [
            h(
              "div",
              [
                `可发起拼团的次数(包括正在拼团中、拼团完成),`,
                h('br'),
                `0代表不限制次数`,
              ]
            ),
            h(
              "span", {
                slot: "reference"
              },
              [
                column.label,
                h("i", {
                  class: "el-icon-info",
                  style: {
                    marginLeft: "4px",
                    cursor: "pointer",
                  }
                })
              ]
            ),
          ]
        )
      },
      //新增阶梯团
      addPintuan() {
        if (!this.group_list) {
          this.group_list = [];
        }
        var attr = [];
        if (this.new_SpecPriceList && this.new_SpecPriceList.length > 0) {
          this.new_SpecPriceList.forEach((item,index) => {
            var obj = {
              AttrList: item.AttrList,
              SpecificationSort: item.SpecificationSort,
              PinTuanPrice: 0,
              PinTuanStock: 0,
              SortNum:index+1
            }
            attr.push(obj);
          })
        }
        this.group_list.push({
          People_Num: 2,
          Preferential_Price: 1,
          Pintuan_Time: 1,
          goods_id: 0,
          Group_Num:0,
          StepPriceList: attr
        });
      },
      //删除拼团
      destroyPintuan(index) {
        this.group_list.splice(index, 1);
      }
    },
    mounted() {

    }
  };

</script>
