<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="1"
			:limit="10"
			:table-data="list">
			<!-- <method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:width="120"
				fixed="right"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" /> -->
		</base-table>

		<!-- 分页组件 -->
		<!-- <pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" /> -->

		<!-- 对话框(添加 / 修改) -->
		<!-- <base-dialog
			:dialogTitle="title"
			:dialogVisible="open"
			width="50%"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<DialogForm v-if="open" ref="form" v-model="form" />
		</base-dialog> -->
	</div>
</template>

<script>
import {
  getStatisticalDataPage,
  getProductList,
  getWorkOrderList
} from '@/api/monitoring/statisticalData';
// import Editor from '@/components/Editor';
import moment from 'moment';
// import DialogForm from './dialogForm.vue';

// import basicPageMixin from '@/mixins/lb/basicPageMixin';
export default {
  name: 'statisticalData',
	// components: {
	// 	DialogForm,
	// },
	// mixins: [basicPageMixin],
	data() {
    return {
      list: [],
      dynamicProps:[],
      searchBarFormConfig: [
        {
          type: 'select',
          label: '工单名称',
          placeholder: '请选择工单名称',
          param: 'workOrderIdList',
          selectOptions: [],
          multiple: true,
          labelField: 'name',
          valueField: 'id',
          defaultSelect: []
        },
				{
					type: 'select',
					label: '产品',
          placeholder: '请选择产品',
          param: 'productionId',
					selectOptions: [],
				},
				// {
				// 	type: 'input',
				// 	label: '检测内容',
				// 	placeholder: '请输入检测内容',
				// 	param: 'inspectionDetContent',
				// },
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					// format: 'yyyy-MM-dd HH:mm:ss',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始日期',
					endPlaceholder: '结束日期',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'checkTime',
					// width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				// {
				// 	type: this.$auth.hasPermi(
				// 		'base:quality-inspection-record:create'
				// 	)
				// 		? 'button'
				// 		: '',
				// 	btnName: '新增',
				// 	name: 'add',
				// 	plain: true,
				// 	color: 'success',
				// },
			],
			// tableBtn: [
			// 	this.$auth.hasPermi('base:quality-inspection-record:update')
			// 		? {
			// 				type: 'edit',
			// 				btnName: '修改',
			// 		  }
			// 		: undefined,
      //   this.$auth.hasPermi('base:quality-inspection-record:delete')
			// 		? {
			// 				type: 'delete',
			// 				btnName: '删除',
			// 		  }
			// 		: undefined,
			// ].filter((v) => v),
			// tableProps: [
			// 	{
			// 		prop: 'createTime',
			// 		label: '添加时间',
			// 		fixed: true,
			// 		width: 180,
			// 		filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
			// 	},
			// 	{
			// 		// width: 128,
			// 		prop: 'inspectionDetContent',
			// 		label: '检测内容',
			// 	},
			// 	{
			// 		// width: 128,
			// 		prop: 'lineName',
			// 		label: '产线',
			// 	},
			// 	{
			// 		// width: 128,
			// 		prop: 'checkPerson',
			// 		label: '检测人员',
			// 	},
			// 	{
			// 		// width: 160,
			// 		prop: 'checkTime',
			// 		label: '检测时间',
			// 		filter: (val) =>
			// 			val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-',
			// 	},
			// 	{
			// 		width: 90,
			// 		prop: 'source',
			// 		label: '来源',
			// 		filter: (val) => ['未知', '手动', '自动'][val],
			// 	},
			// ],
      // 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应

			// searchBarKeys: ['inspectionDetContent', 'checkTime', 'productionLineId'],
			// form: {
			// 	id: undefined,
			// 	inspectionDetId: undefined,
			// 	inspectionDetContent: undefined,
			// 	productionLineId: undefined,
			// 	sectionId: undefined,
			// 	checkPerson: undefined,
			// 	checkTime: undefined,
			// 	source: undefined,
			// 	explainText: undefined,
			// 	remark: undefined,
			// },
			// 查询参数
			queryParams: {
        workOrderIdList:undefined,
        productionId: undefined,
        startTime: undefined,
        endTime: undefined,
				// productionLineId: null,
			},
		};
  },
	created() {
		// this.getProductLineList();
  },
  computed: {
    tableProps() {
      return [
        {
          // width: 128,
          prop: 'workOrderName',
          label: '工单名称',
        },
        {
          // width: 128,
          prop: 'productionName',
          label: '产品',
        },
        {
          // width: 160,
          prop: 'inspectionContent',
          label: '检测内容',
        },
        ...this.dynamicProps,
        {
          // width: 128,
          prop: 'sumScrap',
          label: '未检测总数',
        },
        {
          // width: 128,
          prop: 'scrapRatio',
          label: '比例(%)',
          // subcomponent: {
          // 	name: 'TextOnly',
          // 	props: {
          // 		injectData: {
          // 			type: Object,
          // 			default: () => ({}),
          // 		},
          // 	},
          // 	data() {
          // 		return {
          // 			text: '比例',
          // 		};
          // 	},
          // 	methods: {
          // 		handleEmit(payload) {
          // 			console.log('handleEmit', payload);
          // 		},
          // 	},
          // 	render(h) {
          // 		return h('el-button', { props: { type: 'text' } }, this.text);
          // 	},
          // },
        },
      ];
    },
  },
  mounted() {
    if (this.$route.query.woIdString) {
      console.log(this.$route.query.woIdString)
      this.queryParams.workOrderIdList = this.$route.query.woIdString.split(',')
      // this.queryParams.workOrderIdList = [this.$route.query.woIdString]
      // let arr =[]
      this.searchBarFormConfig[0].defaultSelect = this.$route.query.woIdString.split(',')
      console.log(this.searchBarFormConfig[0].defaultSelect);
    }
    // if (this.$route.params.startTime && this.$route.params.endTime) {
    //   this.searchBarFormConfig[0].defaultSelect = [
    //     this.$route.params.startTime,
    //     this.$route.params.endTime,
    //   ];
    //   this.queryParams.param = {};
    //   this.$set(
    //     this.queryParams.param,
    //     'startTime',
    //     this.$route.params.startTime
    //   );
    //   this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
    // } else {
    //   this.searchBarFormConfig[0].defaultSelect = [];
    // }
    this.getList()
  },
	methods: {
    /** 获取搜索栏的产线列表 */
    async getDict() {
      const res = await getProductList()
      const result = await getWorkOrderList()
      console.log(res);
      this.searchBarFormConfig[1].selectOptions = res.data.map((item) => {
        return {
          name: item.name,
          id:item.id
        }
      })
      this.searchBarFormConfig[0].selectOptions = result.data.map((item) => {
        return {
          name: item.name,
          id: item.id
        }
      })
    },
		// getProductLineList() {
		// 	this.$axios('/base/production-line/listAll').then((response) => {
		// 		this.searchBarFormConfig[0].selectOptions = response.data.map(
		// 			(item) => {
		// 				return {
		// 					name: item.name,
		// 					id: item.id,
		// 				};
		// 			}
		// 		);
		// 	});
    // },
    getList() {
      this.getDataList()
      this.getDict()
    },
		/** 查询列表 */
    async getDataList() {
      console.log(this.queryParams);
			this.loading = true;
			// 执行查询
      const {
        data: { data, otherList, otherMap, nameData },
      } = await getStatisticalDataPage(this.queryParams)
      console.log(this.queryParams);
      this.dynamicProps = this.filterNameData(nameData)
      this.list = this.filterData(data);
    },
    filterNameData(nameData) {
      const ndSet = new Set();
      nameData.forEach((nd) => {
        ndSet.add(nd.name);
      });
      return Array.from(ndSet.values())
        .sort()
        .map((name) => ({
          prop: name,
          label: name,
        }));
    },
    filterData(data) {
      return data.map((item) => {
        const { data: innerData } = item;
        const keyValuePairs = {};
        innerData.map((d) => {
          keyValuePairs[d.dynamicName] = d.dynamicValue;
        });
        return {
          inspectionContent: item.inspectionContent,
          ...keyValuePairs,
          sumInput: item.sumInput,
          productionName: item.productionName,
          workOrderId: item.workOrderId,
          scrapRatio: item.scrapRatio,
        };
      });
    },
		/** 取消按钮 */
    handleSearchBarBtnClick(val) {
      if (val.btnName === 'search') {
        this.queryParams.workOrderIdList = val.workOrderIdList ? val.workOrderIdList : undefined
        this.queryParams.productionId = val.productionId ? val.productionId : undefined
        this.queryParams.startTime = val.checkTime ? val.checkTime[0] : undefined
        this.queryParams.endTime = val.checkTime ? val.checkTime[1] : undefined

        this.getList()
      }
     console.log(val);
    }
		/** 搜索按钮操作 */
		// handleQuery() {
		// 	this.queryParams.pageNo = 1;
		// 	this.getList();
		// },
		// /** 重置按钮操作 */
		// resetQuery() {
		// 	this.resetForm('queryForm');
		// 	this.handleQuery();
		// },
		// /** 新增按钮操作 */
		// handleAdd() {
		// 	this.reset();
		// 	this.open = true;
		// 	this.title = '添加质量检查信息记录表';
		// },
		// /** 修改按钮操作 */
		// handleUpdate(row) {
		// 	this.reset();
		// 	const id = row.id;
		// 	getQualityInspectionRecord(id).then((response) => {
		// 		/** 因为后端返回的时间是时间戳格式，需转换 */
		// 		const info = {}
		// 		Object.keys(this.form).forEach(key => {
		// 			info[key] = response.data[key]
		// 		});
		// 		this.form = info;
		// 		this.open = true;
		// 		this.title = '修改质量检查信息记录表';
		// 	});
		// },
		// /** 提交按钮 */
		// submitForm() {
		// 	this.$refs['form'].validate((valid) => {
		// 		if (!valid) {
		// 			return;
		// 		}
		// 		// 修改的提交
		// 		if (this.form.id != null) {
		// 			updateQualityInspectionRecord(this.form).then((response) => {
		// 				this.$modal.msgSuccess('修改成功');
		// 				this.open = false;
		// 				this.getList();
		// 			});
		// 			return;
		// 		}
		// 		// 添加的提交
		// 		createQualityInspectionRecord(this.form).then((response) => {
		// 			this.$modal.msgSuccess('新增成功');
		// 			this.open = false;
		// 			this.getList();
		// 		});
		// 	});
		// },
		// /** 删除按钮操作 */
		// handleDelete(row) {
		// 	const id = row.id;
		// 	this.$modal
		// 		.confirm('是否确认删除"' + row.inspectionDetContent + '"?')
		// 		.then(function () {
		// 			return deleteQualityInspectionRecord(id);
		// 		})
		// 		.then(() => {
		// 			this.getList();
		// 			this.$modal.msgSuccess('删除成功');
		// 		})
		// 		.catch(() => {});
		// },
		// /** 导出按钮操作 */
		// handleExport() {
		// 	// 处理查询参数
		// 	let params = { ...this.queryParams };
		// 	params.pageNo = undefined;
		// 	params.pageSize = undefined;
		// 	this.$modal
		// 		.confirm('是否确认导出所有质量检查信息记录表数据项?')
		// 		.then(() => {
		// 			this.exportLoading = true;
		// 			return exportQualityInspectionRecordExcel(params);
		// 		})
		// 		.then((response) => {
		// 			this.$download.excel(response, '质量检查信息记录表.xls');
		// 			this.exportLoading = false;
		// 		})
		// 		.catch(() => {});
		// },
	},
};
</script>
