<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">
    <div>
      <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="issueList">
        <af-table-column label="发放方式名称" align="center" prop="issueName" />
        <af-table-column label="状态" align="center">
          <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="center">
          <template slot-scope="scope">
            {{scope.row.issueType == '1'? '消费发放':''}}
            {{scope.row.issueType == '2'? '网页方式':''}}
            {{scope.row.issueType == '3'? '二维码-静态码':''}}
            {{scope.row.issueType == '4'? '支付成功后的领取位':''}}
          </template>
        </af-table-column>
        <af-table-column label="发放门槛" align="center">
          <template slot-scope="scope">
            {{scope.row.issueType == '1' ?  scope.row.discountThresholdAmt == '0' ? '无门槛，消费都发放': '满' + scope.row.discountThresholdAmt + '元发放' :''}}
            {{scope.row.issueType != '1'? '-------':''}}
          </template>
        </af-table-column>
        <af-table-column label="领取限制" align="center">
          <template slot-scope="scope">
            {{scope.row.issueType == '1'? '-------':''}}
            {{scope.row.issueType != '1' ? '用户能进入这个领取界面' + scope.row.giveCount + '次，一次可以领取'+  scope.row.giveLimit + '张优惠券': ''}}
          </template>
        </af-table-column>
        <af-table-column label="可领取时间段" align="center">
          <template slot-scope="scope">
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column>
        <!-- <af-table-column label="面值" align="center" prop="gunNo" /> -->
        <!-- <af-table-column label="有效期" align="center" prop="deviceFactory" /> -->
        <af-table-column
          label="操作"
          align="center"
          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)"
              >修改</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="600px"
      append-to-body
      status-icon
    >
      <el-form
        ref="dialogForm"
        :model="createForm"
        :rules="rules"
        label-width="180px"
      >
        <el-form-item label="发放方式名称" prop="issueName">
          <input
            type="text"
            class="form-control"
            v-model="createForm.issueName"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="发放类型" prop="issueType">
          <el-radio-group v-model="createForm.issueType">
            <div>
              <el-radio label="1">消费发放</el-radio>
              <el-radio label="2">网页方式</el-radio>
              <el-radio label="3">二维码-静态码</el-radio>
            </div>
            <div>
              <el-radio label="4">支付成功后的领取位(只能设置一次)</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="能进入的次数" prop="giveCount" v-if="createForm.issueType!=1">
            用户能进入这个领取界面 <input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.giveCount"
            style="width: 80px"
          /> 次
        </el-form-item>

        <el-form-item label="一次能领取几张次数" prop="giveLimit" v-if="createForm.issueType!=1">
          用户进入后一次能领取<input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.giveLimit"
            style="width: 80px"
          />张
        </el-form-item>
        <!--
        <el-form-item label="展示位选择" prop="showIdList" v-if="createForm.issueType==2">
          <el-checkbox-group v-model="createForm.showIdList">
            <div>
              <el-checkbox label="1">支付成功后的展示位</el-checkbox>
              <el-checkbox label="2" disabled>待定</el-checkbox>
            </div>
            <div>
              <el-checkbox label="3" disabled>更多位置后续开放</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
        -->
        <el-form-item label="发放门槛" prop="discountThresholdAmt" v-if="createForm.issueType==1">
          消费达到
          <input
            type="text"
            class="form-control d-inline-block"
            v-model.number="createForm.discountThresholdAmt"
            style="width: 80px"
          />元时，系统自动发放
        </el-form-item>
        <el-form-item label="可领取时间段" prop="availableControl">
          <el-radio-group
            v-model="createForm.availableControl"
            @change="availableControlChange"
          >
            <div>
              <div>
                <el-radio label="0">一直都可用</el-radio>
                <el-radio label="1">每周指定日</el-radio>
              </div>
              <div>
                <el-radio label="2">每月指定日</el-radio>
                <el-radio label="3">固定指定日</el-radio>
              </div>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="可用时间选择"
          prop="isMarketFlag1"
          v-if="
            createForm.availableControl == 1 ||
            createForm.availableControl == 2 ||
            createForm.availableControl == 3
          "
        >
          <div>
            <select-day
              :type="createForm.availableControl"
              :day.sync="createForm.appointedDaysList"
              :cycle.sync="createForm.cycleDaysList"
            ></select-day>
          </div>
        </el-form-item>
        <el-form-item
          label="此领取方式下的优惠券"
          prop="couponIssueRelationList"
        >
        </el-form-item>

        <div>
          <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="couponName"
                  label="优惠券"
                ></el-table-column>
                <el-table-column label="添加" width="60px" align="center">
                  <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="couponName"
                  label="优惠券"
                ></el-table-column>
                <el-table-column label="移除" width="60px" align="center">
                  <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 {
  listManage,
  getManage,
  delManage,
  addManage,
  updateManage,
  exportManage,
  changeManageStatus,
} from "@/api/station/manage";
import { listPrice } from "@/api/station/price";

