<template>
	<view class="container">
		<view class="fs-bg__primary fs-pt160 fs-pb120 fs-pl30 fs-color__white">
			{{config.weather}} / {{config.city}} {{config.temperature}}°C
		</view>
		<view class="fs-pl30 fs-pr30 fs-mt-60">
			<view class="fs-py36 fs-px30 fs-bg__white fs-radius__sm">
				<tui-list-cell unlined padding="0" :size="30" color="#000" :hover="false">
					<view class="fs-flex__between">
						<view>任务统计</view>
						<view>
							<tui-tag :type="summaryDate == 7 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" class="fs-mr20" @click="getSummary(7)">近7日</tui-tag>
							<tui-tag :type="summaryDate == 30 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" @click="getSummary(30)">近30日</tui-tag>
						</view>
					</view>
				</tui-list-cell>
				<view class="fs-flex__between fs-mt30 fs-size__h4">
					<view class="fs-flex__column fs-items__center">
						<tui-circular-progress :diam="70" progressColor="#577EE3" fontColor="#577EE3" :lineWidth="5" :fontSize="16" :percentage="summaryDateList.patrolTaskCount"></tui-circular-progress>
						<tui-text text="巡查任务数" color="#577EE3"></tui-text>
					</view>
					<view class="fs-flex__column fs-items__center">
						<tui-circular-progress :diam="70" progressColor="#FF2B2B" fontColor="#FF2B2B" :lineWidth="5" :fontSize="16" :percentage="summaryDateList.maintainTaskCount"></tui-circular-progress>
						<tui-text text="养护任务数" color="#FF2B2B"></tui-text>
					</view>
					<view class="fs-flex__column fs-items__center">
						<tui-circular-progress :diam="70" progressColor="#FFB703" fontColor="#FFB703" :lineWidth="5" :fontSize="16" :percentage="summaryDateList.problemCreateCount"></tui-circular-progress>
						<tui-text text="问题单数" color="#FFB703"></tui-text>
					</view>
					<view class="fs-flex__column fs-items__center">
						<tui-circular-progress :diam="70" progressColor="#09BE4F" fontColor="#09BE4F" :lineWidth="5" :fontSize="16" :percentage="summaryDateList.maintainOrderCount"></tui-circular-progress>
						<tui-text text="养护单数" color="#09BE4F"></tui-text>
					</view>
				</view>
			</view>
			<view class="fs-mt30 fs-py36 fs-px30 fs-bg__white fs-radius__sm">
				<tui-list-cell unlined padding="0" :size="30" color="#000" :hover="false">
					<view class="fs-flex__between">
						<view>养护类型统计</view>
						<view>
							<tui-tag :type="summaryType == 7 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" class="fs-mr20" @click="getSummaryType(7)">近7日</tui-tag>
							<tui-tag :type="summaryType == 30 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" @click="getSummaryType(30)">近30日</tui-tag>
						</view>
					</view>
				</tui-list-cell>
				<view class="fs-p30">
					<tui-charts-pie ref="tui_charts_pie" :type="2"></tui-charts-pie>
				</view>
				<tui-list-cell unlined padding="0" marginTop ="20" :size="30" color="#000" :hover="false">
					<view class="fs-flex__between">
						<view>员工养护类型统计</view>
						<view>
							<tui-tag :type="staffSummary == 7 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" class="fs-mr20" @click="getStaffSummary(7)">近7日</tui-tag>
							<tui-tag :type="staffSummary == 30 ? 'primary' : 'gray'" size="24rpx" padding="6rpx 15rpx" @click="getStaffSummary(30)">近30日</tui-tag>
						</view>
					</view>
				</tui-list-cell>
				<view class="fs-p30">
					<tui-charts-bar ref="tui_charts_bar" tooltip width="420" :yAxis="staffSummaryList.yAxis" :max="staffSummaryList.max" :splitNumber="staffSummaryList.splitNumber"></tui-charts-bar>
				</view>
			</view>
		</view>
		<tui-white-space :height="30"></tui-white-space>
