<template>
  <view class="min-page u-font-28 color-333">
    <view class="container">
      <view class="border-bottom u-p-b-16">
        <view class="font-bold u-m-b-16">会员标题</view>
        <input
          v-model="form.name"
          placeholder="请输入会员标题"
          :placeholderStyle="placeholderStyle"
        />
      </view>
      <view class="border-bottom u-p-b-16 u-m-t-16">
        <view class="font-bold u-m-b-16">会员折扣（%）</view>
        <input
          v-model="form.discount"
          placeholder="请输入会员折扣"
          :placeholderStyle="placeholderStyle"
        />
      </view>
      <view class="u-m-t-16">
        <view class="font-bold u-m-b-16">所需成长值</view>
        <input
          v-model="form.experienceValue"
          :disabled="optiopns.index == 0 ? true : false"
          placeholder="请输入所需成长值"
          :placeholderStyle="placeholderStyle"
        />
      </view>
    </view>

    <view class="container u-flex u-row-between">
      <view class="font-bold">等级标识</view>
      <view class="u-flex upload-box">
        <my-upload-img v-model="form.logo"></my-upload-img>
      </view>
    </view>
    <view class="container">
      <view class="u-flex u-row-between">
        <view class="">
          <view class="font-bold">消费送积分</view>
          <view class="color-999 u-font-24 u-m-t-2">每消费X元赠送1积分</view>
        </view>
        <up-switch
          :size="20"
          v-model="form.isCostRewardPoints"
          :active-value="1"
          :inactive-value="0"
        ></up-switch>
      </view>
      <view class="bg-gray u-m-t-16" style="padding: 24rpx 72rpx" v-if="form.isCostRewardPoints">
        <view class="u-flex">
          <input
            class="number-box"
            type="digit"
            v-model="form.costRewardPoints"
          />
          <view class="unit">元</view>
        </view>
      </view>
    </view>
    <view class="container">
      <view class="">
        <view class="font-bold u-m-b-16">等级说明</view>
        <up-textarea
          v-model="form.remark"
          placeholder="请输入等级说明"
          :placeholderStyle="placeholderStyle"
        />
      </view>
    </view>
    <view class="container">
      <view class="u-flex u-row-between">
        <view class="font-bold u-m-b-16">自动发放</view>
        <up-switch
          :size="20"
          v-model="form.isCycleReward"
          :active-value="1"
          :inactive-value="0"
        ></up-switch>
      </view>
      <template v-if="form.isCycleReward">
      <view class="u-m-t-32">
        <view class="font-bold u-m-b-16">周期时间</view>
        <view class="u-flex" style="gap: 24rpx; align-items: stretch">
          <up-input type="digit" v-model="form.cycleTime"></up-input>
          <view class="times">
            <up-select
              v-model:current="form.cycleUnit"
              showOptionsLabel
              label="单位"
              keyName="value"
              labelName="label"
              :options="times"
              @select="selectItem"
            ></up-select>
          </view>
        </view>
      </view>
      <view class="u-m-t-32">
        <view class="font-bold u-m-b-16">赠送积分</view>
        <up-input
          type="number"
          v-model="form.cycleRewardPoints"
          placeholder="赠送成长值"
          :placeholderStyle="placeholderStyle"
        ></up-input>
      </view>
      <view class="font-bold u-m-b-16 u-m-t-32">赠送优惠券</view>
      <CouponList v-model="form.cycleRewardCouponList"></CouponList>
      <view class="u-flex">
        <view class="u-flex gap-20" @click="addCoupon()">
          <up-icon name="plus-circle-fill" color="#318AFE" size="16"></up-icon>
          <text class="">添加</text>
        </view>
      </view>
    </template>
    </view>

    <my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
  </view>
</template>
<script setup>
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import CouponList from "./components/coupon-list.vue";
import { ref, onMounted, watch, reactive, computed } from "vue";
import { useSuperVipStore } from "@/store/market.js";
import * as memberApi from "@/http/api/market/member.js";

const times = [
  {
    label: "年",
    value: "年",
  },
  {
    label: "月",
    value: "月",
  },
  {
    label: "周",
    value: "周",
  },
  {
    label: "天",
    value: "天",
  },
];
const placeholderStyle = {
  "font-size": "28rpx",
};
const superVipStore = useSuperVipStore();

