<template>
  <!-- 远程做糖 -->
  <div class="page flex-col">
    <s-header :name="$t('device.remoteSugarMaking')" :noback="false"></s-header>
    <div class="box1 flex-col">
      <div class="block2 flex-row justify-between">
        <div class="block3 flex-col"></div>
        <span class="info2">{{$t('device.equipmentName')}}：{{deviceDetal ? deviceDetal.name : ''}}</span>
      </div>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="{{$t('device.clickToSelectPattern')}}:"
        placeholder="{{$t('device.pleaseSelectAPattern')}}"
        @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
        <van-cascader
            v-model="cascaderValue"
            title="{{$t('device.pleaseSelectAPattern')}}"
            :options="options"
            @close="show = false"
            @finish="onFinish"
        />
      </van-popup>
      <div class="textRow">
        <span @click="pushToDaySugarList">{{$t('device.todaysSugarList')}}>></span>
      </div>
      <div v-if="!doSugartData" class="block5 flex-col" @click="submitDoSugar"><span class="txt3">{{$t('device.submitToMakeSugar')}}</span></div>
      <van-button v-if="doSugartData" round type="primary" class="volumeChangeButton" :disabled="doSugartType" @click="checkData()">{{$t('device.viewResults')}}</van-button>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal, selectProducts, doSugar, selectSugarStatus } from '@/service/device'
import { Toast } from 'vant';
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const show = ref(false);
    const fieldValue = ref('');
    const cascaderValue = ref('');
    const options = ref([]);
    const onFinish = ({ selectedOptions }) => {
        show.value = false;
        fieldValue.value = selectedOptions[0].value
        console.log('onFinish', selectedOptions[0].value);
    }
    const doSugartData = ref(null);
    const doSugartType = ref(true);

    // 初始化页面获取列表
    onMounted(async () => {
        getDeviceDetalFun();
    });

     // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({id : deviceId});
      if (data.code === '00000') {
        deviceDetal.value = data.data;
        getProduct();
      } else { Toast.fail(data.message); }
    }
    // 获取花形下拉列表
    const getProduct = async () => {
        const { data } = await selectProducts({equipmentId: deviceId});
        if (data.code) {
            options.value = data.data.map(item => {
                return {
                    text: item.productName,
                    value: item.productName,
                };
            })
        } else { Toast.fail(data.message); }
    }
    const submitDoSugar = async () => {
        doSugartData.value = null;
        doSugartType.value = true;
        if (fieldValue.value === '') { Toast.fail(t('device.pleaseSelectAPattern')); return; }
        const { data } = await doSugar({equipmentId: deviceId, productName: fieldValue.value});
        if (data.code) {
            doSugartData.value = data.data;
            setTimeout(() => {
                doSugartType.value = false;
            }, 5000);
        } else { Toast.fail(data.message); }
    }
    const checkData = async () => {
        const { data } = await selectSugarStatus({no: doSugartData.value.no});
        if (data.code) {
            Toast.success(data.message);
            doSugartData.value = null;
            doSugartType.value = true;
        } else { Toast.fail(data.message); }
    };
    const pushToDaySugarList = async () => {
        router.push({ path: 'toDaySugarList' })
    }
 
    return {
        deviceDetal,
        show,
        fieldValue,
        cascaderValue,
        options,
        onFinish,
        submitDoSugar,
        doSugartData,
        doSugartType,
        checkData,
        pushToDaySugarList
    };
  },
  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; }
  }
  .textRow {
    text-align: right;
    width: 100%;
    color: rgba(77, 106, 221, 1);
    font-size: 12px;
    line-height: 17px;
    cursor: pointer;
  }
  .box1 {
    width: 375px;
    height: 237px;
    .block2 {
      width: 162px;
      height: 20px;
      margin: 18px 0 0 15px;
      .block3 {
        background-color: rgba(128, 150, 236, 1);
        border-radius: 2px;
        width: 4px;
        height: 12px;
        margin-top: 4px;
      }
      .info2 {
        width: 150px;
        height: 20px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 14px;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 20px;
        display: block;
      }
    }
    .block5 {
      background-color: rgba(77, 106, 221, 1);
      border-radius: 17px;
      height: 34px;
      width: 220px;
      margin: 50px 0 0 78px;
      .txt3 {
        width: 60px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
        font-family: PingFangSC-Medium;
        text-align: center;
        white-space: nowrap;
        line-height: 15px;
        display: block;
        margin: 11px 0 0 80px;
      }
    }
  }
}
</style>
