<template>
    <div>
        <div class="Hotelenquiry-all">
            <div class="Hotelenquiry-head">
                <div class="Hotelenquiry-head-li">
                    <label>团组名称:</label>
                    <el-select @change="hotelchange" style="width:220px" v-model="DiId" clearable filterable
                        placeholder="请选择">
                        <el-option v-for="item in DiIdList" :key="item.id" :label="item.groupName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="Hotelenquiry-info">
                    <div class="Hotelenquiry-info-li">
                        <label>团 号：</label>
                        <span>{{ groupinfo.tourCode }}</span>
                    </div>
                    <div class="Hotelenquiry-info-li">
                        <label>客 户：</label>
                        <span>{{ groupinfo.clientName }}</span>
                    </div>
                    <div class="Hotelenquiry-info-li">
                        <label>出访国家：</label>
                        <span>{{ groupinfo.visitCountry|filter_city }}</span>
                    </div>
                    <div class="Hotelenquiry-info-li">
                        <label>起止日期：</label>
                        <span>{{ groupinfo.visitStartDate|filter_time }}~{{groupinfo.visitEndDate|filter_time}}</span>
                    </div>
                    <div class="Hotelenquiry-info-li">
                        <label>天数/人数：</label>
                        <span>{{ groupinfo.visitDays}}/{{ groupinfo.visitPNumber }}</span>
                    </div>
                </div>
            </div>
            <div class="Hotelenquiry-table">
                <el-table :data="tableDatas" border
                    style="width: 100%;size:10px" v-loading="loading" element-loading-text="拼命加载中...">
                    <el-table-column type="index" label="序号" width="55">
                    </el-table-column>
                    <el-table-column prop="city" label="城市" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="酒店名称">
                    </el-table-column>
                    <el-table-column prop="checkInDate" label="入住日期" width="100">
                        <template slot-scope="scope">
                            {{scope.row.checkInDate|filter_time}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkOutDate" label="退房日期" width="100">
                        <template slot-scope="scope">
                            {{scope.row.checkOutDate|filter_time}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="selectDt" label="查询时间" width="100">
                    </el-table-column>
                    <el-table-column prop="createTime" label="单间(价格/币种/数量)" width="160">
                        <template slot-scope="scope">
                            {{scope.row.singlePrice|townum}}&nbsp;&nbsp;{{scope.row.singleCurrency}}&nbsp;&nbsp;{{scope.row.singleQuantity}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="双间(价格/币种/数量)" width="160">
                        <template slot-scope="scope">
                            {{scope.row.doublePrice|townum}}&nbsp;&nbsp;{{scope.row.doubleCurrency}}&nbsp;&nbsp;{{scope.row.doubleQuantity}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="套房(价格/币种/数量)" width="160">
                        <template slot-scope="scope">
                            {{scope.row.suitePrice|townum}}&nbsp;&nbsp;{{scope.row.suiteCurrency}}&nbsp;&nbsp;{{scope.row.suiteQuantity}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="其他(价格/币种/数量)" width="160">
                        <template slot-scope="scope">
                            {{scope.row.otherPrice|townum}}&nbsp;&nbsp;{{scope.row.otherCurrency}}&nbsp;&nbsp;{{scope.row.otherQuantity}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createUserName" label="查询人" width="80">
                    </el-table-column>
                    <!-- <el-table-column prop="remark" label="备注">
                    </el-table-column> -->
                    <el-table-column prop="name" label="操 作" width="140">
                        <template slot-scope="scope">
                            <!-- @click="PostHotelReservationsDetails(scope.$index, scope.row)" -->
                                <el-button @click="PostHotelInquiryInfo(scope.row)" type="primary" size="mini" icon="el-icon-edit"></el-button>
                                <el-button @click="PostHotelInquiryDel(scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
                           
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next" :total="count">
                    </el-pagination>
                </div>
                <div class="Hotelenquiry-head-btn">
                    <el-button size="small" type="primary" @click="AddToggle">新增切换</el-button>
                    <el-button size="small" type="primary" @click="PostHotelInquiryAddOrEdit('enquiryinfo')">保存设置</el-button>
                </div>
            </div>
            <div class="Hotelenquiry-form">
                <el-form :model="enquiryinfo" :rules="enquiryinfoRules"
                    ref="enquiryinfo" label-width="110px" class="demo-OpHotelReservationsData">
                    <div class="Hotelenquiry-foundationone select-bz">
                        <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                            <el-form-item style="width:395px ;" label="所在城市" prop="city">
                                <el-input size="medium" type="text" v-model="enquiryinfo.city"></el-input>
                            </el-form-item>
                            <el-form-item style="width:395px ;" label="酒店名称" prop="name">
                                <el-input size="medium" type="text" v-model="enquiryinfo.name"></el-input>
                            </el-form-item>
                            <el-form-item prop="selectDt" style="width:395px ;" label="查询时间" required>
                                <el-date-picker value-format="yyyy-MM-dd" size="medium" type="datetime" placeholder="选择日期"
                                    v-model="enquiryinfo.selectDt" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item prop="checkInDate" style="width:395px ;" label="入住时间" required>
                                <el-date-picker value-format="yyyy-MM-dd" size="medium" type="date" placeholder="选择日期"
                                    v-model="enquiryinfo.checkInDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item style="width:395px ;" label="离店时间" prop="checkOutDate">
                                <el-date-picker value-format="yyyy-MM-dd"  size="medium" type="date" placeholder="选择时间"
                                    v-model="enquiryinfo.checkOutDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </div>
                        <el-form-item label="酒店地址" prop="address">
                            <el-input :rows="1" type="textarea" v-model="enquiryinfo.address"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input :rows="3" type="textarea" v-model="enquiryinfo.remark"></el-input>
                        </el-form-item>
                    </div>
                    <div class="Hotelenquiry-foundationone">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item  style="width:395px ;" label="酒店单间">
                                <el-input-number :controls="false"  style="width:50px ;" size="medium"
                                    v-model="enquiryinfo.singleQuantity"></el-input-number>
                                <span>间</span>
                                <el-input-number class="fjprice" style="width:80px;" :precision="2" :controls="false" size="medium" v-model="enquiryinfo.singlePrice">
                                </el-input-number>
                                <span>单价</span>
                                <el-select filterable size="medium" v-model="enquiryinfo.singleCurrency"
                                    style="width: 80px;" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:395px ;" label="酒店双间">
                                <el-input-number :controls="false" style="width:50px ;" size="medium"
                                    v-model="enquiryinfo.doubleQuantity"></el-input-number>
                                <span>间</span>
                                <el-input-number  class="fjprice" style="width:80px;" :precision="2" size="medium" :controls="false" v-model="enquiryinfo.doublePrice">
                                </el-input-number>
                                <span>单价</span>
                                <el-select filterable size="medium" v-model="enquiryinfo.doubleCurrency"
                                    style="width: 80px;" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:395px ;" label="酒店套房">
                                <el-input-number :controls="false"  style="width:50px ;" size="medium"
                                    v-model="enquiryinfo.suiteQuantity"></el-input-number>
                                <span>间</span>
                                <el-input-number  class="fjprice" style="width:80px;" :precision="2" size="medium" :controls="false" v-model="enquiryinfo.suitePrice">
                                </el-input-number>
                                <span>单价</span>
                                <el-select filterable size="medium" v-model="enquiryinfo.suiteCurrency"
                                    style="width: 80px;" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:395px ;" label="其他房型">
                                <el-input-number :controls="false"  style="width:50px ;" size="medium"
                                    v-model="enquiryinfo.otherQuantity"></el-input-number>
                                <span>间</span>
                                <el-input-number  class="fjprice" style="width:80px;" :precision="2" size="medium" :controls="false" v-model="enquiryinfo.otherPrice">
                                </el-input-number>
                                <span>单价</span>
                                <el-select filterable size="medium" v-model="enquiryinfo.otherCurrency"
                                    style="width: 80px;" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import {debounce} from '../../store/statice'
export default {
    data () {
        return {
            token:'',
            pageId:'',
            userId:'',
            DiIdList:[],
            DiId:'',
            enquiryinfo:{
                id:0,
                val:'',
                remark:'',
                city:'',
                name:'',
                address:'',
                selectDt:'',
                checkInDate:'',
                checkOutDate:'',
                singlePrice:0,
                singleQuantity:0,
                singleCurrency:836,
                doublePrice:0,
                doubleQuantity:0,
                doubleCurrency:836,
                suitePrice:0,
                suiteQuantity:0,
                suiteCurrency:836,
                otherPrice:0,
                otherQuantity:0,
                otherCurrency:836,
            },
            currencyList:[],
            tableDatas:[],
            currentPage:1,
            pageSize:5,
            loading:false,
            enquiryinfoRules:{
                city: [
                    { required: true, message: '请输入所在城市', trigger: ['blur', 'change'] }
                ],
                name: [
                    { required: true, message: '请输入酒店名称', trigger: ['blur', 'change'] }
                ],
                selectDt: [
                    { required: true, message: '请选择查询时间', trigger: ['blur', 'change'] }
                ],
                checkInDate: [
                    { required: true, message: '请选择入住时间', trigger: ['blur', 'change'] }
                ],
                checkOutDate: [
                    { required: true, message: '请选择离店时间', trigger: ['blur', 'change'] }
                ],
                address: [
                    { required: true, message: '请输入酒店地址', trigger: ['blur', 'change'] }
                ],
            },
            groupinfo:{},
            count:0,
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.PostHotelInquiryPageItem();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.PostHotelInquiryPageItem();
        },
        //获取基础数据
        PostHotelInquiryInit() {
            var url = "/api/Groups/PostHotelInquiryInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.currencyList=res.data.data.currData
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //团组切换
        hotelchange(){
            this.tableDatas=[];
            this.PostShareGroupInfo();
            this.PostHotelInquiryPageItem();
        },
        //获取基础数据
        GetGroupNameList() {
            var url = "/api/Business/GetGroupNameList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType:1,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.DiIdList=res.data.data;
                    that.DiId=that.DiIdList[0].id;
                    that.PostShareGroupInfo();
                    that.PostHotelInquiryPageItem();
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取团组基础信息
        PostShareGroupInfo() {
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType:1,
                    id:that.DiId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.groupinfo=res.data.data;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //团组询价列表
        PostHotelInquiryPageItem() {
            var url = "/api/Groups/PostHotelInquiryPageItem"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType:1,
                    pageIndex:that.currentPage,
                    pageSize:that.pageSize,
                    diId:that.DiId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.count=res.data.count;
                    that.tableDatas=res.data.data;
                    console.log(that.tableDatas);
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //查询细项info
        PostHotelInquiryInfo(val) {
            var url = "/api/Groups/PostHotelInquiryInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType:1,
                    id:val.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.enquiryinfo.id=res.data.data.id;
                    that.enquiryinfo.city=res.data.data.city;
                    that.enquiryinfo.name=res.data.data.name;
                    that.enquiryinfo.address=res.data.data.address;
                    that.enquiryinfo.selectDt=res.data.data.selectDt;
                    that.enquiryinfo.checkInDate=res.data.data.checkInDate;
                    that.enquiryinfo.checkOutDate=res.data.data.checkOutDate;
                    that.enquiryinfo.singlePrice=res.data.data.singlePrice;
                    that.enquiryinfo.singleQuantity=res.data.data.singleQuantity;
                    that.enquiryinfo.singleCurrency=res.data.data.singleCurrency;
                    that.enquiryinfo.doublePrice=res.data.data.doublePrice;
                    that.enquiryinfo.doubleQuantity=res.data.data.doubleQuantity;
                    that.enquiryinfo.doubleCurrency=res.data.data.doubleCurrency;
                    that.enquiryinfo.suitePrice=res.data.data.suitePrice;
                    that.enquiryinfo.suiteQuantity=res.data.data.suiteQuantity;
                    that.enquiryinfo.suiteCurrency=res.data.data.suiteCurrency;
                    that.enquiryinfo.otherPrice=res.data.data.otherPrice;
                    that.enquiryinfo.otherQuantity=res.data.data.otherQuantity;
                    that.enquiryinfo.otherCurrency=res.data.data.otherCurrency;
                    that.enquiryinfo.remark=res.data.data.remark;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //保存新增
        PostHotelInquiryAddOrEdit:debounce(function(enquiryinfo) {
            this.$refs[enquiryinfo].validate((valid) => {
                if (valid) {
                    var status=1
                    if (this.enquiryinfo.id==0) {
                        status=1
                    }else{
                        status=2
                    }
                    var url = "/api/Groups/PostHotelInquiryAddOrEdit"
                    var that = this
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + this.token
                        },
                        data:{
                            status:status,
                            createUserId:that.userId,
                            diId:that.DiId,
                            id:that.enquiryinfo.id,
                            remark:that.enquiryinfo.remark,
                            city:that.enquiryinfo.city,
                            name:that.enquiryinfo.name,
                            address:that.enquiryinfo.address,
                            selectDt:that.enquiryinfo.selectDt,
                            checkInDate:that.enquiryinfo.checkInDate,
                            checkOutDate:that.enquiryinfo.checkOutDate,
                            singlePrice:that.enquiryinfo.singlePrice,
                            singleQuantity:that.enquiryinfo.singleQuantity,
                            singleCurrency:that.enquiryinfo.singleCurrency,
                            doublePrice:that.enquiryinfo.doublePrice,
                            doubleQuantity:that.enquiryinfo.doubleQuantity,
                            doubleCurrency:that.enquiryinfo.doubleCurrency,
                            suitePrice:that.enquiryinfo.suitePrice,
                            suiteQuantity:that.enquiryinfo.suiteQuantity,
                            suiteCurrency:that.enquiryinfo.suiteCurrency,
                            otherPrice:that.enquiryinfo.otherPrice,
                            otherQuantity:that.enquiryinfo.otherQuantity,
                            otherCurrency:that.enquiryinfo.otherCurrency,
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            that.PostHotelInquiryPageItem();
                            that.AddToggle()
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                }else{
                    this.$message({
                        showClose: true,
                        message: '请填写完红框内的信息！',
                        type: 'error',
                        duration:'3000'
                    });
                    return false;
                }
            })
            
        },1000,true),
        //新增切换
        AddToggle(){
            this.enquiryinfo={
                id:0,
                val:'',
                remark:'',
                city:'',
                name:'',
                address:'',
                selectDt:'',
                checkInDate:'',
                checkOutDate:'',
                singlePrice:0,
                singleQuantity:0,
                singleCurrency:836,
                doublePrice:0,
                doubleQuantity:0,
                doubleCurrency:836,
                suitePrice:0,
                suiteQuantity:0,
                suiteCurrency:836,
                otherPrice:0,
                otherQuantity:0,
                otherCurrency:836,
            }
            if (this.$refs.enquiryinfo){
                this.$nextTick(() => {
                    this.$refs['enquiryinfo'].clearValidate();
                })
            }
        },
        //删除
        PostHotelInquiryDel(val) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url = "/api/Groups/PostHotelInquiryDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        portType:1,
                        id:val.id,
                        deleteUserId:that.userId,
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                        that.PostHotelInquiryPageItem();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
            
        },
    },
    created(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostHotelInquiryInit();
        this.GetGroupNameList();
    },
    filters:{
        filter_city(value){
            if(value){
                return value.replaceAll('|','、')
            }
        },
        filter_time(value){
            if(value){
                return value.split(" ")[0]
            }
        },
        townum(val){
            return val.toFixed(2)
        },
    },
}
</script>
<style>
.Hotelenquiry-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.Hotelenquiry-head-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
    
}

.Hotelenquiry-head {
    display: flex;
    justify-content: space-between;
}

.Hotelenquiry-info {
    display: flex;
    margin-top: 10px;
    
}

.Hotelenquiry-info-li {
    margin-right: 30px;
}

.Hotelenquiry-info-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.Hotelenquiry-info-li span {
    color: #606266;
    font-size: 14px;
}
.Hotelenquiry-form {
    margin-top: 20px;
}
.Hotelenquiry-table{
    margin-top: 20px;
}
.Hotelenquiry-foundationone {
    margin-top: 10px;
    border-top: 2px solid #409EFF;
    padding-top: 20px;
}
.select-bz .el-select {
    width: 100%;
}
.Hotelenquiry-head-btn{
    display: flex;
    justify-content: end;
    margin-top: 20px;
}
</style>