<style>
.MakingPhotos .el-date-editor--daterange.el-input__inner{
  width: auto !important;
}
.MakingPhotos .MakingPhotos-table {
  font-size: 12px;
  color: #666;
  width: 100%;
}

.MakingPhotos .MakingPhotos-table tr {
  height: 50px;
}

.MakingPhotos .MakingPhotos-table td {
  padding-right: 15px;
}
</style>
<template>
  <div class="MakingPhotos">
    <div class="query-box">
      <el-form class="_info_box clearfix" label-width="110px">
        <el-row style="padding:15px 20px 0 0;">
          <el-col :span="4">
            <el-form-item label="订单号：">
              <el-input placeholder class v-model="msg.OrderId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="团号：">
              <el-input v-model="msg.TCID" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('scen.sc_temID')">
              <el-input v-model="msg.TCNUM" class></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请时间：">
              <el-date-picker
                class="h34"
                @change="timeAdd(1)"
                v-model="productionDate"
                type="daterange"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('scen.sc_ftTime')">
              <el-date-picker
                class="h34"
                v-model="productionDate2"
                @change="timeAdd(2)"
                type="daterange"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <ul class="clearfix">
        <li class="hight_query">
          <button
            class="hollowFixedBtn"
            @click="resetPageIndex(),getList()"
          >{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <table  border="0" cellspacing="0" cellpadding="0" class="singeRowTable">
      <tr>
        <th>订单号</th>
        <th>团号</th>
        <th>发团日期</th>
        <th>旅客列表</th>
        <th>照片的份数</th>
        <th>应收</th>
        <th>实收</th>
        <th>财务单据</th>
        <th>关联销售</th>
      </tr>
      <tr v-for="(item, index) in dataList">
        <td>{{item.OrderId}}</td>
        <td>
          <span>{{item.TCNUM}}({{item.TCID}})</span>
        </td>
        <td>{{item.StartDate}}</td>
        <td>
          <span v-for="(g, gi) in item.GuestList" >{{g.userName}} <span v-if="gi!==item.GuestList.length-1">,</span> </span>
        </td>
        <td>{{item.PhotoNum}}</td>
        <td>{{item.PreferPrice}}</td>
        <td>{{item.Income}}</td>
        <td>
          <span v-for="(g, gi) in item.FinanceList"  class="cursorpointer text-decoration" @click="goUrlSFD('FinancialDocumentsDetail', g)">{{g}} <span v-if="gi!==item.GuestList.length-1">,</span> </span>
        </td>
        <td>{{item.emName}}</td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="9" align="center">{{$t('system.content_noData')}}</td>
			</tr>
    </table>
    <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 {
      dataList: [],
      msg: {
        pageIndex: 1,
        pageSize: 15,
        OrderId: "",
        TCID: "",
        TCNUM: "",
        CStartDate: "",
        CEndDate: "",
        QStartDate: "",
        QEndDate: ""
      },
      currentPage: 1,
      total: 0,
      productionDate: [new Date().Format("yyyy-MM-dd"), new Date(new Date().getTime() + 24*60*60*1000).Format("yyyy-MM-dd")],
      productionDate2: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    goUrlSFD: function (path, item) {
      this.$router.push({
        name: path,
        query: {
          blank: 'y',
          id: item
        }
      })
    },
    getList() {
      if(this.msg.OrderId ==""){
        this.msg.OrderId = 0
      }
      if(this.msg.TCID ==""){
        this.msg.TCID = 0
      }
      this.apipost('sellorder_get_GetOrderGuestPhotoList', this.msg, res => {
        if (res.data.resultCode == 1) {
          this.dataList = res.data.data.pageData
          this.total = res.data.data.count
        }
        if(this.msg.OrderId ==0){
          this.msg.OrderId = ''
        }
        if(this.msg.TCID ==0){
          this.msg.TCID = ''
        }
      },null)
    },
    timeAdd(t) {
      if (t == 1) {
        if (!this.productionDate) {
          this.msg.CStartDate = "";
          this.msg.CEndDate = "";
          return;
        }
        this.msg.CStartDate = this.productionDate[0];
        this.msg.CEndDate = this.productionDate[1];
      }
      if (t == 2) {
        if (!this.productionDate2) {
          this.msg.QStartDate = "";
          this.msg.QEndDate = "";
          return;
        }
        this.msg.QStartDate = this.productionDate2[0];
        this.msg.QEndDate = this.productionDate2[1];
      }
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    }
  }
};
</script>