
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model
        ref="form"
        :model="model"
        layout="horizontal"
        :rules="validatorRules"
        slot="detail"
      >
        <!-- 1 -->
        <div class="item-wrapper">
          <div class="wrapper-content">1、进店时间在</div>
          <div class="wrapper-form-item" style="width: 128px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="enterTime"
            >
              <a-time-picker
                :open.sync="open1"
                v-model="model.enterTime"
                format="HH:mm"
              >
                <a-button
                  slot="addon"
                  size="small"
                  type="primary"
                  @click="open1 = false"
                >
                  确定
                </a-button>
              </a-time-picker>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            之后的，算第二天退房（例如，如果是6点，那么当天6点之后开的房间就是第二天中午退房，0点到6点开房就是当天中午退房）。
          </div>
        </div>

        <!-- 2 -->
        <div class="item-wrapper">
          <div class="wrapper-content">2、全天房中午退房时间</div>
          <div class="wrapper-form-item">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="leaveTime"
            >
              <a-time-picker
                :open.sync="open2"
                v-model="model.leaveTime"
                format="HH:mm"
              >
                <a-button
                  slot="addon"
                  size="small"
                  type="primary"
                  @click="open2 = false"
                >
                  确定
                </a-button>
              </a-time-picker>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            <a-button type="link" @click="openMoreLeaveTimeSetting">更多...</a-button>
          </div>
          <div class="wrapper-content">，超时则</div>
          <div class="wrapper-form-item">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="timeOutRule"
            >
              <a-select
                default-value="1"
                style="width: 150px"
                v-model="model.timeOutRule"
              >
                <a-select-option
                  :value="item.value"
                  v-for="item in rulesMap"
                  :key="item.value"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">，直到</div>
          <div class="wrapper-form-item">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="endTime"
            >
              <a-time-picker
                :open.sync="open3"
                v-model="model.endTime"
                format="HH:mm"
              >
                <a-button
                  slot="addon"
                  size="small"
                  type="primary"
                  @click="open3 = false"
                >
                  确定
                </a-button>
              </a-time-picker>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">，加收全天房费</div>
        </div>

        <!-- 按分钟加收规则 -->
        <div v-if="model.timeOutRule == 1">
          <a-form-model-item
            label=""
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="ruleType"
          >
            <a-radio-group
              name="radioGroup"
              :default-value="1"
              v-model="model.ruleType"
            >
              <a-radio :value="1"> 统一设置 </a-radio>
              <a-radio :value="2"> 根据房型设置 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <!-- 统一配置分钟房费加收 -->
          <div
            class="item-wrapper"
            v-if="model.timeOutRule == 1 && model.ruleType == 1"
          >
            <div class="wrapper-content">超时之后，每隔</div>
            <div class="wrapper-form-item" style="width: 98px">
              <a-form-model-item
                label=""
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="minute"
              >
                <a-input-number
                  :min="1"
                  v-model="model.minute"
                ></a-input-number>
              </a-form-model-item>
            </div>
            <div class="wrapper-content">分钟收取</div>
            <div class="wrapper-form-item" style="width: 98px">
              <a-form-model-item
                label=""
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="price"
              >
                <a-input-number :min="0" v-model="model.price"></a-input-number>
              </a-form-model-item>
            </div>
            <div class="wrapper-content">
              元，不足 {{ model.minute }} 分钟，超过
            </div>
            <div class="wrapper-form-item" style="width: 98px">
              <a-form-model-item
                label=""
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="moreThenMinute"
              >
                <a-input-number
                  :min="0"
                  v-model="model.moreThenMinute"
                ></a-input-number>
              </a-form-model-item>
            </div>
            <div class="wrapper-content">分钟加收</div>
            <div class="wrapper-form-item" style="width: 98px">
              <a-form-model-item
                label=""
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="moreThenPrice"
              >
                <a-input-number
                  :min="0"
                  v-model="model.moreThenPrice"
                ></a-input-number>
              </a-form-model-item>
            </div>
            <div class="wrapper-content">元。</div>
          </div>
          <!-- 按房型配置分钟房费加收 -->
          <div v-if="model.timeOutRule == 1 && model.ruleType == 2">
            <div
              class="wrapper-layout-item"
              v-for="item in layouts"
              :key="item.id"
            >
              <div class="layout-item-header">
                <div class="header-title">{{ item.name }}</div>
              </div>
              <div class="item-data-wrapper item-wrapper">
                <div class="wrapper-content">超时之后，每隔</div>
                <div class="wrapper-form-item" style="width: 98px">
                  <a-form-model-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="minute"
                  >
                    <a-input-number
                      :min="1"
                      v-model="item.minute"
                    ></a-input-number>
                  </a-form-model-item>
                </div>
                <div class="wrapper-content">分钟收取</div>
                <div class="wrapper-form-item" style="width: 98px">
                  <a-form-model-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="price"
                  >
                    <a-input-number
                      :min="0"
                      v-model="item.price"
                    ></a-input-number>
                  </a-form-model-item>
                </div>
                <div class="wrapper-content">
                  元，不足 {{ item.minute ? item.minute : 0 }} 分钟，超过
                </div>
                <div class="wrapper-form-item" style="width: 98px">
                  <a-form-model-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="moreThenMinute"
                  >
                    <a-input-number
                      :min="0"
                      v-model="item.moreThenMinute"
                    ></a-input-number>
                  </a-form-model-item>
                </div>
                <div class="wrapper-content">分钟加收</div>
                <div class="wrapper-form-item" style="width: 98px">
                  <a-form-model-item
                    label=""
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="moreThenPrice"
                  >
                    <a-input-number
                      :min="0"
                      v-model="item.moreThenPrice"
                    ></a-input-number>
                  </a-form-model-item>
                </div>
                <div class="wrapper-content">元。</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 3 -->
        <div class="item-wrapper">
          <div class="wrapper-content">3、全天房超过退房时间可以再宽限</div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="dayTime"
            >
              <a-input-number
                v-model="model.dayTime"
                style="width: 100px"
              ></a-input-number>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">分钟</div>
        </div>
        <div class="buttons">
          <a-button style="margin-right: 10px" @click="reload">刷新</a-button>
          <a-button type="primary" @click="save">保存</a-button>
        </div>
      </a-form-model>
    </j-form-container>
    <more-setting ref="moreSettings"></more-setting>
  </a-spin>
