<template>
  <view class="box">
    <view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
      <view class="x-padding">
        <view class="u-flex u-row-between custome">
          <text class="font-bold color-333">提交生日/姓名</text>
          <up-radio-group v-model="form.isSubmitInfo" placement="row">
            <up-radio :key="1" :name="1">
              <template #label>
                <text> 是 </text>
              </template>
            </up-radio>
            <up-radio :key="0" :name="0">
              <template #label>
                <text> 否 </text>
              </template>
            </up-radio>
          </up-radio-group>
        </view>
        <view class="color-999 u-font-24 u-m-t-10"
          >*成为会员前需提交生日、姓名、性别信息</view
        >
      </view>
    </view>

    <view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
      <view class="x-padding">
        <view class="u-flex u-row-between custome">
          <text class="font-bold color-333">会员开通方式</text>
          <up-radio-group v-model="form.openType" placement="row">
            <up-radio key="PAY" name="PAY">
              <template #label>
                <text> 购买开通 </text>
              </template>
            </up-radio>
            <up-radio key="CONDITION" name="CONDITION">
              <template #label>
                <text> 条件开通 </text>
              </template>
            </up-radio>
          </up-radio-group>
        </view>
        <view class="u-m-t-24">
          <up-line></up-line>
        </view>
        <template v-if="form.openType == 'PAY'">
          <view
            class="u-flex u-row-between u-p-t-26"
            @click="go.to('PAGES_MARKET_SUPER_VIP_VIP_PLANS')"
          >
            <text class="font-bold color-333">会员周期列表</text>
            <view class="u-flex">
              <text class="u-font-24 color-main">去设置</text>
              <up-icon name="arrow-right" color="#318AFE"></up-icon>
            </view>
          </view>
        </template>
        <template v-if="form.openType == 'CONDITION'">
          <view class="u-flex u-row-between u-col-baseline u-m-t-32">
            <text class="font-bold color-333">成为会员条件</text>
            <view class="u-flex-1 u-p-l-32">
              <view v-for="(item, index) in conditionLists" :key="index">
                <up-checkbox usedAlone v-model:checked="item.checked">
                  <template #label>
                    <view> {{ item.label }} </view>
                  </template>
                </up-checkbox>
                <view class="u-m-t-24 u-m-b-24">
                  <up-number-box
                    :inputWidth="100"
                    :decimalLength="item.precision || 0"
                    v-if="item.label != '绑定手机号' && item.checked"
                    v-model="item.value"
                    :step="item.step"
                    :min="item.min || 0"
                  ></up-number-box>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <view class="u-m-t-32 container">
      <view class="font-bold color-333 u-m-b-16">可用门店</view>
      <my-shop-select
        @shop-select="shopSelect"
        v-model:selShops="form.memberPriceShopIdList"
        v-model:useType="form.memberPriceShopType"
      ></my-shop-select>
    </view>

    <view class="u-m-t-32 container">
      <view class="font-bold color-333 u-m-b-16">规则说明</view>
      <up-textarea
        v-model="form.remark"
        placeholder="请输入规则说明"
      ></up-textarea>
    </view>

    <view class="u-m-t-32 container">
      <view class="font-bold color-333">获取成长值升级</view>
      <view class="u-m-t-6 color-999 u-font-24"
        >*两个条件必选有一条是大于0的数值</view
      >
      <view class="u-flex u-m-t-26 gap-20">
        <text>每消费1元获得成长值</text>
        <up-number-box
          v-model="form.costReward"
          inputWidth="80"
          placeholder="请输入内容"
        ></up-number-box>
      </view>
      <view class="u-flex u-m-t-26 gap-20">
        <text>每充值1元获得成长值</text>
        <up-number-box
          v-model="form.rechargeReward"
          inputWidth="80"
          placeholder="请输入内容"
        ></up-number-box>
      </view>
    </view>
    <my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
  </view>
</template>

