
<template>
  <div class="HotelDiscount">
      <div class="query-box">
          <ul>
            <li>
            <span>
                <em>酒店</em>
                <el-select v-model="msg.NewHotelID" :placeholder="$t('pub.pleaseSel')" filterable>
                    <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                    <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                </el-select>
            </span>
            </li>
            <li>
            <span>
                <em>TCID</em>
                <el-input v-model="msg.TCID" @keyup.native="checkInteger(msg,'TCID')"></el-input>
            </span>
            </li>
            <li>
            <span>
                <em>团号</em>
                <el-input v-model="msg.TCNUM"></el-input>
            </span>
            </li>
            <li>
            <span>
                <em>地接团号</em>
                <el-input v-model="msg.DMCNum"></el-input>
            </span>
            </li>
            
            <li>
            <span>
                <em>财务单据</em>
                <el-input v-model="msg.FinanceId"></el-input>
            </span>
            </li>
            <li>
                <span>
                    <em>出发日期</em>
                    <el-date-picker
                        v-model="dateList"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="团出发开始时间"
                        end-placeholder="团出发结束时间">
                    </el-date-picker>
                </span>
            </li>
            <li>
                <input
                    type="button"
                    class="hollowFixedBtn"
                    value="条件制单"
                    @click="ConditionsMake"
                >
                <input
                    type="button"
                    class="hollowFixedBtn"
                    value="选择制单"
                    @click="ChooseTeamMake"
                >
                <input
                    type="button"
                    class="hollowFixedBtn"
                    value="查询"
                    @click="getList()"
                >
            </li>
        </ul>
      </div>
      
    <table style="margin-bottom:30px" class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>
            <input type="checkbox"  v-model="isCkedAll"  @click='checkedAll()'/>
        </th>
        <th>团号</th>    
        <th>地接团号</th>    
        <th>出发时间</th>
        <th>酒店名称</th>
        <th>天数</th>
        <th>单间数量</th>
        <th>双人间数量</th>
        <th>大床房数量</th>
        <th>三人间数量</th>
        <th>关联财务单据</th>
        <th>财务单据金额</th>
        <th>操作人</th>
        <th>操作时间</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>
            <input type="checkbox" :disabled="item.disabled" :value="item" v-model="customerList" @change="ckeckedOne"/>
        </td>
        <td>{{item.TCNUM}}（{{item.TCID}}）</td>
        <td>{{item.DMCNum}}</td>
        <td>{{item.StartDate}}</td>
        <td>{{item.NewHotelName}}</td>
        <td>{{item.Days}}</td>
        <td>{{item.SinleRoomNum}}（{{item.SinleRoomPeopleNum}}人）</td>
        <td>{{item.DoubleRoom}}（{{item.DoublePeopleRoom}}人）</td>
        <td>{{item.KingRoom}}（{{item.KingPeopleRoom}}人）</td>
        <td>{{item.TripleRoom}}（{{item.TriplePeopleRoom}}人）</td>
        <td>
            <span v-if="item.FinanceId==0"></span>
            <span @click="goFncUrl('FinancialDocumentsDetail', item.FinanceId)" style="cursor: pointer;text-decoration: underline;" v-else>{{item.FinanceId}}</span>
        </td>
        <td>{{item.FinanceMoney==0?'':item.FinanceMoney}}</td>
        <td>{{item.EmName}}</td>
        <td>{{item.UpdateDate}}</td>
       
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="16" align="center">暂无数据</td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
    </el-pagination> 
    <!-- 制单 -->
    <el-dialog width="1000px" title="保存" :visible.sync="moneyR" center>
      <el-form class="Rform" ref="addMsg" :model="addMsg" :rules="rules" label-width="80px">
        <table v-show="addMsg.AccountType==2" class="po_content singeRowTable" style="border:1px solid #E6E6E6;margin-bottom:15px" cellspacing="0" cellpadding="0" v-loading="loading">
          <tr>
            <th>团号</th>
            <th>酒店名称</th>
            <th>单间数量</th>
            <th>双人间数量</th>
            <th>大床房数量</th>
            <th>三人间数量</th>
          </tr>
          <tr v-for="(item,index) in addMsg.AirServiceList" :key="index">
            <td>{{item.TCNUM}}</td>
            <td>{{item.NewHotelName}}</td>
            <td>{{item.SinleRoomNum}}（{{item.SinleRoomPeopleNum}}人）</td>
            <td>{{item.DoubleRoom}}（{{item.DoublePeopleRoom}}人）</td>
            <td>{{item.KingRoom}}（{{item.KingPeopleRoom}}人）</td>
            <td>{{item.TripleRoom}}（{{item.TriplePeopleRoom}}人）</td>
          </tr>
          <tr v-if="addMsg.AirServiceList.length==0">
            <td colspan="5">暂无数据</td>
          </tr>
        </table>
        <el-row style="margin-bottom:15px">
          <div v-show="addMsg.AccountType==1">
              <el-form-item label="酒店">
                <el-select style="width:201px" v-model="addMsg.NewHotelID" :placeholder="$t('pub.pleaseSel')" filterable>
                        <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                        <el-option v-for="item in HotelList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="TCID">
                <el-input v-model="addMsg.TCID" @keyup.native="checkInteger(addMsg,'TCID')"></el-input>
            </el-form-item>
            <el-form-item label="团号">
                <el-input v-model="addMsg.TCNUM" ></el-input>
            </el-form-item>
            <el-form-item label="地接团号">
                <el-input v-model="addMsg.DMCNum" ></el-input>
            </el-form-item>
            
            <el-form-item label="时间">
                <el-date-picker
                    v-model="dateList1"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="团出发开始时间"
                    end-placeholder="团出发结束时间">
                </el-date-picker>
            </el-form-item>
          </div>
          <div>
              <el-form-item label="收款账户" prop="AccountId">
                <el-select style="width:201px" v-model="addMsg.AccountId" :placeholder="$t('pub.pleaseSel')" filterable>
                        <el-option label="日本地接部专户" :value="14"></el-option>                        
                        <el-option label="日本地接部专户（人民币）" :value="19"></el-option>
                    </el-select>
            </el-form-item>
          </div>
          <el-form-item label="折让金额" prop="Money">
              <el-input v-model="addMsg.Money" @keyup.native="checkInteger(addMsg,'Money')" placeholder="单人折让金额"></el-input>
          </el-form-item>
          <el-form-item label="汇款人" prop="RemitterName">
              <el-input v-model="addMsg.RemitterName" ></el-input>
          </el-form-item>
          <el-form-item label="汇款时间" prop="TradeDate">
              <el-date-picker type="date" v-model="addMsg.TradeDate"
                value-format="yyyy-MM-dd" ></el-date-picker>
          </el-form-item>
           
          
          <!-- <el-col :span="8">
            结算部门 ：
            <el-input style="width:200px" v-model="jsbmStr" :disabled="true"></el-input>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="上传附件">
              <div class="picload">
                <el-upload style="width: 138px;height: 92px;" drag :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action="">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="16" style="padding-top:5px">
            <div class="_addUpload_box" style="display:inline-block" v-for="(file,fIndex) in saveMsg" :key="fIndex">
              <div v-if="file.Type==3">
                <div style="width:100%;height:100%;overflow: hidden;">
                  <img style="width:100%" :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)">
                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==1">
                <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFile(file)">
                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
              <div v-if="file.Type==2">
                <div class="iconfont icon-excel" @click="showUpLoadFile(file)">

                </div>
                <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="moneyR = false,FinaceIdnum=''">取 消</el-button>
        <el-button :loading="Btnloading" size="small" type="danger" @click="RSumbit('addMsg')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment"