import {
  addInfo,
  listInfo,
  updateInfo,
  changeCouponStatus,
  addIssue,
  listIssue,
  upIssueStatus
} from "@/api/coupon";
import SelectDay from "@/components/SelectDay";

export default {
  name: "Coupon_CreateIssue",
  data() {
    let validateGunNo = (rule, value, callback) => {
      callback();
    };
    return {
      couponEnabledFlag: "1",

      pageStatus: 4,
      createForm: {
        issueName:'',
        showIdList: [],
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
        issueType: "2",
        discountThresholdAmt: "0",
        couponIssueRelationList: [],
        giveLimit:9999999,
        giveCount:100,
      },
      couponList: [],
      oilNameList: [],
      allVerificationList: [],
      equipmentList: [],
      // 油枪复选
      allGunList: [],
      // 已选的油枪
      checkedGunList: [],
      //设备状态
      deviceStatusOptions: [],
      //设备类型
      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      leftQuery: {},
      rightQuery: {},
      leftData: [],
      rightData: [],
      moveRightData: [],
      moveLeftData: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
      },
      // 表单校验
      rules: {},
      day: [],
      cycle: [],
      issueList:[],
      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号",
        ],
      ],
    };
  },
  components: {
    SelectDay: SelectDay,
  },
  created() {
    // this.init();
    this.getCoupon();
    // this.setPageStatus();
    this.getIssueList();
  },
  computed: {
    toggleable() {
      if (this.moveRightData.length === 0 && this.moveLeftData.length === 0) {
        return true;
      }
      return false;
    },
    selectedCouponList() {
      return this.couponList.filter((ele) => {
        if(this.createForm.couponIssueRelationList == null) {
          this.createForm.couponIssueRelationList = [];
        }
        return this.createForm.couponIssueRelationList.includes(ele.id);
      });
    },
    unselectedCouponList() {
      return this.couponList.filter((ele) => {
        if(this.createForm.couponIssueRelationList == null) {
          this.createForm.couponIssueRelationList = [];
        }
        return !!!this.createForm.couponIssueRelationList.includes(ele.id);
      });
    },
    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
    }
  },
  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;
    },
    getIssueList(){
      listIssue(this.queryForm).then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.issueList = [];
            } else {
              this.total = res.total;
              this.issueList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取领取方式列表失败~");
        });
    },
    getCoupon() {
      listInfo({
        pageNum: 1,
        pageSize: 1000,
        status:1
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.couponList = [];
            } else {
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    availableControlChange() {
      this.createForm.appointedDaysList = [];
      this.createForm.cycleDaysList = [];
      this.createForm = { ...this.createForm };
    },
    handleMoveLabel(direction, row){
      console.log(row)
      if(this.createForm.couponIssueRelationList == null) {
        this.createForm.couponIssueRelationList = [];
      }

      if(direction == "right"){
        this.createForm.couponIssueRelationList.push(row.id)
      }else{
        this.createForm.couponIssueRelationList = this.createForm.couponIssueRelationList.filter((ele)=>{
          return ele != row.id
        })
      }
    },
    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.issueName + '"发放方式吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return upIssueStatus({
            id: row.id,
            status: row.status,
          });
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    toggleLabel() {
      if (this.moveLeftData.length !== 0) {
        this.createForm.couponIssueRelationList =
          this.createForm.couponIssueRelationList.filter((ele) => {
            return ele != this.moveLeftData;
          });
        this.createForm = { ...this.createForm };
        return;
      }
      if (this.moveRightData.length !== 0) {
        this.createForm.couponIssueRelationList = [
          ...new Set(
            this.createForm.couponIssueRelationList.concat(this.moveRightData)
          ),
        ].filter((ele) => {
          return !!ele;
        });
        this.createForm = { ...this.createForm };
        return;
      }
      return;
    },
    handleLeftChange(val) {
      let changeArr = [];
      val.map((ele) => {
        changeArr.push(ele.id);
      });
      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.id);
      });
      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.dialogForm.posQueue = value;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("createForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.title = "添加优惠券";
      // this.createForm = {
      //   couponName: "",
      //   couponDetails: "",
      //   couponThresholdAmt: 0,
      //   couponType: "1",
      //   couponAmt: 0,
      //   oilNameList: [],
      //   effectiveTimeType: "",
      //   effectiveTime: [],
      //   effectiveDayNum: 30,
      //   couponHoldNum: 1,
      //   couponReceiveNum: 100,
      //   couponNum: 100,
      //   status: "1",
      //   couponIssueRelationList: [],
      //   isCardFlag: "1",
      //   isGradeFlag: "1",
      //   isMarketFlag: "1",
      // };
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // // 查找自己已经选中的枪号
      this.createForm = JSON.parse(JSON.stringify(row));
      this.title = "修改油站设备管理";
      this.open = true;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["dialogForm"].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 {
            addIssue(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>