<template>
	<!-- 今日做糖列表 -->
	<div class="sugarPage flex-col">
	  <s-header :name="$t('device.todaysSugarList')" :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-list class="o-pt-20" v-model:loading="loading" :finished="finished" :finished-text="$t('public.noMore')"
		  @load="selectSugarListFun">
		  <van-cell v-for="(item, index) in list" :key="index" :title="showDoList(item)" />
		</van-list>
	  </div>
	</div>
  </template>
  <script>
  import {
	onMounted,
	ref
  } from "vue";
  import sHeader from "@/components/SimpleHeader";
  import {
	getDeviceDetal,
	selectSugarList
  } from "@/service/device";
  import {
	showFailToast
  } from "vant";
  import {
	getLoginUser,
	styleUrl
  } from "@/common/js/utils";
  import {
	useRoute
  } from 'vue-router';
  import dateUtil from "../../utils/dateUtil";
  import { useI18n } from "vue-i18n";
  
  
  
  export default {
	setup() {
	  const { t } = useI18n();
	  const route = useRoute();
	  const deviceId = route.query.deviceId;
	  const deviceDetal = ref(null);
	  const loading = ref(false);
	  const finished = ref(false);
	  const user = getLoginUser();
	  const list = ref([]);
	  // 初始化页面获取列表
	  onMounted(async () => {
		// 加载样式
		styleUrl('doSugar');
		getDeviceDetalFun();
		selectSugarListFun();
		// console.log(deviceDetal);
	  });
  
  
	  // 获取设备数据
	  const getDeviceDetalFun = async () => {
		const {
		  data
		} = await getDeviceDetal({
		  id: deviceId
		});
		if (data.code === '00000') {
		  deviceDetal.value = data.data;
		} else {
		  showFailToast(data.message);
		}
	  }
  
	  // 获取做糖列表数据
	  const selectSugarListFun = async () => {
		// console.log(user);
		const {
		  data
		} = await selectSugarList({
		  adminId: user.id
		});
		if (data.code) {
		  // list.value = data.data.map((item) => {
		  //   return item.productName;
		  // });
		  list.value = data.data;
		  finished.value = true;
		} else {
		  showFailToast(data.message);
		}
	  };
	  const showDoList = (item) => {
		if (!item) {
		  return "";
		}
		const currentDate = dateUtil.formateDate(new Date(item.modifyDate), "yyyy/MM/dd hh:mm:ss");
		return t('device.goods') + item.productName + t('device.doTime') + currentDate + t('device.byDeice') + item.clientId.slice(-6);
	  }
  
	  return {
		list,
		deviceDetal,
		loading,
		finished,
		selectSugarListFun,
		showDoList
	  };
	},
	components: {
	  sHeader
	},
  };
  </script>
  <style lang="less" scoped>
  @import "../../common/style/common";
  </style>
  