<template>
  <div v-if="pageStatus == 0">配置加载中...</div>
  <div v-else-if="pageStatus == 1">此页面不对此账号开放</div>
  <div v-else-if="pageStatus == 2">
    没有此页内容的配置权限，请检查集团上的配置
  </div>
  <div v-else-if="pageStatus == 3">加载发生错误</div>
  <div v-else-if="pageStatus == 4" class="app-container">
    <el-form>
      <el-form-item label="启动优惠劵" label-width="88px">
        <el-switch
          v-model="couponEnabledFlag"
          active-value="1"
          inactive-value="0"
          @change="handleFlagChange()"
        ></el-switch>
      </el-form-item>
      <hr />
    </el-form>
    <div v-if="couponEnabledFlag == 1">
      <el-form
        :model="createForm"
        ref="createForm"
        :inline="true"
        label-width="88px"
      >
        <!--
        <el-form-item label="设备类型" prop="deviceType">
          <el-select
            v-model="createForm.deviceType"
            clearable
            placeholder="请选择"
          >
            <el-option label="小票打印机" value="1"></el-option>
            <el-option label="POS" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="密钥" prop="deviceSerialNum">
          <el-input
            v-model="createForm.deviceSerialNum"
            placeholder="请输入设备密钥"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </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-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</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">
            <el-switch
              v-model="scope.row.status"
              active-value="1"
              inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </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 ? "核销机构：" : "" }}
          </template>
        </af-table-column>

        <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"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              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>
    <div v-else style="text-align: center">
      亲，您的油站暂未启动优惠券功能，呦~
    </div>

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

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      status-icon
    >
      <el-form
        ref="createForm"
        :model="createForm"
        :rules="rules"
        label-width="180px"
      >
        <el-form-item
          label="优惠劵标识(给油站备注)"
          prop="couponRemark"
          :rules="{
            required: true,
            message: '标签不能为空，不需要请删除此项',
            trigger: 'blur',
          }"
        >
          <input
            type="text"
            class="form-control"
            v-model="createForm.couponRemark"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item
          label="优惠券类型"
          prop="couponType"
          :rules="{
            required: true,
            message: '请选择优惠券类型',
            trigger: 'change',
          }"
        >
          <el-radio-group v-model="createForm.couponType">
            <el-radio label="1">现金券</el-radio>
            <el-radio label="2">折扣劵</el-radio>
            <el-radio label="3">兑换劵</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="优惠劵名称(给用户展示)"
          prop="couponName"
          v-if="createForm.couponType == 3"
          :rules="{
            required: createForm.couponType == 3,
            message: '请填写优惠券名称',
            trigger: 'blur',
          }"
        >
          <input
            type="text"
            class="form-control"
            v-model="createForm.couponName"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item
          label="优惠劵说明(给用户展示)"
          prop="couponDetails"
          :rules="{
            required: true,
            message: '请填写优惠券说明',
            trigger: 'blur',
          }"
        >
          <input
            type="text"
            class="form-control"
            v-model="createForm.couponDetails"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item
          label="优惠劵使用条件"
          prop="couponThresholdAmt"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
          :rules="{
            required: createForm.couponType == 1 || createForm.couponType == 2,
            message: '请填写优惠券适用条件',
            trigger: 'blur',
          }"
        >
          <div>
            满
            <input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponThresholdAmt"
              style="width: 100px"
            />
            元 可用
          </div>
        </el-form-item>

        <el-form-item
          label="优惠金额"
          prop="couponAmt"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
          :rules="{
            required: createForm.couponType == 1 || createForm.couponType == 2,
            message: '请填写优惠券适用条件',
            trigger: 'blur',
          }"
        >
          <div v-if="createForm.couponType == 1">
            固定面值—<input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponAmt"
              style="width: 100px"
            />
            元
          </div>
          <div v-if="createForm.couponType == 2">
            折扣比例—<input
              type="text"
              class="form-control d-inline"
              v-model.number="createForm.couponAmt"
              style="width: 100px"
            />
            %
          </div>
        </el-form-item>
        <el-form-item
          label="优惠券适用油品"
          prop="oilNameList"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
        >
          <el-checkbox-group v-model="createForm.oilNameList">
            <el-checkbox
              :label="ele.oilName"
              v-for="ele in oilNameList"
              :key="ele.oilName"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠券有效期" prop="effectiveTimeType">
          <div>
            <div>
              <el-radio-group v-model="createForm.effectiveTimeType">
                <el-radio label="1">固定时间段</el-radio>
                <el-radio label="2">固定天数</el-radio>
              </el-radio-group>
            </div>
            <div style="margin-top: 10px">
              <div v-if="createForm.effectiveTimeType == 1">
                <el-date-picker
                  style="margin: 0px 10px; width: 300px"
                  v-model="createForm.effectiveTime"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
              <div
                v-if="createForm.effectiveTimeType == 2"
                style="margin-left: 20px"
              >
                自用户领取后
                <input
                  type="text"
                  class="form-control d-inline"
                  v-model.number="createForm.effectiveDayNum"
                  style="width: 80px"
                />
                天内有效
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item
          label="生成优惠券的数量"
          prop="couponNum"
          :rules="{
            required: true,
            message: '请填写生成数量',
            trigger: 'blur',
          }"
        >
          共生成
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponNum"
            style="width: 100px"
          />
          张
        </el-form-item>
        <el-form-item
          label="单人可持有数量"
          prop="couponHoldNum"
          :rules="{
            required: true,
            message: '请填写单人可持有的数量',
            trigger: 'blur',
          }"
        >
          单个用户最多持有
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponHoldNum"
            style="width: 100px"
          />
          张优惠券
        </el-form-item>
        <el-form-item
          label="累计可拥有数量"
          prop="couponReceiveNum"
          :rules="{
            required: true,
            message: '请填写单人累计可持有的数量',
            trigger: 'blur',
          }"
        >
          单个用户累计可以拥有
          <input
            type="text"
            class="form-control d-inline"
            v-model.number="createForm.couponReceiveNum"
            style="width: 100px"
          />
          张优惠券
        </el-form-item>

        <el-form-item
          label="用券时可用电子卡"
          prop="isCardFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
          :rules="{
            required: createForm.couponType == 1 || createForm.couponType == 2,
            message: '请选择用劵时是否可用电子卡',
            trigger: 'change',
          }"
        >
          <el-radio-group v-model="createForm.isCardFlag">
            <el-radio label="1">可以使用电子卡</el-radio>
            <el-radio label="0">不可用电子卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用券时叠加等级优惠"
          prop="isGradeFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
          :rules="{
            required: createForm.couponType == 1 || createForm.couponType == 2,
            message: '请选择用劵时是否叠加等级优惠',
            trigger: 'change',
          }"
        >
          <el-radio-group v-model="createForm.isGradeFlag">
            <el-radio label="1">叠加等级优惠</el-radio>
            <el-radio label="0">不叠加等级优惠</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用劵时叠加优惠方案"
          prop="isMarketFlag"
          v-if="createForm.couponType == 1 || createForm.couponType == 2"
          :rules="{
            required: createForm.couponType == 1 || createForm.couponType == 2,
            message: '请选择用劵时叠加优惠方案',
            trigger: 'change',
          }"
        >
          <el-radio-group v-model="createForm.isMarketFlag">
            <el-radio label="1">叠加优惠方案</el-radio>
            <el-radio label="0">不叠加优惠方案</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效期内可用时间控制" prop="availableControl">
          <el-radio-group
            v-model="createForm.availableControl"
            @change="availableControlChange"
          >
            <div>
              <el-radio label="0">有效期内一直都可用</el-radio>
              <el-radio label="1">有效期内每周指定日</el-radio>
              <el-radio label="2">有效期内每月指定日</el-radio>
              <el-radio label="3">有效期内固定指定日</el-radio>
            </div>
            <div style="margin-top: 10px">
              <select-day
                :type="createForm.availableControl"
                :day.sync="createForm.appointedDaysList"
                :cycle.sync="createForm.cycleDaysList"
              ></select-day>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="优惠券的核销方"
          prop="verificationList"
          v-if="createForm.couponType == 3"
        >
          （自己的站点是默认必选的核销商）
        </el-form-item>
        <div v-if="createForm.couponType == 3">
          <el-col :span="11">
            <el-table
              :data="unselectedCouponList"
              border
              size="mini"
              :resizable="false"
              highlight-current-row
              height="500"
              @selection-change="handleLeftChange"
              disabled
              ref="leftTable"
            >
              >
              <el-table-column label="可选">
                <el-table-column
                  prop="phone"
                  label="姓名"
                  type="selection"
                ></el-table-column>
                <el-table-column prop="deptName" label="机构"></el-table-column>
                <el-table-column label="添加" width="60px" align="left">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-circle-plus-outline"
                      class="underline btn24"
                      size="mini"
                      @click="handleMoveLabel('right', scope.row)"
                      >添加</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-button
              type="primary"
              size="mini"
              @click="toggleLabel"
              style="
                margin-top: 200px;
                text-align: center;
                width: 30px;
                padding-right: 0;
                padding-left: 0;
              "
              :disabled="toggleable"
              >切换</el-button
            >
          </el-col>
          <el-col :span="11">
            <el-table
              :data="selectedCouponList"
              border
              size="mini"
              highlight-current-row
              :resizable="false"
              height="500"
              @selection-change="handleRightChange"
              :loading="true"
              ref="rightTable"
            >
              <el-table-column label="已选" :resizable="false">
                <el-table-column
                  prop="phone"
                  type="selection"
                ></el-table-column>
                <el-table-column prop="deptName" label="姓名"></el-table-column>
                <el-table-column label="移除" width="60px" align="left">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-remove-outline"
                      class="underline btn24"
                      size="mini"
                      @click="handleMoveLabel('left', scope.row)"
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPrice } from "@/api/station/price";
import SelectDay from "@/components/SelectDay";