import { constants } from 'fs';
export default {
    name: 'Feedback',
    data (){
        return{
            addMsg:{
                AccountType:1,
                NewHotelID:0,
                TCID:'',
                TCNUM:'',
                DMCNum:'',
                QStartDate:'',
                QEndDate:'',
                AirServiceList:[],
                vorcherInos:[],
                Money:'',
                RemitterName:'',
                TradeDate:'',
                AccountId:14,
            },
            rules:{
                Money: [
                    { required: true, message: '请输入单间折让金额', trigger: 'blur' }
                ],
                RemitterName: [
                    { required: true, message: '请输入汇款人', trigger: 'blur' }
                ],
                TradeDate: [
                    { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
                ],
                AccountId:[
                    { required: true, message: '请选择', trigger: 'change' }
                ]
            },
            Btnloading:false,
            Ticketform:{},
            checkList:[],
            saveMsg:[],
            moneyR:false,
            msg:{
                pageIndex:1,
                pageSize:10,
                NewHotelID:'',
                TCID:'',
                TCNUM:'',
                DMCNum:'',
                StratTime:'',
                EndTime:'',
            },
            dataList:[],
            loading:false,
            dateList:[],
            HotelList:[],
            total:0,
            isCkedAll:false,
            allLength:0,
            customerListAll:[],
            customerList:[],
            dateList1:[],
        }
    },
    created(){
      this.msg.NewHotelID = this.$route.query.NewHotelID ? Number(this.$route.query.NewHotelID) :0;
      this.msg.FinanceId = this.$route.query.FinanceId ? Number(this.$route.query.FinanceId) : '';

    },
    mounted(){
       this.getList();
       this.GetHotelList();
    },
    methods:{
        goFncUrl: function (path, id) {
            this.$router.push({
            name: path,
            query: {
                id: id,
                blank: 'y',
            }
            })
        },
        initaddMsg(){
            this.addMsg={
                AccountType:1,
                NewHotelID:0,
                TCID:'',
                TCNUM:'',
                QStartDate:'',
                QEndDate:'',
                AirServiceList:[],
                vorcherInos:[],
                Money:'',
                RemitterName:'',
                TradeDate:'',
                AccountId:14,
            }
        },
        ChooseTeamMake(){
            if(this.customerList.length==0){
                this.Error("至少选择一个团！");
                return;
            }
            this.initaddMsg();
            this.addMsg.AccountType=2;
            this.saveMsg=[];
            this.moneyR=true;
            this.addMsg.AirServiceList=this.customerList;
        },
        ConditionsMake(){
            this.initaddMsg();
            this.moneyR=true;
            this.addMsg.AccountType=1;
            this.saveMsg=[];
        },
        RSumbit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addMsg.vorcherInos = this.saveMsg;
                    if(this.addMsg.AccountType==1){
                        if(this.dateList1&&this.dateList1.length>0){
                            this.addMsg.QStartDate=this.dateList1[0];
                            this.addMsg.QEndDate=this.dateList1[1];
                        }
                        else{
                            this.addMsg.QStartDate='';
                            this.addMsg.QEndDate=''; 
                        }
                    }
                    this.Btnloading=true;
                    this.apipost("Financial_post_SetHotelServiceBetchImport", this.addMsg, res => {
                        if (res.data.resultCode == 1) {
                            this.getList();
                            this.moneyR=false;
                            this.Btnloading=false;

                        }
                        else{
                            this.Error(res.data.message);
                            
                        }
                    });
                } else {
                    
                }
            });
            
        },
        checkedAll() {   //全选
            if(this.isCkedAll == true) {
                this.customerList = []
            } else {
                this.customerListAll.forEach(item => {
                    this.customerList.push(item)
                })
            }
        },
        ckeckedOne() {   //单选
            if(this.customerList.length  < this.customerListAll.length) {
                this.isCkedAll = false
            } else {
                this.isCkedAll = true
            }
        },
        showUpLoadFile(i) {
            // 预览上传文件
            if (i.Type == 3) {
                this.picObj.push(i.Url);
                this.picIsShow = true;
            } else {
                if (
                    i.Content.substring(
                        i.Content.lastIndexOf(".") + 1,
                        i.Content.length
                    ).toUpperCase() == "PDF"
                ) {
                    this.previewPDF(i.Url);
                } else {
                    window.open(
                        "https://view.officeapps.live.com/op/view.aspx?src=" +
                            i.Url
                    );
                }
            }
        },
        deleteUploadFile(i) {
            // 删除上传文件
            this.saveMsg.splice(i, 1);
        },
        uploadFileBtn(file) {
            //上传
            if (file.file.size > 1024 * 1024 * 10) {
                this.$message.warning(this.$t("tips.wjdxbncgsz"));
                return;
            }
            //  1 文档  2 数据 3 图片
            let typeArr = [
                { stringArr: "GIF|JPG|JPEG|PNG|BMP", type: 3 },
                { stringArr: "DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF", type: 1 }
            ];
            let ft = file.file.name
                .substring(
                    file.file.name.lastIndexOf(".") + 1,
                    file.file.name.length
                )
                .toUpperCase();
            let fileTypeNumber = 2;
            let typeOk = false;
            typeArr.forEach(x => {
                if (x.stringArr.indexOf(ft) != "-1") {
                    fileTypeNumber = x.type;
                    typeOk = true;
                }
            });
            if (!typeOk) return this.$message.error(this.$t("tips.qscWEfile"));
            let newArr = [];
            newArr.push(file.file);
            let path = "/Upload/Temporary/";
            this.$message.info(this.$t("tips.shangchuanzhong"));
            this.UploadSelfFileT(
                path,
                newArr,
                x => {
                    let fileSize =
                        file.file.size < 1024
                            ? file.file.size
                            : (file.file.size / 1024).toFixed(0);
                    this.saveMsg.push({
                        Content: x.data.FilePath,
                        ID: 0,
                        Type: fileTypeNumber,
                        Url:
                            this.domainManager().ViittoFileUrl + x.data.FilePath
                    });
                    this.$message.success(this.$t("tips.scchenggong"));
                },
                1
            );
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.getList();
        },
        //获取酒店列表
        GetHotelList() {
            this.apipost(
            "hotel_post_GetHasStockHotelList", {
                Country: 0
            },
            res => {
                if (res.data.resultCode == 1) {
                this.HotelList = res.data.data;
                }
            },
            err => {}
            );
        },
     
      getList(){
        if(this.dateList&&this.dateList.length>0){
            this.msg.StratTime=this.dateList[0];
            this.msg.EndTime=this.dateList[1];
        }
        else{
           this.msg.StratTime='';
            this.msg.EndTime=''; 
        }
        this.loading=true;
        this.apipost("journeyorder_post_GetTravelHotelDiscountFinancePageList", this.msg, res => {
            this.loading=false;
            if (res.data.resultCode == 1) {
                let data=res.data.data.pageData;
                this.dataList=[];
                this.total = res.data.data.count;
                this.customerListAll=[];
                data.forEach(item=>{
                    item.disabled=false;
                    if(item.FinanceId!=0){
                        item.disabled=true;
                    }
                    this.dataList.push(item)
                    item.AirTicketId=item.NewHotelID;
                    if(item.FinanceId==0){
                        this.customerListAll.push(item)
                    }
                })
            }
        });
      },
    }	
}
		
</script>
<style>
.HotelDiscount ._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
}
.HotelDiscount ._addUpload_box > div {
    float: left;
    width: 138px;
    height: 92px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
}
.HotelDiscount .picload .el-upload {
    width: 138px;
    height: 92px;
}
.HotelDiscount .el-form-item__label {
    font-size: 12px;
    color: #606266;
}
.HotelDiscount .el-form-item{
    display: inline-block;
}
.HotelDiscount .singeRowTable{
    margin-top: 20px;
}
.HotelDiscount .picload {
    width: 138px;
    height: 92px;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
}
.HotelDiscount .picload .el-upload-dragger {
    width: 100%;
    height: 100%;
}
</style>
