<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">费率设置</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="second-row">
				<div class="total_balance">当前费率：{{current_feilv}}元/吨</div>
				<div class="show-detail" @click="modify_feilv">修改费率</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<div class="lsfl">历史费率</div>
		<el-row>
			<el-col :span="24" class="third-row">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					highlight-current-row :row-class-name="rowClassName">
					<el-table-column prop="id" label="序号" width="300" align="center"></el-table-column>
					<el-table-column prop="feilv" label="费率（元/吨）" align="center"></el-table-column>
					<el-table-column prop="dt" label="时间" align="center"></el-table-column>
				</el-table>
				<div style="margin-top: 20px" class="table-footer">
					<div class="pages">
						<el-pagination layout="prev, pager, next" :total="total_rows" :current-page.sync="current_page"
							:hide-on-single-page="true" :page-size="page_rows" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" class="forth-row">
				<!-- 修改费率对话框 -->
				<el-dialog title="修改费率" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog"
					:close-on-click-modal="false" :close-on-press-escape="false">
					<hr
						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
					<el-form :inline="true" class="demo-form-inline" :model="modifyForm" :rules="modifyRules"
						ref="modifyForm">
						<el-form-item label="费率：" class="shuibiaoId" prop="inputFeilv">
							<el-input ref="inputFeilv" v-model="modifyForm.inputFeilv" placeholder="请输入费率"
								maxlength="4"></el-input>
						</el-form-item>
						<div class="yuan">元/吨</div>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="editdialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handle_modify_feilv('modifyForm')">确 定</el-button>
					</div>
				</el-dialog>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current_feilv: 0.0.toFixed(2), // 当前费率
				editdialogFormVisible: false, // 控制费率对话框显示、隐藏
				modifyForm: {
					inputFeilv: '' // 修改费率
				},
				modifyRules: {
					inputFeilv: [{
							required: true,
							message: '请输入费率',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 4,
							message: '长度在 1 到 4 个位',
							trigger: 'blur'
						}
					]
				},
				tableData: [], // 表格数据
				total_rows: 0, // 表格记录总数
				current_page: 1, // 当前所在页码
				page_rows: 7 // 每页显示的记录数
			}
		},
		created() {
			// 获取当前费率
			this.get_current_feilv()

			// 获取历史费率
			this.get_history_feilv()
		},
		methods: {
			/**
			 * 获取当前费率
			 */
			get_current_feilv() {
				this.$axios.get('/jxch-smartmp/HotWaters/watercurrentRate.action')
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rate) != 'undefined' && res.data.rate != '' && JSON.stringify(res
								.data) != '{}') {
							this.current_feilv = parseFloat(res.data.rate).toFixed(2)
						} else {
							_this.$message.success('【获取当前费率】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取当前费率】请求异常: ' + err);
					})
			},
			/**
			 * 获取历史费率
			 */
			get_history_feilv() {
				this.tableData = []
				var _this = this
				this.$axios.get('/jxch-smartmp/HotWaters/waterqueryPrice.action', {
						params: {
							page: this.current_page,
							rows: this.page_rows
						}
					})
					.then(res => {
						// console.log(res.data);
						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res
								.data) != '{}') {
							for (var i = 0; i < res.data.rows.length; i++) {
								let tmp = {
									id: i,
									feilv: parseFloat(res.data.rows[i].price).toFixed(2),
									dt: res.data.rows[i].time.split(' ')[0] + ' ~ ' + res.data.rows[i].time2.split(
										' ')[0]
								}
								_this.tableData.push(tmp)

								_this.total_rows = res.data.total
							}
						} else {
							_this.$message.success('【获取当前费率】暂无数据！');
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【获取当前费率】请求异常: ' + err);
					})
			},
			/**
			 * 改变页码
			 * @param {Object} val
			 */
			handleCurrentChange(val) {
				this.current_page = val
				// 查询该栋的信息
				this.get_history_feilv()
			},
			/**
			 * 把每一行的索引放进row.id
			 */
			rowClassName({
				row,
				rowIndex
			}) {
				row.id = rowIndex + 1;
			},
			/**
			 * 打开修改费率对话框
			 */
			modify_feilv() {
				this.modifyForm.inputFeilv = ''
				this.editdialogFormVisible = true

				setTimeout(() => {
					this.$refs['inputFeilv'].focus()
				}, 100)
			},
			/**
			 * 修改费率
			 */
			handle_modify_feilv(formName) {
				var _this = this
				_this.$refs[formName].validate((valid) => {
					if (valid) {
						if (_this.modifyForm.inputFeilv) {
							_this.$axios.get('/jxch-smartmp/HotWaters/waterupdatePrice.action', {
									params: {
										rate: _this.modifyForm.inputFeilv
									}
								})
								.then(res => {
									// console.log(res.data);
									if (typeof(res.data.msg) != 'undefined' && res.data.msg == '修改成功') {
										_this.$message.success('【修改费率】修改成功！')
						
										_this.editdialogFormVisible = false
						
										// 获取当前费率
										_this.get_current_feilv()
						
										// 获取历史费率
										_this.get_history_feilv()
									} else {
										_this.$message.error('【修改费率】失败！');
									}
								})
								.catch(err => {
									// console.log(err);
									_this.$message.error('【修改费率】请求异常: ' + err);
								})
						} else {
							_this.$message.error('请输入费率！')
						}
					} else {
						// _this.$message.error('表单验证失败！')
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import url("feilvset.css");
</style>
