<template>
    <div class="HotelProductEdit">
        <div class="HotelProductEdit_header">
            <div>{{$t('objFill.v101.hote.jiudianbjbj')}}</div>
            <div>
                <div @click="editSave" >{{$t('pub.saveBtn')}}</div>
            </div>
        </div>
        <div class="HotelProductEdit_tableBox">
            <el-form :model="msg" :rules="rules" :inline="true" :show-message="false" ref="hotelProductForm">
                <table class="HotelProductEdit_table" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
                    <thead>
                        <tr>
                            <th width="20%"></th>
                            <th width="30%"></th>
                            <th width="20%"></th>
                            <th width="30%"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 库存 -->
                        <tr>
                            <td colspan="4" class="text_title">{{$t('hotel.hotel_Inventory')}}</td>
                        </tr>
                        <tr>
                            <td class="text_tab">{{$t('objFill.v101.hote.kucunleix')}}：</td>
                            <td>
                                <el-form-item label="" prop="InventoryType">
                                    <el-select v-model="msg.InventoryType" :placeholder="$t('pub.pleaseSel')">
                                        <el-option :label="$t('objFill.hongri')" value="1"></el-option>
                                        <el-option :label="$t('objFill.wanji')" value="2"></el-option>
                                        <el-option :label="$t('objFill.pingji')" value="3"></el-option>
                                        <el-option :label="$t('objFill.danji')" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                            <td class="text_tab">{{$t('objFill.v101.hote.riqixzfs')}}：</td>
                            <td>
                                <el-form-item label="" prop="DayType">
                                    <el-select v-model="msg.DayType" :placeholder="$t('pub.pleaseSel')" @change="dayTypeChange">
                                        <el-option :label="$t('objFill.v101.hote.anriqifangs')[0]" value="1"></el-option>
                                        <el-option :label="$t('objFill.v101.hote.anriqifangs')[1]" value="2"></el-option>
                                        <el-option :label="$t('objFill.v101.hote.anriqifangs')[2]" value="3"></el-option>
                                        <el-option :label="$t('objFill.v101.hote.anriqifangs')[3]" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">{{$t('objFill.v101.hote.riqixuanz')}}：</td>
                            <td colspan="3" class="HotelProductEdit_date">
                                <div v-show="msg.DayType==='1'||msg.DayType==='3'">
                                    <em>{{$t('pub.year')}}</em>
                                    <el-form-item label="" prop="Year">
                                        <el-date-picker v-model="msg.Year" type="year" value-format="yyyy":placeholder="$t('objFill.xuanzhenian')"></el-date-picker>
                                    </el-form-item>
                                </div>
                                <div v-show="msg.DayType==='2'">
                                    <em>{{$t('pub.month')}}</em>
                                    <el-form-item label="" prop="Month">
                                        <el-date-picker v-model="msg.Month" type="month" value-format="yyyy-MM" :placeholder="$t('op.ChoiceMonth')"></el-date-picker>
                                    </el-form-item>
                                </div>
                                <div v-show="msg.DayType==='3'">
                                    <em>{{$t('pub.month')}}</em>
                                    <el-form-item label="" prop="Month">
                                        <el-select v-model="msg.Month" :placeholder="$t('objFill.v101.hote.qingxuanzy')">
                                            <el-option :label="$t('objFill.yuefens')[0]" value="01"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[1]" value="02"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[2]" value="03"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[3]" value="04"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[4]" value="05"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[5]" value="06"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[6]" value="07"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[7]" value="08"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[8]" value="09"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[9]" value="10"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[10]" value="11"></el-option>
                                            <el-option :label="$t('objFill.yuefens')[11]" value="12"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                                <div v-show="msg.DayType==='3'">
                                    <em>{{$t('objFill.v101.hote.zhou')}}</em>
                                    <el-form-item label="" prop="Week">
                                        <el-select v-model="msg.Week" :placeholder="$t('objFill.v101.hote.qingxuanzz')">
                                            <el-option :label="$t('objFill.v101.hote.weeks')[0]" value="0"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[1]" value="1"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[2]" value="2"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[3]" value="3"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[4]" value="4"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[5]" value="5"></el-option>
                                            <el-option :label="$t('objFill.v101.hote.weeks')[6]" value="6"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                                <div v-show="msg.DayType==='4'">
                                    <el-form-item label="" prop="StartDate">
                                        <el-date-picker v-model="msg.StartDate" type="date" :placeholder="$t('objFill.v101.hote.xuanzhekssj')" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-form-item>
                                    <em>-</em>
                                    <el-form-item label="" prop="EndDate">
                                        <el-date-picker v-model="msg.EndDate" type="date" :placeholder="$t('objFill.v101.hote.xuanzhejssj')" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                                    </el-form-item>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">{{$t('objFill.kuicun')}}：</td>
                            <td colspan="3">
                                <el-form-item label="" prop="Inventory">
                                    <el-input-number v-model="msg.Inventory" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <!-- 成本价 -->
                        <tr>
                            <td colspan="4" class="text_title">{{$t('objFill.v101.hote.chengbenjlr')}}</td>
                        </tr>
                        <tr>
                            <td class="text_tab">标准间成本价：</td>
                            <td>
                                <el-form-item label="" prop="CostPrice">
                                    <el-input-number v-model="msg.CostPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">大床间成本价：</td>
                            <td>
                                <el-form-item label="" prop="BidroomPrice">
                                    <el-input-number v-model="msg.BidroomPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">单人间成本价：</td>
                            <td>
                                <el-form-item label="" prop="SingleroomPrice">
                                    <el-input-number v-model="msg.SingleroomPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">小孩不占床成本价：</td>
                            <td>
                                <el-form-item label="" prop="ChildNotBedPrice">
                                    <el-input-number v-model="msg.ChildNotBedPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">加床成本价：</td>
                            <td>
                                <el-form-item label="" prop="AddBedPrice">
                                    <el-input-number v-model="msg.AddBedPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">司机房成本价：</td>
                            <td>
                                <el-form-item label="" prop="DriverRoomPrice">
                                    <el-input-number v-model="msg.DriverRoomPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">导游房成本价：</td>
                            <td>
                                <el-form-item label="" prop="GuideRoomPrice">
                                    <el-input-number v-model="msg.GuideRoomPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">成本币种：</td>
                            <td>
                                <el-form-item label="" prop="CurrencyId">
                                    <el-select v-model="msg.CurrencyId" :placeholder="$t('pub.pleaseSel')" style="width:100px;" @change="currencyChange">
                                        <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                                        <el-option v-for="(item,index) in allCurrencyList" :key="index" :label="item.Name" :value="item.ID"></el-option>
                                    </el-select>
                                </el-form-item>
                                <em>（汇率</em>
                                <el-form-item label="" prop="CurrentRate">
                                    <el-input v-model="msg.CurrentRate" :placeholder="$t('hotel.hotel_CurrentRate')" style="width:80px;"></el-input>
                                </el-form-item>
                                <em>）</em>
                            </td>
                        </tr>
                        <!-- 加价 -->
                        <tr>
                            <td colspan="4" class="text_title">加价录入</td>
                        </tr>
                        <tr>
                            <td class="text_tab">周末加价：</td>
                            <td>
                                <el-form-item label="" prop="WeekendAddPrice">
                                    <el-input-number v-model="msg.WeekendAddPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">内部加价：</td>
                            <td>
                                <el-form-item label="" prop="InteriorAddPrice">
                                    <el-input-number v-model="msg.InteriorAddPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">B2B加价：</td>
                            <td>
                                <el-form-item label="" prop="B2BPrice">
                                    <el-input-number v-model="msg.B2BPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                            <td class="text_tab">B2C加价：</td>
                            <td>
                                <el-form-item label="" prop="B2CPrice">
                                    <el-input-number v-model="msg.B2CPrice" :precision="2" :min="0"></el-input-number>
                                </el-form-item>
                            </td>
                        </tr>
                        <!-- 其他信息 -->
                        <tr>
                            <td colspan="4" class="text_title">其他信息</td>
                        </tr>
                        <tr>
                            <td class="text_tab">供应商：</td>
                            <td colspan="3">
                                <el-form-item label="" prop="Supplier">
                                    <el-select v-model="msg.Supplier" :placeholder="$t('pub.pleaseSel')">
                                        <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                                        <el-option v-for="(item,index) in SupplierList" :key="index" :label="item.Name" :value="item.ID"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="text_tab">{{$t('pub.pubRemark')}}:</td>
                            <td colspan="3" style="padding: 10px 20px;">
                                <el-form-item label="" prop="Remark">
                                    <el-input type="textarea" v-model="msg.Remark" :rows="2" :placeholder="$t('fnc.qsrneirong')" style="width: 755px;"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            var emptyJudge = (rule, value, callback) => {
                if (value.toString().trim()==='') {
                    this.$message.error(rule.message)
                    callback(new Error())
                } else {
                    callback()
                }
            }
            var numJudge = (rule, value, callback) => {
                let regPos = /^\d+(\.\d+)?$/;
                if (!regPos.test(value)) {
                    this.$message.error(rule.message)
                    callback(new Error())
                } else {
                    callback()
                }
            }
            var dateJudge = (rule, value, callback) => {
                if (this.msg.Year === null) {
                    this.msg.Year = ''
                }
                if (this.msg.Month === null) {
                    this.msg.Month = ''
                }
                if (this.msg.DayType === '1') {
                    if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
                        this.$message.error('请选择年')
                        callback(new Error())
                    } else {
                        callback()
                    }
                } else if (this.msg.DayType === '2') {
                    if (this.msg.Month.toString().trim() === '' && rule.field === 'Month') {
                        this.$message.error('请选择月')
                        callback(new Error())
                    } else {
                        callback()
                    }
                } else if (this.msg.DayType === '3') {
                    if (this.msg.Year.toString().trim() === '' && rule.field === 'Year') {
                        this.$message.error('请选择年')
                        callback(new Error())
                    } else if (this.msg.Week.toString().trim() === '' && rule.field === 'Week') {
                        this.$message.error('请选择周')
                        callback(new Error())
                    } else {
                        callback()
                    }
                } else if (this.msg.DayType === '4') {
                    if (this.msg.StartDate.toString().trim() === '' && rule.field === 'StartDate') {
                        this.$message.error('请选择开始时间')
                        callback(new Error())
                    } else if (this.msg.EndDate.toString().trim() === '' && rule.field === 'EndDate') {
                        this.$message.error('请选择结束时间')
                        callback(new Error())
                    } else {
                        callback()
                    }
                }
            }
            return {
                loading: false,
                msg: {
                    Hotel: '0',
                    Supplier: '',
                    Inventory: '0',
                    B2BPrice: '0',
                    B2CPrice: '0',
                    Remark: '',
                    CostPrice: '0',
                    CurrencyId: '',
                    CurrentRate: '',
                    StartDate: '',
                    EndDate: '',
                    InventoryType: '',
                    BidroomPrice: '0',
                    SingleroomPrice: '0',
                    ChildNotBedPrice: '0',
                    AddBedPrice: '0',
                    DriverRoomPrice: '0',
                    WeekendAddPrice: '0',
                    InteriorAddPrice: '0',
                    GuideRoomPrice: '0',
                    DayType: '4',
                    Year: '',
                    Month: '',
                    Week: ''
                },
                rules: {
                    InventoryType: { validator: emptyJudge, message: '请选择库存类型', trigger: 'blur' },
                    DayType: { validator: emptyJudge, message: '请选择日期选择方式', trigger: 'blur' },
                    Year: { validator: dateJudge, message: '请选择年', trigger: 'blur' },
                    Month: { validator: dateJudge, message: '请选择月', trigger: 'blur' },
                    Week: { validator: dateJudge, message: '请选择周', trigger: 'blur' },
                    StartDate: { validator: dateJudge, message: '请选择开始时间', trigger: 'blur' },
                    EndDate: { validator: dateJudge, message: '请选择结束时间', trigger: 'blur' },
                    Inventory: { validator: numJudge, message: '请输入库存', trigger: 'blur' },
                    CostPrice: { validator: numJudge, message: '请输入标准间成本价', trigger: 'blur' },
                    BidroomPrice: { validator: numJudge, message: '请输入大床间成本价：', trigger: 'blur' },
                    SingleroomPrice: { validator: numJudge, message: '请输入单人间成本价', trigger: 'blur' },
                    ChildNotBedPrice: { validator: numJudge, message: '请输入小孩不占床成本价', trigger: 'blur' },
                    AddBedPrice: { validator: numJudge, message: '请输入加床成本价', trigger: 'blur' },
                    DriverRoomPrice: { validator: numJudge, message: '请输入司机房成本价', trigger: 'blur' },
                    GuideRoomPrice: { validator: numJudge, message: '请输入导游房成本价', trigger: 'blur' },
                    CurrencyId: { validator: emptyJudge, message: '请选择成本币种', trigger: 'blur' },
                    CurrentRate: { validator: emptyJudge, message: '请输入汇率', trigger: 'blur' },
                    WeekendAddPrice: { validator: numJudge, message: '请输入周末加价', trigger: 'blur' },
                    InteriorAddPrice: { validator: numJudge, message: '请输入内部加价', trigger: 'blur' },
                    B2BPrice: { validator: numJudge, message: '请输入B2B加价', trigger: 'blur' },
                    B2CPrice: { validator: numJudge, message: '请输入B2C加价', trigger: 'blur' },
                },
                allCurrencyList: [],
                SupplierList: []
            }
        },
        methods: {
            // 获取详情
            getDetail: function () {
                this.loading = true
                this.apipost('dict_post_HotelOffer_GetHotelPriceInfo', {
                    HotelId: this.msg.Hotel,
                    Time: this.msg.StartDate
                }, res => {
                    if (res.data.resultCode === 1) {
                        let data = res.data.data
                        this.msg.Supplier = data.Supplier===0?'0':data.Supplier
                        this.msg.Inventory = data.Inventory
                        this.msg.B2BPrice = data.B2BPrice
                        this.msg.B2CPrice = data.B2CPrice
                        this.msg.Remark = data.Remark
                        this.msg.CostPrice = data.CostPrice
                        this.msg.CurrencyId = data.CurrencyId
                        this.msg.CurrentRate = data.CurrentRate
                        this.msg.StartDate = data.Date
                        this.msg.EndDate = data.Date
                        this.msg.InventoryType = data.InventoryType.toString()
                        this.msg.BidroomPrice = data.BidroomPrice
                        this.msg.SingleroomPrice = data.SingleroomPrice
                        this.msg.ChildNotBedPrice = data.ChildNotBedPrice
                        this.msg.AddBedPrice = data.AddBedPrice
                        this.msg.DriverRoomPrice = data.DriverRoomPrice
                        this.msg.WeekendAddPrice = data.WeekendAddPrice
                        this.msg.InteriorAddPrice = data.InteriorAddPrice
                        this.msg.GuideRoomPrice = data.GuideRoomPrice
                    } else {
                        this.$message.error(res.data.message)
                    }
                    this.loading = false
                })
            },
            // 日期类型切换
            dayTypeChange: function (val) {
                this.msg.Year = ''
                this.msg.Month = ''
                this.msg.Week = ''
                this.msg.StartDate = ''
                this.msg.EndDate = ''
            },
            //获取所有币种
            getAllCurrency() {
                this.apipost("financeinfo_post_GetList",{},res => {
                    if (res.data.resultCode === 1) {
                        this.allCurrencyList = res.data.data;
                    } else {
                        this.$message.error('币种获取失败')
                    }
                },err => {});
            },
            // 币种切换
            currencyChange: function (val) {
                this.msg.CurrentRate = 0
                for (let i = 0; i < this.allCurrencyList.length; i++) {
                    if (val === this.allCurrencyList[i].ID) {
                        this.msg.CurrentRate = this.allCurrencyList[i].Rate;
                    }
                }
            },
            // 获取供应商
            initSupplier() {
                this.apipost("supplier_post_GetAllList",{Type: 1},res => {
                    if (res.data.resultCode === 1) {
                        this.SupplierList = res.data.data;
                    } else {
                        this.$message.error('供应商获取失败')
                    }
                },err => {});
            },
            // 保存按钮
            editSave: function () {
                this.$refs['hotelProductForm'].validate((valid) => {
                    if (valid) {
                        if (this.loading === false) {
                            this.loading = true
                            this.apipost('dict_post_HotelOffer_SetNewHotelPrice', this.msg, res => {
                                if (res.data.resultCode === 1) {
                                    this.$message.success('编辑成功')
                                } else {
                                    this.$message.error(res.data.message)
                                }
                                this.loading = false
                            })
                        }
                    } else {
                        return false;
                    }
                });
            }
        },
        mounted: function () {
            this.getAllCurrency()
            this.initSupplier()
            let type = this.$route.query.type===undefined?'1':this.$route.query.type
            this.msg.Hotel = this.$route.query.HotelId===undefined?'0':this.$route.query.HotelId
            let nowDate = new Date().Format('yyyy-MM-dd');
            this.msg.DayType = '4'
            this.msg.StartDate = this.$route.query.day===undefined?nowDate:this.$route.query.day
            this.msg.EndDate = this.$route.query.day===undefined?nowDate:this.$route.query.day
            if (type === '2') {
                this.getDetail()
            }
        },
    }
