<template>
	<div class="app-container">
		<el-row type="flex" justify="space-around" style="margin-bottom:20px">
				<div class="grid-content bg-purple" >
					<el-input placeholder="请输入供应商名称" v-model="search" @change="Search" clearable style="width: 100%;">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="grid-content bg-purple">
					<el-dropdown @command="PhandleCommand">
						<div class="pulldown">
							<span class="el-dropdown-link" v-if="!providerStatus">
								供应商状态
							</span>
							<span class="el-dropdown-link" v-if="providerStatus">
								{{providerStatus}}
							</span>
							<i class="el-icon-arrow-down el-icon--right"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="供应商状态">供应商状态</el-dropdown-item>
							<el-dropdown-item command="正常">正常</el-dropdown-item>
							<el-dropdown-item command="删除">删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="grid-content bg-purple">
					<el-dropdown @command="AhandleCommand">
						<div class="pulldown">
							<span class="el-dropdown-link" v-if="!AuditStatus">
								审核状态
							</span>
							<span class="el-dropdown-link" v-if="AuditStatus">
								{{AuditStatus}}
							</span>
							<i class="el-icon-arrow-down el-icon--right"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
							<el-dropdown-item command="已认证">已认证</el-dropdown-item>
							<el-dropdown-item command="未认证">未认证</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="grid-content bg-purple">
					<div class="block">
						<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							:picker-options="pickerOptions">
						</el-date-picker>
					</div>
				</div>	
		</el-row>
		
		<el-table v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border fit
			highlight-current-row  @selection-change="handleSelectionChange" @select-all="handleAll">
			<el-table-column   type="selection">
			</el-table-column>
			<el-table-column label="供应商名称" align="center" prop="name" width="200">
			</el-table-column>
			<el-table-column label="社会统一信用代码" width="200" align="center" prop="socialCode">

			</el-table-column>
			<el-table-column label="账号" width="150" align="center" prop="account">

			</el-table-column>
			<el-table-column label="法人名称" width="180" align="center" prop="legalPerson">
	
			</el-table-column>
			<el-table-column label="联系人" width="180" align="center" prop="contacts">
	
			</el-table-column>

			<el-table-column label="电话" width="180" align="center" prop="contactsMobile">
	
			</el-table-column>
			<el-table-column label="供应商状态" width="180" align="center" prop="statusText">
				
			</el-table-column>
			<el-table-column label="状态"  align="center" prop="isDeletedText">
		
			</el-table-column>
			<el-table-column align="center" prop="createdAt" label="时间" width="180">
			</el-table-column>
			<el-table-column align="center" prop="created_at" label="操作" width="250">
				<template slot-scope="scope">
					<el-tag type="primary" style="cursor: pointer;margin-right: 15px;" @click="toedit(scope.row.id)">编辑
					</el-tag>
					<el-tag type="success" style="margin-right: 15px;cursor: pointer;" @click="Srecover(scope.row.id)" v-if="scope.row.isDeleted==1">恢复</el-tag>
					<el-tag type="danger" style="margin-right: 15px;cursor: pointer;"  @click="Sdeleted(scope.row.id)" v-if="scope.row.isDeleted==0">禁用</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex;justify-content: space-between;">
			<el-row  type="flex" justify="end" >
				<div class="btn" style="display: flex;justify-content: flex-end;">
						<el-button type="primary" @click="failed">审核失败</el-button>
						<el-button type="primary" @click="success">审核成功</el-button>
						<el-button type="primary" @click="Exports">批量导出</el-button>
						<el-button type="success" @click="recover">恢复</el-button>
						<el-button type="danger" @click="deleted">禁用</el-button>
					</div>
			</el-row>
			<div class="pagesip">
				<el-button type="primary" size="small"
					style="background-color:#D8AB5A ;border-color:#D8AB5A ; margin: 0 20px;" @click="jumpFirstPage">首页
				</el-button>
				<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
					:total="list.length" :page-size="10" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
					ref="pagination">
				</el-pagination>
				<el-button type="primary" size="small"
					style="background-color:#D8AB5A ;border-color:#D8AB5A ;margin: 0 20px;" @click="jumpLastPage">尾页
				</el-button>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {
		getList
	} from '@/api/table'
		import {
			dataConversionUtil
		} from '../../utils/Excel.js'
	export default {
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'gray',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				srcList: [],
				list: [],
				temporaryList: [],
				listLoading: false,
				providerStatus: '',
				AuditStatus: '',
				search: '',
				multipleSelection:[],
				currentPage: 1,
				pagesize: 9,
				checked: false,
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value1: '',
				value2: ''
			}
		},
		created() {
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData(){
				this.$request({
					url: "/api/Supplier/search",
					method: 'post',
					data: {
						pageIndex: 1,
						pageSize:100,
					}
				}).then((res) => {
					this.list = res.data.result
					this.getPageData();
					console.log(this.list)
				})
			},
			handleSelectionChange(data){
				this.multipleSelection = data;
				console.log(this.multipleSelection);
			},
			handleAll(data) {
				this.multipleSelection = data
				console.log(this.multipleSelection)
			},
			PhandleCommand(command) {
				this.providerStatus = command
				if(this.providerStatus=="正常"||this.providerStatus=="删除"){
					this.temporaryList=this.srcList.filter(item=>item.isDeletedText==this.providerStatus)
				}else {
					this.temporaryList=this.srcList
				}				
				this.AuditStatus='',
				this.search=''
			},
			AhandleCommand(command) {
				this.AuditStatus = command
				if(this.AuditStatus=="已认证"||this.AuditStatus=="未认证"){
					this.temporaryList=this.srcList.filter(item=>item.statusText==this.AuditStatus)
				}else {
					this.temporaryList=this.srcList
				}
				this.providerStatus="",
				this.search=''
			},
			toedit(id) {
				this.$router.push({
					path: '/edit',
					query: {
						id: id
					}
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getPageData();
			},
			jumpFirstPage() {
				this.$refs.pagination.handleCurrentChange(1);
				this.$emit('handleCurrentChange', 1);
			},
			jumpLastPage() {
				let font = this.$refs.pagination
				let cpage = Math.ceil(font.total / font.pageSize);
				font.handleCurrentChange(cpage);
			},
			getPageData() {
				let start = (this.currentPage - 1) * this.pagesize;
				let end = start + this.pagesize;
				this.srcList = this.list.slice(start, end);
				this.temporaryList=this.srcList
			},
			Search() {
				if (this.search == "") {
					this.temporaryList = this.srcList
				} else {
					this.temporaryList = this.list.filter(item => item.name == this.search)
				}
				this.providerStatus=""
				this.AuditStatus=""
			},
			Exports(){
				if(this.multipleSelection==""){
					this.$message({
						type:'warning',
						message:'请选择数据!'
					})
				}else{
					var tableHeader = [
						['序号','供应商名称','社会统一信用码', '账号', '法人名称', '联系人', '电话', '审核状态', '时间'],
					]
					var dataList = []
					this.multipleSelection.forEach((item, index) => {
						dataList.push([index + 1, item.name, item.socialCode, item.account, item.legalPerson, item
							.contacts,item.contactsMobile, item.statusText, item.createdAt
						]);
					})
					dataConversionUtil.dataToExcel('供应商列表', tableHeader, dataList)
					this.$message.success('导出成功!');
				}
				
			},
			success(){
				let ids=Array.from(this.multipleSelection,({id})=>id)
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:ids,
						operateType:3
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			},
			failed(){
				let ids=Array.from(this.multipleSelection,({id})=>id)
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:ids,
						operateType:4
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			},
			recover(){
				let ids=Array.from(this.multipleSelection,({id})=>id)
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:ids,
						operateType:2
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			},
			Srecover(id){
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:[id],
						operateType:2
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			},
			deleted(){
				let ids=Array.from(this.multipleSelection,({id})=>id)
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:ids,
						operateType:1
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			},
			Sdeleted(id){
				this.$request({
					url:'/api/Supplier/manage',
					method:'post',
					data:{
						ids:[id],
						operateType:1
					}
				}).then((res)=>{
					if(res.code==200){
						this.$message({
							type:'success',
							message:res.msg
						})
						this.getData()
					}else{
						this.$message({
							type:'danger',
							message:res.msg
						})
						this.getData()
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.pulldown {
		width: 185px;
		height: 40px;
		border: 1px solid #E8E8E8;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		color: #999999;
	}
	.pagesip {
		width: 100%;
		margin: 20px auto;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #D8AB5A;
	}

	.el-col {
		margin-bottom: 20px;
	}
	.btn{
		padding: 20px;
	}
</style>
