<style>
    .detailsIT .time .el-input--prefix .el-input__inner{padding-left: 30px}
    .detailsIT .ProductName span{display: inline-block;background-color: #2AAEF2;color: white;border-radius: 4px;width: 50px;height: 30px;line-height: 30px;}
    .detailsIT .singeRowTable tr:nth-child(n+2){height: 80px;text-align: center}
    .detailsIT .singeRowTable tr:nth-child(n+2):hover{background-color: white;box-shadow:0px 0px 14px 0px #adadad;z-index: 10;position: relative;}
    .detailsIT .RemainingInventory span{display: inline-block;width: 31px;height: 31px;border-radius: 50%;border: solid 3px #FFB85D;background-color: #FF9000;color:white;line-height: 25px;}
    .detailsIT .RemainingInventory_w span{display: inline-block;width: 31px;height: 31px;border-radius: 50%;border: solid 3px #FF8282;background-color: #E95252;color:white;line-height: 25px;}
    .detailsIT .small{font-size: 12px;color: #999999}
    .detailsIT .tit_name{font-size: 12px;color: #666666;text-align: right}
    .detailsIT .tit_name_right{text-align: left}   
    .detailsIT .price .num,.detailsIT .numT,.detailsIT .price,.detailsIT .rmb{font-size: 16px;color: #FF9000;}
    .detailsIT .price .num,.detailsIT .numT{font-weight: bold}
    .detailsIT .numT{color: #2AAEF2}
    .detailsIT .price{color: #FF9000}
    .detailsIT .rmb{color: #666666}
    .detailsIT .tit_name,.detailsIT .small{display: block;width: 50%;float: left;line-height: 20px;padding-right: 10px;}
    .detailsIT .SupplierName{cursor: pointer;position: relative;}
    .detailsIT .SupplierName div.Su_center{display: flex;justify-content: center;align-items: center;}
    .detailsIT .SupplierName div.Su_center .iconfont{width: 30px;height: 30px;border-radius: 50%;display: inline-block;margin-right: 10px;color: #BFBFBF;background-color: #E0E0E0;line-height: 30px;}
    .Supplier_info_Journal{padding: 0}
    .Supplier_info_Journal .Supplier_info{width: 200px;height: 265px;background-color: #DBF3FF;padding: 30px 20px;text-align: center}
    .Supplier_info_Journal .Supplier_info span.logo{background-color: #E0E0E0;color: #C1C1C1;width: 66px;height: 66px;border-radius: 50%;line-height: 60px;display: inline-block;font-size: 40px;border:1px solid #D6D6D6;}
    .Supplier_info_Journal .Supplier_info p.name{color: #333333;font-size: 14px;padding-top: 5px;}
    .Supplier_info_Journal .Supplier_info p.locating{color: #666666;padding-top: 5px;}
    .Supplier_info_Journal .Supplier_info p.locating .iconfont{color:#9ADDFF;font-weight: bolder}
    .Supplier_info_Journal .Supplier_info .product{width: 111px;height: 34px;line-height: 34px;border-radius:17px;background-color: #FF9000;margin: 0 auto;margin-top: 22px;color: white}
    .Supplier_info_Journal .Supplier_info .product span.num{display:inline-block;height: 34px;width: 34px;border-radius: 50%;background-color: #FF7800;float:right;cursor: pointer}
    .Supplier_info_Journal .Supplier_info .phone{color: #333333;padding-top: 20px;}
    .Supplier_info_Journal .Supplier_info .phone .iconfont{color:#9ADDFF;font-weight: bolder}
    .Supplier_info_Journal .popper__arrow::after {border-bottom-color: #DBF3FF !important;}
    .detailsIT .InfoChangeLog_box{position: relative;}
    .detailsIT .InfoChangeLog{width: 100%;height: auto;max-height: 220px;background-color: #FFFFFF;position: absolute;left:0;z-index: 50;top:70px;padding:30px 20px 20px 0;box-shadow: 0px 0px 14px 0px #adadad;}
    .detailsIT .InfoChangeLog .close{color: #CCCCCC;cursor: pointer;position:absolute;right: 10px;top: 10px;width: 17px;height: 17px;}
    .detailsIT .InfoChangeLog .changLog{background-color: #F9F9F9;height: auto;max-height: 170px;width: 100%;overflow: auto}
    .detailsIT .InfoChangeLog .changLog ul{margin-left: 20px}
    .detailsIT .InfoChangeLog .changLog li{border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 15px;padding-left: 20px}
    .detailsIT .InfoChangeLog .changLog li p{text-align: left;}
    .detailsIT .InfoChangeLog .changLog li .radius{width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 4px;}
    .detailsIT .InfoChangeLog .changLog li.red .radius{background-color: #E95252}
    .detailsIT .InfoChangeLog .changLog li.green .radius{background-color: #47BF8C}
    .detailsIT .InfoChangeLog .time{color:#666666;padding-bottom: 5px;}
    .detailsIT .InfoChangeLog .changLog::-webkit-scrollbar,.detailsIT_Journal .changLogList::-webkit-scrollbar{/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;}
    .detailsIT .InfoChangeLog .changLog::-webkit-scrollbar-thumb,.detailsIT_Journal .changLogList::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .detailsIT .InfoChangeLog .changLog::-webkit-scrollbar-track,.detailsIT_Journal .changLogList::-webkit-scrollbar-track{/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .detailsIT .query-box li label{display: inline-block;min-width: 80px;text-align: right;font-style: normal;margin: 0 20px 0 0;}
    .detailsIT .el-date-editor--date>span.el-input__suffix{top: 0px;}
    .detailsIT .el-select .el-input, .detailsIT .query-box .el-input, .detailsIT .query-box .el-input .el-input__inner{height: 34px!important;width: 208px!important;border-radius: 17px;}
    .detailsIT .centerTable td,.detailsIT .centerTable th{text-align: center;}
    .detailsIT_Journal .InfoChangeLog{height: auto;max-height: 220px;background-color: #FFFFFF;}
    .detailsIT_Journal .changLogList{padding-left: 20px;max-height: 220px;overflow: auto;}
    .detailsIT_Journal .changLogList_l{border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;}
    .detailsIT_Journal ._radius_green{background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;}
    .detailsIT_Journal .changLog_time{color: #666666;padding-bottom: 5px;}
    ._SupplierInfo{border: none;padding: 0}
</style>
<template>
    <div class='flexOne detailsIT'>
        <div class="query-box">
           <ul>
                <li>
                    <label class="">酒店</label>
                    <el-input v-model="HotelName" disabled="disabled"></el-input>
                </li>
                <li>
                    <label class="">房间类型</label>
                    <el-select v-model="msg.Product">
                        <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
                        <el-option v-for='item in ProductType'
                            :key="item.ID" 
                            :label="item.Name"
                            :value="item.ID">
                        </el-option>
                    </el-select>
                </li>
                <li class='time'>
                    <div class="block date">
                        <label class="demonstration">{{$t('pub.date')}}</label>
                        <el-date-picker
                            v-model="msg.Date"
                            type="date"
                            :placeholder="$t('admin.admin_choDate')"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions1"> 
                        </el-date-picker>
                        <el-date-picker
                            v-model="msg.CheckOutDate"
                            type="date"
                            :placeholder="$t('admin.admin_choDate')"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions2">
                        </el-date-picker>
                    </div>
                </li>
                <li>
                    <label class="">供应商</label>
                    <el-select v-model="msg.Supplier">
                        <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
                        <el-option v-for='item in supplierList'
                            :key="item.ID" 
                            :label="item.Name"
                            :value="item.ID">
                        </el-option>
                    </el-select>
                </li>
                <li>
                     <input type="button" class="hollowFixedBtn" value="查询" @click="getList(2),resetPageIndex()"/>
                </li>
           </ul>           
        </div>
        <table class="singeRowTable centerTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading" style="border-collapse:separate; border-spacing:0px 10px;table-layout:fixed;">
			<tr>
                <th>房间类型</th>
				<th>日期</th>
                <th>库存</th>
                <th>供应商</th>
                <th>价格</th>
                <th>{{$t('system.table_operation')}}</th>
			</tr>
			<tr v-for="(item,index) in DataList">
                <td class='ProductName'>
                    <el-tooltip effect="dark" :content="item.ProductName" placement="top-start">
                        <span>{{item.ProductNameS}}</span>
                    </el-tooltip>                    
                </td>
				<td><span calss="iconfont icon-zixiangmukanban"></span>{{item.Date}}</td>
				<td :class="item.warning==true?'RemainingInventory_w':'RemainingInventory'"><span>{{item.RemainingInventory}}</span></td>
				<td class="SupplierName" >
                    <div class="Su_center">
                        <i class="iconfont icon-gongyingshang"></i>
                        <el-popover           
                            popper-class="Supplier_info_Journal"                                 
                            width="200"
                            trigger="click">
                            <div class="Supplier_info" v-if="SupplierInfoList">
                                <span class="logo">{{SupplierInfoList.SupplierNameS}}</span>  
                                <p class="name">{{SupplierInfoList.Name}}</p>
                                <p class="locating"><i class="iconfont icon-tubiao"></i> {{SupplierInfoList.Country}} {{SupplierInfoList.Province}} {{SupplierInfoList.City}}</p>
                                <div class="product" @click="msg.Supplier=SupplierInfoList.ID,getList(2)">
                                    <span class="name">供应商品</span>
                                    <span class="num">19</span>
                                </div>
                                <p class="phone"><i class="iconfont icon-dianhua"></i> {{SupplierInfoList.Concat}} {{SupplierInfoList.Tel}}</p>
                            </div>
                            <el-button slot="reference" class="_SupplierInfo" @click="SupplierInfoShow(index)"><span> {{item.SupplierName}}</span>  </el-button>
                        </el-popover>       
                     </div>                          
                    
                </td>
                <td class="price" >
                    <p class="clearfix"><span class="tit_name">内部 <span class="rmb">￥</span><span class="num">{{item.SalesPrice}}</span></span><span class='small tit_name_right'>（成本价{{item.CostPrice}}）</span> </p>
                    <p class="clearfix"><span class="tit_name">B2B <span class="rmb">￥</span><span class="numT">{{item.B2BPrice}}</span></span><span class="tit_name tit_name_right">B2C <span class="rmb">￥</span><span class="numT">{{item.B2CPrice}}</span></span></p>
                </td>
				<td class="InfoChangeLog_box">
                     <el-tooltip class="item" effect="dark" content="修改"  placement="top-start">
                        <el-button type="primary"   icon="iconfont icon-Edit" circle @click="goUrl('HotelSinglePrice',item.ID)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="修改日志" placement="top-start" >
                        <el-popover           
                            popper-class="detailsIT_Journal"                                 
                            width="250"
                            trigger="click">
                            <div class="InfoChangeLog" v-if="changLogeList">                                       
                                <div class="changLog">
                                    <ul v-if="changLogeList.length!=0" class="changLogList">
                                        <li v-for="(log,LogIndex) in changLogeList" class="changLogList_l">
                                            <span :style="log.EndValue>log.StartValue?'background-color: #47BF8C':'background-color: #E95252'"  class="_radius_green"></span>
                                            <p class="changLog_time">{{item.UpdateDateStr}}</p>
                                            <p>{{log.UpdateName}} {{log.UpdateTypeStr}}</p>
                                            <p>{{log.StartValue}}>{{log.EndValue}}</p>
                                        </li>
                                    </ul>
                                    <ul v-else>
                                        <li>暂无修改日志</li>
                                    </ul>
                                </div>
                            </div>
                            <el-button slot="reference"  type="info" icon="el-icon-document" circle class="_os_caozuo" @click="InfoChangeLogShow(index)"></el-button>
                        </el-popover>     
                    </el-tooltip>
				</td>
			</tr>
		</table>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:{
                pageIndex:1,
                pageSize:6,
                Hotel:'',
                Date:'',
                CheckOutDate:'',
                Product:'',
                Supplier:''
            },
            DataList:[],
            ProductType:[],
            supplierList:[],
            SupplierInfoList:[],
            changLogeList:[],
            HotelName:'',
            loading:true,
            total:0,
            currentPage: 1,
            noData:false, 
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now()-100000000;
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            }

        }
    },methods:{
        getList(type){
            this.loading = true;
            if(type==1){
                let param = this.$route.query;
                this.msg.Hotel = this.$route.query.HotelID;
                this.msg.Product = this.$route.query.ProductID;
                this.msg.Date = this.$route.query.sDate;
                this.msg.CheckOutDate = this.$route.query.eData;
            }
            this.apipost('hotel_post_GetAll',{ID:this.msg.Hotel},res=>{
                if(res.data.resultCode==1){
                    this.HotelName = res.data.data.Name
                }
            },err=>{})
            this.apipost('dict_post_HotelProduc_GetList',{Hotel_ID:this.msg.Hotel},res=>{
                if(res.data.resultCode==1){
                    this.ProductType = res.data.data
                }
            },err=>{})
            this.apipost('supplier_post_GetAllList',{},res=>{
                if(res.data.resultCode==1){
                    this.supplierList = res.data.data
                }
            },err=>{})
            this.apipost('dict_post_HotelOffer_GetStockDetailsPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.total = res.data.data.count;
                    if(this.total>0){
                        this.loading = false;
                        this.noData =false; 
                        res.data.data.pageData.forEach(x=>{
                            x.ProductNameS = x.ProductName.slice(0,3)
                            if(x.RemainingInventory<10){
                                x.warning=true
                            }else{
                                x.warning=false
                            }
                            if(x.Supplier){
                                this.apipost('supplier_post_Get',{supplierID:x.Supplier},res=>{
                                    x.SupplierInfo = res.data.data;
                                },err=>{})
                            }
                            if(x.ID){
                                this.apipost('DmcInfoChangeLog_get_GetList',{ResourceId:x.ID,ResourceType:1},res=>{
                                    x.DmcInfoChangeLogList = res.data.data
                                },err=>{})
                            }
                        })
                        this.DataList = res.data.data.pageData
                        this.loading = false
                    }else{
                        this.DataList=[];
                        this.loading = false;
                        this.noData =true; 
                    }
                    
                }else{
                     this.DataList=[];
                    this.loading = false;
                    this.noData =!this.noData;
                }
            },err=>{})
        },
        SupplierInfoShow(index){
            this.DataList[index].SupplierInfo.SupplierNameS = this.DataList[index].SupplierName.slice(0,1)
            this.SupplierInfoList = this.DataList[index].SupplierInfo
        },
        InfoChangeLogShow(index){
            this.changLogeList = this.DataList[index].DmcInfoChangeLogList;
        },
        InfoChangeLogClose(){
            this.DataList.forEach(x=>{
                x.InfoChangeLog = false
            })
        },
        goUrl(path,id){
             this.$router.push({ path: path,query:{"ID":id} }) 
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList(2);
        },
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
            this.currentPage = 1
        },
    },mounted(){
        this.getList(1);
    }
}
</script>