<template>
  <!-- 自充值 -->
  <div class="page flex-col">
    <s-header :name="'自充值'" :noback="false"></s-header>
    <div class="box1 flex-col">
      <van-field
          v-model="deviceValue"
          is-link
          readonly
          label="机器:"
          placeholder="请选择机器"
          @click="deviceShow = true"
      />
      <van-popup v-model:show="deviceShow" round closeable position="bottom">
          <van-cascader
              v-model="deviceId"
              title="请选择机器"
              :options="deviceOptions"
              @close="show = false"
              @finish="onDeviceFinish"
          />
      </van-popup>
      <van-field
          v-model="productValue"
          is-link
          readonly
          label="花型:"
          placeholder="请选择花型"
          @click="productShow = true"
      />
      <van-popup v-model:show="productShow" round closeable position="bottom">
          <van-cascader
              v-model="productId"
              title="请选择花型"
              :options="productOptions"
              @close="show = false"
              @finish="onProductFinish"
          />
      </van-popup>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label"><span>支付方式:</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">微信</van-radio>
            <van-radio name="ALIPAY_NATIVE" icon-size="18px">支付宝</van-radio>
          </van-radio-group>
        </div>
      </div>
      <van-button round type="primary" class="volumeChangeButton" @click="submitForm" >提交订单</van-button>
      <van-popup v-model:show="uniPayShow" position="center" :style="{ width: '90%', 'text-align': 'center' }">
        <p>订单号: {{uniPayObj.sn}}</p>
        <img :src="uniPayObj.rd_Pic"/>
      </van-popup>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getListEquipment, selectProducts } from '@/service/device';
import { uniPayAjax } from '@/service/uniPay';
import { Toast } from 'vant';
import { getLoginUser } from '@/common/js/utils';

export default {
  setup() {
    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;
        getProduct();
    }
    const productId = ref('');
    const productValue = ref('');
    const productShow = ref(false);
    const productOptions = ref([]);
    const onProductFinish = ({ selectedOptions }) => {
        productShow.value = false;
        productValue.value = selectedOptions[0].text;
    }
    const payType = ref('WEIXIN_NATIVE');
    const uniPayObj = ref({});
    const uniPayShow = ref(false);
    // 初始化页面获取列表
    onMounted(async () => {
      getDeviceOptionFun();
    });
    // 获取机器下拉
    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,
            clientId: item.clientId,
          };
        });
      } else { Toast.fail(data.message); }
    }
    // 获取花形下拉列表
    const getProduct = async () => {
      const { data } = await selectProducts({equipmentId: deviceId.value});
      if (data.code) {
        productOptions.value = data.data.map(item => {
          return {
            text: item.productName,
            value: item.id,
          };
        })
      } else { Toast.fail(data.message); }
    }
    // 提交表单
    const submitForm = async () => {
      if (deviceId.value === '') { Toast.fail('请选择机器'); return; }
      if (productValue.value === '') { Toast.fail('请选择花型'); return; }
      const device = deviceOptions.value.filter(v => v.value === deviceId.value);
      const { data } = await uniPayAjax({clientId: device[0].clientId, frpCode: payType.value, productName: productValue.value});
      if (data.code === 0) {
        uniPayObj.value = JSON.parse(data.data);
        uniPayShow.value = true;
      } else {
        Toast.fail(data.errmsg);
      }
    };
    return {
        deviceId,
        deviceValue,
        deviceShow,
        deviceOptions,
        onDeviceFinish,
        productId,
        productValue,
        productShow,
        productOptions,
        onProductFinish,
        payType,
        submitForm,
        uniPayObj,
        uniPayShow,
    };
  },
  components: { sHeader, navBar },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 375px;
  height: 667px;
  overflow: hidden;
  .van-cell { margin-top: 13px; }
  .van-cell:after { display: none; }
  .van-field__label { width: 91px; }
  .volumeChangeButton {
    background-color: #4d6add;
    width: 220px;
    height: 34px;
    margin: 49px 0 0 78px;
    .van-button__text { font-size: 15px; }
  }
  .box1 {
    width: 375px;
    height: 237px;
  }
}
</style>
