<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>
          <priceAndGroup :attrGroups="new_attr_groups" :pinTuanPriceList="item.attr">
          </priceAndGroup>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>
<script>
  import priceAndGroup from "@/components/pintuan/pintuanPlugin/priceAndGroup.vue"
  export default {
    props: ['SpecList', "GroupList", "PriceList"],
    components: {
      priceAndGroup //拼团与库存组件
    },

    data() {
      return {
        group_list: [],
        new_PriceList: [],
        new_attr_groups: []
      };
    },
    watch: {
      'GroupList': {
        handler: function (val, oldval) {
          this.group_list = JSON.parse(JSON.stringify(val));
        },
      },
      'SpecList': {
        handler: function (val, oldval) {
          this.new_attr_groups = JSON.parse(JSON.stringify(val));
        },
      },
      'PriceList': {
        handler: function (val, oldval) {
          this.new_PriceList = JSON.parse(JSON.stringify(val));
        },
      },
    },
    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 = [];
        }
        this.group_list.push({
          people_num: 2,
          preferential_price: 1,
          pintuan_time: 1,
          goods_id: 0,
          attr: JSON.parse(JSON.stringify(this.new_PriceList))
        });
      },
      //删除拼团
      destroyPintuan(index) {
        this.group_list.splice(index, 1);
      }
    },
    mounted() {

    }
  };

</script>
