<template>
	<div class="content-main">
		<el-row class="search-bm-boder">
			<el-form
				:inline="true"
				:model="formInline"
				class="demo-form-inline"
			>
				<el-form-item label="品种:">
					<el-select
						filterable
						collapse-tags
						class="inputCompatibleCck"
						v-model="formInline.pzmc"
						placeholder="请选择品种"
					>
						<el-option
							v-for="(item, index) in pzOptions"
							:key="index"
							:label="item.dictName"
							:value="item.dictName"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类型:">
					<el-select
						filterable
						collapse-tags
						class="inputCompatibleCck"
						v-model="formInline.typeCode"
						placeholder="请选择类型"
					>
						<el-option
							v-for="item in bzlxOptions"
							:key="item.dictCode"
							:label="item.dictName"
							:value="item.dictCode"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="search-button">
						<span class="search-line"></span>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconchaxun"
							@click="getList"
							>查询</el-button
						>
						<el-button
							type="primary"
							@click="
								formInline = {}
								getList()
							"
							size="small"
							class="iconfont iconzhongzhi"
							>重置</el-button
						>
					</div>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-form
				:model="formData"
				ref="formData"
				:rules="formData.rules"
				:inline="true"
			>
				<el-table
					:data="formData.tableData"
					stripe
					v-loading="listLoading"
					border
					fit
					highlight-current-row
					style="width: 100%"
				>
					<el-table-column align="center" label="序号" width="70">
						<template slot-scope="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="pzmc"
						label="品种"
						show-overflow-tooltip
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="typeName"
						label="类型"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-form-item
								v-if="!scope.row.id && isEdit !== ''"
								:rules="formData.rules.typeCode"
								:prop="
									'tableData.' + scope.$index + '.typeCode'
								"
							>
								<el-select
									filterable
									collapse-tags
									class="inputCompatibleCck"
									v-model="scope.row.typeCode"
									placeholder="请选择补贴标准类型"
									@change="btbzlxHandle($event, scope.row)"
								>
									<el-option
										v-for="item in bzlxOptions"
										:key="item.dictCode"
										:label="item.dictName"
										:value="item.dictCode"
									></el-option>
								</el-select>
							</el-form-item>
							<span v-else>{{ scope.row.typeName }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="standard"
						label="补贴标准"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-form-item
								v-if="!scope.row.id && isEdit !== ''"
								:rules="formData.rules.standard"
								:prop="
									'tableData.' + scope.$index + '.standard'
								"
							>
								<el-input
									v-model="scope.row.standard"
									placeholder="请输入补贴标准"
									type="number"
								></el-input>
							</el-form-item>
							<span v-else>{{ scope.row.standard }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="rateType"
						label="年/月费率"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-form-item
								v-if="!scope.row.id && isEdit !== ''"
								:rules="formData.rules.rateType"
								:prop="
									'tableData.' + scope.$index + '.rateType'
								"
							>
								<el-select
									filterable
									collapse-tags
									class="inputCompatibleCck"
									v-model="scope.row.rateType"
									placeholder="请选择费率类型"
									@change="fllxHandle($event, scope.row)"
								>
									<el-option
										v-for="item in fllxOptions"
										:key="item.dictCode"
										:label="item.dictName"
										:value="item.dictCode"
									></el-option>
								</el-select>
							</el-form-item>
							<span v-else>{{
								scope.row.rateType == '1' ? '月费率' : '年费率'
							}}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="startDate"
						label="生效时间"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-form-item
								v-if="!scope.row.id && isEdit !== ''"
								:rules="formData.rules.startDate"
								:prop="
									'tableData.' + scope.$index + '.startDate'
								"
							>
								<el-date-picker
									v-model="scope.row.startDate"
									type="date"
									style="width: 150px"
									value-format="yyyy-MM-dd"
									class="input-w"
									placeholder="生效时间"
								></el-date-picker>
							</el-form-item>
							<span v-else>{{ scope.row.startDate }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" width="100px">
						<template slot-scope="scope">
							<el-tooltip
								class="item"
								effect=""
								content=""
								placement=""
								v-if="
									scope.row.id &&
									isEdit != scope.row.id &&
									scope.row.isEnable == 2
								"
							>
								<el-button
									type="primary"
									size="mini"
									@click="updateSubmit(scope.row)"
									class="khxx_icon isBack"
									style=""
									>更新</el-button
								>
							</el-tooltip>
							<el-tooltip
								class="item"
								effect=""
								content=""
								placement=""
								v-if="scope.row.id && isEdit == scope.row.id"
							>
								<el-button
									type="primary"
									size="mini"
									@click="returnList(scope.row)"
									class="khxx_icon isCancel"
									style=""
									>取消</el-button
								>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- <el-row>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageForm.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
          ></el-pagination>
        </el-row> -->
			</el-form>
			<div class="saveTable" v-if="isEdit != ''">
				<el-button
					type="primary"
					size="small"
					class="iconfont iconbaocun"
					@click="saveTodo"
					>保存</el-button
				>
				<el-button
					type="primary"
					size="small"
					class="iconfont iconfanhui"
					@click="returnList"
					>返回</el-button
				>
			</div>
		</el-row>
	</div>
</template>

<script>
import {
	subsidyList,
	subsidySave,
	subsidyUpdate,
	findSubsidy,
} from '@/api/cwbb/index'
import { getNowDate } from '@/utils'

export default {
	data() {
		return {
			listLoading: false,
			pageForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			formData: {
				tableData: [],
				rules: {
					typeCode: {
						required: true,
						trigger: 'change',
						message: '请选择',
					},
					rateType: {
						required: true,
						trigger: 'change',
						message: '请选择',
					},
					standard: {
						required: true,
						trigger: 'blur',
						message: '请输入',
					},
					startDate: {
						required: true,
						trigger: 'change',
						message: '请选择',
					},
				},
			},
			isEdit: '',
			bzlxOptions: [],
			fllxOptions: [
				{
					dictName: '月费率',
					dictCode: '1',
				},
				{
					dictName: '年费率',
					dictCode: '2',
				},
			],
			pzOptions: [
				{
					dictName: '小麦',
					dictCode: '1110000',
				},
				{
					dictName: '稻谷',
					dictCode: '1130000',
				},
				{
					dictName: '大米',
					dictCode: '2360000',
				},
				{
					dictName: '面粉(包存)',
					dictCode: '2310000',
				},
				{
					dictName: '面粉(罐存)',
					dictCode: '2310000',
				},
				{
					dictName: '食用油',
					dictCode: '9980000',
				},
				{
					dictName: '大豆原油',
					dictCode: '2131000',
				},
			],
			formInline: {},
		}
	},
	created() {
		this.getList('start')
		this.getSubsidy()
	},
	methods: {
		//获取列表
		getList(type) {
			if (type != 'start') {
				//非初始化调用：查询、分页
				sessionStorage.setItem(
					'searchData',
					JSON.stringify(this.formInline)
				)
				sessionStorage.setItem(
					'pageData',
					JSON.stringify(this.pageForm)
				)
			} else {
				//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
				if (
					JSON.parse(sessionStorage.getItem('searchData')) &&
					JSON.parse(sessionStorage.getItem('searchData')).bbm == '03'
				) {
					//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
					this.formInline = JSON.parse(
						sessionStorage.getItem('searchData')
					)
					this.pageForm = JSON.parse(
						sessionStorage.getItem('pageData')
					)
				} else {
					//第一次进去此菜单时，保存上方默认的data
					sessionStorage.setItem(
						'searchData',
						JSON.stringify(this.formInline)
					)
					sessionStorage.setItem(
						'pageData',
						JSON.stringify(this.pageForm)
					)
				}
			}
			let data = {
				...this.formInline,
			}
			subsidyList(data).then((res) => {
				if (res.infoCode == 200) {
					this.formData.tableData = res.data
				}
			})
		},
		handleSizeChange(val) {
			this.pageForm.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.pageForm.pageNum = val
			this.getList()
		},
		//更新
		updateSubmit(row) {
			this.isEdit = row.id
			this.formData.tableData.push({
				pzmc: row.pzmc,
				pzbm: row.pzbm,
				typeCode: '',
				typeName: '',
				rateType: '',
				// typeCode: row.typeCode,
				// typeName: row.typeName,
				standard: '',
				startDate: getNowDate(),
			})
		},
		// 保存
		saveTodo() {
			this.$refs.formData.validate((valid) => {
				if (valid) {
					this.save()
				} else {
					console.log('请先填写必填项')
				}
			})
		},
		async save() {
			let data = {
				...this.formData.tableData[this.formData.tableData.length - 1],
			}
			let updata = this.formData.tableData.find(
				(d) => d.id == this.isEdit
			)
			await subsidySave(data)
				.then((res) => {
					if (res.infoCode == 200) {
						this.getList()
						this.$message.success('更新成功')
					}
				})
				.catch((e) => {
					console.log(e)
				})

			// if (data.typeCode == updata.typeCode) {
			//   await subsidyUpdate({id: updata.id})
			//   	.then((res) => {
			//   		if (res.infoCode == 200) {
			//   	    // this.$message.success('更新成功')
			//   		}
			//   	})
			//   	.catch((e) => {
			//   		console.log(e)
			//   	})
			// }
			this.isEdit = ''
		},
		// 返回
		returnList() {
			this.isEdit = ''
			let num = this.formData.tableData.length
			this.formData.tableData.splice(num - 1, 1)
		},
		// 补贴标准类型选择
		btbzlxHandle(val, item) {
			this.bzlxOptions.forEach((i) => {
				if (i.dictCode == val) {
					item.typeName = i.dictName
				}
				return
			})
		},
		// 月/年费率类型选择
		fllxHandle(val, item) {
			this.fllxOptions.forEach((i) => {
				if (i.dictCode == val) {
					item.rateType = i.dictCode
				}
				return
			})
		},
		// 获取补贴类型
		getSubsidy() {
			findSubsidy().then((res) => {
				if (res.infoCode == 200) {
					this.bzlxOptions = res.data
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.h3 {
	text-align: center;
	font-size: 1em;
	line-height: 2.5;
	color: #fff;
	background-color: #49a2fa;
	margin-bottom: 20px;
}
.khxx_icon {
	padding: 0;
	height: 26px !important;
	text-align: center;
}
.isBack {
	background: #169bd5 !important;
}
.isBack:hover {
	background: #169cd5c0 !important;
}
.isCancel {
	background: #f1af71 !important;
}
.isCancel:hover {
	background: #f1af71bd !important;
}
.saveTable {
	text-align: center;
	padding: 10px 0;
}
</style>