import {
  addInfo,
  verificationList,
  listInfo,
  updateInfo,
  changeCouponStatus,
} from "@/api/coupon";
import { updateDept } from "@/api/system/dept";

export default {
  name: "Station_Equipment",
  data() {
    let validateOilNameList = (rule, value, callback) => {
      console.log(value);
      if (value.length == 0) {
        callback(new Error("请选择优惠券的使用油品"));
        return;
      }
      callback();
    };
    let validateEffectiveTimeType = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填入有效时间"));
        return;
      }
      if (value == 1) {
        if (this.createForm.effectiveTime.length == 0) {
          callback(new Error("请选择有效时间"));
          return;
        }
      }
      if (value == 2) {
        if (!this.createForm.effectiveDayNum) {
          callback(new Error("请填入有效天数"));
          return;
        }
      }
      callback();
    };
    let validateAvailableControl = (rule, value, callback) => {
      if (
        this.createForm.availableControl == 1 ||
        this.createForm.availableControl == 2
      ) {
        if (this.createForm.cycleDaysList.length == 0) {
          callback(new Error("请选择时间"));
          return;
        }
      }
      if (this.createForm.availableControl == 3) {
        if (this.createForm.cycleDaysList.length == 0) {
          callback(new Error("请选择日期"));
          return;
        }
      }
      callback();
    };
    // let validateVerificationList = (rule, value, callback)=>{
    //   if(this.createForm.couponType == 3){
    //     if(this.createForm.validateVerificationList.length == 0){
    //       callback(new Error("请选择核销机构"));
    //       return;
    //     }
    //   }
    //   callback()
    // };
    return {
      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: [],
      oilNameList: [],
      allVerificationList: [],
      day: [],
      cycle: [],

      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      leftQuery: {},
      rightQuery: {},
      leftData: [],
      rightData: [],
      moveRightData: [],
      moveLeftData: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
      },
      // 表单校验
      rules: {
        oilNameList: [
          { required: true, message: "请选择适用油品", trigger: "change" },
          { validator: validateOilNameList, trigger: "change" },
        ],
        effectiveTimeType: [
          { required: true, message: "请输入有效期类型", trigger: "change" },
          { validator: validateEffectiveTimeType, trigger: "change" },
        ],
        availableControl: [
          {
            required: true,
            message: "请选择有效期内时间控制",
            trigger: "change",
          },
          { validator: validateAvailableControl, trigger: "change" },
        ],
        // verificationList:[
        //   { required: true, message: "请选择核销机构", trigger: "change" },
        //   { validator: validateVerificationList, trigger: "change" },
        // ],
      },
      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();
    this.getCoupon();
    this.setPageStatus();
  },
  computed: {
    toggleable() {
      if (this.moveRightData.length === 0 && this.moveLeftData.length === 0) {
        return true;
      }
      return false;
    },
    selectedCouponList() {
      return this.allVerificationList.filter((ele) => {
        if (this.createForm.verificationList == null) {
          this.createForm.verificationList = [];
        }
        return this.createForm.verificationList.includes(ele.deptId);
      });
    },
    unselectedCouponList() {
      return this.allVerificationList.filter((ele) => {
        if (this.createForm.verificationList == null) {
          this.createForm.verificationList = [];
        }
        return !!!this.createForm.verificationList.includes(ele.deptId);
      });
    },
  },
  components: {
    SelectDay: SelectDay,
  },
  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;
    },
    getTodayDateString() {
      const date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth().toString();
      let s = date.getDate().toString();
      m = "" + (m.length == 1 ? "0" : "") + m;
      s = "" + (s.length == 1 ? "0" : "") + s;
      console.log("" + h + ":" + m + ":" + s);
      return "" + y + ":" + m + ":" + s;
    },
    availableControlChange() {
      this.createForm.appointedDaysList = [];
      this.createForm.cycleDaysList = [];
      this.createForm = { ...this.createForm };
    },
    handleMoveLabel(direction, row) {
      console.log(row);
      if (this.createForm.verificationList == null) {
        this.createForm.verificationList = [];
      }

      if (direction == "right") {
        this.createForm.verificationList.push(row.deptId);
      } else {
        this.createForm.verificationList =
          this.createForm.verificationList.filter((ele) => {
            return ele != row.deptId;
          });
      }
    },
    handleFlagChange() {
      const that = this;
      let text = this.couponEnabledFlag === "1" ? "启用" : "停用";
      this.$confirm('确认要"' + text + '"优惠券功能吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return changeCouponStatus({
            deptId: that.deptId,
            couponEnabledFlag: that.couponEnabledFlag,
          });
        })
        .then(() => {
          that.msgSuccess(text + "成功");
        })
        .catch(function () {
          that.couponEnabledFlag = that.couponEnabledFlag === "0" ? "1" : "0";
        });
    },
    handleStatusChange(row) {
      let text = row.status === "1" ? "启用" : "停用";
      this.$confirm(
        '确认要"' + text + '""' + row.couponName + '"该优惠券吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return updateInfo({
            id: row.id,
            status: row.status,
          });
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    getOilList() {
      listPrice()
        .then((res) => {
          if (res.code == 200) {
            this.oilNameList = res.rows || [];
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取油品列表失败~");
        });
    },
    getCoupon() {
      listInfo(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            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("亲，拉取优惠券列表失败~");
        });
    },
    getVerificationList() {
      verificationList({
        pageNum: 1,
        pageSize: 1000,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.allVerificationList = [];
            } else {
              this.allVerificationList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取核销机构失败~");
        });
    },
    toggleLabel() {
      if (this.moveLeftData.length !== 0) {
        this.createForm.verificationList =
          this.createForm.verificationList.filter((ele) => {
            return ele != this.moveLeftData;
          });
        this.createForm = { ...this.createForm };
        return;
      }
      if (this.moveRightData.length !== 0) {
        this.createForm.verificationList = [
          ...new Set(
            this.createForm.verificationList.concat(this.moveRightData)
          ),
        ].filter((ele) => {
          return !!ele;
        });
        this.createForm = { ...this.createForm };
        return;
      }
      return;
    },
    handleLeftChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.deptId);
      });
      console.log(changeArr);
      this.moveLeftData = [];
      this.moveRightData = changeArr;
      // console.log(this.moveRightData);
      this.$refs.rightTable.clearSelection();
    },
    handleRightChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.deptId);
      });
      this.moveLeftData = changeArr;
      this.moveRightData = [];
      this.$refs.leftTable.clearSelection();
    },
    init() {
      this.getOilList();
      this.getCoupon();
      this.getVerificationList();
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.createForm.pageNum = 1;
      this.getList();
    },
    deviceNoInput(value) {
      this.createForm.posQueue = value;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("createForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.title = "添加优惠券";
      this.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: [],
      };
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // // 查找自己已经选中的枪号
      const createForm = JSON.parse(JSON.stringify(row));
      if (createForm.appointedDaysList == null) {
        createForm.appointedDaysList = [];
      }
      if (createForm.cycleDaysList == null) {
        createForm.cycleDaysList = [];
      }
      this.createForm = createForm;
      this.title = "修改油站设备管理";
      this.open = true;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["createForm"].validate((valid) => {
        if (valid) {
          if (!!this.createForm.id) {
            updateInfo(this.createForm)
              .then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("亲，修改成功了~");
                  this.getCoupon();
                  this.open = false;
                } else {
                  throw new Error("");
                }
              })
              .catch((err) => {
                this.msgError("修改失败了呀~");
              });
          } else {
            addInfo(this.createForm)
              .then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("亲，新增成功了~");
                  this.getCoupon();
                  this.open = false;
                } else {
                  throw new Error("");
                }
              })
              .catch((err) => {
                this.msgError("创建优惠劵失败了~");
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const deviceIds = row.deviceId;
      // this.$confirm("是否确认删除油站设备管理", "警告", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(function () {
      //     return delManage(deviceIds);
      //   })
      //   .then(() => {
      //     this.getList();
      //     this.msgSuccess("删除成功");
      //   });
    },
  },
};
</script>
<style lang="scss">
.el-transfer__buttons {
}
</style>