<script setup>
import { reactive, computed, onMounted, ref, inject, watch } from "vue";
import userTypes from "./user-types.vue";
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";

const conditionLists = ref([
  { label: "绑定手机号", checked: false, code: "BIND_PHONE" },
  {
    label: "订单达成指定次数",
    checked: false,
    value: "",
    code: "ORDER",
    step: 1,
    stepStrictly: true,
    min: 1,
  },
  {
    label: "消费达到指定金额",
    checked: false,
    value: "",
    code: "COST_AMOUNT",
    precision: 2,
    min: 0.01,
  },
  {
    label: "充值达到指定金额",
    checked: false,
    value: "",
    code: "RECHARGE_AMOUNT",
    precision: 2,
    min: 0.01,
  },
]);

const superVipStore = inject("superVipStore");

//分销奖励次数
const isLimitCount = ref(0);
const isLimitCounts = [
  {
    value: 0,
    label: "限制",
  },
  {
    value: 1,
    label: "不限制",
  },
];
//开通方式
const opentypes = [
  {
    value: "auto",
    label: "自动开通",
  },
  {
    value: "manual",
    label: "手动开通",
  },
  {
    value: "pay",
    label: "付费开通",
  },
];
const form = reactive({
  isSubmitInfo: 1,
  openType: "PAY",
  configList: [],
  memberPriceShopType: "ALL",
  remark: "",
  costReward: 0,
  rechargeReward: 0,
  memberPriceShopIdList: [],
  isMemberPrice: 1,
  isOpen: 0,
});
watch(
  () => isLimitCount.value,
  (newval) => {
    if (newval) {
      form.rewardCount = -1;
    } else {
      form.rewardCount = "";
    }
  }
);

async function save() {
  console.log(form);
  const submitData = {
    ...form,
    conditionList: conditionLists.value
      .filter((v) => v.checked)
      .map((v) => ({
        code: v.code,
        value: v.value,
      })),
  };
  const res = await superVipStore.editConfig(submitData);
  uni.showToast({
    title: "更新成功",
    icon: "none",
    duration: 2000,
  });
}
function cancel() {
  uni.navigateBack();
}
watch(
  () => superVipStore.config,
  (newval) => {
    setForm(newval);
  }
);

function setForm(data) {
  if (data.rewardCount == -1) {
    isLimitCount.value = 1;
  }
  console.log(data);

  conditionLists.value = conditionLists.value.map((v) => {
    const findItem = data.conditionList.find((cond) => cond.code == v.code);
    if (findItem) {
      v.value = findItem.value;
      v.checked = true;
    } else {
      v.checked = false;
    }
    return v;
  });
  Object.assign(form, data);
  console.log(form);
}

onMounted(() => {
  setForm(superVipStore.config);
});
</script>

<style lang="scss" scoped>
.x-padding {
  padding: 0 24rpx;
}
.text-tips {
  color: #999999;
  font-size: 14px;
  padding: 0 28rpx;
  border-radius: 6rpx 0 0 6rpx;
  border: 2rpx solid #d9d9d9;
  background-color: #f7f7fa;
  line-height: 60rpx;
}
.text-tips1 {
  border-radius: 0 6rpx 6rpx 0;
}
.gap-40 {
  gap: 40rpx;
}
.my-input {
  border: 2rpx solid #d9d9d9;
  height: 60rpx;
  border-right: none;
  width: 240rpx;
  text-align: center;
  padding: 0 2px;
  font-size: 14px;
}
.box {
  padding: 0 28rpx;
  font-size: 28rpx;
}
.container {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-top: 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.add {
  padding: 8rpx 32rpx;
  border-radius: 12rpx;
  background: #318afe;
  color: #ffffff;
  font-size: 28rpx;
  line-height: 56rpx;
  margin: 0;
}
.color-red {
  color: #ff2f2f;
}
$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;
}
.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;
}
:deep(.custome .u-radio-group) {
  justify-content: flex-end;
}
</style>
