<template>
	<el-container>
		<el-header class="serveTitle">查找历史记录</el-header>
		<el-main class="serveMain">
			<div class="searchMain searchMainNoTop">
				<div class="searchItem">
					<div class="name">关键字</div><el-input class="textInput" type="text" v-model="keyword" :size="size" clearable placeholder="请输入"></el-input>
				</div>
				<div class="searchItem">
					<div class="name">查询类型</div>
					<el-select class="textInput" type="text" v-model="params.type.value" :size="size" clearable placeholder="请选择">
						<el-option :value="item.value" :label="item.label" v-for="(item,index) in setMap.typeList" :key="index"></el-option>
					</el-select>
				</div>
				<div class="searchItem searchBtn">
					<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
				</div>
			</div>
			<div class="mainTable">
				<scTable class="serveTable" ref="table" :apiObj="list.apiObj" :column="list.column" :params="params" stripe :size="size">
					<el-table-column type="index" label="序号"></el-table-column>
					<template v-for="(item,index) in list.column" :key="index">
						<el-table-column :label="item.label" :prop="item.prop" :width="item.width" >
							<template #default="scope">
								<span v-if="item.prop === 'type'">
									<span v-for="(em,index) in setMap.typeList" :key="index">
										<span v-if="em.value === scope.row[item.prop]">{{em.label}}</span>
									</span>
								</span>
								<span v-else>{{scope.row[item.prop]}}</span>
							</template>
						</el-table-column>
					</template>
				</scTable>
			</div>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "queryHistory",
	data(){
		return{
			size:'small',
			setMap:{
				typeList:[]
			},
			list:{
				apiObj: this.$API.customer.customerMyQuery,
				column:[
					{label:'查询类型',prop:'type',width:140,hide: false},
					{label:'查询内容',prop:'content',width:1000,hide: false},
					{label:'日期',prop:'created_at',width:200,hide: false},
				],
			},
			keyword:"",
			params:{
				remark:{
					operator:"like",
					value:""
				},
				content:{
					operator:"like",
					value:""
				},
				type:{
					operator:"=",
					value:""
				}
			}
		}
	},
	mounted() {
		this.getStatusList();
	},
	methods:{
		upSearch(){
			for(let i in this.params){
				if(i!='type'){
					this.params[i].value = this.keyword===""?"":"%"+this.keyword+"%";
				}else{
					this.params[i].value = this.params[i].value?this.params[i].value:"";
				}
			}
			this.$refs.table.upData(this.params);
		},
		async getStatusList() {
			const res = await this.$API.customer.searchTypeList.post();
			if(res.code === 200){
				this.setMap.typeList = res.data;
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.textInput{width: 200px;}
</style>
