<template>
	<div>
		<div class="query-box" style="border-bottom: none;" v-if="isShowBtn==1">
			<ul>
				<li>
					<input type="button"  class="fr normalBtn mb30" value="批量同意" @click="ChangeHotelInfo(2)"/>
					<input type="button"  class="fr normalBtn mb30" value="批量拒绝"  @click="ChangeHotelInfo(3)"/>
				</li>
			</ul>
		</div>
  <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
    <table border="0" cellspacing="1" cellpadding="0" class="bookDinnerStatisticsTalbe">
      <tr>
        <th width="120">公司团号</th>
	   	  <th width="150">用餐时间</th>
	    	<th width="200">原餐厅名称</th>
        <th width="200">新餐厅名称</th>
        <th width="80">类别</th>
        <th width="200">餐饮类型</th>
        <th width="80">总人数</th>  
        <th width="150">用餐人类型</th>
        <th width="80">用餐人数</th>
        <th width="150">价格</th> 
        <th width="80">操作</th>
        <!--<th width="150">免人数</th>
        <th width="80">金额小计</th>
        <th width="150">返佣</th>
        <th width="150">总金额</th>
        <th width="80">付款方式</th>
        <th width="80">订餐方式</th>
        <th width="80">联系电话</th>
        <th width="80">地址</th>
        <th width="80">订团号</th>
        <th width="80">备注</th> -->
      </tr>
      <tr v-for="(item,index) in list">
        <td :rowspan="list.length" v-if="index==0">
			<div class="w120">
         		<p class="link" @click="goUrlT('productQuery',TCNUM,'产品查询')">{{TCNUM}}</p>
            <!-- <el-button @click='openChart()' v-if="CreateByAccount!=''" type="primary" style="background:#6DD875; border-color:#6DD875;padding:4px;margin-top:10px;" >联系OP</el-button> -->
			</div>
        </td>
	        <td>
          <div class="w120">{{item.UseTimeStr}}</div>
        </td>
        <td>
          <div class="w200">
            <p style="height: 84px; padding-left: 10px; display:flex; align-items:center;" v-for="subItem in item.DiningSummaryList" class="link pHouseStyle" @click="goUrlR('restaurantList',subItem.DiningID,'餐厅列表')">{{subItem.DiningName}}</p>
          </div>
        </td>
        <td>
          <span v-for="subItem in item.DiningSummaryList" style="margin:0 10px;display:inline-block;">
            {{subItem.NewDiningName}}
            <!-- <el-select class='w160 sel' v-model='subItem.NewDiningID' filterable :placeholder="$t('pub.pleaseSel')" @visible-change='getDingList(item)' @change='sendValue(item)'>
              <el-option 
                  v-for='itemHotel in item.DinnerList'
                  :label='itemHotel.Name'
                  :value='itemHotel.ID'
                  :key='itemHotel.ID'
                  ></el-option>
            </el-select> -->
          </span>
        </td>
        <td>
          <div class="w80" >
          	<p style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
          		  {{subItem.UseDinnerTypeStr}}
          	</p>
          </div>
        </td>
        <td>
          <div class="w120">
          	<p  style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
            {{subItem.MealName}}
            </p>
          </div>
        </td>
        <td>
          <div class="w80">
            	<p  style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
          	  {{GuestNum}}
            </p>
           
          </div>
        </td>
        <td>
          <div class="w180" >   
              <div class="DivStyle" v-for="subItem in item.DiningSummaryList">
              	<p v-for="childItem in subItem.DiningPriceList">
                   {{personStrToWord(childItem.PeopleType)}}
               </p>
             </div>
          </div>
        </td>
        <td>
        	<div class="w80">
        		<div  class="DivStyle" v-for="subItem in item.DiningSummaryList">
              	<p v-for="childItem in subItem.DiningPriceList">
                   {{childItem.PeopleNum}}
               </p>
             </div>
          </div>
        </td>
        <td>
     		 <div>
         		 	<div  class="DivStyle" v-for="subItem in item.DiningSummaryList">
		              		<p v-for="childItem in subItem.DiningPriceList">
		              			<span class="spanlink" v-if='childItem.PeoplePrice==0' @click="goUrl('RestaurantPackage',subItem,'套餐查询')">设置</span>
								<span v-if='childItem.PeoplePrice!=0'>{{childItem.PeoplePrice}}</span>
		             		</p>
		             </div>
     		 </div>
        </td>
        <td>
					<div class="w120">
            <p style="height: 84px; padding-left: 10px; display:flex; align-items:center;" v-for="subItem in item.DiningSummaryList" class="link pHouseStyle" >
              <span v-if="subItem.DiningChangeState==1">
                <input type="button" class="normalBtn" value="同意" @click="HotelChangeState(subItem,2)"/>
                <input type="button" class="normalBtn" value="拒绝"  @click="HotelChangeState(subItem,3)"/>
              </span>
            </p>
					</div>
				</td>
       <!--<td>
          <div class="w80">
	         		 	<div  class="DivStyle" v-for="subItem in item.DiningSummaryList">
	              	<p v-for="childItem in subItem.DiningPriceList">
	                    <el-input class='w50 tcenter'  @input='calculationPrice(subItem)' maxlength='2' v-model='childItem.Discount'  @keyup.native="checkInteger(childItem,'Discount')"></el-input>
	               </p>
	             </div>
         		 </div>
        </td>
        <td>
          <div class="w80">
	         		 	<div  class="DivStyle" v-for="subItem in item.DiningSummaryList">
	              	<p v-for="childItem in subItem.DiningPriceList">
	                  {{(childItem.PeopleNum-childItem.Discount)*childItem.PeoplePrice}}
	               </p>
	             </div>
         		 </div>
        </td>
        <td>
            <div class="w80">
    		 	<div  class="DivStyle" v-for="subItem in item.DiningSummaryList">
	              	<p v-for="childItem in subItem.DiningPriceList">
	              	
	                    <el-input class='w50 tcenter'  @input='calculationPrice(subItem)' v-model='childItem.DiscountPrice' @keyup.native="checkInteger(childItem,'DiscountPrice')"></el-input>%
	               </p>
            	 </div>
     		 </div>
        </td>
        <td>
          <div class="w80">
          	 	<p style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
          	 		{{subItem.TotalPrice}}
            </p>
          </div>
        </td>
        <td>
          <div class="w150">
          	 <p   style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
              	<el-select class='w100 sel' v-model='subItem.PayStyle' :placeholder="$t('pub.pleaseSel')">
              	  <el-option label='请选择' value='0' ></el-option>
                  <el-option label='现付' value='1' ></el-option>
                  <el-option label='签单' value='2' ></el-option>
                  <el-option label='实物抵扣' value='3' ></el-option> 
                  <el-option label='预付' value='4' ></el-option> 
            	  </el-select>		
              </p>
          </div>
        </td>
        <td>
          <div class="w150">
          	 <p  style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
	              <el-select v-model='subItem.DiningReserveType' class='w100 sel' :placeholder="$t('pub.pleaseSel')">
	              	  <el-option label='请选择' value='0' ></el-option>
	                  <el-option label='公司预订' value='1' ></el-option>
	                  <el-option label='导游预订' value='2' ></el-option>
	              </el-select>		
              </p>
          </div>
        </td>
        <td>
          <div class="w150">
          	 <p  style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
         	 	  {{subItem.Tel}}
             </p>
          </div>
        </td>
        <td>
        	 <div class="w300">
          	 <p  style="height: 84px; padding-left: 10px; display:flex; align-items:center;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
         	 	  {{subItem.Address}}
             </p>
          </div>
        </td>
        <td>
           <div class="w150">
          	 <p  style="height: 84px; line-height: 84px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
         	 	   <el-input class='w120 tcenter' v-model='subItem.ReserveNo'></el-input>
             </p>
          </div>
        </td>
        <td>
          <div class="w150">
          	 <p  style="height: 84px; display:flex; align-items:center; padding-left: 15px;" v-for="subItem in item.DiningSummaryList" class="pHouseStyle">
         	 	   <el-input type='textarea' class='w120' v-model='subItem.Remarks'></el-input>
             </p>
          </div>
        </td> -->
      </tr>
    </table>
  </div>
	</div>  
