<style>
.flightChild .flightAddCompany {
  width: 600px;
  min-height:300px;
}
.flightChild .FweekList{
  width:100%;
  margin-top:5px;
  padding:0 0 5px 43px;
  border-bottom:1px dashed #d1d1d1;
}
.flightChild .FweekList:last-child{
  border:0;
}
.flightChild .flightChildTable{
  width:100%;
}
/* .flightChildTable td{
  border: 1px solid #d1d1d1;
} */
.flightChild .flightDateSearch{
  margin:0 0 10px 46px;
}
.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 class="flexOne flightChild">
    <div class="query-box">
      <ul>
        <li>
          <label>日期范围:</label>
          <el-date-picker class="w150" type="date" v-model="msg.QStartDate" :picker-options="pickerBeginDateBefore"
            value-format="yyyy-MM-dd" placeholder></el-date-picker>
          <el-date-picker class="w150" type="date" v-model="msg.QEndDate" :picker-options="pickerBeginDateAfter"
            value-format="yyyy-MM-dd" placeholder></el-date-picker>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
          &nbsp;
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="outerVisible = true,editVisible = false" />
          &nbsp;
          <input type="button" class="normalBtn" value="删除" @click="PostDeleteArray()" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th width="">
          <label for="label" @change="getCkAll">
                <input type="checkbox" id="label" v-model="ckedAll" >全选
          </label>
        </th>
        <th width="">日期</th>
        <th>航班号</th>
        <th>起飞时间</th>
        <th>到达时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in DataList" :key="index">
        <td>
          <label>
            <input :value="item.ID" style="vertical-align: middle;" v-model="item.checked" type="checkbox"/>
          </label>
        </td>
        <td>{{item.FDateStr}}</td>
        <td>{{item.Flight_number}}</td>
        <td>{{item.CDepartTime}}</td>
        <td>{{item.CArrivalTime}}</td>
        <td>
          <el-row>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle @click="editVisible = true,outerVisible=false,ClickItem(item)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle @click="DeleteSingleChild(item)"></el-button>
            </el-tooltip>
          </el-row>
        </td>
      </tr>
    </table>
    <div class="noData" v-show="DataList.length<=0">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage" layout="total,prev, pager, next, jumper"
      :page-size="msg.pageSize" :total="msg.total">
    </el-pagination>
    <el-dialog custom-class='flightAddCompany' title="新增效期" :visible.sync="outerVisible" center>
      <el-form>
        <div class="flightDateSearch">
          日期：<el-date-picker clearable class="w135" v-model="PostData.StartDate" type="date" :picker-options="beforeCheck"
            value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')"></el-date-picker> -
          <el-date-picker clearable class="w135" v-model="PostData.EndDate" type="date" :picker-options="afterCheck"
            value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')"></el-date-picker>
          <el-select v-model="PostData.UpdateType" class="w100" style="margin-top:20px;">
            <el-option :value="1" label="全部"></el-option>
            <el-option :value="2" label="星期"></el-option>
          </el-select>
        </div>
        <table class="flightChildTable" style="border-collapse: collapse;text-align:left;">
          <tr>
            <td>
              <div v-if="PostData.UpdateType==1" class="FweekList" v-for="subItem in dateObj2">
                <span>{{subItem.WeekDayStr}}：</span>
                <el-input class="w135" v-model="subItem.CDepartTime" placeholder="起飞时间" @keyup.native="checkTime(subItem,'CDepartTime')" maxlength="5"></el-input>
                <el-input class="w135" v-model="subItem.CArrivalTime" placeholder="到达时间" @keyup.native="checkTime(subItem,'CArrivalTime')" maxlength="5"></el-input>
              </div>
              <div v-if="PostData.UpdateType==2" class="FweekList" v-for="subItem in dateObj">
                <el-checkbox v-model='subItem.CheckStatus'>{{subItem.WeekDayStr}}</el-checkbox>
                <el-input class="w135" v-model="subItem.CDepartTime" placeholder="起飞时间" @keyup.native="checkTime(subItem,'CDepartTime')" maxlength="5"></el-input>
                <el-input class="w135" v-model="subItem.CArrivalTime" placeholder="起飞时间" @keyup.native="checkTime(subItem,'CArrivalTime')" maxlength="5"></el-input>
              </div>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')" :class="{'disClick':!isSaved}">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>

    <el-dialog custom-class='flightAddCompany' title="修改效期" :visible.sync="editVisible" center>
      <el-form>
        <table class="flightChildTable" style="border-collapse: collapse;text-align:left;margin-top:30px;">
          <tr>
            <td width="140">日期&nbsp;{{UpdateMsg.FDate}}</td>
            <td>
              <div class="FweekList" style="padding-left:0;">
                <el-input class="w135" @keyup.native="checkTime(UpdateMsg,'CDepartTime')" v-model="UpdateMsg.CDepartTime" maxlength="5"></el-input>
                <el-input class="w135" @keyup.native="checkTime(UpdateMsg,'CArrivalTime')" v-model="UpdateMsg.CArrivalTime" maxlength="5"></el-input>
              </div>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="UpdateFlightChild()">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="editVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        checked: false,
        outerVisible: false,
        editVisible: false,
        ckedAll:false,
        isSaved:true,
        msg: {
          //请求数据参数
          pageIndex: 1,
          pageSize: 15,
          FlightId: this.$route.query.id,
          QStartDate: "",
          QEndDate: "",
          total: 0,
          currentPage: 1,
        },
        loading: true,
        PostData: {
          StartDate: "",
          EndDate: "",
          FlightId: this.$route.query.id,
          //1-全部更新，2，按周一，周二更新
          UpdateType: 1,
          SubList: []
        },
        //删除数组
        DeleteArray: [],
        dateObj2: [{
          WeekDayStr: '全部',
          WeekDay: 0,
          CDepartTime: '',
          CArrivalTime: '',
        }],
        dateObj: [{
            WeekDayStr: '周一',
            WeekDay: 1,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周二',
            WeekDay: 2,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周三',
            WeekDay: 3,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周四',
            WeekDay: 4,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周五',
            WeekDay: 5,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周六',
            WeekDay: 6,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          },
          {
            WeekDayStr: '周日',
            WeekDay: 7,
            CDepartTime: '',
            CArrivalTime: '',
            CheckStatus: false
          }
        ],
        UpdateMsg: {
          ID: 0,
          FDate: "",
          CDepartTime: "",
          CArrivalTime: ""
        },

        beforeCheck: {
          disabledDate: time => {
            let endTime = new Date(this.PostData.EndDate);
            return endTime.getTime() < time.getTime();
          }
        },
        afterCheck: {
          disabledDate: time => {
            let startTime = new Date(this.PostData.StartDate);
            return startTime.getTime() >= time.getTime();
          }
        },
        pickerBeginDateBefore: {
          disabledDate: time => {
            let endTime = new Date(this.msg.QEndDate)
            return endTime.getTime() < time.getTime()
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.msg.QStartDate)
            return startTime.getTime() >= time.getTime()
          }
        },

        DataList: [],
      };
    },
    methods: {
      //获取列表数据
      getList() {
        this.loading = true;
        this.apipost(
          "flight_get_GetChildPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.msg.total = res.data.data.count;
              this.noData = !this.msg.total > 0;
              this.DataList = res.data.data.pageData;
              this.DataList.forEach(x=>{
                x.checked=false;
              })
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //点击全选
      getCkAll(){
        var that=this;
        if(that.ckedAll){
          this.DataList.forEach(x=>{
            x.checked = true;
          })
        }else{
          this.DataList.forEach(x=>{
            x.checked = false;
          })
        }
      },
      //提交创建、修改表单
      submitForm(addMsg) {
        this.SaveData();
      },
      SaveData() {
        this.PostData.SubList = [];
        var isSubmit = true;
        if (this.PostData.UpdateType == 1) {
          this.PostData.SubList.push(this.dateObj2[0]);
          if (this.PostData.StartDate == '') {
            this.Error('请选择开始日期');
            return;
          }
          if (this.PostData.EndDate == '') {
            this.Error('请选择结束日期');
            return;
          }
          if (this.dateObj2[0].CDepartTime == '') {
            this.Error('请填写出发时间');
            return;
          }
          if (this.dateObj2[0].CArrivalTime == '') {
            this.Error('请填写到达时间');
            return;
          };
        } else {
          this.dateObj.forEach(item => {
            if (item.CheckStatus) {
              this.PostData.SubList.push(item);
              if (this.PostData.StartDate == '') {
                this.Error('请选择开始日期');
                isSubmit = false;
              }
              if (this.PostData.EndDate == '') {
                this.Error('请选择结束日期');
                isSubmit = false;
              }
              if (item.CDepartTime == '') {
                this.Error('请填写周' + item.WeekDayStr + '开始时间');
                isSubmit = false;
              }
              if (item.CArrivalTime == '') {
                this.Error('请填写周' + item.WeekDayStr + '到达时间');
                isSubmit = false;
              }
            } else {
              if (this.PostData.StartDate == '') {
                this.Error('请选择开始日期');
                isSubmit = false;
              }
              if (this.PostData.EndDate == '') {
                this.Error('请选择结束日期');
                isSubmit = false;
              }
            }
          });
          if (this.PostData.SubList.length == 0) {
            this.Error('请选择星期');
            isSubmit = false;
          }
        }
        if (isSubmit&&this.isSaved) {
          this.isSaved = false;
          this.apipost(
            "flight_get_SetFlightChild",
            this.PostData,
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.PostData.StartDate = "";
                this.PostData.EndDate = "";
                this.PostData.UpdateType = 1;
                this.dateObj2[0].CDepartTime = "";
                this.dateObj2[0].CArrivalTime = "";
                this.dateObj.forEach(item => {
                  item.CheckStatus = false;
                  item.CDepartTime = "";
                  item.CArrivalTime = "";
                });
                this.getList();
                this.outerVisible = false;
              } else {
                this.Error(res.data.message);
              }
              this.isSaved = true;
            },
            err => {}
          );
        }
      },
      //翻页功能按钮
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //查询初始化页码
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      //单独删除
      DeleteSingleChild(item) {
        var that = this;
        var DeleteArray = [];
        DeleteArray.push(item.ID);
        that.Confirm("是否删除", function () {
          that.apipost(
            "flight_get_RemoveFlightChild",
            DeleteArray,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      //批量或者勾选删除
      PostDeleteArray() {
        var that = this;
        that.DeleteArray = [];
        that.DataList.forEach(item=>{
          if(item.checked){
            that.DeleteArray.push(item.ID);
          }
        })
        if(that.DeleteArray.length==0){
            this.Error('请勾选删除项');
            return;
        }
        that.Confirm("是否删除", function () {
          that.apipost(
            "flight_get_RemoveFlightChild",
            that.DeleteArray,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
                that.DeleteArray = [];
                that.ckedAll=false;
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      //点击航班信息
      ClickItem(item) {
        this.UpdateMsg.ID = item.ID;
        this.UpdateMsg.FDate = item.FDateStr;
        this.UpdateMsg.CDepartTime = item.CDepartTime;
        this.UpdateMsg.CArrivalTime = item.CArrivalTime;
      },
      //更新航班信息
      UpdateFlightChild() {
        this.apipost(
          "flight_get_UpdateChildFlight",
          this.UpdateMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.editVisible =false;
              this.getList();
              this.UpdateMsg.ID = 0;
              this.UpdateMsg.FDate = "";
              this.UpdateMsg.CDepartTime = "";
              this.UpdateMsg.CArrivalTime = "";
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>