<style>
  .busManagerTalbe {
    font-size: 12px;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #ccc;

  }
  .busManagerTalbe tr {
    text-align: center;
    height: 40px;
  }
  .busManagerTalbe tr td{
    padding:0 5px;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .commonBackColor {
    background-color: #E6E6E6!important;
    color: #333;
  }

  .comTextAlign {
    text-align: left;
    padding-left: 20px;
  }

  .addHandBook{
    margin-right: 5px;
    color: seagreen;
    cursor: pointer;
    visibility: hidden;
  }
  .addHandBookDIS{
    visibility: visible!important;
  }
  .disClick {
    background-color: #d1d1d1;
    color: #fff;
    border: 1px solid #d1d1d1;
  }

  .disClick:hover {
    background-color: #d1d1d1 !important;
    cursor: default !important;
    box-shadow: none !important;
  }
</style>
<template>
  <div>
    <table border="0" cellspacing="1" cellpadding="0" class="busManagerTalbe" style="width: 100%;" v-loading='loading'>
      <tr>
        <td colspan="6">印象ｼﾞｬﾊﾟﾝバス手配依頼書</td>
      </tr>
      <tr>
        <td class="commonBackColor">団　體　名：</td>
        <td colspan="5" class="comTextAlign">
          <el-input type="text" v-model="DataObj.TeamNum" />
        </td>
      </tr>
      <tr>
        <td class="commonBackColor">ガイド名前：</td>
        <td class="comTextAlign">
          <el-input type="text" v-model="DataObj.GuideName" />
        </td>
        <td class="commonBackColor">攜帯番號：</td>
        <td colspan="3" class="comTextAlign">
          <el-input type="text" v-model="DataObj.GuideTel" />
        </td>
      </tr>
      <tr>
        <td class="commonBackColor">人　　 數：</td>
        <td colspan="5" class="comTextAlign">
          <el-input type="text" v-model="DataObj.PeopleNum" />
        </td>
      </tr>
      <tr>
        <td class="commonBackColor">バス　種類：</td>
        <td colspan="5" class="comTextAlign">
          <el-input type="text" v-model="DataObj.BusType" />
        </td>
      </tr>
      <tr>
        <td class="commonBackColor">スケジュール：</td>
        <td colspan="5" class="comTextAlign"></td>
      </tr>
      <tr>
        <td class="commonBackColor" width="300">日付</td>
        <td class="commonBackColor" width="150">用車状況</td>
        <td class="commonBackColor" width="150">便名</td>
        <td class="commonBackColor" width="500">スケジュール內容</td>
        <td class="commonBackColor" width="400">ホテル</td>
        <td class="commonBackColor" width="300">ホテルTEL</td>
      </tr>
      <tr v-for="(subItem,index) in DataObj.Details_Extends">
        <td>
          <i class="iconfont icon-bumenguanli-tianjia addHandBook" :class="{'addHandBookDIS':index==0||index==DataObj.Details_Extends.length-1}" @click="addHand(index)"></i>         
          <el-date-picker v-model='subItem.UseDate' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
        </td>
        <td>
          <el-input type="text" v-model="subItem.BusType" />
        </td>
        <td>
          <el-input type="text" v-model="subItem.FlightNum" />
        </td>
        <td>
          <el-input type="textarea" resize="none" style="padding:5px 0;" v-model="subItem.BusContent" />
        </td>
        <td>
          <el-input type="textarea" resize="none" style="padding:5px 0;" v-model="subItem.HotelName" />
        </td>
        <td>
          <el-input type="textarea" resize="none" style="padding:5px 0;" v-model="subItem.HotelTel" />
        </td>
      </tr>
      <tr>
        <td>備考欄：</td>
        <td colspan="5" class="comTextAlign">
          <el-input type="text" v-model="DataObj.Remarks" />
        </td>
      </tr>
      <tr>
        <td colspan="6" class="comTextAlign">*迎えや送りは必要・不要となることは、必ず標記してください。</td>
      </tr>
      <tr>
        <td colspan="6" class="comTextAlign">*直接バス會社へ送付するので、必ず日本語でご記入ください。</td>
      </tr>
      <tfoot>
        <tr>
          <td colspan="6">
            <input type="button" class="normalBtn" :class="{'disClick':isSave}" @click="SaveData()" value="保存" />
            <input type="button" class="normalBtn" :class="{'disClick':isSave}" @click="DownLoadFile()"
              value="下载" />
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        DataObj: {
          Id: 0,
          TCIDS: "",
          TeamNum: "",
          GuideName: "",
          GuideTel: "",
          PeopleNum: "",
          BusType: "",
          DayNight: "",
          Remarks: "",
          Details_Extends: []
        },
        isSave: false,
        TCIDS: ""
      }
    },
    methods: {
      DownLoadFile(item) {
        if (!this.isSave) {
          this.isSave = true;
          let msg = {
            TCIDS: this.TCIDS
          };
          this.loading = true;
          var fileName = "バス手配依頼書" + this.DataObj.TeamNum + ".xls";
          this.GetLocalFile("bus_get_DownLoadBusConfig", msg, fileName,
            res => {
              this.loading = false;
              this.isSave = false;
            });
        }
      },
      GetData() {
        this.loading = true;
        this.apipost('bus_Get_GetBusDownLoadData', {
          TCIDs: this.TCIDS
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataObj = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      SaveData() {
        if (!this.isSave) {
          this.isSave = true;
          this.DataObj.TCIDS = this.TCIDS;
          this.apipost('bus_Post_SaveBusDownLoadData', this.DataObj, res => {
            if (res.data.resultCode == 1) {
              this.Success("操作成功");
              this.GetData();
            } else {
              this.Error(res.data.message);
            }
            this.isSave = false;
          }, err => {})
        }
      },
      //添加
      addHand(index){
        var obj = {
          BusContent:'',
          BusType:'',
          FlightNum:'',
          HotelName:'',
          HotelTel:'',
          Id:0,
          MainId:0,
          UseDate:''
        }
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var UseDate = year+'-'+month+"-"+day;
        obj.UseDate = UseDate
        if(index==0){
          this.DataObj.Details_Extends.unshift(obj)
        }else{
          this.DataObj.Details_Extends.push(obj);
        }
      }
    },
    mounted() {
      this.TCIDS = this.$route.query.TCID;
      this.GetData();
    },
  }

</script>