<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">
          <text class="font-bold color-333">开通方式</text>
        </view>
        <view class="u-m-t-16">
          <up-radio-group v-model="form.openType" placement="row">
            <up-radio
              v-for="item in opentypes"
              :key="item.value"
              :name="item.value"
              :label="item.label"
            >
              <template #label>
                <text>
                  {{ item.label }}
                </text>
              </template>
            </up-radio>
          </up-radio-group>
        </view>
      </view>
      <template v-if="form.openType == 'auto'">
        <view class="u-m-t-24">
          <up-line></up-line>
        </view>
        <view class="x-padding u-m-t-24">
          <view class="u-flex u-row-between">
            <text class="font-bold color-333">获得佣金条件</text>
          </view>
          <view class="u-flex u-m-t-16">
            <input
              class="number-box"
              placeholder="请输入"
              placeholder-class="color-999 u-font-28"
              type="number"
              
              v-model="form.inviteCount"
            />
            <view class="unit">人</view>
          </view>
          <view class="color-999 u-font-24 u-m-t-8"
            >邀请达到指定人数才可赚取佣金</view
          >
          <view class="u-m-t-24">
            <up-line></up-line>
          </view>
          <view class="u-flex u-row-between u-m-t-20">
            <text class="font-bold color-333">被邀请人消费有效</text>
            <up-switch :active-value="1" :inactive-value="0" v-model="form.inviteConsume"></up-switch>
          </view>
        </view>
      </template>
      <template v-if="form.openType == 'pay'">
        <view class="u-m-t-24">
          <up-line></up-line>
        </view>
        <view class="x-padding u-m-t-24">
          <view class="u-flex u-row-between">
            <text class="font-bold color-333">付费金额</text>
          </view>
          <view class="u-flex u-m-t-16">
            <input
              class="number-box"
              placeholder="请输入"
              placeholder-class="color-999 u-font-28"
              type="digit"
              
              v-model="form.payAmount"
            />
            <view class="unit">元</view>
          </view>
        </view>
      </template>
    </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">
          <text class="font-bold color-333">分销奖励次数</text>
        </view>
        <view class="u-m-t-16">
          <up-radio-group v-model="isLimitCount" placement="row">
            <up-radio
              v-for="item in isLimitCounts"
              :key="item.value"
              :name="item.value"
              :label="item.label"
            >
              <template #label>
                <text>
                  {{ item.label }}
                </text>
              </template>
            </up-radio>
          </up-radio-group>
        </view>
      </view>
      <template v-if="isLimitCount == 0">
        <view class="u-m-t-24 x-padding">
          <up-line></up-line>
        </view>
        <view class="x-padding u-m-t-24">
          <view class="u-flex u-row-between">
            <text class="font-bold color-333">每人奖励</text>
          </view>
          <view class="u-flex u-m-t-16">
            <input
              class="number-box"
              placeholder="请输入"
              placeholder-class="color-999 u-font-28"
              type="number"
              
              v-model="form.rewardCount"
            />
            <view class="unit">次</view>
          </view>

          <view class="u-m-t-24">
            <up-line></up-line>
          </view>
        </view>
      </template>
      <view class="x-padding u-m-t-24">
        <view class="u-flex u-row-between">
          <text class="font-bold color-333">结算时长</text>
        </view>
        <view class="u-flex u-m-t-16">
          <input
            class="number-box"
            placeholder="请输入"
            placeholder-class="color-999 u-font-28"
            type="number"
            
            v-model="form.settlementDay"
          />
          <view class="unit">天</view>
        </view>

        <view class="u-m-t-24">
          <up-line></up-line>
        </view>
      </view>
    </view>
    <view class="u-m-t-32 container">
      <view
        class="u-flex u-row-between u-p-b-26"
        @click="go.to('PAGES_DISTRIBUTION_LEVEL_LIST')"
      >
        <text class="font-bold color-333">分销员等级</text>
        <view class="u-flex">
          <text class="u-font-24">去设置</text>
          <up-icon name="arrow-right"></up-icon>
        </view>
      </view>
      <up-line></up-line>
      <view class="u-flex u-row-between u-p-t-26">
        <text class="font-bold color-333">未开通页面</text>
        <view class="u-flex">
          <text class="u-font-28 color-999">请前往PC端设置</text>
        </view>
      </view>
    </view>

    <my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
  </view>
</template>

<script setup>
import { reactive, computed, onMounted, ref, inject } 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";

import { watch } from "vue";
const distributionStore = inject("distributionStore");

//分销奖励次数
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({
  isEnable: 1,
  openType: "pay",
  inviteCount: 1,
  inviteConsume: 0,
  payAmount: 0,
  rewardCount: 1,
  settlementDay: 1,
  upgradeType: "auto",
  notActivatedPage: null,
  levelConfigList: [],
});
watch(
  () => isLimitCount.value,
  (newval) => {
    if (newval) {
      form.rewardCount = -1;
    } else {
      form.rewardCount = "";
    }
  }
);

async function save() {
  console.log(form);
  const submitData = {
    ...form,
  };
  const res = await distributionStore.editConfig(submitData);
  uni.showToast({
    title: "更新成功",
    icon: "none",
    duration: 2000,
    success: function () {},
  });
}
function cancel() {
  uni.navigateBack();
}
watch(
  () => distributionStore.config,
  (newval) => {
    setForm(newval);
  }
);

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

onMounted(() => {
  setForm(distributionStore.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;
}
</style>