</script>

<style>
    .HotelProductEdit{
        width: 100%;
    }
    .HotelProductEdit_header{
        position: relative;
        padding: 15px 0;
        width: 100%;
        border-bottom: 1px solid #cccccc;
    }
    .HotelProductEdit_header>div:nth-child(1){
        display: inline-block;
        padding: 0 10px;
        width: 150px;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        color: #000000;
        border-left: 2px solid #e95252;
    }
    .HotelProductEdit_header>div:nth-child(2){
        position: absolute;
        top: 0px;
        right: 0px;
        height: 50px;
        line-height: 50px;
    }
    .HotelProductEdit_header>div:nth-child(2)>div{
        display: inline-block;
        padding: 0 15px;
        height: 30px;
        line-height: 28px;
        font-size: 14px;
        color: #E95252;
        background: #fff;
        border: 1px solid #E95252;
        border-radius: 15px;
        cursor: pointer;
    }
    .HotelProductEdit_tableBox{
        margin: auto;
        padding: 20px 0;
        width: 1000px;
    }
    .HotelProductEdit_table {
        width: 100%;
        color: #333;
        border-bottom: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
    }
    .HotelProductEdit_table tr {
        background: #fff;
    }
    .HotelProductEdit_table tr th {
        height: 0px;
    }
    .HotelProductEdit_table tr td {
        padding: 0 20px;
        height: 40px;
        font-size: 12px;
        text-align: left;
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
    }
    .HotelProductEdit_table tr td em {
        display: inline-block;
        height: 40px;
        line-height: 40px;
    }
    .HotelProductEdit_table tr td .el-form-item{
        margin-right: 0px;
        margin-bottom: 0px;
    }
    .HotelProductEdit_table tr td .el-input-number{
        line-height: 32px;
    }
    .HotelProductEdit_table tr td .el-input__inner{
        height: 34px;
        border: none;
        border-bottom: 1px solid #dcdfe6;
    }
    .HotelProductEdit_table tr td .el-textarea__inner{
        resize: none;
        border: none;
        border-bottom: 1px solid #dcdfe6;
    }
    .HotelProductEdit_table tr .text_title{
        font-size: 14px;
        text-align: center;
        background-color: #cccccc;
    }
    .HotelProductEdit_table tr .text_tab{
        background-color: #E5E5E5;
    }

    .HotelProductEdit_date>div{
        display: inline-block;
        vertical-align: middle;
    }
    .HotelProductEdit_date>div>em{
        padding: 0 5px;
    }
</style>
