<template>
	<view class="body">
		<view class="top_head">
			<view class="text_des">
				<text class="month_num">{{ nowTime.month }}</text>
				<text class="month_text">月</text>
				<text class="month_year">{{ nowTime.year }}</text>
				<text class="point">.</text>
				<text class="title">报工报表</text>
			</view>
			<view class="top_desc">
        <view>
          <view class="text">上月报工汇总</view>
          <view class="text-gray">总数</view>
          <view class="remaining">{{ lastMonthSum.sumNumber }}</view>
          <view class="row head_block">
            <view class="flex_1">
              <text class="text-gray">合格数</text>
              <text class="text_green">{{ lastMonthSum.totalQualityNumber }}</text>
            </view>
            <view class="flex_1">
              <text class="text-gray">废品数</text>
              <text class="income">{{ lastMonthSum.totalWasteNumber }}</text>
            </view>
          </view>
        </view>
        <view>
          <view class="text">本月报工汇总</view>
          <view class="text-gray">总数</view>
          <view class="remaining">{{ thisMonthSum.sumNumber }}</view>
          <view class="row head_block">
            <view class="flex_1">
              <text class="text-gray">合格数</text>
              <text class="text_green">{{ thisMonthSum.totalQualityNumber }}</text>
            </view>
            <view class="flex_1">
              <text class="text-gray">废品数</text>
              <text class="income">{{ thisMonthSum.totalWasteNumber }}</text>
            </view>
          </view>
        </view>
			</view>
		</view>
		<view class="main">
			<view class="row_block">
				<view class="the_title" style="justify-content: space-between;">
					<view class="left_title">
						<view class="title_icon"></view>
						<text class="margin_stand-samll font-big wide">30天报工数据</text>
					</view>
					<view class="right_btn">
						<view v-for="(item, index) in historyBtn" :key="index" :class="item.state ? 'active_btn' : ''"
							@click="changeHistoryBtn(item.type)">{{ item.name }}</view>
					</view>
				</view>
				<view class="charts-box" style="height: 200px;">
					<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :reshow="delayload"
						:opts="{ xAxis: { itemCount: historyData.length, disableGrid: true,  labelCount: 5 }, yAxis: { disableGrid: true, data: [{ disabled: true }] } }"
						:chartData="historyData"/>
				</view>
			</view>
      <view class="row_block">
        <view class="the_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">最近30天计时列表</text>
        </view>
        <view class="detail_list">
          <view v-for="(item, index) in detailList" :key="index" class="detail_item">
            <view>
              <view class="font-middle">报工日期</view>
              <view class="font-small">{{ item.reportDay }}</view>
            </view>
            <view class="right_content">
              <view class="hour">计时时长</view>
              <view class="text-gray font-middle">{{ item.reportTime }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="end_block">
        <view class="the_title" style="margin-bottom: 40rpx;">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">本月上月计时汇总</text>
        </view>
        <view class="flex_wrap">
          <view>
            <text class="text-gray" style="margin-right: 10px">上月总计时</text>
            <text class="text_green">{{ sumReportTime.totalWasteNumber }}</text>
          </view>
          <view>
            <text class="text-gray" style="margin-right: 10px">本月总计时</text>
            <text class="text_green">{{ sumReportTime.totalQualityNumber }}</text>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script setup>
import dataOne from '@/pages/json/1.json';
import { getDayReportTime, getLastMonthSum, getReportTime, getSumReportTime, getThisMonthSum } from "@/api/mes/report";
import useUserStore from "@/store/modules/user";
import Config from '@/pages/js/config'
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";

const now = new Date();
const nowTime = {
  year: now.getFullYear(),
  month: now.getMonth() + 1,
  day: now.getDate()
};

const useStore = useUserStore()
const userId = ref(useStore.userId)
const isCanvas2d = ref(Config.ISCANVAS2D)

let expendCount = 0;
let delayload = ref(false);
let historyData = ref({});
const reportTime = ref([])
const lastMonthSum = ref({});
const thisMonthSum = ref({});
const sumReportTime = ref({})
const detailList = ref([]);

const historyBtn = ref([
  {
    name: "总数",
    state: 1,
    type: "sumNumber"
  },
  {
    name: "合格数",
    state: 0,
    type: "totalQualityNumber"
  },
  {
    name: "废品数",
    state: 0,
    type: "totalWasteNumber"
  }
]);

const filterHistoryData = () => {
  getReportTimeList()
  let type = historyBtn.value.filter(x => x.state === 1)[0].type;
  switch (type) {
    case "sumNumber":
      historyData.value = dataOne.sumNumber;
      break;
    case "totalQualityNumber":
      historyData.value = dataOne.totalQualityNumber;
      break;
    case "totalWasteNumber":
      historyData.value = dataOne.totalWasteNumber;
      break;
  }
}

const  changeHistoryBtn = (type) => {
    for (let i = 0; i < historyBtn.value.length; i++) {
      if (historyBtn.value[i].type === type) {
        historyBtn.value[i].state = 1;
      } else {
        historyBtn.value[i].state = 0;
      }
    }
    filterHistoryData();
  }
// 30天报工数据
const getReportTimeList = ()=>{
  getReportTime(userId.value).then(response => {
    reportTime.value = response.data;
    dataOne.sumNumber.categories = []
    dataOne.sumNumber.series[0].data = []
    dataOne.totalQualityNumber.categories = []
    dataOne.totalQualityNumber.series[0].data = []
    dataOne.totalWasteNumber.categories = []
    dataOne.totalWasteNumber.series[0].data = []
    reportTime.value.forEach(item=>{
      dataOne.sumNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
      dataOne.sumNumber.series[0].data.push(item.sumNumber)
      dataOne.totalQualityNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
      dataOne.totalQualityNumber.series[0].data.push(item.totalQualityNumber)
      dataOne.totalWasteNumber.categories.push(`${new Date(item.reportDay).getMonth() + 1}月${new Date(item.reportDay).getDate()}日`)
      dataOne.totalWasteNumber.series[0].data.push(item.totalWasteNumber)
    })
  });
}

// 上月报工汇总
const getLastMonthSumList = ()=>{
  getLastMonthSum(userId.value).then(response => {
    lastMonthSum.value = response.data;
  });
}

// 本月报工汇总
const getThisMonthSumList = ()=>{
  getThisMonthSum(userId.value).then(response => {
    thisMonthSum.value = response.data;
  });
}

// 本月上月计时汇总
const getSumReportTimeList = ()=>{
  getSumReportTime(userId.value).then(response => {
    sumReportTime.value = response.data;
  });
}

// 最近30天计时列表
const getDayReportTimeList = ()=>{
  getDayReportTime(userId.value).then(response => {
    detailList.value = response.data;
  });
}

onLoad(() => {
  filterHistoryData()
  getReportTimeList()
  getLastMonthSumList()
  getThisMonthSumList()
  getSumReportTimeList()
  getDayReportTimeList()
});
</script>

<style scoped lang="scss">
.body {
	height: 100%;
	background-color: #f1f1f1;
	margin: 0;
	padding-bottom: 20rpx;

	.text_green {
		color: #4ECDB6;
	}

	.main {
		width: 100%;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.detail_list {
			height: 700rpx;
			overflow: auto;
			color: #9E9E9E;

			.detail_item {
				display: flex;
				margin: 20rpx 0;
				align-items: center;
				.right_content {
					width: 75%;
					text-align: center;
				}
				.hour {
					color: #000;
				}
			}
		}

		.right_btn {
			float: right;
			display: flex;
			color: #ccc;
			font-size: 22rpx;

			view {
				line-height: 50rpx;
				height: 50rpx;
				margin: 0 20rpx;
			}

			.active_btn {
				padding: 0 20rpx;
				border: 1px solid #ccc;
				border-radius: 40rpx;
			}
		}

		.end_block {
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx;
			position: relative;
			padding: 20rpx;
      .flex_wrap {
        display: flex;
        justify-content: space-between;
      }
		}

		.row_block {
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx;
			position: relative;
			padding: 20rpx;

			&::after {
				content: "";
				height: 0;
				width: 92%;
				position: absolute;
				transform: translateX(-50%);
				left: 50%;
				bottom: 0;
				border-top: 1px dashed #ccc;
			}
		}

		.the_title {
			display: flex;
			align-items: center;

			.left_title {
				display: flex;
				align-items: center;
			}

			.title_icon {
				background-color: #7E7E7E;
				height: 40rpx;
				width: 10rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				font-size: 16px;
				font-weight: 600;
			}
		}

		.extend_rank {
			width: 100%;
			background-color: #F5F5F5;
			box-sizing: border-box;
			padding: 10rpx;

			.rank_item {
				width: 100%;
				margin: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				font-size: 26rpx;
				justify-content: space-between;
				align-items: center;

				image {
					width: 10%;
				}

				text {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					display: block;
				}

				.name {
					margin: 0 10rpx;
					color: #7D7D7D;
					width: 20%;
				}

				.desc {
					width: 50%;
					color: #ccc;
				}

				.money {
					width: 20%;
					text-align: right;
				}
			}
		}
	}

	.top_head {
		height: 495rpx;
		width: 100%;
		padding: 110rpx 10rpx 0 10rpx;
		background: url('@/static/images/icon/background.png') no-repeat center 0;
		box-sizing: border-box;

		.top_desc {
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        font-size: 30rpx;
        font-weight: bold;
        color: #1783f2;
        margin-bottom: 10px
      }
			.text-gray {
				font-size: 28rpx;
				color: #ccc;
				margin-right: 10rpx;
			}

			.remaining {
				font-size: 46rpx;
			}

			.flex_1 {
				flex: 1;
			}

			.head_block {
				margin-top: 20rpx;

				.income {
					color: #E34B5E;
				}
			}
		}

		.text_des {
			height: 100rpx;
			color: #fff;
			font-weight: 900;
			position: relative;
			margin-left: 60rpx;

			text {
				display: inline-block;
				height: 100%;
			}

			.month_num {
				font-size: 90rpx;
			}

			.month_text {
				font-size: 56rpx;
			}

			.month_year {
				font-size: 22rpx;
				position: absolute;
				left: 60rpx;
				top: 20rpx;
			}

			.point {
				font-size: 40rpx;
			}

			.title {
				font-size: 40rpx;
			}
		}
	}
}
</style>
