<template>
  <div class="p_all_20">
    <div class="tit">新建优惠券</div>
    <el-row class="entry">
      <el-col :span="8" class="type-1">
        <div @click="addCouponFun(4)">
          <img src="../../../assets/img/coupon/coupon-1.png" alt />
          <span>前往制作</span>
        </div>
        <!-- <router-link :to="{path:'/marketing/addcoupon',query:{typeVal:4}}" >
            <div><img
                  src="../../../assets/img/coupon/coupon-1.png"
                  alt=""
                /><span>前往制作</span></div>
        </router-link>-->
      </el-col>
      <el-col :span="8" class="type-2">
        <div @click="addCouponFun(3)">
          <img src="../../../assets/img/coupon/coupon-2.png" alt />
          <span>前往制作</span>
        </div>
        <!-- <router-link :to="{path:'/marketing/addcoupon',query:{typeVal:3}}" >
            <div><img
                src="../../../assets/img/coupon/coupon-2.png"
                alt=""
              /><span>前往制作</span></div>
        </router-link>-->
      </el-col>
      <!-- <el-col
          :span="8"
          class="type-3"
        ><a href="/Set/CouponTypeBrand.aspx">
            <div><img
                src="../../../assets/img/coupon/coupon-3.png"
                alt=""
              /><span>前往制作</span></div>
      </a></el-col>-->
    </el-row>

    <div class="tit">优惠券管理</div>
    <div class="box">
      <span class="search">
        优惠券状态：
        <el-select v-model="couponStateSelected" placeholder="请选择">
          <el-option
            v-for="item in couponState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </span>

      <span class="search">
        优惠券类型：
        <el-select v-model="couponTypeSelected" placeholder="请选择">
          <el-option
            v-for="item in couponType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </span>
      <div style="float:right;">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type @click="handleRest">重置</el-button>
      </div>
    </div>
    <div class="box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
        <el-table-column prop="typeName" align="center" label="类型"></el-table-column>
        <el-table-column prop="content" align="center" label="优惠内容"></el-table-column>
        <el-table-column prop="gotAndSurplus" align="center" label="已领取/剩余"></el-table-column>
        <el-table-column prop="used" align="center" label="已使用"></el-table-column>
        <el-table-column prop="statusDesc" align="center" label="状态"></el-table-column>
        <el-table-column prop="status" label="操作" align="center" width="260">
          <template slot-scope="scope">
            <router-link :to="{path:'/marketing/coupondetails',query:{id:scope.row.actId}}">
              <el-button
                type="text"
                v-if="(scope.row.type == 3 || scope.row.type == 4) && scope.row.status != 2"
              >查看详情</el-button>
            </router-link>
            <!-- <router-link :to="{path:'/marketing/coupondetails',query:{id:scope.row.actId}}">
              <el-button
                type="text"
                v-if="scope.row.type == 3 && scope.row.status != 2"
              >

               查看详情
              </el-button>
            </router-link>-->
            <!-- <%--<el-button type="text" v-if="(scope.row.type == 1 || scope.row.type == 2) && scope.row.status == 2" @click="handleEditCoupon(scope.row.actId)">编辑</el-button>--%> -->
            <el-button
              type="text"
              v-if="scope.row.status == 2"
              @click="handleEditCoupon(scope.row.actId,scope.row.type)"
            >编辑</el-button>

            <el-button
              type="text"
              v-if="scope.row.status == 2"
              @click="handleActCoupon(scope.row.actId)"
            >发放</el-button>
            <el-button
              type="text"
              v-if="scope.row.status != 1"
              @click="handleDelCoupon(scope.row.actId)"
            >删除</el-button>
            <el-button
              type="text"
              v-if="scope.row.status ==1"
              @click="handleEndCoupon(scope.row.actId)"
            >禁用</el-button>
            <el-button
              type="text"
              v-if="scope.row.status !=3"
              @click="handleUpdateCoupon(scope.row.actId,scope.row.totalNum)"
            >修改总数</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10,20,30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {  _getStorage } from "@/utils/utils";
