<template>
	<div style="background-color: #ffffff; width: 100%; height: 100%;">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
        <el-form :model="queryParams" ref="queryForm" labelWidth="90">
          <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="mb10">
              <el-form-item label="月份范围">
                <el-date-picker v-model="queryParams.month" type="monthrange" range-separator="-" start-placeholder="开始月份" format="YYYY-MM" value-format="YYYY-MM" end-placeholder="结束月份"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4" class="mb10 ml10">
              <el-button-group>
                <el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询
                </el-button>
                <el-button icon="ele-Refresh" @click="closeQuery"> 重置 </el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 8px;">
            <div ref="chartsRef" style="width: 100%; height: 100%"></div>
        </el-card>
	</div>
</template>

<script lang="ts" setup="">
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
const chartsRef = ref();
var props = defineProps({
	dataArr: {
		type: String,
	},
});
const initCharts = () => {
	const myChart = echarts.init(chartsRef.value);
	const option = {
		title: {
			text: '月度不良产品趋势图',
            left:'50%'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#283b56',
				},
			},
		},
		legend: {bottom:0},
		toolbox: {
			show: true,
			feature: {
				dataView: { readOnly: false },
				restore: {},
				saveAsImage: {},
			},
		},
		dataZoom: {
			show: false,
			start: 0,
			end: 100,
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: true,
				data: ['8月', '9月', '10月', '11月', '12月'],
			},
			{
				type: 'category',
				boundaryGap: true,
				data: [1, 2, 3, 4, 5],
			},
		],
		yAxis: [
			{
				type: 'value',
				scale: true,
				name: '',
				max: 1.3,
				min: 0,
				boundaryGap: [0.2, 0.2],
			},
			{
				type: 'value',
				scale: true,
				name: '',
				max: 200000,
				min: 0,
				boundaryGap: [0.2, 0.2],
			},
		],
		series: [
			{
				name: '不良品数量',
				type: 'bar',
				xAxisIndex: 1,
				yAxisIndex: 1,
				data: [186180, 184180, 0, 0, 0],
				label: {
					show: true,
					position: 'inside',
				},
			},
			{
				name: '不良率',
				type: 'line',
				data: [1.28, 1.24, 0, 0, 0],
				label: {
					show: true,
					position: 'top',
                    formatter: '{c} %'
				},
			},
		],
	};
	myChart.clear();
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};
watch(
	() => props.dataArr,
	(newValue, oldValue) => {
		initCharts();
	}
);
const bardialogRef = ref();
  const loading = ref(false);
  const queryParams = ref<any>({});
  const itembar = ref<any>({});
  // 查询操作
  const handleQuery = async () => {
      loading.value = true;
    //   var res = await processEquipmentWork(Object.assign(queryParams.value));
    //   if (res.data.result) {
    //       let data = Object.values(res.data.result);
    //   }
      loading.value = false;
  };
  const closeQuery = async () => {
      queryParams.value = {};
      handleQuery();
  };
onMounted(() => {
	initCharts();
});
</script>

<style lang="scss" scoped></style>
