<template>
  <a-card>
    <div style="display: flex; gap: 10px" v-if="isShow">
      <div style="width: 20%; background: #f4f5f8">
        <div style="font-size: 16px; font-weight: 600; padding: 15px 15px 0">
          共计关联2个房间
        </div>
        <a-divider></a-divider>
        <div
          :class="[selectMain ? 'select' : '']"
          style="font-size: 16px; font-weight: 500; cursor: pointer"
          @click="selectMain = true"
        >
          查看团队主账务
        </div>
        <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 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 activeKey="1" expandIconPosition="right">
              <a-collapse-panel key="1" header="批次2">
                <a-collapse
                  activeKey="1"
                  :bordered="false"
                  expandIconPosition="right"
                >
                  <a-collapse-panel key="1" header="Q100（1人）">
                    <div class="select" style="padding: 5px">
                      <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>
              </a-collapse-panel>
            </a-collapse>
          </a-collapse-panel> -->
          <a-collapse-panel
            key="3"
            :header="'预定（' + batchRoomsCount + '批次）'"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0;
              overflow: hidden;
            "
          >
            <div
              :class="[item.check == 1 ? 'select' : '']"
              style="padding: 5px; cursor: pointer"
              @click="selectBatch(item)"
              v-for="(item, index) in batchRoomsList"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <div>
                  <a-tag color="#2db7f5"> 预定中 </a-tag>
                  <span
                    >批次{{ index + 1 }}（{{ item.roomIds.length }}间）</span
                  >
                </div>
                <!-- <div>{{ busRoomBookingOrders.phone }}</div> -->
                <div>{{ findCustomer(item.contactId) }}</div>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <div style="display: flex; justify-content: center">
          <a-button type="link" @click="addPatch">添加批次</a-button>
        </div>
      </div>
      <div style="width: 80%" v-if="selectMain">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <span slot="tab"> 详单 </span>
            <edit-schedule-room-form-main
              :id="id"
              :disabled="true"
              @ok="getCallback"
              ref="EditScheduleRoomFormMain"
            ></edit-schedule-room-form-main>
          </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 style="width: 80%" v-else>
        <a-tabs default-active-key="1">
          <a-tab-pane key="1">
            <span slot="tab"> 详单 </span>
            <edi-batch-schedule-room-form
              ref="EdiBatchScheduleRoomForm"
              :id="batchId"
              :disabled2="true"
            ></edi-batch-schedule-room-form>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab"> 日志 </span>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <add-batch-schedule-room-modal
      ref="modalAddBatchScheduleRoom"
      :bookingOrdersId="bookingOrdersId"
      @ok="modalFormOk"
    ></add-batch-schedule-room-modal>
  </a-card>
</template>

<script>
import EditScheduleRoomFormMain from "./modules/scheduleTeam/EditScheduleRoomFormMain.vue";
import EdiBatchScheduleRoomForm from "./modules/scheduleTeam/EdiBatchScheduleRoomForm.vue";
import AddBatchScheduleRoomModal from "./modules/schedule/ScheduleRoomModal";
import { httpAction, getAction, postAction } from "@/api/manage";
export default {
  components: {
    EditScheduleRoomFormMain,
    EdiBatchScheduleRoomForm,
    AddBatchScheduleRoomModal,
  },
  // props: {
  //   id: {
  //     type: String,
  //     default: "",
  //   },
  // },
  data() {
    return {
      isShow: true,
      selectMain: true,
      id: "",
      batchId: "",
      activeKey: ["1", "2", "3"],
      activeKey2: ["1"],
      scheduleRoomCount: 0,
      batchRoomsCount: 0,
      batchRoomsList: [],
      busRoomBookingOrders: {},
      bookingOrdersId: "",
      customerList: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log("created", this.id);
    this.getbusCustomer();
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log("to", to.query.id);
  //   console.log("from", from);
  //   var id = to.query.id;
  //   console.log("this.id", id);
  //   next();
  // },
  activated() {
    //重新进入界面可能参数id不一样，需要重新加载数据，使用钩子方式
    this.id = this.$route.params.id;
    this.selectMain = true;
    // try {
    //   this.$refs.EditScheduleRoomFormMain.load(this.id);
    // } catch {}
    this.isShow = true;
  },
  deactivated() {
    this.isShow = false;
  },
  methods: {
    findCustomer(id) {
      if (this.customerList && this.customerList.length) {
        var find = this.customerList.find((t) => t.id == id);
        if (find) {
          return find.phone;
        } else {
          return this.busRoomBookingOrders.phone;
        }
      }
    },
    getbusCustomer() {
      getAction("/bus/busCustomer/list", {}).then((res) => {
        if (res.success) {
          this.customerList = res.result.records;
        }
      });
    },
    addPatch() {
      this.$refs.modalAddBatchScheduleRoom.add();
      this.$refs.modalAddBatchScheduleRoom.title = "添加批次";
      this.$refs.modalAddBatchScheduleRoom.disableSubmit = false;
    },
    modalFormOk(e) {
      console.log("modalFormOk");
      this.isShow = false;
      setTimeout(() => {
        this.isShow = true;
      }, 100);
    },
    selectBatch(item) {
      this.batchRoomsList.forEach((t) => {
        if (t.check === 1 && t != item) {
          t.check = 0;
        }
      });
      if (item.check === 0) {
        item.check = 1;
      } else {
        item.check = 0;
      }
      this.selectMain = item.check == 0;
      this.batchId = item.id;
      if (!this.selectMain) {
        setTimeout(() => {
          this.$refs.EdiBatchScheduleRoomForm.load();
        }, 100);
      }
    },
    getCallback(e) {
      console.log("getCallback", e);
      this.busRoomBookingOrders = e;
      this.batchRoomsCount = e.batchRooms.length;
      this.batchRoomsList = e.batchRooms;
      this.batchRoomsList.forEach((t) => {
        this.$set(t, "check", 0);
      });
      this.bookingOrdersId = this.busRoomBookingOrders.orderInfo.id;
      console.log("bookingOrdersId", this.bookingOrdersId);
    },
    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>
