<template>
  <!-- 设备充值 -->
  <div class="rechargePage flex-col">
    <s-header :name="$t('device.equipmentRecharge')" :noback="false"></s-header>
    <div class="box1 flex-col">
      <div class="baseRow flex-row justify-between">
        <div class="group2 flex-col"></div>
        <span class="baseText">{{ $t('device.currentPriceIs') }}: <span class="recharge">0/{{ $t('device.month')
        }}</span></span>
      </div>
      <van-field v-model="deviceValue" is-link readonly :label="$t('device.purchasedMachine')"
        :placeholder="$t('device.pleaseSelectAMachine')" @click="deviceShow = true" />
      <van-popup v-model:show="deviceShow" round closeable position="bottom">
        <van-cascader v-model="deviceId" :title="$t('device.pleaseSelectAMachine')" :options="deviceOptions"
          @close="show = false" @finish="onDeviceFinish" />
      </van-popup>
      <van-field v-model="number" type="number" :label="$t('device.quantityPurchased')"
        :placeholder="$t('device.pleaseEnterThePurchaseQuantity')"
        :rules="[{ required: true, message: $t('device.pleaseEnterThePurchaseQuantity') }]" class="numberInput">
        <template #button>
          <span>/{{ $t('device.month') }}</span>
        </template>
      </van-field>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <span>{{ $t('device.paymentMethod') }}:</span>
        </div>
        <div class="van-cell__value van-field__value radioBox">
          <van-radio-group v-model="payType" direction="horizontal">
            <van-radio name="WEIXIN_NATIVE" icon-size="18px">{{ $t('device.weChat') }}</van-radio>
            <van-radio name="ALIPAY_NATIVE" icon-size="18px">{{ $t('device.alipay') }}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <van-button round type="primary" class="volumeChangeButton" @click="submitForm">{{ $t('device.placeOrder') }}
      </van-button>
      <van-popup v-model:show="rechargeShow" position="center" :style="{ width: '90%', 'text-align': 'center' }">
        <p>{{ $t('device.orderNumber') }}: {{ rechargeObj.sn }}</p>
        <p>{{ $t('device.price') }}: {{ rechargeObj.price }}</p>
        <img :src="rechargeObj.image" />
      </van-popup>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { getListEquipment, rechargeAjax } from "@/service/device";
import { showFailToast } from "vant";
import { getLoginUser, styleUrl } from "@/common/js/utils";
import { useRoute } from "vue-router";
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const user = getLoginUser();
    const deviceId = ref("");
    const deviceValue = ref("");
    const deviceShow = ref(false);
    const deviceOptions = ref([]);
    const onDeviceFinish = ({ selectedOptions }) => {
      deviceShow.value = false;
      deviceValue.value = selectedOptions[0].text;
    };
    const number = ref(1);
    const payType = ref("WEIXIN_NATIVE");
    const rechargeObj = ref({});
    const rechargeShow = ref(false);
    // 初始化页面获取列表
    onMounted(async () => {
      styleUrl('recharge');
      deviceId.value = route.query.deviceId;
      getDeviceOptionFun();
      // getDeviceDetalFun();
    });
    // const getDeviceDetalFun = async () => {
    //   const { data } = await getDeviceDetal({ id: deviceId.value });
    //   console.log(data);
    // }
    // 获取机器下拉
    const getDeviceOptionFun = async () => {
      const { data } = await getListEquipment({ adminId: user.id });
      if (data.code === "00000") {
        deviceOptions.value = data.data.map((item) => {
          return {
            text: item.name,
            value: item.id,
          };
        });
        const device = deviceOptions.value.filter(
          (v) => v.value === parseInt(deviceId.value)
        );
        if (device && device.length > 0) {
          deviceValue.value = device[0].text;
        }
      } else {
        showFailToast(data.message);
      }
    };
    // 提交表单
    const submitForm = async () => {
      if (deviceId.value === "") {
        showFailToast(t('device.pleaseSelectAMachine'));
        return;
      }
      const { data } = await rechargeAjax({
        number: number.value,
        equipmentId: deviceId.value,
        frpCode: payType.value,
      });
      if (data.code === "00000") {
        rechargeObj.value = data.data;
        rechargeShow.value = true;
      } else {
        showFailToast(data.message);
      }
    };
    return {
      deviceId,
      deviceValue,
      deviceShow,
      deviceOptions,
      onDeviceFinish,
      number,
      payType,
      submitForm,
      rechargeObj,
      rechargeShow,
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>