<!--		<tui-modal :show="showModal" @click="handleModal" @cancel="hideModal" content="发现新版本，是否升级到最新版本？"></tui-modal>-->
	</view>
</template>

<script>
import { version, OSSURL } from '@/config/app'
import { apiVersion, apiGetSummary, apiSummaryType, apiStaffSummary } from '@/api/app'
import { apiGetUserInfo } from '@/api/user'
import moment from 'moment'
export default {
	data() {
		return {
			summaryDate: 7,
			summaryDateList: {},
			summaryType: 7,
			summaryTypeList: [
				{
					value: 0,
					color: '#03ABBE',
					name: '浇水'
				},
				{
					value: 0,
					color: '#EB0909',
					name: '修剪'
				},
				{
					value: 0,
					color: '#FFD54F',
					name: '有害生物防治'
				},
				{
					value: 0,
					color: '#07c160',
					name: '中耕除草'
				},
				{
					value: 0,
					color: '#c084fc',
					name: '补植'
				},
				{
					value: 0,
					color: '#409EFF',
					name: '清理保洁'
				},
				{
					value: 0,
					color: '#e5e5e5',
					name: '绿地巡视'
				},
				{
					value: 0,
					color: '#f59e0b',
					name: '施肥'
				},
        {
          value: 0,
          color: '#999',
          name: '树池篦子'
        }
			],
			staffSummary: 7,
			staffSummaryList:  {
				yAxis: [],
				dataset: [{
					name: '',
					color: '#5677fc',
					source: []
				}],
				max: 50,
				splitNumber: 10
			},
			showModal: false,
			downloadUrl: ''
		}
	},
	onLoad() {
		this.getUserInfo()
		// this.upgradation()
		this.getSummary(this.summaryDate)
		this.getSummaryType(this.summaryType)
		this.getStaffSummary(this.staffSummary)
	},
	methods: {
		// 获取用户基本信息
		getUserInfo() {
			apiGetUserInfo().then(res => {
				this.setUserInfo(res.user)
			})
		},
		// 获取统计数据
		getSummary(type) {
			this.summaryDate = type
			const beginTime = moment().subtract(type, 'days').format('YYYY-MM-DD 00:00:00')
			const endTime = moment().format('YYYY-MM-DD 23:59:59')
			apiGetSummary({data:{beginTime, endTime}}).then(res => {
				this.summaryDateList = res.data
			})
		},
		// 养护类型统计
		getSummaryType(type) {
			this.summaryType = type
			const beginTime = moment().subtract(type, 'days').format('YYYY-MM-DD 00:00:00')
			const endTime = moment().format('YYYY-MM-DD 23:59:59')
			apiSummaryType({data:{beginTime, endTime}}).then(res => {
        // console.log(res.data)
				res.data.forEach((item, index) => {
          console.log(this.summaryTypeList[index])
					this.summaryTypeList[index].value = item.countNum
				})
        // console.log(this.summaryTypeList)
				this.$refs.tui_charts_pie.draw(this.summaryTypeList)
			})
		},
		// 按员工养护类型统计
		getStaffSummary(type) {
			this.staffSummary = type
			const beginTime = moment().subtract(type, 'days').format('YYYY-MM-DD 00:00:00')
			const endTime = moment().format('YYYY-MM-DD 23:59:59')
			apiStaffSummary({data:{beginTime, endTime}}).then(res => {
				res.data.forEach((item, index) => {
					this.staffSummaryList.yAxis[index] = item.userName
					this.staffSummaryList.dataset[0].source[index] = item.countNum
				})
				this.$refs.tui_charts_bar.draw(this.staffSummaryList.dataset)
			})
		},
		// 检查升级
		upgradation() {
			// 检查版本更新
			apiVersion().then(res => {
				const newVersion = res.data.version
				this.downloadUrl = OSSURL + res.data.url
				if (version < newVersion) {
					this.showModal = true
				}
			})
		},
		// 确定升级
		handleModal(event) {
			this.hideModal()
			if (event.index == 1) {
				// 打开系统浏览器下载
				plus.runtime.openURL(this.downloadUrl)
			}
		},
		// 取消升级
		hideModal() {
			this.showModal = false
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
