<template>
  <a-card>
    <div style="display: flex; gap: 10px" v-if="isShow">
      <div style="width: 18%; background: #f4f5f8">
        <div style="font-size: 16px; font-weight: 600; padding: 15px 15px 0">
          共计关联{{ roomCount }}个房间
        </div>
        <a-divider></a-divider>
        <a-collapse v-model="activeKey" :bordered="false">
          <!-- <a-collapse-panel
            key="1"
            header="接待（1间）"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0;
              overflow: hidden;
            "
          >
            <div slot="extra" style="color: #1890ff">合计:-82.00</div>
            <div class="cell_check_group">
              <a-checkbox-group @change="onChange">
                <a-row>
                  <a-col :span="12">
                    <a-checkbox value="1"> 正常入住 </a-checkbox>
                  </a-col>
                  <a-col :span="12">
                    <a-checkbox value="2"> 未结退房 </a-checkbox>
                  </a-col>
                  <a-col :span="12">
                    <a-checkbox value="3"> 已结退房</a-checkbox>
                  </a-col>
                  <a-col :span="12">
                    <a-checkbox value="4"> 联房退房 </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </div>
          </a-collapse-panel> -->
          <!-- <a-collapse-panel
            key="2"
            header="Q100（1人）"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0;
              overflow: hidden;
            "
          >
            <div class="select">
              <a-tag color="#87d068"> 正常入住 </a-tag>
              <span
                class="booking_circle_span orange_color"
                style="margin-left: 4px"
                >主</span
              >
              <span style="font-weight: 700">何先生</span>
              <div style="font-weight: 700; float: right">￥ -82.00</div>
            </div>
          </a-collapse-panel> -->
          <a-collapse-panel
            key="3"
            :header="'预定（' + scheduleRoomCount + '间）'"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0;
              overflow: hidden;
            "
          >
            <div class="select">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <div>
                  <a-tag color="#2db7f5"> 预定中 </a-tag>
                  <span>{{ busRoomBookingOrders.contactName }}</span>
                </div>
                <div style="float: right">{{ busRoomBookingOrders.phone }}</div>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <div style="width: 82%">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <span slot="tab"> 详单 </span>
            <edit-schedule-room-form
              :id="id"
              :disabled2="true"
              @ok="getCallback"
            ></edit-schedule-room-form>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab"> 账单 </span>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab"> 日志 </span>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-card>
</template>

<script>
import EditScheduleRoomForm from "./modules/schedule/EditScheduleRoomForm.vue";

export default {
  components: {
    EditScheduleRoomForm,
  },
  // props: {
  //   id: {
  //     type: String,
  //     default: "",
  //   },
  // },
  data() {
    return {
      id: "",
      activeKey: ["1", "2", "3"],
      scheduleRoomCount: 0,
      roomCount: 0,
      scheduleRoomList: [],
      busRoomBookingOrders: {},
      isShow: true,
    };
  },
  created(){
    this.id = this.$route.params.id;
  },
  activated() {
    //重新进入界面可能参数id不一样，需要重新加载数据，使用钩子方式
    this.id = this.$route.params.id;
    this.isShow = true;
  },
  deactivated() {
    this.isShow = false;
  },
  methods: {
    getCallback(e) {
      console.log("getCallback", e);
      this.busRoomBookingOrders = e;
      this.roomCount = e.roomIds.length;
      this.scheduleRoomList = e.roomIds.filter(
        (t) => t.roomStatus == 1 || t.roomStatus == 2
      );
      this.scheduleRoomCount = this.scheduleRoomList.length;
    },
    onChange(checkedValues) {
      console.log("checked = ", checkedValues);
    },
  },
};
</script>

<style scoped>
.cell_check_group {
  padding: 10px;
  background-color: #d9e5ec;
  border-radius: 4px;
  margin: 0px 0 6px 0px;
}
.orange_color {
  border-color: #ff9e35 !important;
  color: #ff9e35 !important;
  vertical-align: initial;
}
.booking_circle_span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #f24e4c;
  border: 1px solid #f24e4c;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  display: inline-block;
}
.select {
  color: #000 !important;
  border: 1px solid #f24e4c !important;
  background: transparent;
  border-radius: 4px;
  padding: 0 10px;
  line-height: 32px;
  cursor: pointer;
}
</style>
