<template>
  <!-- 添加分销人 -->
  <div class="paramsSetPage flex-col">
    <s-header :name="$t('device.addDistributor')" :noback="false"></s-header>
    <div class="paramsSetBox mod1 flex-col">
      <van-form @submit="updateAdFun">
        <van-field v-model="adInfo.clientId" name="clientId" :label="`${$t('device.addDistributor')}:`"
          :placeholder="$t('device.equipmentNoPlaceholder')"
          :rules="[{ required: true, message: $t('device.equipmentNoPlaceholder') }]" />

        <van-field v-model="adInfo.adminProportion" name="adminProportion"
          :label="`${$t('device.proportionOfPlatformDistributionLabel')}:`"
          :placeholder="$t('device.proportionOfPlatformDistributionPlaceholder')"
          :rules="[{ required: true, message: $t('device.proportionOfPlatformDistributionPlaceholder') }]">
          <template #button>%</template>
        </van-field>

        <van-field v-model="adInfo.proportion" name="proportion"
          :label="`${$t('device.merchantDistributionProportionLabel')}:`"
          :placeholder="$t('device.merchantDistributionProportionPlaceholder')"
          :rules="[{ required: true, message: $t('device.merchantDistributionProportionPlaceholder') }]">
          <template #button>%</template>
        </van-field>
        <div class="vanInputRow" v-if='adInfo.type >= 1'>
          <van-field v-model="adInfo.agencyName" name="agencyName" :label="`${$t('device.accountNoOfDistributorLabel')}:`"
            :placeholder="$t('device.accountNoOfDistributorPlaceholder')" />
          <van-field v-model="adInfo.agencyProportion" name="agencyProportion"
            :label="`${$t('device.distributionProportionLabel')}:`"
            :placeholder="$t('device.distributionProportionPlaceholder')">
            <template #button>%</template>
          </van-field>
        </div>
        <div class="vanInputRow" v-if='adInfo.type >= 2'>
          <van-field v-model="adInfo.merchantName" name="merchantName"
            :label="`${$t('device.accountNoOfDistributorLabel')}:`"
            :placeholder="$t('device.accountNoOfDistributorPlaceholder')" />
          <van-field v-model="adInfo.merchantProportion" name="merchantProportion"
            :label="`${$t('device.distributionProportionLabel')}:`"
            :placeholder="$t('device.distributionProportionPlaceholder')">
            <template #button>%<span class="deleteSpan" @click="delectType()"><van-icon
                  name="delete-o" />{{ $t('device.delete') }}</span></template>
          </van-field>
        </div>
        <div class="vanInputRow" v-if='adInfo.type === 3'>
          <van-field v-model="adInfo.personageName" name="personageName"
            :label="`${$t('device.accountNoOfDistributorLabel')}:`"
            :placeholder="$t('device.accountNoOfDistributorPlaceholder')" />
          <van-field v-model="adInfo.personageProportion" name="personageProportion"
            :label="`${$t('device.distributionProportionLabel')}:`"
            :placeholder="$t('device.distributionProportionPlaceholder')">
            <template #button>%<span class="deleteSpan" @click="delectType()"><van-icon
                  name="delete-o" />{{ $t('device.delete') }}</span></template>
          </van-field>
        </div>
        <div class="vanInputRow addRow" v-if='adInfo.type < 3'>
          <span class="addSpan" @click="addType()"><van-icon
              name="plus" />{{ $t('device.continueToAddDistributors') }}</span>
        </div>
        <van-row justify="space-around" style="padding: 1em">
          <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em"
            native-type="submit">{{ $t('device.submitForApproval') }}</van-button>
        </van-row>
      </van-form>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal, getProportion, saveProportion } from '@/service/device';
import { showFailToast, showSuccessToast } from 'vant';
import { getLoginUser } from "@/common/js/utils";

export default {
  components: { sHeader },
  setup() {
    const user = getLoginUser();
    const route = useRoute();
    const router = useRouter();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const adInfo = ref({
      adminId: user.id, // 当前登录账户的id
      clientId: '', // 设备编号
      type: 0, // 分销的人数
      proportion: 99, // 该商户自己的分销比例
      adminProportion: 1, // 平台的分账比例
      agencyName: '', // 分账人的账号
      agencyProportion: '', // 分账人的比例

      merchantName: '', // 分账人的账号
      merchantProportion: '', // 分账人的比例

      personageName: '', // 分账人的账号
      personageProportion: '', // 分账人的比例

    });
    // 初始化页面获取列表
    onMounted(async () => { getDeviceDetalFun(); });
    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: deviceId });
      if (data.code === '00000') {
        deviceDetal.value = data.data;
        adInfo.value.clientId = deviceDetal.value.clientId;
        getProportionFun();
      } else { showFailToast(data.message); }
    }
    const getProportionFun = async () => {
      const { data } = await getProportion({ adminId: user.id, clientId: deviceDetal.value.clientId });
      if (data.code === '00000') {
        adInfo.value.id = data.data.id;
        adInfo.value.type = data.data.type;
        adInfo.value.proportion = data.data.proportion;
        adInfo.value.agencyName = data.data.agencyName;
        adInfo.value.agencyProportion = data.data.agencyProportion;
        adInfo.value.merchantName = data.data.merchantName;
        adInfo.value.merchantProportion = data.data.merchantProportion;
        adInfo.value.personageName = data.data.personageName;
        adInfo.value.personageProportion = data.data.personageProportion;
        adInfo.value.adminProportion = data.data.adminProportion;
        if (adInfo.value.personageName !== '' && adInfo.value.personageProportion !== '') {
          adInfo.value.type++;
        }
        if (adInfo.value.merchantName !== '' && adInfo.value.merchantProportion !== '') {
          adInfo.value.type++;
        }
        if (adInfo.value.agencyName !== '' && adInfo.value.agencyProportion !== '') {
          adInfo.value.type++;
        }
      } else { showFailToast(data.message); }
    }
    const delectType = () => { adInfo.value.type--; }
    const addType = () => { adInfo.value.type++; }
    const updateAdFun = async () => {
      const params = {};
      params.id = adInfo.value.id;
      params.adminId = adInfo.value.adminId;
      params.clientId = adInfo.value.clientId;
      params.proportion = adInfo.value.proportion;
      params.adminProportion = adInfo.value.adminProportion;
      params.type = 0;
      if (adInfo.value.personageName !== '' && adInfo.value.personageProportion !== '') {
        params.personageName = adInfo.value.personageName;
        params.personageProportion = adInfo.value.personageProportion;
        params.type++;
      }
      if (adInfo.value.merchantName !== '' && adInfo.value.merchantProportion !== '') {
        params.merchantName = adInfo.value.merchantName;
        params.merchantProportion = adInfo.value.merchantProportion;
        params.type++;
      }
      if (adInfo.value.agencyName !== '' && adInfo.value.agencyProportion !== '') {
        params.agencyName = adInfo.value.agencyName;
        params.agencyProportion = adInfo.value.agencyProportion;
        params.type++;
      }
      const { data } = await saveProportion(params);
      if (data.code === '00000') {
        showSuccessToast(data.data);
        router.back();
      } else { showFailToast(data.message); }
      console.log('updateAdFun', data);
    };
    return {
      adInfo,
      delectType,
      addType,
      updateAdFun
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../common/style/common";
@import "./index.less";
</style>
