<template>
	<el-container class="mainBox mainBoxHeaderNoBorder">
		<el-main class="nopadding">
			<div class="searchMain">
				<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
				<div class="searchItem searchBtn">
					<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
					<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
				</div>
			</div>
			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe :size="size" @selection-change="selectionChange">
				<el-table-column type="selection" align="center" width="40"></el-table-column>
				<sc-table-column label="序号" align="center" type="index"></sc-table-column>
				<template #type="scope">
						<span v-for="(item,index) in setMap.typeList" :key="index">
							<span v-if="item.value == scope.row.type">{{item.label}}</span>
						</span>
				</template>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "queryRecord",
	data(){
		return{
			size:'small',
			setMap:{
				typeList:[]
			},
			list: {
				apiObj: this.$API.customer.queryRecordList,
				column: [],
			},
			selection: [],
			exportShow:false,
			searchShow:false,
			searchList:[
				{name:'查询时间',type:'date',code:'created_at',show: true},
				{name:'查询类型',type:'select',code:['type'],data:[],placeholder:"请选择类型", show: true},
				{name:'查询内容',type:'text',code:'content',placeholder:"请输入内容",show:true},
				{name:'用户名',type:'text',code:"creator_name",placeholder:"请输入用户名",show:true},
			],
			params: {},
		}
	},
	mounted() {
		this.getTypeList();
	},
	methods:{
		async getTypeList() {
			const res = await this.$API.customer.searchTypeList.post(this.params);
			if (res.code == 200) {
				this.setMap.typeList = res.data;
			}
		},
		async getStatusList(data,params) {
			const res = await this.$API.customer.searchTypeList.post(params);
			if(res.code == 200){
				if(res.data && res.data.length>0){
					res.data.forEach(item=>{
						item.type = item.value;
					})
				}
				this.searchList.forEach(item=>{
					if(item.code == data.code){
						item.data = res.data;
					}
				})
			}
		},
		getSelectData(item){
			let {data,params} = item;
			this.params = params;
			let searchParams = this.$TOOL.objCopy(params);
			searchParams.field = ""
			if (typeof data.code === 'string') {
				searchParams.field = data.code;
			} else {
				searchParams.field = data.code[0];
			}
			if(data.type == 'select' || data.type == 'multiple'){
				if(data.code == 'type'){
					this.getStatusList(data,params);
				}
			}
		},
		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},
		upSearch(){
			this.$refs.table.upData(this.params);
		},
		reset(){
			this.params = {};
			this.$refs.scSearch.reload();
			this.$refs.table.reload();
		},
		handleSaveSuccess(){
			this.$refs.table.refresh();
		},
	}
}
</script>

<style scoped lang="scss">

</style>
