<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-05-26 16:37:34
 * @LastEditors: wenjie 1454560336@qq.com
 * @LastEditTime: 2024-08-01 17:53:54
 * @FilePath: \admin-manage\src\views\operationManage\shopManage\shopAdd.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="shopAdd app-container" v-loading="loading">
    <el-form :model="setQuery" ref="setQuery" :rules="rules" v-loading="pageLoading" :disabled="disabled"
      label-width="130px">


      <el-form-item label="套餐等级：" prop="setMealCode">
        <el-select v-model="setQuery.setMealCode" size="small" filterable class="item-width-300"
          placeholder="请选择套餐等级">
          <el-option v-for="item in mealNameOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="奖励规则：">
        <el-radio-group v-model="setQuery.computation">
          <el-radio label="FIXED">固定返现</el-radio>
          <!-- <el-radio label="RATIO">百分比返现</el-radio> -->
        </el-radio-group>
      </el-form-item>

      <el-form-item label="奖励金额：" prop="baseTotal">
        <el-input type="number" placeholder="请输入奖励金额" v-model="setQuery.baseTotal" :maxlength="11"
          class="item-width-300">
        </el-input>
      </el-form-item>

      <el-form-item label="到账时间：" prop="day">次月
        <el-input  @input="setQuery.day = Math.floor(Number(setQuery.day))" v-model="setQuery.day" type="number" size="small" class="item-width-300"></el-input>
        号进行发放
      </el-form-item>


      <el-form-item label="成功邀请条件：" required>
        邀请新用户注册首次订购会员，开通5天 <br />

        邀请新用户注册首次订购会员，且持续订购开通5天
      </el-form-item>


    </el-form>

    <!-- 新增和编辑模式 -->
    <div class="btn-group" v-if="mode == 'add' || mode == 'edit'">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save">提交</el-button>
    </div>
    <!-- 详情时的按钮 -->
    <div class="btn-group" v-else>
      <el-button @click="cancel">取 消</el-button>
    </div>


  </div>
</template>

<script>
import { getSetMealNameAndId } from '@/api/common'
import { inviteReceiptsRoleUpdate, inviteReceiptsRoleGetOne } from "@/api/invite"

export default {

  data() {
    return {


      mode: 'detail',//编辑模式

      setQuery: {
        baseTotal: '',
        day: '',
        setMealCode: '',
        computation: 'FIXED',
        "firstPurchaseDay": 5,
        "duration": 5,
        "first": true,
        "keep": true
      },

      disabled: false,
      pageLoading: false, //页面loading
      loading: false,
      rules: {
        setMealCode: [
          { required: true, message: "请选选择套餐等级", trigger: "change" },
        ],
        day: [
          { required: true, message: '请输入到账日期', trigger: 'blur' },
          // 需要大于等于6并且小于31
          { type: 'number', min: 6, max: 31, message: '请输入6号-31号', trigger: 'blur' }
        ],
        baseTotal: [
          { required: true, message: "请输入奖励金额", trigger: "blur" },
        ],
        computation: [
          { required: true, message: "请选择奖励规则", trigger: "change" }
        ]
      },

      mealNameOptions: []
    };
  },

  methods: {
    getSetMealNameAndId() {
      getSetMealNameAndId().then(res => {
        if (res.state == 'Success') {
          // this.mealNameOptions = 
          Object.keys(res.content).map(key => {
            this.mealNameOptions.push({
              label: res.content[key],
              value: key
            })
          })

        }
      })
    },
    cancel() {
      this.$router.push({
        path: "/operationManage/marketingManage/invitePromotion/index",
      });
    },
    edit() {
      this.$router.push({
        path: "/operationManage/marketingManage/invitePromotion/add",
        query: {
          title: "规则编辑",
          id: this.$route.query.id,
        },
      });
    },
    save() {
      this.$refs.setQuery.validate((v) => {
        if (v) {
          if (this.loading) return
          this.loading = true;
          let obj = JSON.parse(JSON.stringify(this.setQuery))
          obj.baseTotal = obj.baseTotal * 100
          inviteReceiptsRoleUpdate(obj).then((res) => {
            this.loading = false;
            if (res.state == "Success") {
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });

              this.$router.push("/operationManage/marketingManage/invitePromotion/index");
            }
          });
        } else {
          this.$message.error('请检查是否有必填项未填');
        }
      });
    },


    detail() {
      this.setQuery = JSON.parse(this.$route.query.data)
      this.setQuery.baseTotal = this.setQuery.baseTotal / 100
    },





  },
  created() {
    this.getSetMealNameAndId()
    if (this.$route.query.title == "规则编辑") {
      this.disabled = false;
      this.mode = 'edit'
      this.detail();
    } else if (this.$route.query.title == "规则详情") {
      this.disabled = true;
      this.mode = 'detail'
      this.detail();
    } else {
      this.disabled = false;
      this.mode = 'add'
    }
  },
};
</script>

<style lang="scss" scoped>
.shopAdd {
  padding-bottom: 40px;

  .position {
    cursor: pointer;
    font-size: 20px;
  }

  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #container {
    width: 100%;
    height: 600px;
  }

  .address-input-box {
    display: flex;

    .address-input {
      flex: 1;
    }
  }
}
</style>