</template>

<script>
import { fetch, save } from "@/api/allDaysPriceRuleApi";
import { getAllLayouts } from "@/api/roomLayout";
import moreSetting from './modules/moreLeaveTimeSettingModal.vue'
import moment from 'moment'

let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"))
export default {
  components: {
    moreSetting
  },
  data() {
    return {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 0 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      open1: false,
      open2: false,
      open3: false,
      enterTime: "",
      confirmLoading: false,
      rulesMap: [
        {
          name: "按分钟加收房费",
          value: 1,
        },
        {
          name: "按半天房费加收",
          value: 2,
        },

        {
          name: "不加收房费",
          value: 3,
        },
      ],
      layouts: [],
      model: {
        enterTime: null,
        timeOutRule: 1,
        leaveTime: null,
        endTime: null,
        dayTime: null,
        ruleType: 1,
        layoutRules: [],
        minute: null,
        price: null,
        moreThenMinute: null,
        moreThenPrice: null,
      },
      validatorRules: {
        enterTime: [
          {
            required: true,
            message: "进店时间在多少分钟之后的，算第二天退房不能为空!",
          },
        ],
        leaveTime: [{ required: true, message: "退房时间不能为空" }],
        dayTime: [{ required: true, message: "超时宽限多少分钟不能为空" }],
      },
      moreLeaveTimeShow: false
    };
  },
  mounted() {
    this.loadLayouts();
    
  },
  methods: {
    loadLayouts() {
      getAllLayouts().then((res) => {
        if (res.code == 200) {
          res.result.records.forEach((s) => {
            s["minute"] = null;
            s["price"] = null;
            s["moreThenMinute"] = null;
            s["moreThenPrice"] = null;
          });
          this.layouts = res.result.records;
          this.loadRules();
        }
      });
    },
    loadRules() {
      fetch().then((res) => {
        if(res.code == 200) {
            res.result.cesAllDayPriceRule.enterTime = res.result.cesAllDayPriceRule.enterTime?moment(res.result.cesAllDayPriceRule.enterTime,"HH:mm").utcOffset(8):null
            res.result.cesAllDayPriceRule.leaveTime = res.result.cesAllDayPriceRule.leaveTime?moment(res.result.cesAllDayPriceRule.leaveTime,"HH:mm").utcOffset(8):null
            res.result.cesAllDayPriceRule.endTime = res.result.cesAllDayPriceRule.endTime?moment(res.result.cesAllDayPriceRule.endTime,"HH:mm").utcOffset(8):null
            this.model = res.result.cesAllDayPriceRule

            if(res.result.cesAllMinutes && res.result.cesAllMinutes.length > 0) {
                let arrs = res.result.cesAllMinutes
                this.layouts.forEach(s => {
                    let index = arrs.findIndex(a => a.roomLayoutId == s.id)
                    if(index > -1) {
                        let item = arrs[index]
                        s['mId'] = item.id
                        s.minute = item.minute
                        s.price = item.price
                        s.moreThenMinute = item.moreThenMinute
                        s.moreThenPrice = item.moreThenPrice
                    }
                })
            }
           
        }
      });
    },
    reload() {
        this.confirmLoading = true
        this.loadLayouts()
        setTimeout(_ => {
            this.$message.success('刷新成功')
            this.confirmLoading = false
        },800)
        
    },
    openMoreLeaveTimeSetting() {
      this.$refs.moreSettings.show = true
    },
    save() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let layoutRules = []
          if(this.model.timeOutRule == 1 && this.model.ruleType == 2) {
            this.layouts.forEach(s => {
                let pushItem = {
                    hotelId: hotelInfo.id,
                    roomLayoutId: s.id,
                    minute: s.minute,
                    price: s.price,
                    moreThenMinute: s.moreThenMinute,
                    moreThenPrice: s.moreThenPrice,
                }
                if(s.mId) {
                    pushItem['id'] = s.mId
                }
                layoutRules.push(pushItem)
            })
          }
          let param = {
            hotelId:hotelInfo.id,
            enterTime: moment(this.model.enterTime,"HH:mm").utcOffset(8).format("HH:mm"),
            leaveTime: moment(this.model.leaveTime,"HH:mm").utcOffset(8).format("HH:mm"),
            timeOutRule: this.model.timeOutRule,
            ruleType: this.model.ruleType,
            minute: this.model.minute,
            price: this.model.price,
            moreThenMinute: this.model.moreThenMinute,
            moreThenPrice: this.model.moreThenPrice,
            endTime: moment(this.model.endTime,"HH:mm").utcOffset(8).format("HH:mm") ,
            dayTime: this.model.dayTime,
            roomLayoutRules: layoutRules
          }
          if(this.model.id) {
            param['id'] = this.model.id
          }
          save(param).then(res => {
            if(res.code == 200) {
                this.$message.success("保存成功")
                this.loadRules()
            }
          }).finally(_ => {
            that.confirmLoading = false;
          })
        }
      });
    },
  },
};
</script>

<style lang="css" scoped>
/deep/ .ant-form-explain {
  width: 300% !important;
}
.item-wrapper {
  display: flex;
  align-items: center;
  height: 50px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.wrapper-form-item {
  height: 38px;
  /* margin-top: 22px; */
}
.item-data-wrapper {
  margin-top: 0 !important;
  border-top: 2px solid #1890ff;
  width: fit-content;
  padding: 0 40px;
  background-color: #1890ff;
  border-top-right-radius: 4px;
  color: white;
}
.header-title {
  font-weight: 600;
  width: fit-content;
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
</style>
