 
<template>
  <div class="couponbox">
    <el-alert
      title="优惠券说明"
      type="info"
      description=" 优惠券总量为用户领取、定向发放、兑换码兑换、支付有礼发放、运营计划发放所产生的优惠券数量，具体数量可在效果数据中查看。"
      show-icon
    ></el-alert>

    <div class="baseInfo">
      <h2 class="title">基本信息</h2>
      <section class="creat_item">
        <label for="title" class="lable">
          优惠券名称
          <span class="star">*</span>
        </label>
        <input
          type="text"
          v-model="couponModel.Name"
          placeholder="优惠券名称，不超过10个字"
          maxlength="10"
          autocomplete="off"
        />
      </section>
      <section class="creat_item flex">
        <div class="lable">
          优惠券类型
          <span class="star">*</span>
        </div>
        <div class="flex">
          <el-radio v-model="couponModel.CouponType" :label="1">满减优惠券</el-radio>
          <el-radio v-model="couponModel.CouponType" :label="2">折扣优惠券</el-radio>
        </div>
      </section>
      <section class="creat_item flex">
        <div class="lable">
          使用门槛
          <span class="star">*</span>
        </div>
        <div>
          <el-radio v-model="limitAmount" :label="0">无门槛使用</el-radio>
          <el-radio v-model="limitAmount" :label="1">
            <span>满</span>
            <input type="text" placeholder="输入金额" v-model="couponModel.AllowMinAmount" class="input_price" />
            <span>元使用</span>
          </el-radio>
        </div>
      </section>
      <section class="creat_item flex">
        <div class="lable">
          优惠内容
          <span class="star">*</span>
        </div>
        <div>
          <div v-if="couponModel.CouponType==1">
            减
            <input type="text" v-model="couponModel.CouponValue" placeholder="请输入优惠券金额" />元
          </div>
          <div class="discount-box" v-else >
            打
            <input type="text" v-model="couponModel.CouponValue" />折
          </div>
        </div>
      </section>
      <section class="creat_item flex">
        <label for="count" class="lable">
          发行量
          <span class="star">*</span>
        </label>
        <div>
          <input
            type="text"
            v-model="couponModel.TotalCount"
            autocomplete="off"
            placeholder="最多多少张张"
          />张
          <br />
          <div class="grayTip">优惠券创建后，发行量只能增加不能减少，请谨慎设置</div>
        </div>
      </section>
      <section class="creat_item flex">
        <label for="range" class="lable">
          适用商品
          <span class="star">*</span>
        </label>
        <div>
          <el-radio v-model="couponModel.UseRange" :label="1">全部商品可用</el-radio>
          <el-radio v-model="couponModel.UseRange" :label="2">指定商品可用</el-radio>
          <div v-if="couponModel.UseRange==2">
            <el-button type="primary" @click="$refs['productSelector'].show()">选择课程</el-button>
            <el-table
              :data="products"
              style="width: 100%;margin-bottom: 20px;"
              row-key="ResourceId"
              border
            >
              <el-table-column label="课程图片" width="180">
                <template slot-scope="scope">
                  <img :src="scope.row.ResourceImage" style="width:50px;height:25px;" />
                </template>
              </el-table-column>
              <el-table-column prop="ResourceName" label="课程名称" width="180"></el-table-column>
              <el-table-column prop="Price" label="价格"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-link type="primary" @click="remove(scope.row)">移除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </section>
      <section class="choose_time creat_item">
        <div class="lable">
          使用时间
          <span class="star">*</span>
        </div>
        <div>
          <div class="flex">
            <el-radio v-model="couponModel.DateRule" :label="1">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-radio>
          </div>
          <div class="up-down-margin">
            <el-radio v-model="couponModel.DateRule" :label="2">
              <label for="time_way_two">领取当日起</label>
              <input type="text" v-model="couponModel.ValidDay" class="input_price" />
              <span>天内可用</span>
            </el-radio>
          </div>
          <div>
            <el-radio v-model="couponModel.DateRule" :label="3">
              <label for="time_way_three">领取次日起</label>
              <input type="text" v-model="couponModel.ValidDay " class="input_price" />
              <span>天内可用</span>
            </el-radio>
          </div>
        </div>
      </section>
    </div>
    <div class="popuInfo use-way-box">
      <h2 class="title">领用规则</h2>
      <section class="creat_item flex">
        <div class="lable">
          领取次数限制
          <span class="star">*</span>
        </div>
        <div>
          <el-radio v-model="isLimit" :label="0">不限次数</el-radio>
          <el-radio v-model="isLimit" :label="1">每人限领</el-radio>
          <el-input v-if="isLimit==1" v-model="couponModel.GetLimitCount"></el-input>
        </div>
      </section>
      <!-- <section class="creat_item">
        <label for="can_share" class="lable lable-top">分享设置</label>
        <el-checkbox v-model="checked">优惠券允许分享给好友领取</el-checkbox>
      </section>-->
      <section class="creat_item">
        <label for="can_use_activity" class="lable lable-top">活动叠加限制</label>
        <el-checkbox v-model="couponModel.IsOverlay" :true-label="1" :false-label="0">优惠券仅原价购买商品时可用，不可与其他营销活动叠加使用</el-checkbox>
      </section>
      <section class="creat_item activity-overlay">
        <label for="can_use_activity" class="lable lable-top">公开设置</label>
        <el-checkbox v-model="couponModel.IsOpen" :true-label="1" :false-label="0">用户可在商品详情页领取</el-checkbox>
      </section>
    </div>
    <el-button @click="add">保存</el-button>

  </div>
