<template>

  <div>
    <div>
     <el-form
        :model="queryForm"
        ref="queryForm"
        :inline="true"
        label-width="88px"
      >
       <el-form-item label="优惠券标识" prop="couponRemark">
        <el-input
          v-model="queryForm.couponRemark"
          placeholder="请输入标识"
          clearable
          size="small"
          
        />
       </el-form-item>
      <el-form-item label="优惠券类型" prop="couponType">
        <el-select
          v-model="queryForm.couponType"
          clearable
          placeholder="请选择"
        >
          <el-option label="现金卷" value="1" ></el-option>
          <el-option label="折扣卷" value="2" ></el-option>
          <el-option label="兑换卷" value="3" ></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="优惠券名称" prop="couponName">
        <el-input
          v-model="queryForm.couponName"
          placeholder="请输入名称"
          clearable
          size="small"
          
        />
       </el-form-item>
        <el-form-item label="创建时间" prop="getCreateTime">
        <el-date-picker
          style="width: 350px"
          v-model="dateRangeCreatedDate"
          size="mini"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="生效状态" prop="status">
        <el-select
          v-model="queryForm.status"
          clearable
          placeholder="请选择"
        >
          <el-option label="开启" value="1" ></el-option>
          <el-option label="关闭" value="0" ></el-option>
         
        </el-select>
      </el-form-item>
        <el-form-item>
    
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            type="info"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
         
          
        </el-form-item>
      </el-form>
      <el-table :data="couponList">
        <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="状态" align="left">
          <template slot-scope="scope">
                  {{ scope.row.status == "1" ? "启用状态" : "" }}
                  {{ scope.row.status == "0" ? "停用状态" : "" }}
                </template>
        </af-table-column>
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column
          label="优惠券说明"
          align="left"
          prop="couponDetails"
        />
        <af-table-column label="使用门槛" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? scope.row.couponThresholdAmt == 0
                  ? "无门槛"
                  : "满" + scope.row.couponThresholdAmt + "元可用"
                : ""
            }}
            {{ scope.row.couponType == 3 ? "------------" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="适用" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? "适用油品：" + (scope.row.oilNameList || []).toString()
                : ""
            }}
            {{ scope.row.couponType == 3 ? "核销机构："+ (scope.row.verificationNameList || []).toString() : ""   }}
          </template>
        </af-table-column>
         <af-table-column label="油站ID" align="center" prop="id" />
        <af-table-column label="使用状态" align="left">
          <template slot-scope="scope">
            {{
              "共生成了" +
              scope.row.couponNum +
              "张，已领取" +
              scope.row.couponCumulativeNum +
              "张，已使用" +
              scope.row.couponUseNum +
              "张"
            }}
          </template>
        </af-table-column>

        <af-table-column label="有效期内使用限制" align="left">
          <template slot-scope="scope">
            {{
              (scope.row.effectiveTimeType == 1
                ? scope.row.effectiveTime[0] + "到" + scope.row.effectiveTime[1]
                : "用户领取" + scope.row.effectiveDayNum + "天内有效") +
              "内有效"
            }}
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column>

        <af-table-column label="领取限制" align="left">
          <template slot-scope="scope">
            {{
              "单用户最多持有" +
              scope.row.couponHoldNum +
              "张，累计可拥有" +
              scope.row.couponReceiveNum +
              "张"
            }}
          </template>
        </af-table-column>

        <af-table-column label="优惠叠加" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? ["不", ""][scope.row.isCardFlag] +
                  "可用电子卡，" +
                  ["不", ""][scope.row.isGradeFlag] +
                  "可用等级优惠，" +
                  ["不", ""][scope.row.isMarketFlag] +
                  "可用优惠方案"
                : ""
            }}
            {{ scope.row.couponType == 3 ? "------------" : "" }}
          </template>
        </af-table-column>

        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="120px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-search"
              @click="handlequeryCouponUserList(scope.row.id)"
              v-if="scope.row.editFlag"
              >查看优惠券</el-button
            >
          </template>
        </af-table-column>
      </el-table>
      <pagination
        :hidden="total > 0 ? false : true"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getCoupon"
        :autoScroll="true"
      />
    </div>
 

    <!-- 添加或修改油站设备管理对话框 -->

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      status-icon
    >
      <el-table :data="couponUserList">
      <af-table-column
        v-if="false"
        label="优惠券id"
        align="center"
        prop="id"
      />
      <af-table-column label="用户ID" align="center" prop="unionId" v-if="false" />
      <af-table-column label="油站ID" align="center" prop="stationId" v-if="false" />
      <af-table-column label="发放方式ID" align="center" prop="issueId" v-if="false" />
      <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
       <af-table-column label="活动名称" align="left" prop="issueName" />
      
      <af-table-column label="优惠券ID" align="center" prop="couponId"  v-if="false"/>
      <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
      <af-table-column label="是否使用" 
      align="center"
       >
           <template slot-scope="scope">
            {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
            {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
            {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
          </template>
      </af-table-column>
      <af-table-column label="是否有效"
       align="center"
      >
       <template slot-scope="scope">
            {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
            {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
          </template>
      </af-table-column>
      <af-table-column label="用户保存id" align="center" prop="userId" v-if="false" />
      <af-table-column label="手机号" align="center" prop="mobilePhone" />
      <af-table-column label="用户名" align="center" prop="blogNickName" />
      <af-table-column label="核销员手机号" align="center" prop="verificationUserPhone" />
      <af-table-column label="优惠券获取时间" align="center" prop="getCouponTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.getCouponTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      <af-table-column label="优惠券截止时间" align="center" prop="couponEffectiveTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      
    </el-table>
    <pagination
      v-show="userTotal > 0"
      :total="userTotal"
      :page.sync="queryCouponUserFrom.pageNum"
      :limit.sync="queryCouponUserFrom.pageSize"
      @pagination="queryCouponUserListByPage"
    />
    </el-dialog>
  </div>
</template>

<script>

import {
  addInfo,
  listInfo,
  updateInfo,
  queryCouponUserList,
} from "@/api/coupon";

export default {
  name: "",
  data() {
    return {
        //创建优惠券的时间
      dateRangeCreatedDate: [],
      couponEnabledFlag: "1",
      pageStatus: 4,
      // 油站设备管理表格数据
      createForm: {
        couponRemark: "",
        couponName: "",
        couponDetails: "",
        couponThresholdAmt: 0,
        couponType: "1",
        couponAmt: "",
        oilNameList: [],
        effectiveTimeType: "", //有效时间类型： 1，固定时间；2，领取后x天内有效
        effectiveTime: [],
        effectiveDayNum: 30,
        couponHoldNum: 1,
        couponReceiveNum: 100,
        couponNum: 100,
        status: "1",
        verificationList: [],
        isCardFlag: "1",
        isGradeFlag: "1",
        isMarketFlag: "1",
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
      },
      couponList: [],
      day: [],
      cycle: [],

      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      // 优惠券总条数
      userTotal: 100,
      // 优惠券的信息
      couponUserList: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
        couponName:null,
        couponRemark:null,
        couponType:null,
        levelId:this.levelId,
        couponRemark:null,
        status:null,
        getCreateTime:null
      },
       queryCouponUserFrom:{
        levelId:this.levelId,
        issueId:null,
        couponId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,

      },
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号",
        ],
      ],
    };
  },
  created() {
    this.init();
  },
  computed: {
  },
  methods: {
    translateTime(row) {
      let timeString = "";
      const availableControleType = row.availableControl;
      if (availableControleType == 0) {
        return "，有效期内一直都可以领取";
      }
      timeString = "，且用户只能在";
      if (availableControleType == 1) {
        timeString += "每周的";
      }
      if (availableControleType == 2) {
        timeString += "每月的";
      }
      if (availableControleType == 3) {
        timeString += "指定的日期 ";
      }
      if (availableControleType == 1 || availableControleType == 2) {
        row.cycleDaysList.forEach((ele) => {
          timeString += this.timeSelect[availableControleType][ele] + "、";
        });
      } else if (availableControleType == 3) {
        timeString += row.appointedDaysList.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + "可以使用劵";
      return timeString;
    },
    getCoupon() {
      listInfo(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.couponList = [];
            } else {
              this.total = res.total;
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
     /** 查看优惠券信息 */
    handlequeryCouponUserList(row) {
      this.queryCouponUserFrom.couponId=row;
    
     queryCouponUserList(
       this.queryCouponUserFrom
      ).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
      
    },
      /** 查看优惠券信息 */
    queryCouponUserListByPage() {    
     queryCouponUserList(
       this.queryCouponUserFrom
      ).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
      
    },
    init() {
      this.getCoupon();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },
     /** 查询优惠券模板信息*/
    getList() {
       listInfo(this.addDateRange(this.queryForm, this.dateRangeCreatedDate))
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.couponList = [];
            } else {
              this.total = res.total;
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate=[];
      this.resetForm("queryForm");
      this.handleQuery();
    }
  },
};
</script>
<style lang="scss">
</style>