<template>
	<el-container class="mainBox mainHeaderNoBorderPadding">
		<div class="header">问题反馈</div>
		<div class="content">
			<scTable ref="table" :apiObj="list.apiObj"  :column="list.column" row-key="id" :size="size" hideDo border>
				<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 === 'type'">
								<span v-for="(em,ind) in setMap.typeList" :key="ind">
									<span v-if="em.value === scope.row[item.prop]">{{em.label}}</span>
								</span>
							</span>
							<span v-else-if="item.prop === 'attachment'">
								<span v-for="(em,ind) in scope.row[item.prop]" :key="ind">
									<el-image class="tableImages" :src="em" preview-teleported :preview-src-list="[em]" style="width: 22px;height: 22px;margin: 0 4px;border-radius: 3px;">
										<template #error>
										  	<el-icon size="18"><el-icon-Picture/></el-icon>
										</template>
									</el-image>
								</span>
							</span>
							<span v-else>{{scope.row[item.prop]}}</span>
						</template>
					</el-table-column>
				</template>
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button type="primary" link @click="table_show(scope.row, 'see')" :size="size">查看</el-button>
						<el-button type="danger" link @click="table_del(scope.row, 'delete')" :size="size">删除</el-button>
					</template>
				</el-table-column>
			</scTable>
		</div>
	</el-container>
</template>

<script>
import {eventBus} from "@/utils/eventBus";

export default {
	name: "faq",
	components:{

	},
	data(){
		return{
			size:"small",
			setMap:{
				typeList:[],
			},
			list: {
				apiObj: this.$API.customer.orderList,
				column: [
					{label:'创建时间',prop:'created_at',width:160,show: true},
					{label:'机器序列号',prop:'serial_number',width:200,show: true},
					{label:'问题类型',prop:'type',width:180,show: true},
					{label:'购买时间',prop:'purchase_time',width:160,show: true},
					{label:'附件',prop:'attachment',width:120,show: true},
					{label:'提交账号',prop:'creator_name',width:160,show: true},
					{label:'备注',prop:'remark',show: true},
				],
			},
		}
	},
	created() {

	},
	mounted() {
		this.getTypeList();
	},
	methods:{
		async getTypeList() {
			const res = await this.$API.customer.serviceTypeList.post();
			if(res.code == 200){
				this.setMap.typeList = res.data;
			}
		},
		table_show(row){
			eventBus.$emit('tagClose','/service/faq-info',{id:row.id,name:row.name});
		},
		table_del(row){
			let params = {
				ids:[row.id]
			}
			this.$confirm(`确定删除序列号 ${row.serial_number} 吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const res = await this.$API.customer.orderDelete.post(params);
				if(res.code == 200){
					this.$message.success("删除成功");
					this.$refs.table.refresh();
				}
			}).catch(()=>{})
		}
	}
}
</script>

<style scoped lang="scss">
	.mainBox{
		display: flex;flex-direction: column;
		.header{
			flex-basis: 48px;
			display: flex;align-items: center;justify-content: flex-start;
			font-size: 14px;font-weight: bold;
			border-bottom: 1px solid #f4f4f4;
			margin: 0 -10px;
			padding: 0 10px;
		}
		.content{
			flex: 1;
			overflow: hidden;
			padding: 10px 0;
		}
	}
	.faqMain{
		.mainBack{
			background: #f6f6f6;
			padding: 10px;
			border-radius: 6px;
			position: relative;
			.describe{
				margin-bottom: 10px;
				.name{
					color: #222;
					margin-right: 20px;
				}
				.text{
					color: #222;font-weight: 500;
				}
			}
			.imgList{
				display: flex;align-items: center;flex-wrap: wrap;
				.img{
					width: 88px;
					height: 88px;
					border-radius: 4px;
					margin-right: 10px;
				}
			}
			.btnBox{
				position: absolute;
				right: 10px;
				top: 10px;
				z-index: 10;
			}
		}
		.faqCardBox{
			border-bottom: 1px solid #f4f4f4;
			padding: 15px 0;
			display: flex;align-items: flex-start;
			.avatar{
				margin-right: 8px;
			}
			.rightView{
				.msgTitle{
					color: #555;
					.time{
						margin-left: 8px;
					}
				}
				.textCom{
					margin-top: 4px;
				}
			}
		}
	}
	.tableImages{
		margin-top: 4px;
	}
</style>