</template>
<script>
var that = null;
export default {
  components: {
    
  },
  data() {
    return {
      isLimit: 0,
      limitAmount:0,
      dateRange: [],
      couponModel: {
        CouponType: 1,
        DateRule: 1,
        UseRange:1
      },
      products: []
    };
  },
  watch: {
    saoma: function() {}
  },
  created() {},
  methods: {
    get() {
      this.$api.get("sells/v1/coupon/get").then(res => {
        if (res.Data) this.couponModel = res.Data;
      });
    },
    add() {
      this.couponModel.StartDate = this.dateRange[0];
      this.couponModel.EndDate = this.dateRange[1];
      this.couponModel.Resource = this.products;
      if (this.isLimit == 0) this.couponModel.LimitCount = -1;
      this.$api.post("sells/v1/coupon/Post", this.couponModel).then(res => {
        this.$router.push({ name: "coupon" });
      });
    },
    selectCourse(data) {
      var model = data.map(m => {
        return {
          ResourceId: m.Id,
          ResourceImage: m.Cover,
          ResourceName: m.Name,
          ResourceType: 1,
          Price: m.Price
        };
      });
      this.products.push(...model);
    },
    selectLive(data) {
      var model = data.map(m => {
        return {
          ResourceId: m.Id,
          ResourceImage: m.Cover,
          ResourceName: m.Name,
          ResourceType: 2,
          Price: m.Price
        };
      });
      this.products.push(...model);
    },
    selectPackage(data) {
      var model = data.map(m => {
        return {
          ResourceId: m.Id,
          ResourceImage: m.Cover,
          ResourceName: m.Name,
          ResourceType: 3,
          Price: m.Price
        };
      });
      this.products.push(...model);
    },
    remove(item) {
      var index = this.products.indexOf(item);
      this.products.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.couponbox {
  padding: 20px;
}
.creat_item {
  margin-bottom: 28px;
}
.lable {
  width: 200px;
  float: left;
}
.star {
  color: red;
  font-size: 20px;
}
input {
  padding-left: 5px;
  width: 240px;
  height: 36px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #eee;
  margin-right: 10px;
}
.grayTip {
  font-size: 12px;
  color: #999999;
  text-align: left;
  margin-top: 10px;
}
</style>
