<template>
	<el-container>
		<el-header class="serveTitle">维保期限信息查询</el-header>
		<el-main class="serveMain">
			<div class="searchMain searchMainNoTop">
				<div class="searchItem">
					<el-input class="textInput" type="text" v-model="keyword" clearable placeholder="请输入序列号"></el-input>
				</div>
				<div class="searchItem searchBtn">
					<el-button 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" :size="size" hideDo>
					<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" show-overflow-tooltip>
							<template #default="scope">
								<span v-if="item.prop === 'business_status'">
									<span v-for="(em,index) in setMap.statusList" :key="index">
										<span :style="{color:em.value==1?`var(--el-order-color-1)`:em.value==2?`var(--el-order-color-2)`:em.value==3?`var(--el-order-color-3)`:em.value==4?`var(--el-order-color-4)`:`var(--el-order-color-100)`}" 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: "",
	data(){
		return{
			size:'small',
			setMap:{
				statusList:[]
			},
			list:{
				apiObj: {},
				column:[
					{label:'序列号',prop:'serial_number',width:160,hide: false},
					{label:'工单号',prop:'repair_order_no',width:200,hide: false},
					{label:'业务状态',prop:'business_status',width:120,hide: false},
					{label:'维保到期日期',prop:'warranty_end_date',hide: false},
				],
			},
			keyword:"",
			params:{
				serial_number:{
					operator:"like",
					value:""
				}
			}
		}
	},
	mounted() {
		this.getStatusList();
	},
	methods:{
		upSearch(){
			for(let i in this.params){
				this.params[i].value = this.keyword===""?"":"%"+this.keyword+"%";
			}
			this.list.apiObj = this.$API.customer.periodQuery;
			this.$refs.table.upData(this.params);
		},
		async getStatusList() {
			const res = await this.$API.customer.periodQueryStatusList.post();
			if(res.code === 200){
				this.setMap.statusList = res.data;
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.searchMainNoTop{margin: 0 auto 20px auto;}
	.textInput{width: 480px;}
</style>
