<template>
  <div class="app-container">

    <div class="table-layout">
      <el-row>
        <el-col :span="4" class="table-cell-title">名称</el-col>
        <el-col :span="4" class="table-cell-title">场景描述</el-col>
        <el-col :span="4" class="table-cell-title">领用须知</el-col>
        <el-col :span="4" class="table-cell-title">发放须知</el-col>
        <el-col :span="4" class="table-cell-title">最低消费</el-col>
        <el-col :span="4" class="table-cell-title">优惠面值</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell">{{ coupon.name }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.sceneDesc }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.receiveDesc }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.sendDesc }}</el-col>
        <el-col :span="4" class="table-cell">满{{ coupon.minPayAmount }}元可用</el-col>
        <el-col :span="4" class="table-cell">
          <span v-if="coupon.validType == 1">立减{{ coupon.discountAmount }}元</span>
          <span v-if="coupon.validType == 2">满减{{ coupon.discountAmount }}元</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell-title">每人限额</el-col>
        <el-col :span="4" class="table-cell-title">当前状态</el-col>
        <el-col :span="4" class="table-cell-title">商品范围</el-col>
        <el-col :span="4" class="table-cell-title">有效期</el-col>
        <el-col :span="4" class="table-cell-title">发行数量</el-col>
        <el-col :span="4" class="table-cell-title">剩余数量</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell">{{ coupon.limit }}</el-col>
        <el-col :span="4" class="table-cell"><el-tag>{{ coupon.status | formatStatus }}</el-tag></el-col>
        <el-col :span="4" class="table-cell" style="line-height:12px">
          {{ coupon.goodsType | formatGoodsType }}
          <span style="color:red;font-size:5px;" v-html="coupon.couponGoodsName"> </span>
        </el-col>
        <el-col :span="4" class="table-cell">{{ getTimeScope() }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.stockNumber }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.remainingNumber }}</el-col>
      </el-row>
    </div>

    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="优惠券领取列表" name="0">
        <!-- 查询操作 -->
        <div class="filter-container">
          <el-input v-model="listQuery.talentId" clearable class="filter-item" style="width: 200px;"
            placeholder="请输入达人号" />
          <el-select v-model="listQuery.couponStatus" clearable style="width: 200px" class="filter-item"
            placeholder="请选择使用状态">
            <el-option v-for="type in useStatusOptions" :key="type.value" :label="type.label" :value="type.value" />
          </el-select>
          <el-button v-permission="['GET /admin/dyCoupon/listuser']" class="filter-item" type="primary"
            icon="el-icon-search" @click="handleFilter">查找</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="用户名称" prop="customer.customerName" />
          <el-table-column align="center" label="优惠券编号" prop="id" />
          <el-table-column align="center" label="兑换码" prop="couponCode" />
          <el-table-column align="center" label="领取时间" prop="createTime" />
          <el-table-column align="center" label="使用状态" prop="couponStatus">
            <template slot-scope="scope">{{ scope.row.couponStatus | formatUseStatus }}</template>
          </el-table-column>
          <el-table-column align="center" label="订单号" prop="orderSn" />
          <el-table-column align="center" label="订单状态" prop="orderStatus">
            <template slot-scope="scope">
              <el-tag>{{ orderStatusFilter(scope.row.order == null ? null : scope.row.order.orderStatus) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="使用时间" prop="usedTime" />
          <el-table-column align="center" label="发送达人" prop="talentId" />
          <el-table-column align="center" label="达人昵称" prop="talentNick" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
          @pagination="getList" />
      </el-tab-pane>
      <el-tab-pane label="优惠券分配列表" name="1">
        <div class="filter-container">
          <el-input v-model="listTalentQuery.talentId" clearable class="filter-item" style="width: 200px;"
            placeholder="请输入达人号" />
          <el-button v-permission="['GET /admin/dyCoupon/listCouponTalent']" class="filter-item" type="primary"
            icon="el-icon-search" @click="handleTalentFilter">查找</el-button>
        </div>
        <el-table v-loading="listLoading" :data="listCouponTalent" element-loading-text="正在查询中。。。" border fit
          highlight-current-row>
          <el-table-column align="center" label="达人" prop="talentId" />
          <el-table-column align="center" label="达人昵称" prop="talentNick" />
          <el-table-column align="center" label="优惠券名称" prop="couponName" />
          <el-table-column align="center" label="优惠券数量" prop="couponNumber" />
          <el-table-column align="center" label="剩余数量" prop="couponRemaining" />
          <el-table-column align="center" label="发券权限" prop="couponStatus">
            <template slot-scope="scope"><el-tag :type="scope.row.status != 1 ? 'warning' : ''">{{ scope.row.status == 1 ?
              '上架' : '下架' }}</el-tag></template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status == 1" type="text" icon="el-icon-bottom" size="mini"
                @click="handleCouponPutOff(scope.row)">下架发券权限</el-button>
              <el-button v-if="scope.row.status == 2" type="text" icon="el-icon-top" size="mini"
                @click="handleCouponPutOn(scope.row)">上架发券权限</el-button>
              <el-button v-if="scope.row.status == 1" type="text" icon="el-icon-plus" size="mini"
                v-permission="['GET /admin/dyCoupon/increaseTalent']"
                @click="handleCouponIncrease(scope.row)">追加优惠券</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="ttotal > 0" :total="ttotal" :page.sync="listTalentQuery.page"
          :limit.sync="listTalentQuery.limit" @pagination="getCouponTalent" />
      </el-tab-pane>
    </el-tabs>

    <!-- 追加单个达人的优惠券库存 -->
    <el-dialog title="追加优惠券库存" :visible.sync="increaseFormVisible" width='600px'>
      <el-form ref="increaseForm" :rules="rules" :model="increaseForm" status-icon label-position="left"
        label-width="150px" style="margin-left:20px;">
        <el-form-item label="追加优惠券数量" prop="increase">
          <el-input v-model="increaseForm.increase" type="number" placeholder="请输入追加的优惠券数量" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="increaseFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCouponIncrease">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { readCoupon, listCouponUser, listCouponTalent, increaseTalentCoupon, talentPutOff, talentPutOn } from "@/api/dyCoupon";
import { defaultDyUseStatusOptions, statusMap } from "@/api/enumUtils";
import { refereeSelfList } from "@/api/referee";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "CouponDetail",
  components: { Pagination },
  filters: {
    formatType(type) {
      for (let i = 0; i < defaultCouponTypeOptions.length; i++) {
        if (type === defaultCouponTypeOptions[i].value) {
          return defaultCouponTypeOptions[i].label;
        }
      }
      return "";
    },
    formatGoodsType(goodsType) {
      if (goodsType === 0) {
        return "全场通用";
      } else if (goodsType === 1) {
        return "指定分类";
      } else {
        return "指定商品";
      }
    },
    formatStatus(status) {
      if (status === 0) {
        return "审核中";
      } else if (status === 1) {
        return "正常";
      } else if (status === 2) {
        return "过期";
      } else if (status === 3) {
        return "已下架";
      } else {
        return "审核失败";
      }
    },
    formatUseStatus(status) {
      if (status === 10) {
        return "已领取";
      } else if (status === 11) {
        return "已核销";
      } else if (status === 12) {
        return "已过期";
      } else if (status === 13) {
        return "已下架";
      }else if (status === 14) {
        return "已使用";
      }
      return '';
    },
  },
  data() {
    return {
      useStatusOptions: Object.assign({}, defaultDyUseStatusOptions),
      coupon: {},
      list: [],
      total: 0,
      activeTab: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        couponId: 0,
        talentId: undefined,
        couponNo: undefined,
        sort: "create_time",
        order: "desc",
      },
      statusMap: statusMap,
      listCouponTalent: [],
      ttotal: 0,
      listTalentQuery: {
        page: 1,
        limit: 20,
        couponId: 0,
        talentId: undefined,
        sort: "create_time",
        order: "desc",
      },
      increaseForm: {
        talentId: '',
        increase: ''
      },
      increaseFormVisible: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init: function () {
      if (this.$route.query.id == null) {
        return;
      }
      readCoupon(this.$route.query.id).then((response) => {
        this.coupon = response.data.data;
      });
      this.listQuery.couponId = this.$route.query.id;
      this.listTalentQuery.couponId = this.$route.query.id;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      listCouponUser(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    getCouponTalent() {
      listCouponTalent(this.listTalentQuery).then(res => {
        this.listCouponTalent = res.data.data.list;
        this.ttotal = res.data.data.total;
        this.listLoading = false;
      })
        .catch(() => {
          this.listCouponTalent = [];
          this.ttotal = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCouponPutOff(row) {
      this.$confirm("确定下架此达人【" + row.talentNick + "】发券权限吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let talent = Object.assign({}, row);
        talent.status = 2;
        talentPutOff(talent).then(res => {
          row.status = 2;
          this.$notify.success({
            title: "成功",
            message: "下架权限成功",
          });
        })
      });

    },
    handleCouponPutOn(row) {//上架达人发送优惠券权限
      this.$confirm("确定上架此达人【" + row.talentNick + "】发券权限吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let talent = Object.assign({}, row);
        talent.status = 1;
        talentPutOn(talent).then(res => {
          row.status = 1;
          this.$notify.success({
            title: "成功",
            message: "上架权限成功",
          });
        })
      });
    },
    handleCouponIncrease(row) {//个人达人库存追加
      this.increaseFormVisible = true;
      this.increaseForm = {
        talentId: row.talentId,
        couponId: row.couponId,
        increase: ''
      }
    },
    saveCouponIncrease() {
      if (this.increaseForm.increase == '' || this.increaseForm.increase < 1) {
        this.$notify.warning({
          title: "提醒",
          message: '请输入正确库存',
        });
      }
      increaseTalentCoupon(this.increaseForm).then(res => {
        this.increaseFormVisible = false;
        this.getCouponTalent();
        this.$notify.success({
          title: "成功",
          message: "下架优惠券成功",
        });
      })

    },
    getTimeScope() {
      if (this.coupon.timeType === 0) {
        return "领取" + this.coupon.days + "天有效";
      } else if (this.coupon.timeType === 1) {
        return (
          "自" + this.coupon.startTime + "至" + this.coupon.endTime + "有效"
        );
      } else {
        return "未知";
      }
    },
    orderStatusFilter(status) {
      if (status == null) return "";
      return statusMap[status];
    },
    handleTabClick() {
      if (this.activeTab == 0 && this.list.length == 0)
        this.handleFilter();
      else if (this.activeTab == 1 && this.listCouponTalent.length == 0)
        this.getCouponTalent();
    },
    handleTalentFilter() {
      this.listCouponTalent.page = 1;
      this.getCouponTalent();
    }
  },
};
</script>
<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
