<template>
	<div class="common-page device-manage">

    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>生产计划管理</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="toolbar">
							<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
						</div>
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<el-table-column prop="month" label="生产计划月份" align="center" :formatter="changeTimeFormat"></el-table-column>
								<el-table-column prop="plan" label="预计总计划量(T)" align="center"></el-table-column>
								<el-table-column prop="createTime" label="日期" align="center"></el-table-column>
								<el-table-column label="操作" align="center" fixed="right">
									<template slot-scope="scope">
										<el-button size="mini" type="success" icon="el-icon-view" @click="showGradeTable(scope.row)"></el-button>
										<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
										<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单渲染 -->
		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
			<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="150px">
				<el-form-item label="生产计划月份" prop="month">
					<el-date-picker v-model="form.item.month" type="month" placeholder="选择月份" style="width:280px;"></el-date-picker>
				</el-form-item>
        <el-table :data="formTable" style="width: 100%;margin-bottom:5px;">
            <el-table-column prop=" name" label="采区">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.name"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="plan" label="计划量(kg)">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.plan"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.plan}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  class="btn bg_green"
                  @click="handleEdit(scope.$index, scope.row)"
                >{{scope.row.showEdit?'保存':"修改"}}</el-button>
              </template>
            </el-table-column>
        </el-table>
				<el-form-item label="总计划量(T)" prop="plan">
					<el-input @input="onInput" v-model="form.item.plan" style="width:280px;" placeholder="请输入总计划量(T)"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="text" @click="cancelForm">取消</el-button>
				<el-button :loading="form.status.cu === 2" type="primary" @click="submitForm('form1', form.item)">确认</el-button>
			</div>

		</el-dialog>

		<!-- 采区计划量设置 -->
		<el-dialog :title="miningAreaTitle" :visible.sync="dialogTableVisible" width="60%">
			<div class="toolbar" style="margin-bottom:15px;">
				<el-button size="mini" type="primary" icon="el-icon-plus" @click="gradeToAdd">新增</el-button>
			</div>
			<el-table :data="gridData" border v-loading="gradeLoading">
				<el-table-column property="name" label="采区名称" align="center"></el-table-column>
				<el-table-column property="plan" label="计划量(T)" align="center"></el-table-column>
				<el-table-column property="mean" label="平均日产量(T)" align="center"></el-table-column>
				<el-table-column property="nowPlan" label="今日计划(T)" align="center"></el-table-column>
				<el-table-column property="total" label="累计完成量(T)" align="center"></el-table-column>
				<el-table-column property="ratio" label="完成率(%)" align="center"></el-table-column>
				<el-table-column label="操作" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" icon="el-icon-edit" @click="gradeToEdit(scope.row)"></el-button>
						<el-button size="mini" type="danger" icon="el-icon-delete" @click="gradeToDelete(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 采区计划量设置表单 -->
		<el-dialog :title="gradeFrom.title" :before-close="gradeCancelForm" :visible.sync="gradeFrom.visible" width="700px">
			<el-form :model="gradeFrom.item" :inline="true" ref="form2" size="small" label-width="150px">
				<el-form-item label="采区">
					<el-select v-model="gradeFrom.item.name" placeholder="请选择采区" size="small" style="width:260px;">
						<el-option v-for="(obj,index) in RegionalTypeData" :label="obj.name" :value="obj.name" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="计划量(T)">
					<el-input v-model="gradeFrom.item.plan" style="width:260px;" placeholder="请输入计划量(T)"></el-input>
				</el-form-item>
				<el-form-item label="今日计划(T)">
					<el-input v-model="gradeFrom.item.nowPlan" style="width:260px;" placeholder="请输入今日计划量(T)"></el-input>
				</el-form-item>
				<el-form-item label="累计完成量(T)">
					<el-input v-model="gradeFrom.item.total" style="width:260px;" placeholder="请输入累计完成量(T)"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="gradeCancelForm">取 消</el-button>
				<el-button :loading="gradeFrom.status.cu === 2" type="primary" @click="gradeSubmitForm('form2', gradeFrom.item)">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	components: {},
	data() {
		return {
      formTable:[], 
			imgSrcStart:process.env.VUE_APP_LOCAL_API2,
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			RegionalTypeData:[],
			carInformationData:[],
			checkAll: false,
			timePeriod:[],
			form: {
				title:'新增生产计划',
				visible:false,
				reqType:'add',
				status:{cu:0},
				item:{},
			},
			rules: {
				month: [
					{required: true, message: '请选择月份', trigger: 'change' }
				],
			},


			//采区计划量设置数据
			miningAreaTitle:'',
			dialogTableVisible: false,
			gridData: [],
			gradeLoading: false,
			gradeQueryId:0,
			gradeFrom:{
				title:'新增采区计划量',
				visible:false,
				reqType:'add',
				status:{cu:0},
				item:{},
			}
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {		
	onInput(e){
		console.log(e);
		this.formTable.forEach((v,i,a) => {
			v.plan = 0
		});
	},
    handleEdit(index, row) {
      console.log(index, row);
	  var total = 0
      row.showEdit = !row.showEdit;
      if (!row.showEdit) {
		this.formTable.forEach((v,i,a) => {
			total += Number(v.plan)
		});
       }
	   this.form.item.plan = total;
    },
		//获取生产计划数据
		loadData() {
			var sort = 'createTime,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;
			
			this.$nextTick(()=>{
				HttpReq.truckDispatching.productionPlanAllQuery(param).then((res) => {
					if(res.code == 200){
						this.loading = false;
						this.tableData = res.data.content;
						this.total = res.data.totalElements;
					}
				})
				//获取采区信息
				HttpReq.truckDispatching.RegionalInformationQuery({size:100,areaclass:'采区'}).then((res) => {
					if(res.code == 200){
						this.RegionalTypeData = res.data.content;
					}
				})
			})

		},
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},	
		cancelForm(a, b, c){
			this.form.visible = false;
		},
		toAdd() {
			// 请除表单验证
			this.$refs['form1'] && this.$refs['form1'].clearValidate();
			this.form.title = '新增生产计划';
			this.form.status.cu = 0;
			this.form.visible = true;
			this.form.reqType = 'add';
			this.form.item = {};
			HttpReq.truckDispatching.AreaNewPlan().then( (res) => {
				if(res.code == 200){
					this.formTable = res.data;
					console.log(res);
				}
			})
		},
		toEdit(item) {
			// 请除表单验证
			var sort = 'id,desc';
			var param = {};
			this.$refs['form1'] && this.$refs['form1'].clearValidate();
			this.form.title = '修改生产计划';
			this.form.status.cu = 0;
			this.form.visible = true;
			this.form.item = {...item};
			this.form.reqType = 'edit';
			let timePeriodCenter = [];
			timePeriodCenter.push(this.form.item.startTime);
			timePeriodCenter.push(this.form.item.endTime);
			this.timePeriod = timePeriodCenter;
			param.sort = sort;
			param.planId = this.form.item.id;
			HttpReq.truckDispatching.productionPlanNewAllQuery(param).then((res) => {
				if(res.code == 200){
					//this.gradeLoading = false;
					this.formTable = res.data.content;
				}
			})
		},
		toDelete(item) {
			var id = item.id;
			this.$confirm('确认删除该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				this.reqRemoveProject([id])
			}).catch((e) => {})
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		submitForm(validateName, item){
			if(!this.form.status.cu){
				this.form.status.cu = 2;
				item.list = this.formTable
				//return
				this.$refs[validateName].validate(valid => {
					if(valid){
						if(this.form.reqType === 'add'){
							this.reqAddItem(this.form, item)
							this.formTable = []
						}else{
							this.reqUpdateItem(this.form, item)
							this.formTable = []
						}
					}else{
						this.form.status.cu = 0
					}
				});
			};
		},
		//新增生产计划
		reqAddItem(form, item){
			let lastData = {...item};
			HttpReq.truckDispatching.addOnePlan(item).then((res) => {
				form.visible = false;
				if(res.code == 200){
					this.$notify({
						title: '生产计划新增成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) {
				form.status.cu = 0
			});
		},
		//修改生产计划
		reqUpdateItem(form, item){
			let lastData = {...item};
			HttpReq.truckDispatching.addOnePlan(item).then((res) => {
				form.visible = false;
				if(res.code == 200){
					this.$notify({
						title: '生产计划修改成功！',
						type: 'success',
						duration: 2500
					});
					this.loadData()
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
					this.loadData()
				}
			}).catch(function(error) {
				form.status.cu = 0
			});
		},
		//删除生产计划
		reqRemoveProject(item){
			HttpReq.truckDispatching.productionPlanAllDel(item).then((res) => {
				if(res.status == 400){
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '删除成功！',
						type: 'success',
						duration: 2500
					});
				}
				this.loadData();
			})
		},


		//采区计划量设置方法
		showGradeTable(row){
			this.dialogTableVisible = true;
			this.gradeQueryId = row.id;
			this.miningAreaTitle = '采区计划量' + '(月份:' + this.currentTime(row.month) + ')';
			this.loadGradeData();
		},
		//获取采区计划量设置数据
		loadGradeData(){
			var sort = 'id,desc';
			var param = {};
			param.sort = sort;
			param.planId = this.gradeQueryId;
			
			this.$nextTick(()=>{
				HttpReq.truckDispatching.productionPlanNewAllQuery(param).then((res) => {
					if(res.code == 200){
						this.gradeLoading = false;
						this.gridData = res.data.content;
					}
				})
			})
		},
		gradeCancelForm(a, b, c){
			this.gradeFrom.visible = false;
		},
		gradeSubmitForm(validateName, item){
			if(!this.gradeFrom.status.cu){
				this.gradeFrom.status.cu = 2;
				this.$refs[validateName].validate(valid => {
					if(valid){
						if(this.gradeFrom.reqType === 'add'){
							this.gradeReqAddItem(this.gradeFrom, item)
						}else{
							this.gradeReqUpdateItem(this.gradeFrom, item)
						}
					}else{
						this.gradeFrom.status.cu = 0
					}
				});
			};
		},
		gradeToAdd() {
			// 请除表单验证
			this.$refs['form2'] && this.$refs['form2'].clearValidate();
			this.gradeFrom.title = '新增采区计划量';
			this.gradeFrom.status.cu = 0;
			this.gradeFrom.visible = true;
			this.gradeFrom.reqType = 'add';
			this.gradeFrom.item = {};
		},
		gradeToEdit(item) {
			// 请除表单验证
			this.$refs['form2'] && this.$refs['form2'].clearValidate();
			this.gradeFrom.title = '修改采区计划量设置';
			this.gradeFrom.status.cu = 0;
			this.gradeFrom.visible = true;
			this.gradeFrom.item = {...item};
			this.gradeFrom.reqType = 'edit';
		},
		gradeToDelete(item) {
			var id = item.id;
			this.$confirm('确认删除该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				this.gradeReqRemoveProject([id])
			}).catch((e) => {})
		},
		//新增采区计划量设置
		gradeReqAddItem(gradeFrom, item){
			let lastData = {...item};
			lastData.planId = this.gradeQueryId;
			HttpReq.truckDispatching.productionPlanNewAllAdd(lastData).then((res) => {
				gradeFrom.visible = false;
				if(res.code == 200){
					this.$notify({
						title: '采区计划量设置新增成功！',
						type: 'success',
						duration: 2500
					});
					this.loadGradeData()
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}
			}).catch(function(error) {
				gradeFrom.status.cu = 0
			});
		},
		//修改采区计划量设置
		gradeReqUpdateItem(gradeFrom, item){
			let lastData = {...item};
			HttpReq.truckDispatching.productionPlanNewAllUpdate(lastData).then((res) => {
				gradeFrom.visible = false;
				if(res.code == 200){
					this.$notify({
						title: '采区计划量设置修改成功！',
						type: 'success',
						duration: 2500
					});
					this.loadGradeData()
				}else{
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
					this.loadGradeData()
				}
			}).catch(function(error) {
				gradeFrom.status.cu = 0
			});
		},
		//删除采区计划量设置
		gradeReqRemoveProject(item){
			HttpReq.truckDispatching.productionPlanNewAllDel(item).then((res) => {
				if(res.status == 400){
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '删除成功！',
						type: 'success',
						duration: 2500
					});
				}
				this.loadGradeData();
			})
		},
		//修改时间格式
		changeTimeFormat(row){
			return this.currentTime(row.month);
		},
		currentTime(time){
			var date = new Date(time);
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			let currentFormatDate = year + "-" + month;
			return currentFormatDate;
		}

	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
			
		}
		
	}
	.checkboxViews{
		padding-left: 10px;
		box-sizing: border-box;
		width: 490px;
		height: 300px;
		border: 1px gainsboro solid;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
