<template>
	<el-container class="mainBox">
		<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" @click="save">保存配置</el-button>
				</div>
			</div>
			<scTable ref="table" :apiObj="list.apiObj" :column="list.column" stripe border :size="size" highlightCurrentRow :hideDo="true" >
				<el-table-column width="380" label="客户名称" prop="customer_name">
					<template #default="scope">
						<div v-if="scope.row.$edit_show">
							<el-input type="text" :size="size" v-model="scope.row.customer_name" @change="customerInput(scope.row)" @mouseout="customerOut(scope.row)"></el-input>
						</div>
						<span class="customerView" @click="customerEdit(scope.row)" v-else>{{scope.row.customer_name}} <el-icon class="iconBtn"><sc-icon-edit/></el-icon></span>
					</template>
				</el-table-column>
				<el-table-column width="100" label="状态" prop="active_status">
					<template #default="scope">
						<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="160">
					<template #default="scope">
						<el-dropdown>
							<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete">删除配置</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "",
	data(){
		return{
			size:'small',
			list:{
				apiObj: this.$API.setup.customer.list,
				column:[]
			},
			params: {},
			searchList:[
				{customer_name:'客户名称',type:'text',code:'customer_name', placeholder:"请输入客户名称",show:true},
			],
		}
	},
	mounted() {

	},
	methods:{
		getSelectData(item){
			let {params} = item;
			this.params = params;
		},
		// 状态
		changeSwitch(val, row) {
			row.$switch_yx = true;
			setTimeout(async () => {
				let params = {
					id: row.id,
					active_status: row.active_status,
				};
				const res = await this.$API.setup.customer.status.post(params);
				if(res.code !=200){
					row.active_status = !row.active_status;
				}
				delete row.$switch_status;
				delete row.$switch_yx;
			}, 500);
		},
		// 编辑名称
		customerEdit(row){
			row.$edit_show = !row.$edit_show;
		},
		customerOut(row){
			setTimeout(()=>{
				row.$edit_show = false;
			},1000)
		},
		async customerInput(row) {
			let params = {
				id:row.id,
				customer_name:row.customer_name
			}
			const res = await this.$API.setup.customer.add.post(params);
			if(res.code == 200){
				this.$refs.table.refresh();
			}
		},
		async save() {
			const res = await this.$API.setup.customer.add.post(this.params);
			if(res.code == 200){
				this.$refs.table.refresh();
			}
		},
		async table_del(row){
			this.$confirm(`确定删除 ${row.customer_name} 吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const reqData = {id: row.id};
				const res = await this.$API.setup.customer.delete.post(reqData);
				if(res.code == 200){
					this.$refs.table.refresh();
					this.$message.success("删除成功")
				}
			}).catch(()=>{})
		},
	}
}
</script>

<style scoped lang="scss">
	.customerView{
		display: flex;
		align-items: center;
		.iconBtn{
			margin-left: 6px;
		}
	}
</style>
