<template>
	<div class="app-content">
		<div class="module-com flex-center-between switch-blo">
			<div class="app-size-32">开启自动涨价</div>
			<div>
				<switch :checked="form.riseSwitch == '0' ? false : true" @change="switchChangeFn" />
			</div>
		</div>
		<!-- 选项设置 -->
		<div class="input-line-wrap new-wrap">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">要涨价节日</div>
				<div class="tui-input button-wrap">
					<block v-for="(item, index) in festData" :key="index">
						<button class="admin-button-com" :class="[form.festIdList.includes(item.id) ? '' : 'default']" @click="selFestFn(item)">{{ item.name || '暂无' }}</button>
					</block>
				</div>
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">涨价方式</div>
				<radio-group class="tui-input flex-center-between" @change="radioChange">
					<label class="list" for="customLink">
						<radio id="customLink" value="0" :checked="form.riseType == 0"/>
						<span class="checkbox-text">按百分比</span>
					</label>
					<label class="list" for="goodsLink">
						<radio id="goodsLink" value="1" :checked="form.riseType == 1"/>
						<span class="checkbox-text">按金额</span>
					</label>
				</radio-group>
			</tui-list-cell>
			<block v-if="form.riseType == 0">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">比例</div>
					<input v-model="form.riseAmount" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="涨价10%，请输入10" maxlength="50" type="number" />
				</tui-list-cell>
			</block>
			<block v-else>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">金额</div>
					<input v-model="form.riseAmount" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="涨价80元请输入80" maxlength="50" type="number" />
				</tui-list-cell>
			</block>
		</div>
		<div class="prompt-text">提示：在节日的前一天和当天，商城设置自动涨价的商品将会全部 统一涨价。过后自动恢复原价。</div>
		<button class="admin-button-com blue big confirm-btn" @click="setPrice">确定</button>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
// api
import { getFest } from '@/utils/config'
import { getRise, updateRise } from '@/api/goods'
export default {
	name: 'setting-price-increase',
	components: {
		TuiListCell
	},
	data() {
		return {
			// radioVal: '0',
			form: {
				riseSwitch: '0',
				riseType: '0',
				festIdList: [],
				riseAmount: ''
			}
		}
	},
	computed: {
		...mapGetters({ festData: 'getFest' })
	},
	onLoad() {
		// this.init()
	},
	methods: {
		init() {
			getFest().then(() => {
				this._getDet()
			})
		},
		_getDet() {
			return getRise().then(res => {
				if (this.$util.isEmpty(res.data)) return
				res.data.festIdList = res.data.festIdList.map(e => e + '')
				Object.keys(this.form).forEach((i, index) => {
					this.form[i] = res.data[i]
				})
			})
		},
		setPrice() {
			if (this.form.festIdList.length == 0) {
				this.$msg('请先选择节日!')
				return false
			}
			if (!this.form.riseAmount) {
				this.$msg('请先输入比例或者金额!')
				return false
			}
			updateRise(this.form).then(res => {
				this.$msg('更新成功!')
			})
		},
		selFestFn(item) {
			let index = this.form.festIdList.findIndex(e => e == item.id)
			if (index == -1) {
				this.form.festIdList.push(item.id)
			} else {
				this.form.festIdList.splice(index, 1)
			}
		},
		switchChangeFn(e) {
			this.form.riseSwitch = e.detail.value ? '1' : '0'
		},
		radioChange(e) {
			this.form.riseAmount = ''
			this.form.riseType = e.detail.value
		}
	}
}
</script>

<style lang="scss" scoped>
	.prompt-text {
		color: $fontColor3;
		padding-bottom: 20px;
		padding-left: 30px;
	}
	.module-com {
		margin-bottom: 20px;
		padding: 30px;
		background-color: #fff;
		color: $fontColor2;
		.module-tit {
			font-size: 28px;
		}
	}
	.confirm-btn {
		width: calc(100% - 60px);
		margin: 60px 30px 0;
	}
	.switch-blo {
		padding: 15px 30px;
	}
	.new-wrap {
		margin-bottom: 20px;
		.checkbox-text {
			color: $fontColor2;
		}
		.button-wrap {
			justify-content: flex-start;
			flex-wrap: wrap;
			.admin-button-com {
				padding-top: 12px;
				padding-bottom: 12px;
				margin-right: 20px;
				border-radius: 4px;
				// &:first-child {
				// 	margin-left: 0;
				// }
			}
		}
	}
</style>
