<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" v-loading="loading">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="4">
						<el-form-item label="姓名">
							<el-input v-model="listQuery.name" placeholder="请输入股东姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="手机号">
							<el-input v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="分公司">
							<el-select v-model="listQuery.companyId" clearable filterable placeholder="请选择">
								<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="身份">
							<el-select class="filter-item" v-model="listQuery.positionId" placeholder="请选员工身份">
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option
									v-for="(item,index) in statusList"
									:key="index"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
				<el-button class="filter-item" type="primary" @click="cleaningQuery">清除搜索条件</el-button>
				<el-button class="filter-item" type="primary" v-waves icon="search" @click="addData">新增股东</el-button>
				<el-button class="filter-item" type="primary" @click="toLoad">批量导入股东</el-button>
			</el-form>

			<!--批量导入会员窗口-->
			<el-dialog title="导入股东" :visible.sync="tolead">
				<el-form :model="fileForm">
					<el-form-item label="上传文件" label-width="80px">
						<el-button type="primary" icon="el-icon-download" @click="download">
							下载模板
							<!-- <a class="el-icon-download" href="https://mgmt.dfangche.com/axshare/gudongdaoru.xlsx">下载模板</a> -->
						</el-button>

						<el-upload
							ref="uploadExcel"
							:limit="limitNum"
							action
							:headers="getHeaderWithToken"
							accept=".xlsx"
							:http-request="upLoad"
							:on-remove="handleRemove"
							:before-remove="beforeRemove"
							:before-upload="beforeUploadFile"
							:on-change="fileChange"
							:on-exceed="exceedFile"
							:file-list="fileList"
						>
							<el-button size="small" type="primary" icon="el-icon-edit">
								上传文件
								<i class="el-icon-upload el-icon--right"></i>
							</el-button>
							<div slot="tip" class="el-upload__tip">只能上传xlsx(Excel2007以上版本)文件，且不超过10M</div>
						</el-upload>
						<el-button size="small" class="filter-item" type="primary" @click="cancelNotDeleteForm">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

			<!-- 提示 -->
			<el-dialog title="上传提示" :visible.sync="uploadHiut">
				<p>
					上传成功:
					<b>{{uploadListHiut.success}}</b>条,上传失败:
					<b>{{uploadListHiut.error}}</b>条,重复:
					<b>{{uploadListHiut.exist}}</b>
				</p>
				<ul class="defeated">
					<li v-for="(item,index) in uploadListHiut.uploadList" :key="index">
						<p>
							失败行数:
							<span>{{item.num}}</span>,失败原因:
							<span>{{item.msg}}</span>
						</p>
					</li>
				</ul>
			</el-dialog>

			<!-- 新增 || 编辑股东 -->
			<el-dialog :title="addPopTitle" :visible.sync="addPop" class="member" @close="closeAdd">
				<el-form
					:model="ruleForm"
					:rules="rules"
					ref="ruleForm"
					label-width="100px"
					class="demo-ruleForm"
				>
					<el-form-item label="姓名">
						<el-input v-model="ruleForm.name" placeholder="请输入股东姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="ruleForm.phone" placeholder="请输入股东手机号"></el-input>
					</el-form-item>
					<el-form-item label="入股日期" v-show="addPopTitle == '新增'">
						<el-date-picker v-model="time" type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
					</el-form-item>
					<el-form-item label="入股公司">
						<el-select v-model="ruleForm.companyList" filterable multiple placeholder="请选择" style="width:100%">
							<el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态" v-show="addPopTitle == '编辑'">
						<el-input :placeholder="ruleForm.isQuit == 0 ? '持股中' : '已退股'" style="width:90%" disabled></el-input>
						<el-button type="text" @click="amend">修改</el-button>
					</el-form-item>
					<el-row style="text-align:center">
						<el-button type="primary" @click="submitBtn">确定</el-button>
						<el-button type="primary" @click="addPop = false">取消</el-button>
					</el-row>
				</el-form>
			</el-dialog>

			<el-dialog :title="ruleForm.isQuit == 1 ? '入股时间' : '退股时间'" :visible.sync="sharePop" class="member" @close="closeShare">
				<el-date-picker
					v-model="times"
					type="date"
					:placeholder="ruleForm.isQuit == 1 ? '请选择入股时间' : '请选择退股时间'"
					style="width:100%"
				></el-date-picker>
				<el-row style="text-align:center;margin-top:20px">
					<el-button type="primary" @click="shareBtn">确定</el-button>
					<el-button type="primary" @click="sharePop = false">取消</el-button>
				</el-row>
			</el-dialog>

			<!-- 表格数据 -->
			<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%">
				<el-table-column label="序号" align="center" width="70">
					<template scope="scope">
						<span>{{scope.$index+(listQuery.page - 1) * listQuery.limit + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号" align="center"></el-table-column>
				<el-table-column prop="companyName" label="入股公司" align="center"></el-table-column>
				<el-table-column prop="positionName" label="身份" align="center"></el-table-column>
				<el-table-column prop="isQuit" label="状态" align="center">
					<template scope="scope">
						<span>{{scope.row.isQuit == 0 ? '持股中' :'已退股'}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" fixed="right">
					<template scope="scope">
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="infoStaff(scope.row)"
						>详情</el-button>
						<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							@click="editorStaff(scope.row)"
						>编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="listQuery.page"
				:page-sizes="[10,20,30, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				style="margin-top:20px"
			></el-pagination>

			<!-- 股东详情 S -->
			<el-dialog title="股东信息详情" :visible.sync="infoPop" class="member">
				<p class="title">基础信息</p>
				<p class="staff-info">
					<span>
						<b>姓名：</b>
						{{staffInfo.info.name}}
					</span>
					<span>
						<b>手机号：</b>
						{{staffInfo.info.phone}}
					</span>
					<span>
						<b>状态：</b>
						{{staffInfo.info.isQuit == 1?"已退股":'持股中'}}
					</span>
					<span>
						<b>入股公司：</b>
						{{staffInfo.info.companyName}}
					</span>
				</p>
				<p class="title" style="margin-top:20px">股权变动</p>

				<p v-for="(item,index) in staffInfo.record" :key="index">
					<b>{{item.relTime}}</b> 
                    <span style="margin-left:10px">{{item.isQuit == 0 ? '(入股)' : "(退股)"}}</span> 
                    <span>{{item.companyName}}</span>
				</p>
			</el-dialog>
			<!-- 股东详情 E -->
		</div>
	</div>
</template>
<script>
import { getAll } from 'api/base_info/branch_company'
import { getrewardSetting } from 'api/purseManage'
import { getToken } from 'src/utils/auth'
import {
	stockholderList,
	addUserPostion,
    exports,
    updUserPostionEditor,
    findShareholderChangeRecord
} from 'src/api/admin/userManagement/index'
import { formatDate } from 'utils/dateFormattor'
export default {
	created() {
		this.getList()
		this.getAllFn()
		this.getRank()
	},
	computed: {
		getHeaderWithToken() {
			return { Authorization: getToken() }
		}
	},
	data() {
		return {
            times:null,
			infoPop: false,
			time: null,
			sharePop: false,
			shareTitle: 1,
			BASE_API: process.env.BASE_API,
			tableKey: 0,
			total: null,
			list: [],
			ruleForm: {
				name: null,
				phone: null,
				companyList: [],
				relTime: null,
				isQuit: 0
			},
			rules: {},
			addPopTitle: '新增',
			addPop: false,
			uploadListHiut: {
				uploadList: [],
				success: '',
				error: '',
				exist:''
			},
			uploadHiut: false,
			limitNum: 1,
			fileList: [],
			tolead: false, //批量导入
			loading: false,
			companyList: [], //分公司
			statusList: [], //身份
			listQuery: {
				name: null,
				phone: null,
				companyId: null,
				positionId: null,
				page: 1,
				limit: 10
			},
			fileForm: {
				file: ''
			},
			staffInfo: {
				info: {},
				record: []
			}
		}
	},
	methods: {
        closeShare(){
            this.times = null
        },
		//下载模板
		download() {
			window.location.href =
				'https://mgmt.dfangche.com/axshare/gudongdaoru.xlsx'
		},
		closeAdd() {
			this.time = null
			this.ruleForm = {
				name: null,
				phone: null,
				companyList: [],
				relTime: null
			}
		},
		//入股 退股时间
		shareBtn() {
			this.ruleForm.isQuit == 1 ? this.ruleForm.changeState = 3 : this.ruleForm.changeState = 2
            
            this.ruleForm.relTime = formatDate(this.times, 'yyyy-MM-dd') + ' 00:00:00'
            updUserPostionEditor(this.ruleForm).then(data=>{
                if (data.status == 200) {
                    this.$message.success('编辑成功')
                        this.addPop = false
                        this.sharePop = false
                        this.getList()
                }else{
                    this.$message(data.message)
                }
            })
        },
		//详情
		infoStaff(row) {
			this.infoPop = true
            this.staffInfo.info = row
            findShareholderChangeRecord({id:row.id,phone:row.phone}).then(data=>{
                if (data.status == 200) {
                    this.staffInfo.record = data.data
                }
            })
		},
		//编辑
		editorStaff(row) {
            this.addPopTitle = '编辑'
            this.$nextTick(()=>{
                this.ruleForm = {
                    name: row.name,
                    phone: row.phone,
                    isQuit:row.isQuit,
                    companyList: row.companyIdArray.split(',').map(Number),
                    // companyList:['1,1'],
                    id:row.id
                }
                this.addPop = true
            })
		},
		//新增,编辑
		submitBtn() {
			if (this.addPopTitle == '新增') {
				if (
					!this.ruleForm.name ||
					!this.ruleForm.phone ||
					!this.ruleForm.companyList ||
					!this.time
				) {
					this.$message('必填项不能为空')
				} else {
					this.ruleForm.relTime =
						formatDate(this.time, 'yyyy-MM-dd') + ' 00:00:00'
					addUserPostion(this.ruleForm).then(data => {
						if (data.status == 200) {
							this.$message.success('新增成功')
							this.addPop = false
							this.getList()
						} else {
							this.$message.error(data.message)
						}
					})
				}
			} else {
				if (
					!this.ruleForm.name ||
					!this.ruleForm.phone ||
					!this.ruleForm.companyList
				) {
                    this.$message('必填项不能为空')
				}else{
                    this.ruleForm.changeState =1
                    updUserPostionEditor(this.ruleForm).then(data=>{
                        if (data.status == 200) {
                            this.$message.success('编辑成功')
                             this.addPop = false
                             this.getList()
                        }else{
                            this.$message(data.message)
                        }
                    })
                    
                }
			}
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		},
		//修改分公司
		amend() {
			this.sharePop = true
		},
		//新增股东
		addData() {
			this.addPopTitle = '新增'
			this.addPop = true
		},
		//分公司
		getAllFn() {
			getAll().then(data => {
				if (data.status == 200) {
					this.companyList = data.data
					this.companyList.unshift({ name: '全部', id: '' })
				}
			})
		},
		//搜索
		handleFilter() {
			this.listQuery.page = 1
			this.getList()
		},
		//清空搜索
		cleaningQuery() {
			this.listQuery = {
				name: null,
				phone: null,
				companyId: null,
				positionId: null,
				page: 1,
				limit: 10
			}
			this.getList()
		},
		getList() {
			this.loading = true
			stockholderList(this.listQuery).then(data => {
				if (data.status == 200) {
					this.list = data.data.data
					this.total = data.data.totalCount
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		},
		//获取身份
		getRank() {
			getrewardSetting().then(data => {
				if (data.status == 200) {
					this.statusList = data.data
				}
			})
		},
		upLoad(file) {
			var form = new FormData()
			// 文件对象
			form.append('file', file.file)
			exports(form).then(res => {
				this.uploadHiut = true
				;(this.uploadListHiut = {
					uploadList: res.data.data,
					success: res.data.success,
					error: res.data.error,
					exist: res.data.exist
				}),
					this.getList()
			})
		},
		// 文件超出个数限制时的钩子
		exceedFile(files, fileList) {
			this.$notify.warning({
				title: '警告',
				message: `只能选择 ${
					this.limitNum
				} 个文件，当前共选择了 ${files.length + fileList.length} 个`
			})
		},
		cancelNotDeleteForm() {
			this.tolead = false
			this.$refs.uploadExcel.clearFiles()
		},
		//批量导入员工
		toLoad() {
			this.tolead = true
		},
		fileChange(file, fileList) {
			//console.log("change");
			//console.log(file);
			this.fileForm.file = file.raw
			//console.log(this.fileForm.file);
			// console.log(fileList);
		},
		//excel上传
		handleRemove(file, fileList) {
			//console.log(file, fileList);
		},
		handlePreview(file) {
			//console.log(file);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
		beforeUploadFile(file) {
			//console.log("before upload");
			//console.log(file);
			let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
			let size = file.size / 1024 / 1024
			if (extension !== 'xlsx') {
				this.$notify.warning({
					title: '警告',
					message: `只能上传Excel 2007以上版本（即后缀是.xlsx）的文件`
				})
			}
			if (size > 10) {
				this.$notify.warning({
					title: '警告',
					message: `文件大小不得超过10M`
				})
			}
		}
	}
}
</script>
<style>
.title {
	color: #666;
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 10px;
}
.staff-info span {
	display: inline-block;
	margin: 10px 20px 0 0;
}
.member .el-dialog--small {
	width: 500px;
}
.defeated {
	padding: 0;
}
.defeated li {
	list-style: none;
}
</style>