<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!-- <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px" placeholder="请输入卡券包名称"/> -->
      <!-- <el-input v-model="listQuery.pkCode" clearable class="filter-item" style="width: 200px" placeholder="请输入兑换码"/> -->
      <el-select v-model="listQuery.channel" clearable style="width: 200px" class="filter-item" placeholder="请选择渠道">
        <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <!-- <el-select v-model="listQuery.isExchange" clearable style="width: 200px" class="filter-item" placeholder="是否已兑换">
        <el-option label="是" :value="true" />
        <el-option label="否" :value="false" />
      </el-select> -->
      <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="生成开始日期" end-placeholder="生成结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" />

      <el-button v-permission="['GET /admin/couponpackage/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button v-permission="['POST /admin/couponpackage/create']" class="filter-item" type="primary" icon="el-icon-edit" @click="clickaddpk">添加券包</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="pkSn" sortable />

      <el-table-column align="center" label="卡券包名称" prop="pkName" />

      <el-table-column align="center" label="卡券包金额" prop="pkMoney" />

      <el-table-column align="center" label="含券份数" prop="pkNumber" />
      <el-table-column align="center" label="所属渠道" prop="channel">
        <template slot-scope="scope">
          <span>{{ scope.row.channel | channelsFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间" prop="createTime" />

      <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['GET /admin/couponpackage/read']" icon="el-icon-view" type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
          <!-- <el-button v-permission="['POST /admin/coupon/update']" type="info" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> -->
          <el-button v-permission="['POST /admin/couponpackage/delete']" type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :visible.sync="showInfo" title="详情" width="1000px" center>
      <el-table :data="infoData" border style="height:600px;overflow: auto;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.couponList" border>
              <el-table-column align="center" label="优惠券名称" prop="name" />

              <!-- <el-table-column align="center" label="介绍" prop="desc" />

        <el-table-column align="center" label="标签" prop="tag" /> -->

              <el-table-column align="center" label="最低消费" prop="min">
                <template slot-scope="scope">满{{ scope.row.min }}元可用</template>
              </el-table-column>

              <el-table-column align="center" label="满减金额" prop="discount">
                <template slot-scope="scope">
                  <span v-if="scope.row.voucherType == 1">减免{{ scope.row.discount }}元</span>
                  <span v-if="scope.row.voucherType == 2">折扣率{{ scope.row.discount }}%</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="每人限领" prop="limit">
                <template slot-scope="scope">{{
                  scope.row.limit != 0 ? scope.row.limit : "不限"
                }}</template>
              </el-table-column>

              <el-table-column align="center" label="商品使用范围" prop="goodsType">
                <template slot-scope="scope">{{
                  scope.row.goodsType | formatGoodsType
                }}</template>
              </el-table-column>

              <el-table-column align="center" label="优惠券类型" prop="type">
                <template>兑换券
                </template>
              </el-table-column>

              <el-table-column align="center" label="状态" prop="status">
                <template slot-scope="scope">{{
                  scope.row.status | formatStatus
                }}</template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" @click="toCouponDetail(scope.row)">更多信息</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column align="center" label="卡券包兑换码" prop="pkCode" />

        <el-table-column align="center" label="是否已兑换" prop="isExchange">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isExchange == 0 ? 'success' : 'warning'">
              <span v-if="scope.row.isExchange == 0">否</span>
              <span v-if="scope.row.isExchange == 1">是</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="有效时间" prop="startTime">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime | formatTime }}到{{
                scope.row.endTime | formatTime
              }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="兑换时间" prop="endTime" /> -->
        <el-table-column align="center" label="兑换时间" prop="exchangeTime" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showInfo = false">取消</el-button>
        <el-button v-permission="['POST /admin/couponpackage/export']" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="isShowAddDialogPk" title="添加卡券包" width="1100px" :show-close="false" :close-on-click-modal="false" center>
      <el-form ref="pkForm" :model="pkForm" :rules="pkFormRules" status-icon label-position="left" label-width="120px">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="卡券包名称" prop="pkName">
              <el-input v-model="pkForm.pkName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡券包金额" prop="pkMoney">
              <el-input v-model.number="pkForm.pkMoney" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="卡券包数量" prop="allPkNumber">
              <el-input v-model.number="pkForm.allPkNumber" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-right:0px">
            <el-form-item label="所属渠道" prop="channel">
              <el-select v-model="pkForm.channel" clearable class="filter-item" placeholder="渠道">
                <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" style="width: 100%" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left:10px">
            <el-form-item label="所属引荐人" prop="refereeId" label-width="100px">
              <el-select v-model="pkForm.refereeId" clearable class="filter-item" filterable="" placeholder="请选择引荐人">
                <el-option v-for="item in referees" :key="item.refereeId" :label="item.refereeName" :value="item.refereeId" style="width: 100%" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label-width="150px" label="卡券包有效期-开始" prop="startTime">
              <el-date-picker :picker-options="pickerOptions" v-model="pkForm.startTime" type="datetime" placeholder="选择开始日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="150px" label="卡券包有效期-结束" prop="endTime">
              <el-date-picker :picker-options="pickerOptions" v-model="pkForm.endTime" type="datetime" placeholder="选择结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <fieldset style="border-color: #d1c7b7; background: #fffef9">
          <legend style="color: #1890ff">优惠券分类</legend>
          <el-row :gutter="60">
            <el-col :span="12">
              <el-form-item label="优惠券名称" prop="coupondata.name">
                <el-input v-model="pkForm.coupondata.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优惠券介绍" prop="coupondata.desc">
                <el-input v-model="pkForm.coupondata.desc" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="60">
            <el-col :span="12">
              <el-form-item label="标签" prop="coupondata.tag">
                <el-input v-model="pkForm.coupondata.tag" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最低消费" prop="coupondata.min">
                <el-input v-model.number="pkForm.coupondata.min">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="60">
            <el-col :span="12">
              <el-form-item label="抵用类型" prop="coupondata.voucherType">
                <el-select v-model="pkForm.coupondata.voucherType" style="width: 100%">
                  <el-option v-for="type in voucherTypeData" :key="type.value" :label="type.label" :value="type.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="满减金额或折扣" prop="coupondata.discount">
                <el-input v-model.number="pkForm.coupondata.discount">
                  <template slot="append">元（折扣率1-100%）</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="60">
            <el-col :span="12">
              <el-form-item label="商品限制范围">
                <el-radio-group v-model="pkForm.coupondata.goodsType" @change="chooseGOodsType" prop="coupondata.goodsType">
                  <el-radio-button :label="0">全场通用</el-radio-button>
                  <el-radio-button :label="1">指定分类</el-radio-button>
                  <el-radio-button :label="2">指定商品</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-show="pkForm.coupondata.goodsType === 1" label="选择商品分类">
                <el-cascader ref="mycascader" :options="categoryList" expand-trigger="hover" style="width: 300px" clearable @change="handleTypeChange" />
              </el-form-item>
              <el-form-item v-show="pkForm.coupondata.goodsType === 2" label="选择商品">
                <el-cascader ref="mycascader2" :options="goodsList" expand-trigger="hover" style="width: 300px" clearable @change="handleTypeChange2" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <center>
              <el-button style="background: #42b983" type="primary" @click="tempadd('pkForm')">暂存</el-button>
            </center>
          </el-row>
          <el-row>
            <el-table :data="couponList" border>
              <el-table-column align="center" label="优惠券名称" prop="name" />
              <el-table-column align="center" label="优惠券介绍" prop="desc" />
              <el-table-column align="center" label="最低消费" prop="min" />
              <el-table-column align="center" label="满减金额或折扣" prop="discount">
                <template slot-scope="scope">
                  <span v-if="scope.row.voucherType == 1">减免{{ scope.row.discount }}元</span>
                  <span v-if="scope.row.voucherType == 2">折扣率{{ scope.row.discount }}%</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品范围限制" prop="goodsType">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.goodsType | formatGoodsType }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="所限商品、类型" prop="goodsStr">
              </el-table-column>

              <!-- <el-table-column align="center" label="优惠券数量" prop="total" /> -->
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" @click="tempCopy(scope.row)">复制数据</el-button>
                  <el-button type="danger" size="mini" @click="tempdelete(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </fieldset>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPackage">取消</el-button>
        <el-button type="primary" @click="savePackage">全部保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPackage,
  createPackage,
  readPackage,
  deletepackage,
  exportCoupon,
} from "@/api/couponpackage";
import { listRoots } from "@/api/referee";
import { allChannel } from "@/api/channel";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { listGoods3 } from "@/api/goods";
import formatDate from "@/utils/date";
let vm;
const voucherTypeData = [
  {
    label: "立减券",
    value: 1,
  },
  {
    label: "折扣券",
    value: 2,
  },
];