</template>

<script>
export default {
  data() {
    return {
     defaultSelectValue:0,
      list: [],
      roomList: [],
      TCNUM: "",
      flightTotal: 0,
      GuestNum: 0,
      isShowBtn:0
    };
  },
  methods: {
	//页面跳转[大写]
    goUrlR(path, obj,title) {
      this.$router.push({ name: path, query: { ID: obj ,blank:'y',tab:title} });
	},
	//页面跳转[小写]
    goUrlT(path, obj,title) {
      this.$router.push({ name: path, query: { id: obj ,blank:'y',tab:title} });
    },
    goUrl(path, obj, name) {
	      this.$router.push({
	        path: path,
	        query: {
	          id: obj.DiningID,
	          blank: "y",
	          tab: name
	        }
	      });
	     },
    personStrToWord(str){
    	if(str==1)
    	return '大人'
    	if(str==2)
    	return '儿童'
    	if(str==3)
    	return '婴儿'
    },
    getList() {
      this.apipost(
        "dmcstatistics_get_GetDinnerStaticsDetail",
        { TCIDs: this.$route.query.id },
        res => {
          if (res.data.resultCode == 1) {
            this.list = res.data.data;
            this.list.forEach(item=>{
              item.DinnerList=[];
            	item.DiningSummaryList.forEach(x=>{
            	if(x.DiningChangeState>0){
					    	this.isShowBtn=1;
					     }
              })
            })
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
   
 HotelChangeState(obj,State){
			if(State==2){//给出提示
				obj.DiningChangeState=State;
				this.$confirm('是否同意？同意后将覆盖之前的信息！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {              
               this.saveList(0);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
			}
			else{
				this.saveList(0);
			}
		},

		ChangeHotelInfo(type){
		if	(type==2){
				this.$confirm('是否同意？同意后将覆盖之前的信息！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {   
		       this.list.forEach(item=>{
              item.DinnerList=[];
            	item.DiningSummaryList.forEach(x=>{
            	if(x.DiningChangeState>0){
					    	x.DiningChangeState=2;
					     }
              })
            })   
               this.saveList();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
			}
			else if	(type==3){
			this.list.forEach(item=>{
              item.DinnerList=[];
            	item.DiningSummaryList.forEach(x=>{
            	if(x.DiningChangeState>0){
					    	x.DiningChangeState=3;
					     }
              })
            })   
				this.saveList();
			}	
		},
    	saveList(){
    	
			//暂时不开放此功能，测试通过后再开放
    		this.apipost('dmcstatistics_post_SetUpdateDiningOrder',this.list,res=>{
    			if(res.data.resultCode==1){
					this.$message.success(res.data.message)
					 this.getList()
    			}else{
    				this.$message.error(res.data.message)
    			}
    		},err=>{})
		},
   
    //重置电话地址
    sendValue(){

    },
  },
  mounted() {
    this.TCNUM = this.$route.query.TCNUM;
    this.GuestNum= this.$route.query.GuestNum;
    this.getList();
  }
};
</script>

<style>
.bookDinnerStatisticsTalbe {
  background: #ccc;
}
.bookDinnerStatisticsTalbe tr th {
  background: #e6e6e6;
  height: 40px;
  font-size: 12px;
  color: #333;
}
.bookDinnerStatisticsTalbe tr {
  background: #fff;
  text-align: center;
  height: 40px;
}
.bookDinnerStatisticsTalbe tr td {
  font-size: 12px;
}
.bookDinnerStatisticsTalbe tr td input{
  height:20px!important;
  padding: 0;
  text-align: center;
}
.bookDinnerStatisticsTalbe tr td .sel input{
  height:34px!important;
}
.bookDinnerStatisticsTalbe tr td .pHouseStyle {
  border-bottom: 1px solid #ccc;
  height: 28px;
  line-height: 28px;
}
.bookDinnerStatisticsTalbe tr td .pHouseStyle:last-child {
  border-bottom: none;
}
.bookDinnerStatisticsTalbe tr td .DivStyle {
  border-bottom: 1px solid #ccc;
  height: 84px;
  line-height: 28px;
  box-sizing: border-box;
}
.bookDinnerStatisticsTalbe tr td .DivStyle p{border-bottom: 1px solid #ccc;}
.bookDinnerStatisticsTalbe tr td .DivStyle p:last-child{border-bottom: none;}
.bookDinnerStatisticsTalbe tr td .DivStyle:last-child {
  border-bottom: none;
}
.bookDinnerStatisticsTalbe tr td .tdItemStyle{border-bottom: 1px solid #ccc;}
.bookDinnerStatisticsTalbe tr td .tdItemStyle:last-child{border-bottom: none;}
.bookDinnerStatisticsTalbe tr td .link:hover{text-decoration: underline; cursor: pointer;}
.bookDinnerStatisticsTalbe .Book_span{margin-right:3px;}
.bookDinnerStatisticsTalbe tr td .spanlink:hover{text-decoration: underline; cursor: pointer;}
</style>