<template>
  <div v-loading="loading" class="offlineSetUp">
    <div class="content">
      <el-form label-width="160px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基础设置</span>
          </div>
          <div>
            <el-form-item label="订单状态">
              <div flex="dir:left wrap:wrap">
                <div v-for="item in addMsg.OrderStateList" :key="item.Id" style="margin-right: 15px" flex="dir:left">
                  <span>{{item.Id}}：</span>
                  <el-input style="width:100px" placeholder="请输入" size="small" v-model="item.Name"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="营业时间">
              <div>
                <div style="float:left">
                  <div v-for="(item,index) in addMsg.BusinessHoursList" :key="index">
                    <el-time-select placeholder="起始时间" size="small" v-model="item.StartTime" :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59'
                      }">
                    </el-time-select>
                    <el-time-select placeholder="起始时间" size="small" v-model="item.EndTime" :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:59'
                      }">
                    </el-time-select>
                    <i style="color:red;font-size:16px;cursor:pointer" @click="delBusiness(index)" class="el-icon-delete"></i>
                  </div>
                </div>
                <div style="float:left;margin-left:10px;">
                  <el-button size="small" @click="addBusinessHour">新增</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="支付类型" class="is-required">
              <!-- <el-select v-model="addMsg.PayTypeList" multiple placeholder="请选择">
                <el-option v-for="item in payType" :key="item.Id" :label="item.name" :value="item.Id">
                </el-option>
              </el-select> -->
              <el-checkbox-group v-model="addMsg.PayTypeList">
                <el-checkbox :label="item.Id" v-for="(item,index) in payType" :key="index">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="提前预定时间">
              <el-input placeholder="请输入" @keyup.native="checkInteger(addMsg,'AdvanceMinute')" style="width:220px"
                size="small" v-model="addMsg.AdvanceMinute">
                <el-button slot="append">
                  <span>分</span>
                </el-button>
              </el-input>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
      <div style="margin-top:20px">
        <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        addMsg: {
          OrderStateList: [], //订单状态列表
          BusinessHoursList: [], //营业时间	
          PayTypeList: [], //支付类型
          Id: 0,
          AdvanceMinute: '' //提前预定时间
        },
        payType: [{
          Id: 1,
          name: '线下付款'
        }, {
          Id: 2,
          name: '线上付款'
        }]
      };
    },
    created() {
      this.getData();
    },
    methods: {
      //删除
      delBusiness(index){
        this.addMsg.BusinessHoursList.splice(index,1);
      },
      //保存
      Save() {
        var myDate = new Date();
        var year = myDate.getFullYear();    //获取当前年份(4位)
        var month = myDate.getMonth()+1;    //获取月
        var strDate = myDate.getDate();
        if(this.addMsg.BusinessHoursList.length>0){
          this.addMsg.BusinessHoursList.forEach(x=>{
            if(x.StartTime&&x.EndTime){
              var T1 = x.StartTime.split(':')[0];
              var T2 = x.EndTime.split(':')[0];
              var T3 = x.StartTime.split(':')[1];
              var T4 = x.EndTime.split(':')[1];
              x.IsNextDay=1;
              if((parseInt(T2)<=parseInt(T1))){
                if(parseInt(T4)<parseInt(T3)){
                  x.IsNextDay=1;
                }
              }else{
                x.IsNextDay=0;
              }
            }            
          })
        }
        this.apipost("/api/Reserve/SetReserveBaseInfo", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
          }else{
            this.Error(res.data.message);
          }
        })
      },
      getData() {
        this.loading = true;
        this.apipost("/api/Reserve/GetReserveBaseInfo", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          }else{
            this.Error(res.data.message);
          }
        })
      },
      //添加营业时间
      addBusinessHour() {
        var obj = {
          StartTime: '',
          EndTime: '',
          IsNextDay: 0
        }
        this.addMsg.BusinessHoursList.push(obj);
      }
    },
    mounted() {

    }
  };

</script>
<style>
  .offlineSetUp .content {
    margin-top: 10px;
    box-sizing: border-box;
  }

</style>