const defaultStatusOptions = [
  {
    label: "正常",
    value: 0,
  },
  {
    label: "已过期",
    value: 1,
  },
  {
    label: "已下架",
    value: 2,
  },
];

export default {
  name: "Coupon",
  components: { Pagination },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e6;
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      referees: [],
      showInfo: false,
      isExchange: null,
      curPkSn: null, //当前浏览的sn号码 导出时候 使用
      infoData: [],
      couponList: [], //要提交的券类信息
      pkForm: {
        pkName: undefined,
        pkMoney: undefined,
        allPkNumber: 0,
        channel: undefined,
        startTime: null,
        endTime: null,

        coupondata: {
          type: 2, //兑换券
          goodsType: "", //商品限制范围
          goodsValue: [], //商品限制范围

          name: undefined,
          desc: undefined,
          tag: "卡券包",
          min: 0,
          discount: 0,
          limit: 0,
          voucherType: 1, //默认1立减券
          total: 1,
          goodsType: 0,
          timeType: 1,
          goodsStr: "", //选择的商品或分类中文
          // status: 0,
          // days: 0,
          // goodsId: null, // 指定商品控件 绑定值
          // goodsCate: null, // 指定分类
        },
      },
      pkFormRules: {
        pkName: [
          {
            required: true,
            message: "卡券包名称不能为空",
            trigger: "blur",
          },
        ],
        pkMoney: [
          {
            required: true,
            message: "卡券包金额不能为空",
            trigger: "blur",
          },
          { type: "number", message: "必须为数字值" },
        ],
        allPkNumber: [
          {
            required: true,
            message: "卡券包数量不能为空",
            trigger: "blur",
          },
          { type: "number", message: "必须为数字值" },
        ],
        channel: [
          {
            required: true,
            message: "请选择渠道",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: true,
            message: "有效期开始时间不能为空",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "有效期结束不能为空",
            trigger: "blur",
          },
        ],
        "coupondata.name": [
          {
            required: true,
            message: "优惠券名称不能为空",
            trigger: "blur",
          },
        ],
        "coupondata.desc": [
          {
            required: true,
            message: "优惠券介绍不能为空",
            trigger: "blur",
          },
        ],
        // tag: [
        //     {
        //         required: true,
        //         message: "标签名称不能为空",
        //         trigger: "blur",
        //     },
        // ],
        min: [
          { type: "number", message: "必须为数字值" },
          // {
          //     required: true,
          //     message: "最低消费不能为空",
          //     trigger: "blur",
          // },
        ],
        discount: [
          {
            required: true,
            message: "满减或折扣不能为空",
            trigger: "blur",
          },
          { type: "number", message: "必须为数字值" },
        ],
        // limit: [
        //     {
        //         required: true,
        //         message: "每人限领不能为空",
        //         trigger: "blur",
        //     },
        // ],
        "coupondata.total": [
          {
            required: true,
            message: "优惠券数量不能为空",
            trigger: "blur",
          },
          { type: "number", message: "必须为数字值" },
        ],
        "coupondata.goodsType": [
          {
            required: true,
            message: "请选择商品限制范围",
            trigger: "blur",
          },
        ],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      isShowAddDialogPk: false,
      voucherTypeData: voucherTypeData,
      statusOptions: Object.assign({}, defaultStatusOptions),
      list: [],
      goodsList: [], // 三级商品
      categoryList: [], // 商品分类
      channels: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        timeArray: [],
        name: undefined,
        channel: undefined,
        pkCode: undefined,
        sort: "create_time",
        order: "desc",
      },
    };
  },
  created() {
    this.getList();
    allChannel().then((res) => {
      this.channels = res.data.data;
    });
  },
  methods: {
    chooseGOodsType(e) {
      console.log(e);
      this.pkForm.coupondata.goodsStr = "";
      this.pkForm.coupondata.goodsValue = [];
    },
    toCouponDetail(row) {
      this.$router.push({
        path: "/promotion/couponDetail",
        query: { id: row.id },
      });
    },
    handleDetail(row) {
      this.curPkSn = row.pkSn;
      // readPackage({ pkSn: row.pkSn }).then((res) => {
      //   this.infoData = res.data.data;
      //   this.showInfo = true;
      // });
      this.$router.push({
        path: "/promotion/couponPackageDetail",
        query: { pkSn: row.pkSn },
      });
    },
    handleExport() {
      this.listLoading = true;
      exportCoupon({ pkSn: this.curPkSn }).then((response) => {
        this.listLoading = false;
        let blob = new Blob([response.data], {
          type: "application/vnd.ms-excel",
        });
        console.log(blob);
        let fileName = Date.parse(new Date()) + ".xlsx";
        if (window.navigator.msSaveOrOpenBlob) {
          console.log(2);
          navigator.msSaveBlob(blob, fileName);
        } else {
          console.log(3);
          var link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          //释放内存
          window.URL.revokeObjectURL(link.href);
        }
      });
    },
    cancelPackage() {
      //取消保存
      this.$confirm("所填信息未保存，确认取消关闭?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.isShowAddDialogPk = false;
      });
    },
    savePackage() {
      //保存包
      if (this.pkForm.pkName == "" || this.pkForm.pkName == null) {
        this.$message.error("卡券包名称不能为空");
        return false;
      }
      if (this.pkForm.pkMoney == "" || this.pkForm.pkMoney == null) {
        this.$message.error("卡券包金额不能为空");
        return false;
      }
      if (this.pkForm.channel == "" || this.pkForm.channel == null) {
        this.$message.error("所属渠道不能为空");
        return false;
      }
      if (this.pkForm.startTime > this.pkForm.endTime) {
        this.$message.error("卡券包有效开始时间不能大于结束时间");
        return false;
      }
      if (this.pkForm.allPkNumber < 1) {
        this.$message.error("卡券包数量必须大于0");
        return false;
      }
      if (this.couponList.length == 0) {
        this.$message.error("请录入优惠券分类");
        return false;
      }

      let couponPackage = {
        pkName: this.pkForm.pkName,
        pkMoney: this.pkForm.pkMoney,
        allPkNumber: this.pkForm.allPkNumber,
        channel: this.pkForm.channel,
        startTime: this.pkForm.startTime,
        endTime: this.pkForm.endTime,
        couponList: this.couponList, //子优惠券
      };

      const loading = this.$loading({
        lock: true,
        text: "正在保存数据，请稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
      createPackage(couponPackage)
        .then((res) => {
          loading.close();
          if (res.data.errno == 0) {
            this.getList();
            this.$notify.success({
              title: "成功",
              message: "创建卡券包成功",
            });
            this.isShowAddDialogPk = false;
          } else {
            this.$message.error("创建卡券包失败");
          }
        })
        .catch((response) => {
          loading.close();
          this.$notify.error({
            title: "操作失败",
            message: response.data.errmsg,
          });
        });
    },
    clickaddpk() {
      //点击添加卡券包
      this.isShowAddDialogPk = true;
      //清空数据
      this.clearForm();
      //获取所有引荐人
      this.getReferee();
    },
    clearForm() {
      this.couponList = [];
      this.pkForm = {
        pkName: undefined,
        pkMoney: undefined,
        allPkNumber: 0,
        channel: undefined,
        startTime: null,
        endTime: null,

        coupondata: {
          type: 2, //兑换券
          goodsType: "", //商品限制范围
          goodsValue: [], //商品限制范围

          name: undefined,
          desc: undefined,
          tag: "券包",
          min: 0,
          discount: 0,
          limit: 0,
          voucherType: 1, //默认1立减券
          total: 1,
          goodsType: 0,
          timeType: 1,
          goodsStr: "", //选择的商品或分类中文
        },
      };
    },
    tempdelete(index) {
      //删除
      this.couponList.splice(index, 1);
    },
    tempCopy(row) {
      //复制到表单
      var bb = JSON.stringify(row);
      this.pkForm.coupondata = JSON.parse(bb);
    },
    tempadd(form) {
      if (this.pkForm.startTime > this.pkForm.endTime) {
        this.$message.error("卡券包有效开始时间不能大于结束时间");
        return false;
      }
      if (this.pkForm.allPkNumber < 1) {
        this.$message.error("卡券包数量必须大于0");
        return false;
      }

      //暂存
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.pkForm.coupondata.total < 1) {
            this.$message.error("优惠券数量必须大于0");
            return false;
          }
          if (this.pkForm.voucherType == 2) {
            //折扣券
            if (
              this.pkForm.coupondata.discount > 100 ||
              this.pkForm.coupondata.discount < 1
            ) {
              this.$message.error("折扣券，折扣率仅能在1到100之间");
              return false;
            }
          }
          if (
            this.pkForm.coupondata.goodsType == 1 ||
            this.pkForm.coupondata.goodsType == 2
          ) {
            if (this.pkForm.coupondata.goodsValue.length == 0) {
              this.$message.error("请选择限制商品或分类");
              return false;
            }
          }

          this.couponList.push(this.pkForm.coupondata);
          //清空券数据
          this.pkForm.coupondata = {
            type: 2, //兑换券
            goodsType: "", //商品限制范围
            goodsValue: [], //商品限制范围

            name: undefined,
            desc: undefined,
            tag: "券包",
            min: 0,
            discount: 0,
            limit: 0,
            voucherType: 1, //默认1立减券
            total: 1,
            goodsType: 0,
            timeType: 1,
            goodsStr: "", //选择的商品或分类中文
          };
        }
      });
    },

    handleTypeChange(value) {
      //选择商品分类
      this.pkForm.coupondata.goodsValue = []; //只允许一个
      console.log(this.pkForm.coupondata.goodsValue);

      if (value.length > 0) {
        this.pkForm.coupondata.goodsValue.push(value[value.length - 1]);

        let lbarr = this.$refs.mycascader.getCheckedNodes()[0].pathLabels;
        this.pkForm.coupondata.goodsStr = lbarr.join("/");
      } else {
        this.pkForm.coupondata.goodsStr = "";
      }
    },
    handleTypeChange2(value) {
      //选择商品
      this.pkForm.coupondata.goodsValue = []; //只允许一个

      if (value.length > 0) {
        this.pkForm.coupondata.goodsValue.push(value[value.length - 1]);
        console.log(this.pkForm.coupondata.goodsValue);

        let lbarr = this.$refs.mycascader2.getCheckedNodes()[0].pathLabels;
        this.pkForm.coupondata.goodsStr = lbarr.join("/");
      } else {
        this.pkForm.coupondata.goodsStr = "";
      }
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.start = this.listQuery.timeArray[0];
        this.listQuery.end = this.listQuery.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }
      listPackage(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;
        });
      this.handleListGoods();
    },
    getReferee() {
      if (this.referees.length > 0) return;
      listRoots().then((res) => {
        this.referees = res.data.data;
      });
    },
    handleListGoods() {
      listGoods3()
        .then((res) => {
          console.info(res);
          this.goodsList = res.data.data.goodsList;
          this.categoryList = res.data.data.categoryList;
        })
        .catch(() => {});
    },

    handleDelete(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletepackage({pkSn:row.pkSn})
          .then((response) => {
            this.$notify.success({
              title: "成功",
              message: "删除卡券包成功",
            });
            this.handleFilter();
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
      });
    },
  },
  beforeCreate() {
    vm = this;
  },
  filters: {
    channelsFilter(value) {
      const rs = vm.channels.filter((item) => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    },
    formatGoodsType(goodsType) {
      if (goodsType === 0) {
        return "全场通用";
      } else if (goodsType === 1) {
        return "指定分类";
      } else if (goodsType === 2) {
        return "指定商品";
      } else if (goodsType === 3) {
        return "助力活动推荐3人";
      } else {
        return "助力活动推荐5人";
      }
    },
    formatStatus(status) {
      if (status === 0) {
        return "正常";
      } else if (status === 1) {
        return "已过期";
      } else {
        return "已下架";
      }
    },
    formatTime(value) {
      if (value == null) return "";
      return value.substring(0, 10);
    },
  },
};
</script>
<style>
.el-form-item {
  margin-bottom: 18px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
