<template>
    <div>
      <div style="display: flex;margin-bottom: 10px;">
            <div  v-for="item in typelist" style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
              <div style="font-size: 14px;color: #a8abb2;">{{item.type}}</div>
              <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{item.num}}</div>
            </div>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="渠道领用" name="first">渠道领用</el-tab-pane>
            <el-tab-pane label="用户领取" name="second">用户领取</el-tab-pane>
            <el-tab-pane label="用户使用" name="third">用户使用</el-tab-pane>
            <el-tab-pane label="商家补贴" name="fourth">商家补贴</el-tab-pane>
          </el-tabs>
            <!-- 搜索 -->
          <div class="formSearch">
            <!-- 搜索条件 -->
            <el-form :inline="true" :model="query" class="demo-form-inline">
              <el-form-item label="名称">
                <el-input v-model="query.couponName" placeholder="请输入名称" />
              </el-form-item>
            </el-form>
            <div>
              <el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
              <el-button  class="buttonHover"
                  style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="clear">重置</el-button>
            </div>
          </div>
          <!-- 表格 -->
          <div class="tableBox">
            <el-table
              ref="multipleTable"
              :data="tableData"
            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#f5f8f9'}"
              tooltip-effect="light"
            >
              <el-table-column label="编号" >
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column label="优惠券名称" >
                <template slot-scope="scope">{{ scope.row.couponName }}</template>
              </el-table-column>
              <el-table-column label="类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.couponType == '1'">满减券</span>
                  <span v-else-if="scope.row.couponType == '2'">折扣券</span>
                </template>
              </el-table-column>
              <el-table-column label="优惠内容">
                <template slot-scope="scope">
                  <span v-if="scope.row.couponType == '1'">满{{ scope.row.maxDiscountAmount }}减{{ scope.row.discountContent }}</span>
                  <span v-else-if="scope.row.couponType == '2'">{{ scope.row.discountContent }}折 最高减{{ scope.row.maxDiscountAmount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <div class="btnList">
                    <div class="tableBtn greens" @click="xq(scope.row)">查看详情</div>
                    <!-- <div class="tableBtn greens"  @click="addcoupon(scope.row)">生成优惠券</div> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: space-between;margin: 20px 0;">
              <div style="font-size: 14px;">共  <span style="color: #3F9B6A;">{{total}}</span>  项数据</div>
              <el-pagination
                :current-page="query.pageNumber"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                background
                small
                layout="prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
              </el-pagination>
            </div>
          </div>
     
    </div>
  </template>

  <script>
  import { myCoupons,couponStatistics}from '@/api/couponmanagement/couponlist.js'
  import router from '@/router';
  import coupon from './coupon.vue';

  export default {

    components:{
      coupon
    },
    data () {
      return {
       activeName: 'second',
        typelist:[
          {
            num:100,
            type:'渠道领用',
            color:'#ff5e5e'
          },
          {
            num:100,
            type:'用户领取',
            color:'#ff883a'
          },
          {
            num:100,
            type:'用户使用',
            color:'#ffc461'
          },
          {
            num:100,
            type:'商家补贴',
            color:'#a467f0'
          },
        ],
        query: {
          activityName: '', // 活动名称
          // 活动状态 0-报名未开始 1-报名进行中 2-活动待开始 3-活动进行中 4-活动已结束
          state: '',
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        tableData: [],
      }
    },
    created () {
      // this.getAll()
    },
    methods: {
      int(e) {
        this.fundPoolId = e
        couponStatistics({id:this.fundPoolId}).then(res=>{
          console.error(res)
        })
        // this.clear()
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      xq(e) {
        // 跳转路由
        // router.push({
        //   path: '/other/coupon',
        //   query: {
        //     id: e.id
        //   }
        // })
        console.error(e.id)
        // this.$emit('changecapitalpoolid',e.id)
      },
      async getAll () {
        const res = await myCoupons(this.query)
        console.error(res.data.content)
        this.tableData = res.data.content
        this.total = res.data.numberOfElements
      },
      handleSizeChange (val) {
        this.query.pageSize = val
        this.getAll()
      },
      handleCurrentChange (val) {
        this.query.pageNumber = val
        this.getAll()
      },
      search () {
        this.total = 1
        this.query.pageNumber = 1
        this.getAll()
      },
      // 重置
      clear () {
        this.query = {
          activityName: '',
          state: '',
          pageNumber: 1,
          pageSize: 10
        }
        this.getAll()
      },

    }
  }
  </script>

  <style scoped lang="scss">
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__content {
    display: none;
  }
    ::v-deep .el-tabs__item{
      font-size: 16px;
      font-family: "Alibaba PuHuiTi 2.0-55 Regular";
    }
    ::v-deep .el-dialog__header{
      border-bottom: 2px solid #eee;
      background-color: #fff;
    }
    ::v-deep .el-dialog__title {
      color: #303133;
    }
    .footer{
      font-size: 24px;
      .btn_list {
        display: flex;
        flex-direction: row-reverse;
        span {
          padding: 0;
          margin: 0;
          width: 100px;
          height:32px;
          line-height:32px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          border-radius: 4px;
          box-sizing: border-box;
          &:hover {
            cursor: pointer;
          }
          &:nth-child(1) {
            background: rgba(255, 255, 255, 1);
            order: 1px solid rgba(224, 229, 235, 1);

            border: 1px solid rgba(224, 229, 235, 1);
          }
          &:nth-child(2) {
            background: #3f9b6a;
            color: #fff;
            margin-right: 20px;
          }
        }
      }
    }
  .couponPage{

     padding: 0  20px 20px 20px;
     min-height: calc(100vh - 50px - 20px);
     background-color: #Fff;


    .tableBox{
      text-align: center;
      .fenye{
        // margin: 20px;
      }
    }
  }
  .couponDialogBox {
    max-height: 600px;
    overflow-y: auto;
  }
  .formSearch{

      display: flex;
      width: 100%;
      font-size: 14px;
      justify-content: space-between;
      // padding-bottom: 10px;
      align-items: center;
      margin: 20px 0;

  }
    .tableBtn {
      display: inline-block;
      margin-right: 10px;
    }

  .greens {
      color: #3F9B6A;
    }
    ::v-deep .buttonHover:hover{
      color:#3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }
    ::v-deep .el-pagination__total {
      position: absolute;
      left: 10px;
    }
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
      background-color:#3f9b6a;
    }
  </style>
