<template>
	<div class="page">
		<el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item label="供应商名称" prop="name">
				<el-input v-model="searchForm.name" placeholder="请输入供应商名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="telPhone">
				<el-input v-model="searchForm.telPhone" placeholder="请输入联系电话" clearable></el-input>
			</el-form-item>
			<el-form-item label="联系人名称" prop="linkName">
				<el-input v-model="searchForm.linkName" placeholder="请输入联系人名称" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="jp-table top" style="">
			<vxe-toolbar :refresh="{ query: refreshList }" custom>
				<template #buttons>
					<el-button v-if="hasPermission('psi:supplier:add')" type="primary" icon="el-icon-plus"
						@click="add()">新建</el-button>
					<el-button v-if="isAdmin" type="danger" icon="el-icon-delete" @click="del()"
						:disabled="$refs.supplierTable && $refs.supplierTable.getCheckboxRecords().length === 0"
						plain>删除</el-button>
				</template>
				<template #tools>
					<vxe-button text type="primary" :title="searchVisible ? '收起检索' : '展开检索'" icon="vxe-icon-search"
						class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
				</template>
			</vxe-toolbar>
			<div style="height: calc(100% - 90px)">
				<vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" ref="supplierTable"
					show-header-overflow show-overflow highlight-hover-row :menu-config="{}" :data="dataList"
					:checkbox-config="{}">
					<vxe-column type="seq" width="60" title="序号"></vxe-column>
					<vxe-column type="checkbox" width="60"></vxe-column>
					<vxe-column min-width="230" align="center" title="供应商名称" field="name">
						<template #default="scope">
							<el-link type="primary" :underline="false" v-if="hasPermission('psi:supplier:view')"
								@click="view(scope.row.id)">{{ scope.row.name }}</el-link>
							<span v-else>{{ scope.row.name }}</span>
						</template>
					</vxe-column>
					<vxe-column min-width="230" align="center" title="联系电话" field="telPhone"></vxe-column>
					<vxe-column min-width="230" align="center" title="地址" field="address"></vxe-column>
					<vxe-column min-width="130" align="center" title="创建人" field="createName"></vxe-column>
					<vxe-column min-width="200" align="center" title="创建时间" field="createTime"></vxe-column>
					<vxe-column title="操作" width="150px" fixed="right" align="center">
						<template #default="scope">
							<el-button
								v-if="(hasPermission('psi:supplier:edit') && $store.state.user.id === scope.row.createBy.id) || isAdmin"
								text type="primary" size="small" @click="edit(scope.row.id)">修改</el-button>
							<el-button
								v-if="(hasPermission('psi:supplier:del') && $store.state.user.id === scope.row.createBy.id) || isAdmin"
								text type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
					:total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
		</div>
		<SupplierForm ref="supplierForm" @refreshList="refreshList"></SupplierForm>
	</div>
</template>

<script>
import SupplierForm from './SupplierForm'
import SupplierService from '@/api/psi/SupplierService'
import userService from '@/api/sys/userService'
export default {
	data() {
		return {
			searchVisible: true,
			searchForm: {
				telPhone: '',
				name: '',
				linkName: ''
			},
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			loading: false,
			isAdmin: false
		}
	},
	supplierService: null,
	created() {
		this.supplierService = new SupplierService()
	},
	components: {
		SupplierForm
	},
	mounted() {
		this.refreshList()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		// 查询当前用户是否是管理员用户
		checkIsAdmin() {
			userService.is().then((data) => {
				this.isAdmin = data
			})
		},
		// 新增
		add() {
			this.$refs.supplierForm.init('add', 'false')
		},
		// 修改
		edit(id) {
			id = id || this.$refs.supplierTable.getCheckboxRecords().map(item => {
				return item.id
			})[0]
			this.$refs.supplierForm.init('edit', id)
		},
		// 查看
		view(id) {
			this.$refs.supplierForm.init('view', id)
		},
		// 获取数据列表
		refreshList() {
			this.loading = true
			this.supplierService.list({
				'current': this.tablePage.currentPage,
				'size': this.tablePage.pageSize,
				'orders': this.tablePage.orders,
				...this.searchForm
			}).then((data) => {
				this.dataList = data.records
				this.tablePage.total = data.total
				this.loading = false
			})
			this.checkIsAdmin()
		},
		// 当前页
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		// 排序
		sortChangeHandle(column) {
			this.tablePage.orders = []
			if (column.order != null) {
				this.tablePage.orders.push({ column: this.$utils.toLine(column.property), asc: column.order === 'asc' })
			}
			this.refreshList()
		},
		// 删除
		del(id) {
			let ids = id || this.$refs.supplierTable.getCheckboxRecords().map(item => {
				return item.id
			}).join(',')
			this.$confirm(`确定删除所选项吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.supplierService.delete(ids).then((data) => {
					if (data === '删除成功') {
						this.$message.success(data)
					} else {
						this.$message.error(data)
					}
					this.refreshList()
					this.loading = false
				})
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.refreshList()
		}
	}
}
</script>