const form = reactive({
  name: "",
  experienceValue: 0,
  discount: 100,
  logo: '',
  costRewardPoints: 1,
  isCostRewardPoints: 0,
  isCycleReward: 0,
  cycleTime: 1,
  cycleUnit: "月",
  cycleRewardPoints: 1,
  cycleRewardCouponList: [],
  remark: "",
});
function addCoupon() {
  form.cycleRewardCouponList.push({
    coupon: { id: null },
    num: "",
    title: "",
  });
}
const showDetailListSwitch = ref([true]);

//判断输入每一项是否为空
function checkInput() {
  for (let item of form.cycleRewardCouponList) {
    if (!item.coupon.id) {
      uni.showToast({
        title: "请选择优惠券",
        icon: "none",
      });
      return false;
    }
    if (!item.num) {
      uni.showToast({
        title: "请输入优惠券数量",
        icon: "none",
      });
      return false;
    }
  }
  return true;
}
async function save() {
  const isPas = checkInput();
  if (!isPas) {
    return;
  }
  if (!form.name) {
    uni.showToast({
      title: "请输入会员标题",
      icon: "none",
    });
    return false;
  }
  if (!form.discount) {
    uni.showToast({
      title: "请输入会员折扣",
      icon: "none",
    });
    return false;
  }
  if (!form.experienceValue && optiopns.index != 0) {
    uni.showToast({
      title: "请输入所需成长值",
      icon: "none",
    });
    return false;
  }
  if(form.remark.trim() == ""){
    uni.showToast({
      title: "请输入等级说明",
      icon: "none",
    });
    return false;
  }
  const submitForm = {
    ...form,
  };
  const res =
    optiopns.type == "edit"
      ? await memberApi.levelEdit(submitForm)
      : await memberApi.levelAdd(submitForm);
  if (res) {
    uni.showToast({
      title: "保存成功",
      icon: "none",
    });
  } else {
    uni.showToast({
      title: "保存失败",
      icon: "none",
    });
    return;
  }
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    });
  }, 1500);
}
function cancel() {
  uni.navigateBack({
    delta: 1,
  });
}
const optiopns = reactive({});
onLoad((opt) => {
  Object.assign(optiopns, opt);
  uni.setNavigationBarTitle({
    title: opt.type !== "edit" ? "添加会员等级" : "编辑会员等级",
  });
  if (opt.type === "edit" && opt.id !== undefined && opt.id !== null) {
    const index = superVipStore.vipLevelList.findIndex(
      (item) => item.id == opt.id
    );
    optiopns.index = index;
    const item = superVipStore.vipLevelList.find((item) => item.id == opt.id);
	item.cycleRewardCouponList=item.cycleRewardCouponList||[]
    Object.assign(form, item);
  }
});
</script>
<style lang="scss" scoped>
.min-page {
  background: #f7f7f7;
  padding: 56rpx 28rpx;
}
.container {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-top: 32rpx;
  border-radius: 16rpx;
}
.x-padding {
  padding: 0 24rpx;
}
$height: 70rpx;
.number-box {
  font-size: 28rpx;
  padding: 0 26rpx;
  border-radius: 6rpx 0 0 6rpx;
  border-top: 2rpx solid #d9d9d9;
  border-bottom: 2rpx solid #d9d9d9;
  border-left: 2rpx solid #d9d9d9;
  background: #fff;
  box-sizing: border-box;
  height: $height;
  flex: 1;
  line-height: $height;
  &.disabled {
    background-color: #f7f7fa;
    color: #999999;
  }
}
.unit {
  display: flex;
  padding: 0 38rpx;
  height: $height;
  line-height: $height;
  align-items: center;
  border-radius: 0 6rpx 6rpx 0;
  border: 2rpx solid #d9d9d9;
  background: #f7f7fa;
  font-size: 28rpx;
  color: #999999;
}

.my-btn {
  font-size: 28rpx;
  line-height: 36rpx;
  padding: 8rpx 32rpx;
  border-radius: 12rpx;
  margin: 0;
}

.edit-btn {
  background: #e6f0ff;
  color: $my-main-color;
}

.delete-btn {
  background: #ffe7e6;
  color: #ff1c1c;
}
.title {
  font-weight: 700;
  color: #333;
  font-size: 28rpx;
}
.first {
  border-bottom: 2rpx solid #e5e5e5;
}
.arrow {
  transition: all 0.3s ease-in-out;
  &.rotate {
    transform: rotate(180deg);
  }
}
.times {
  padding: 10rpx 20rpx;
  border: 1px solid #d9d9d9;
  border-radius: 8rpx;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
:deep(.times .u-select) {
  display: flex;
}
</style>