export default {
  name: "coupon",
  data() {
    return {
      brandInfo:{},
      tableData: [],
      form: {
        value: ""
      },
      couponState: [
        {
          label: "全部",
          value: -1
        },
        {
          label: "发放中",
          value: 1
        },
        {
          label: "待发放",
          value: 2
        },
        {
          label: "已结束",
          value: 3
        },
        {
          label: "已禁用",
          value: 4
        }
      ],
      couponType: [
        {
          label: "全部",
          value: -1
        },
        {
          label: "新品券",
          value: 1
        },
        {
          label: "单品券",
          value: 2
        }
        //{
        //    label:'品牌券',
        //    value:3,
        //},
      ],
      couponStateSelected: -1,
      couponTypeSelected: -1,
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0,
      actType: -1,
      actStatus: -1
    };
  },
  methods: {
    getList() {
      this.$axios
        .get("/coupons/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            actType: this.actType,
            actStatus: this.actStatus
          }
        })
        .then(res => {
          let { code, data, message } = res.data;

          if (code == 200) {
            this.tableData = data.list;
            this.pageTotal = parseInt(data.total);
          } else {
            this.$message.error(message);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    getbrandInfo(){
      let { brandId } = _getStorage('info');
      this.$axios.get('/index/brandInfo/'+brandId).then(res=>{
        let {code,data} =res.data;
          if(code ==200){
              this.brandInfo = data;
          }
      })
    },
    addCouponFun(type) {
      if(this.brandInfo.brandType !=1){
        this.gotoVip();
      }else{
        this.$router.push({
        path: "/marketing/addcoupon",
        query: { typeVal: type }
      });
      }
    },
    gotoVip(){
       const h = this.$createElement;
          this.$msgbox({
            message: h('p', { style: 'padding:40px 0' }, [
              h('span', null, "您当前不是铂金品牌，无法进行当前操作，请前往升级" ),
            ]),
            showCancelButton: true,
            center:true,
            confirmButtonText: '前往升级',
            cancelButtonText: '我知道了',
            showConfirmButton:false, //先隐藏掉升级按钮
          }).then(action => {
              this.$router.push('/vippay');
          }).catch(() => {
          });
    },
    handleSizeChange(e) {
      var that = this;
      that.pageSize = e;
      that.getList();
    },
    handleCurrentChange(e) {
      var that = this;
      that.pageNum = e;
      that.getList();
    },
    handleSearch(e) {
      var that = this;
      that.actType = that.couponTypeSelected;
      that.actStatus = that.couponStateSelected;
      that.pageNum = 1;
      that.getList();
    },
    handleRest(e) {
      this.couponTypeSelected = -1;
      this.couponStateSelected = -1;
      this.actType = this.couponTypeSelected;
      this.actStatus = this.couponStateSelected;
      this.pageNum = 1;
      this.getList();
    },
    handleEditCoupon(id, type) {
      // if (type == 3) {
      //   // window.location.href = "/Set/CouponTypeBrand.aspx?actId=" + id;
      //   // this.$router.push({
      //   //   path:"/marketing/addcoupon",
      //   //   query:{actId:id}
      //   // })
      //   this.$message.error('检查类型是否正确')
      // } else {

      this.$router.push({
        path: "/marketing/addcoupon",
        query: { actId: id }
      });

      // }
    },
    handleActCoupon(id) {
      this.$confirm("是否发放优惠券?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .put("/coupons/grant", { actId: id })
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message);
                this.getList();
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {});
    },
    handleDelCoupon(id) {
      this.$confirm("是否删除优惠券?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .delete("/coupons/delete", {
              params: {
                actId: id
              }
            })
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message);
                this.pageNum = 1;
                this.getList();
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {});
    },
    handleEndCoupon(id) {
      this.$confirm(
        "禁用后买家将无法继续领取，已领取的优惠券将无法使用，是否禁用？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$axios
            .put("/coupons/forbiddenCoupon", { actId: id })
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message);
                this.getList();
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {});
    },
    handleUpdateCoupon(id, num) {
      this.$prompt("请输入数字", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\d/,
        inputErrorMessage: "请输入数字",
        inputValue: num
      })
        .then(({ value }) => {
          this.$axios
            .put("/coupons/putTotal", { actId: id, totalNum: value })
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message);
                this.getList();
              } else {
                this.$message.warning(res.data.message);
              }
            })
            .catch(res => {
              console.log(res);
            });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getList();
    this.getbrandInfo();
  },
  components: {
    // 传入组件
  }
};
</script>

<style lang="scss" scoped>
>>> .el-button--text {
  color: #709cf5;
}
.tit {
  // padding: 10px 10px 0 10px;
  font-size: 16px;
  color: #6b6b6b;
}
.tit:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background: #ff6800;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 5px;
}
.entry > div {
  position: relative;
  padding: 2%;
}
.entry > div div {
  cursor: pointer;
}
.entry img {
  max-height: 100%;
  max-width: 100%;
}
.entry > div span {
  position: absolute;
  left: 18%;
  bottom: 23.5%;
}
.entry > div div:hover span {
  text-decoration: underline;
}
.entry .type-1 a {
  color: #ff39ef;
}
.entry .type-2 a {
  color: #ff5400;
}
.entry .type-3 a {
  color: #21b5ff;
}
.box {
  padding: 15px;
}
.box .search {
  font-size: 14px;
  margin-right: 40px;
}
.box .el-select {
  width: auto;
}
.page {
  margin-top: 15px;
  text-align: center;
}
.selected {
  background: transparent;
}
</style>
