<template>
	<div
		style="flex: 1"
		class="orderContainer">
		<Container
			name="订单完成情况"
			size="small"
			style="">
			<TimePrompt
				class="timeShow"
				:timestr="timestr" />
			<div style="padding: 5px 10px">
				<dv-scroll-board
					:config="config"
					style="width: 575px; height: 230px"
					ref="orderScrollBoard" />
			</div>
		</Container>
	</div>
</template>
<script>
import Container from '../components/Container';
import TimePrompt from '../components/TimePrompt';
import { formatDate } from '@/utils';
import { switchShowTime } from '../utils';
export default {
	name: 'OrderStatus',
	components: { Container, TimePrompt },
	computed: {
		order() {
			return this.$store.state.websocket.order;
		},
	},
	data() {
		return {
			timestr: '',
			config: {
				header: ['上线时间', '客户名称', '规格', '完成度'],
				headerBGC: 'rgba(32, 55, 96, 0.8)',
				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
				columnWidth: [155, 160, 150],
				data: [],
				rowNum: 6,
			},
		};
	},
	mounted() {
		this.timestr = switchShowTime('日');
	},
	watch: {
		order: {
			handler() {
				let outArr = this.order.map((item) => [
					formatDate(item.planStartTime) || '',
					`<span title=${item.customerName || ''}>${
						item.customerName || ''
					}</span>`,
					`<span title=${item.specifications || ''}>${
						item.specifications || ''
					}</span>`,
					`<span style="display:inline-block;width:60px;">${
						item.completeRate
							? (item.completeRate * 100).toFixed(2) + '%'
							: '0%'
					}</span>
          <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
								item.completeRate
									? item.completeRate.toFixed(2) * 37.68 +
									  ',' +
									  (1 - item.completeRate.toFixed(2)) * 37.68
									: 0 + ',' + 37.68
							}"/>
            </svg>
          </div>`,
				]);
				this.config.data = outArr;
				this.$refs['orderScrollBoard'].updateRows(outArr);
				this.timestr = switchShowTime('日');
			},
		},
	},
};
</script>
<style lang="scss" scoped>
.timeShow {
	position: absolute;
	top: 20px;
	left: 210px;
}
</style>
