<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="积分规则" name="first" class="rules">
      <div style="padding: 10px 0 0;">
        <span>获取积分方式：完成订单</span>
      </div>
      <div style="padding: 25px 0 0;">
        <span>获取积分功能：</span>
        <el-switch
          v-model="switchIntegral2"
          active-color="#1677ff"
          inactive-color="#ccc"
          :disabled="ruleFlag"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="padding: 25px 0 0;">
          <span>积分兑换规则：</span>
        </div>
        <div style="display: flex;align-items: center;padding: 20px 0;">
          <span>实付满</span>&nbsp;&nbsp;&nbsp;
          <el-form-item label="" prop="ruleAmount1">
            <div style="padding: 0;">
              <el-input
                style="width: 80px;"
                @keydown.enter.native="phoneSelect"
                placeholder=""
                v-model="ruleForm.ruleAmount1"
                :disabled="ruleFlag"
              ></el-input
              >&nbsp;&nbsp;&nbsp;
            </div>
          </el-form-item>
          <span>得</span>&nbsp;&nbsp;&nbsp;
          <el-form-item label="" prop="ruleValue1">
            <div style="padding: 0;">
              <el-input
                style="width: 80px;"
                placeholder=""
                v-model="ruleForm.ruleValue1"
                :disabled="ruleFlag"
              ></el-input>
            </div>
          </el-form-item>
          <span style="margin-left:10px;">分，超过</span>&nbsp;&nbsp;&nbsp;
          <el-form-item label="" prop="ruleMaxAmount">
            <div>
              <el-input
                style="width: 80px;"
                @keydown.enter.native="phoneSelect"
                :disabled="ruleFlag"
                placeholder=""
                v-model="ruleForm.ruleMaxAmount"
              ></el-input
              >&nbsp;&nbsp;&nbsp;
            </div>
          </el-form-item>
          <span>元部分，每满</span>&nbsp;&nbsp;&nbsp;
          <el-form-item label="" prop="ruleAmount2">
            <div>
              <el-input
                style="width: 80px;"
                placeholder=""
                v-model="ruleForm.ruleAmount2"
                :disabled="ruleFlag"
              ></el-input
              >&nbsp;&nbsp;&nbsp;
            </div>
          </el-form-item>
          <span>得</span>&nbsp;&nbsp;&nbsp;
          <el-form-item label="" prop="ruleValue2">
            <div style="padding: 0;">
              <el-input
                style="width: 80px;"
                placeholder=""
                v-model="ruleForm.ruleValue2"
                :disabled="ruleFlag"
              ></el-input
              >&nbsp;&nbsp;&nbsp;
            </div>
          </el-form-item>
          <span>分</span>
        </div>
        <!-- <div style="display: flex;align-items: center;padding:0 0 20px 0;">
          <span>积分时效：</span>
          <el-form-item label="" prop="overdueFlag">
            <div style="padding:0;">
              <el-select
                class="timeliness"
                v-model="ruleForm.overdueFlag"
                style="width:150px;margin-right: 15px;"
                @change="timelinessDayChange"
                :disabled="ruleFlag"
              >
                <el-option
                  v-for="item in timelinessData2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option
              ></el-select>
            </div>
          </el-form-item>
          <el-form-item label="" prop="overdue" v-if="timelinessFlag">
            <div style="padding: 0 0;">
              <el-input
                style="width: 60px;"
                placeholder=""
                :disabled="ruleFlag"
                v-model="ruleForm.overdue"
              ></el-input
              >&nbsp;&nbsp;&nbsp;<span>天</span>
            </div>
          </el-form-item>
        </div> -->
        <div style="display: flex;align-items: center;padding:0 0 20px 0;">
          <span>每笔订单积分上限：</span>
          <el-form-item label="" prop="maxIntegral">
            <div style="padding:0;">
              <el-input
                style="width: 80px;"
                @keydown.enter.native="phoneSelect"
                placeholder=""
                v-model="ruleForm.maxIntegral"
                :disabled="ruleFlag"
              ></el-input
              >&nbsp;&nbsp;&nbsp;<span>分</span>
            </div>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button v-if="ruleFlag" type="primary" @click="updateRule"
            >修改</el-button
          >
          <el-button v-if="!ruleFlag" @click="resetForm('ruleForm')"
            >取消</el-button
          >
          <el-button
            v-if="!ruleFlag"
            type="primary"
            @click="submitForm('ruleForm')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="积分记录" name="second">
      <div style="display: inline-block;">
        <!-- <div style="position: relative;display: inline-block;">
          <span>状态：</span>
          <el-select
            v-model="state1"
            style="width:150px;margin-left: 10px;"
            @change="phoneSelect"
          >
            <el-option
              v-for="item in stateData1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
          >&nbsp;&nbsp;
        </div> -->
        <div style="position: relative;display: inline-block;margin:5px;">
          <span>手机号：</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入手机号"
            v-model="phone1"
          ></el-input
          >&nbsp;&nbsp;
          <span
            @click="phoneSelect"
            style="position: absolute;right: 18px;top:8px;"
          >
            <icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg>
          </span>
        </div>
        <div style="position: relative;display: inline-block;margin:5px;">
          <span>订单号：</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="phoneSelect"
            placeholder="请输入订单号"
            v-model="orderNum1"
          ></el-input
          >&nbsp;&nbsp;
          <span
            @click="phoneSelect"
            style="position: absolute;right: 18px;top:8px;"
          >
            <icon-svg name="shousuo" class="site-sidebar__menu-icon"></icon-svg>
          </span>
        </div>
        <div style="position: relative;display: inline-block;">
          <span>积分获取方式：</span>
          <el-select
            v-model="integral1"
            style="width:180px;margin-left: 10px;"
            @change="dataSelect"
            :clearable="true"
          >
            <el-option
              v-for="item in getintegraData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
          >&nbsp;&nbsp;
        </div>
        <!-- <div style="margin:5px;display: inline-block;">
          <span>开始时间：</span>
          <el-date-picker
            style="width: 160px;margin-left: 10px;"
            v-model="startTime1"
            align="right"
            type="datetime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择开始时间"
          >
          </el-date-picker
          >&nbsp;&nbsp;&nbsp;
        </div>
        <div style="margin:5px;display: inline-block;">
          <span>截止时间：</span>
          <el-date-picker
            style="width: 160px;margin-left: 10px;"
            v-model="endTime1"
            align="right"
            type="datetime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择截止时间"
          >
          </el-date-picker>
        </div> -->
      </div>
      <div style="display: inline-block;">
        <el-button
          style="margin:10px;"
          size="mini"
          type="primary"
          icon="document"
          @click="phoneSelect"
          >查询
        </el-button>
        <el-button
          style="margin:10px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans1"
          >重置
        </el-button>
        <!-- <el-button
          style="margin-left:15px;"
          size="mini"
          type="warning"
          icon="document"
          >导出Excel
        </el-button> -->
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData1">
        <!-- <el-table-column type="selection"> </el-table-column> -->
        <el-table-column fixed prop="id" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="昵称"> </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150">
        </el-table-column>
        <el-table-column prop="num" label="积分" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">+{{ scope.row.num }}</span>
            <span v-if="scope.row.type == 2">-{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderNumber" label="对应订单号">
        </el-table-column>
        <el-table-column prop="content" label="积分获取方式">
          <template slot-scope="scope">
            <span v-if="scope.row.classify == 1">每日签到</span>
            <span v-if="scope.row.classify == 2">积分兑换优惠券</span>
            <span v-if="scope.row.classify == 3">系统赠送积分</span>
            <span v-if="scope.row.classify == 4">完成订单获取积分</span>
            <!-- <span v-if="scope.row.classify == 6">完成订单获取积分(已过期)</span> -->
            <!-- <span v-if="scope.row.classify == 5">积分过期</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="积分获取时间">
        </el-table-column>
        <!-- <el-table-column prop="expTime" label="积分过期时间"> </el-table-column> -->
        <!-- <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              :disabled="
                !isAuth('financeList:transfer') || scope.row.state != 0
              "
              @click="transferClick(scope.row)"
            >
              转账
            </el-button>
            <el-button
              size="mini"
              type="primary"
              :disabled="!isAuth('financeList:refund') || scope.row.state != 0"
              @click="refund(scope.row)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="limit1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next"
          :total="totalnum1"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="积分兑换商品" name="third"> </el-tab-pane>
    <el-tab-pane label="商品兑换记录" name="fourth"> </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "second",

      // 积分记录
      // state1: "",
      stateData1: [
        { label: "待使用", value: 1 },
        { label: "已使用", value: 2 },
        { label: "已失效", value: 3 }
      ],
      phone1: "",
      orderNum1: "",
      integral1: "",
      getintegraData: [
        { label: "每日签到", value: 1 },
        { label: "积分兑换优惠券", value: 2 },
        { label: "系统赠送积分", value: 3 },
        { label: "完成订单获取积分", value: 4 },
        // { label: "完成订单获取积分(已过期)", value: 6 },
        // { label: "积分过期", value: 5 }
      ],
      startTime1: "",
      endTime1: "",
      page1: 1,
      limit1: 10,
      tableDataLoading: false,
      tableData1: [],
      totalnum1: 10,

      // 积分规则
      switchIntegral2: 0,
      ruleFlag: true,
      ruleForm: {
        ruleAmount1: 10, // 实付满
        ruleValue1: 1, // 得多少分
        ruleMaxAmount: 30, // 超过
        ruleAmount2: 8, // 每满
        ruleValue2: 1, // 得多少分
        overdueFlag: 1, // 时效选择
        overdue: 15, // 时效天数
        maxIntegral: 10 // 积分上限
      },
      rules: {
        ruleAmount1: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        ruleValue1: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        ruleMaxAmount: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        ruleAmount2: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        ruleValue2: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        overdueFlag: [
          { required: true, message: "请选择时效", trigger: "change" }
        ],
        overdue: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ],
        maxIntegral: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: this.checkMoney, trigger: "blur" }
        ]
      },
      timelinessData2: [
        { label: "永久有效", value: "0" },
        { label: "限时积分", value: "1" }
      ],
      timelinessFlag: false
    };
  },
  methods: {
    checkMoney(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入正确数字"));
      } else {
        const reg = /^[1-9]\d*$/;
        // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
        if (reg.test(value)) {
          callback();
        } else {
          // 具体错误信息没有提示
          return callback(new Error("请输入正确数字"));
        }
      }
    },
    handleClick(tab, event) {
      if (tab._props.label == "积分规则") {
        this.ruleSelect();
      }
      if (tab._props.label == "积分记录") {
        this.page1 = 1;
        this.limit1 = 10;
        this.dataSelect();
      }
      if (tab._props.label == "积分兑换商品") {
        // this.rechSelect();
      }
      if (tab._props.label == "商品兑换记录") {
        // this.withdrawSelect();
      }
    },
    //  积分记录 查询 （++++++++++++++++++++++++++++++++++++++++++++）
    phoneSelect() {
      this.page1 = 1;
      this.dataSelect();
    },
    // 获取数据列表
    dataSelect() {
      this.tableDataLoading = true;
      console.log({
        page: this.page1,
        limit: this.limit1,
        phone: this.phone1,
        orderNumber: this.orderNum1,
        classify: this.integral1
      });

      this.$http({
        url: this.$http.adornUrl("admin/userintegral/queryIntegralList"),
        method: "post",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.limit1,
          phone: this.phone1,
          orderNumber: this.orderNum1,
          classify: this.integral1
        })
      }).then(({ data }) => {
        console.log(data, "积分记录");
        if (data.code == 0) {
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData1 = returnData.list;
          this.totalnum1 = returnData.totalCount;
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    // 重置
    cleans1() {
      this.state1 = "";
      this.phone1 = "";
      this.orderNum1 = "";
      this.integral1 = "";
      this.startTime1 = "";
      this.endTime1 = "";
      this.page1 = 1;
      this.limit1 = 10;
      this.dataSelect();
    },
    handleSizeChange(val) {
      this.limit1 = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page1 = val;
      this.dataSelect();
    },
    // （++++++++++++++++++++++++++++++++++++++++++++）

    // 积分规则 （------------------------------------------------）
    timelinessDayChange(val) {
      if (val == 0) {
        this.timelinessFlag = false;
        this.ruleForm.overdue = -1;
      } else if (val == 1) {
        this.timelinessFlag = true;
        this.ruleForm.overdue = 30;
      }
    },
    ruleSelect() {
      this.$http({
        url: this.$http.adornUrl("admin/userintegral/queryIntegralRules"),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        console.log(data, "积分规则");
        if (data.code == 0) {
          this.switchIntegral2 = data.data.flag;
          this.ruleForm.ruleAmount1 = data.data.ruleAmount1;
          this.ruleForm.ruleValue1 = data.data.ruleValue1;
          this.ruleForm.ruleMaxAmount = data.data.ruleMaxAmount;
          this.ruleForm.ruleAmount2 = data.data.ruleAmount2;
          this.ruleForm.ruleValue2 = data.data.ruleValue2;
          // this.ruleForm.overdueFlag = data.data.overdueFlag; // 时效选择
          // this.ruleForm.overdue = data.data.overdue; // 时效天数
          this.ruleForm.maxIntegral = data.data.maxIntegral;
          if (data.data.overdue > 0) {
            this.timelinessFlag = true;
          } else {
            this.timelinessFlag = false;
          }
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("admin/userintegral/updateIntegralRules"),
            method: "post",
            params: this.$http.adornParams({
              flag: this.switchIntegral2, // 积分获取开关 1开、0关
              ruleMaxAmount: this.ruleForm.ruleMaxAmount, // 积分获取二阶段规则金额
              ruleAmount1: this.ruleForm.ruleAmount1, // 积分获取规则金额1
              ruleAmount2: this.ruleForm.ruleAmount2, // 积分获取规则金额2
              ruleValue1: this.ruleForm.ruleValue1, // 积分获取规则积分1
              ruleValue2: this.ruleForm.ruleValue2, // 积分获取规则积分2
              // overdue: this.ruleForm.overdue, // 积分过期规则（-1为永不过期）
              // overdueFlag: this.ruleForm.overdueFlag, //
              maxIntegral: this.ruleForm.maxIntegral // 单笔订单获取积分上限
            })
          }).then(({ data }) => {
            console.log(data, "更新积分规则");
            if (data.code == 0) {
              this.ruleFlag = true;
              this.ruleSelect();
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleSelect();
      this.ruleFlag = true;
    },
    updateRule() {
      this.ruleFlag = false;
    },
    // （------------------------------------------------）

    //处理默认选中当前日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth() - now.getMonth(); //得到月份
      var date = now.getDate() - now.getDate() + 1; //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
      this.$set(this.info, "stockDate", defaultDate);
    }
  },
  mounted() {
    this.dataSelect();
    // this.rechargeSelect()
  }
};
</script>

<style scoped>
.box {
  padding: 44px;
  border: 1px solid #eee;
  margin: 15px 10px;
}

.box_num {
  font-size: 14px;
  color: #66b1ff;
}

.box_num .box_color {
  color: #333;
  font-size: 14px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.box_num .box_color .help {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0 2px;
}

.box_num div span {
  font-size: 20px;
  margin-left: 5px;
}

.text_color {
  color: #4f9dec;
}

.text_color span {
  margin-right: 5px;
}

/* 导出限制 */
.el-tabs >>> .export {
  width: 500px;
}
.el-tabs >>> .export .con {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.el-tabs >>> .export .con .gundong {
  animation: gundong 3s linear infinite;
}
@keyframes gundong {
  /* from表示动画的开始位置，也可以使用0%来表示。 */
  from {
    transform: rotate(0deg);
  }
  /* to表示动画的结束位置，也可以使用100%来表示。 */
  to {
    transform: rotate(360deg);
  }
}
.el-tabs >>> .export img {
  width: 70px;
}
.el-tabs >>> .export .btn {
  display: flex;
  flex-direction: row-reverse;
}

.el-tabs >>> .transfer {
  width: 500px;
  /* height: 300px; */
}
.el-tabs >>> .el-dialog__body {
  padding: 30px 20px;
}
.el-tabs >>> .el-dialog__footer {
  padding: 30px 20px;
}
.el-tabs >>> .dialog-footer {
  text-align: right;
}
.el-tabs >>> .rules .el-input {
  border: none;
  box-shadow: none;
}
.el-tabs >>> .rules .el-input .el-input__inner {
  background: #ccc;
  border: none;
  text-align: center;
}
.el-tabs >>> .rules .timeliness .el-input .el-input__inner {
  background: #fff;
  border: 1px solid #ccc;
  text-align: left;
}
.demo-ruleForm .el-form-item {
  /* border: 1px solid red; */
  margin-bottom: 0 !important;
}
.demo-ruleForm .el-form-item >>> .el-form-item__content {
  /* border: 1px solid red; */
  margin-left: 0 !important;
}
.demo-ruleForm .el-form-item >>> .el-input__inner {
  /* color: #000; */
}
.demo-ruleForm .el-form-item >>> .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>
