hotel-saas-tenant-frontend/src/views/room/modules/checkIn/BillRoomForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="form"
        :model="model"
        :rules="validatorRules"
        slot="detail"
      >
        <a-row>
          <div>
            <div style="display: flex; gap: 15px">
              <div style="width: 57%">
                <a-tabs
                  hide-add
                  type="editable-card"
                  v-model="activeKey"
                  :tabBarStyle="{ fontWeight: 600 }"
                  @edit="editTabs"
                  @tabClick="tabClick"
                >
                  <a-tab-pane
                    v-for="(room, aindex) in model.roomIds"
                    :key="room.id"
                    :tab="room.name"
                    :closable="true"
                    force-render
                  >
                    <div style="display: flex; justify-content: space-between">
                      <h4
                        style="
                          color: rgba(255, 141, 26, 1);
                          font-weight: 600;
                          margin-top: 15px;
                        "
                      >
                        宾客信息
                      </h4>
                    </div>
                    <a-divider />
                    <!-- <a-col :span="8">
                      <a-form-model-item
                        label="姓名"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :prop="`rooms[${index}].key1`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入姓名!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-auto-complete
                          v-model="room.key1"
                          placeholder="请输入姓名"
                          @search="handleSearch"
                          @select="(e) => handleSelectMember(room, e)"
                        >
                          <template slot="dataSource">
                            <a-select-option
                              v-for="item in result"
                              :key="item"
                              >{{ item }}</a-select-option
                            >
                          </template>
                        </a-auto-complete>
                      </a-form-model-item>
                    </a-col> -->
                    <a-col :span="8">
                      <a-form-model-item
                        label="姓名"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :prop="`roomIds[${aindex}].key1`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入姓名!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-auto-complete
                          v-model="room.key1"
                          placeholder="请输入姓名"
                          @search="handleSearch"
                          @select="(e) => handleSelectMember(room, e)"
                        >
                          <template slot="dataSource">
                            <a-select-option
                              v-for="item in customerList"
                              :key="item.id"
                              >{{ item.name }}-{{ item.phone }}</a-select-option
                            >
                          </template>
                        </a-auto-complete>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item
                        label="性别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :prop="`roomIds[${aindex}].key2`"
                        :rules="[
                          {
                            required: true,
                            message: '请选择性别!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-select v-model="room.key2" placeholder="请选择性别">
                          <a-select-option :value="1"> 男 </a-select-option>
                          <a-select-option :value="2"> 女 </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item
                        label="民族"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :prop="`roomIds[${aindex}].key3`"
                        :rules="[
                          {
                            required: true,
                            message: '请选择民族!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-select v-model="room.key3" placeholder="请选择民族">
                          <a-select-option value="汉"> 汉 </a-select-option>
                          <a-select-option value="回"> 回 </a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="16">
                      <a-form-model-item
                        label="身份证号"
                        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                        :wrapperCol="{
                          xs: { span: 24 },
                          sm: { span: 16 },
                        }"
                        :prop="`roomIds[${aindex}].key4`"
                        :rules="[
                          {
                            required: true,
                            message: '请输身份证号!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-input
                          v-model="room.key4"
                          placeholder="请输身份证号"
                        ></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-model-item
                        label="手机号"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :prop="`roomIds[${aindex}].key5`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入手机号!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-input
                          v-model="room.key5"
                          placeholder="请输入姓名"
                        ></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item
                        label="联系地址"
                        :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                        :wrapperCol="{
                          xs: { span: 24 },
                          sm: { span: 16 },
                        }"
                        prop="key6"
                      >
                        <a-input
                          v-model="room.key6"
                          placeholder="请输入联系地址"
                        ></a-input>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <div
                        style="display: flex; justify-content: space-between"
                      >
                        <div></div>
                        <div>
                          <a-button type="link" @click="puls(room)">
                            添加同住
                          </a-button>
                        </div>
                      </div>
                    </a-col>
                    <template v-for="(item, index) in room.livingCustomers2">
                      <a-col :span="4">
                        <a-form-model-item
                          :wrapperCol="{
                            xs: { span: 24 },
                            sm: { span: 22 },
                          }"
                          :prop="`roomIds[${aindex}].livingCustomers2[${index}].customerName`"
                          :rules="[
                            {
                              required: true,
                              message: '请输入姓名!',
                              trigger: 'change',
                            },
                          ]"
                        >
                          <a-input
                            v-model="item.customerName"
                            placeholder="姓名"
                          ></a-input>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="4">
                        <a-form-model-item
                          :wrapperCol="{
                            xs: { span: 24 },
                            sm: { span: 22 },
                          }"
                          :prop="`roomIds[${aindex}].livingCustomers2[${index}].gender`"
                        >
                          <a-select placeholder="性别" v-model="item.gender">
                            <a-select-option :value="1"> 男 </a-select-option>
                            <a-select-option :value="2"> 女 </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="4">
                        <a-form-model-item
                          :wrapperCol="{
                            xs: { span: 24 },
                            sm: { span: 22 },
                          }"
                          :prop="`roomIds[${aindex}].livingCustomers2[${index}].certType`"
                        >
                          <a-select placeholder="证件" v-model="item.certType">
                            <a-select-option :value="1">
                              身份证
                            </a-select-option>
                            <a-select-option :value="2"> 护照 </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="6">
                        <a-form-model-item
                          :wrapperCol="{
                            xs: { span: 24 },
                            sm: { span: 23 },
                          }"
                          :prop="`roomIds[${aindex}].livingCustomers2[${index}].certNo`"
                          :rules="[
                            {
                              required: true,
                              message: '请输入证件号!',
                              trigger: 'change',
                            },
                          ]"
                        >
                          <a-input
                            v-model="item.certNo"
                            placeholder="证件号"
                          ></a-input>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="6">
                        <a-form-model-item
                          :wrapperCol="{
                            xs: { span: 24 },
                            sm: { span: 24 },
                          }"
                          :prop="`roomIds[${aindex}].livingCustomers2[${index}].phone`"
                          :rules="[
                            {
                              required: true,
                              message: '请输入手机号!',
                              trigger: 'change',
                            },
                          ]"
                        >
                          <a-input
                            v-model="item.phone"
                            placeholder="手机号"
                            style="width: 120px"
                          ></a-input>
                          <a-icon
                            type="minus-circle"
                            style="color: #f56c6c"
                            class="dynamic-delete-button"
                            v-if="room.livingCustomers2.length > 0"
                            @click="() => remove(room, index)"
                          />
                        </a-form-model-item>
                      </a-col>
                    </template>
                  </a-tab-pane>
                  <div slot="tabBarExtraContent">
                    <a-button type="link" @click="pulsRoom()">
                      增加房间
                    </a-button>
                  </div>
                </a-tabs>

                <h4
                  style="
                    color: rgba(255, 141, 26, 1);
                    font-weight: 600;
                    margin-top: 20px;
                  "
                >
                  入住信息
                </h4>
                <a-divider />
                <a-col :span="12">
                  <a-form-model-item
                    label="入住类型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.bookingType"
                  >
                    <a-select
                      placeholder="入住类型"
                      v-model="model.orderInfo.bookingType"
                      @change="bookingTypeChange"
                    >
                      <a-select-option :value="1"> 全天 </a-select-option>
                      <a-select-option :value="2"> 钟点 </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="订单来源"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.customerSource"
                  >
                    <a-select
                      placeholder="订单来源"
                      v-model="model.orderInfo.customerSource"
                    >
                      <a-select-option
                        :value="item.id"
                        v-for="(item, index) in customerSourceList"
                        :key="item.id"
                      >
                        {{ item.itemText }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12" v-if="model.orderInfo.bookingType == 2">
                  <a-form-model-item
                    label="时长"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.hourRoomId"
                  >
                    <a-select
                      placeholder="时长"
                      v-model="model.orderInfo.hourRoomId"
                      @change="hourRoomIdChange"
                    >
                      <a-select-option
                        :value="item.id"
                        v-for="(item, index) in hourRoomRuleList"
                        :key="item.id"
                      >
                        {{ item.hourRoomName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12" v-else>
                  <a-form-model-item
                    label="天数"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.dayCount"
                  >
                    <a-input-number
                      v-model="model.orderInfo.dayCount"
                      placeholder="天数"
                      :min="1"
                      @change="dayCountChange"
                    ></a-input-number
                    >天
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="外部单号"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.outerOrdersNo"
                  >
                    <a-input
                      v-model="model.orderInfo.outerOrdersNo"
                      placeholder="外部单号"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="入住时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.arrivalTime2"
                  >
                    <j-date
                      placeholder="入住时间"
                      v-model="model.orderInfo.arrivalTime2"
                      style="width: 120px"
                      :allowClear="false"
                      :disabled-date="disabledDate"
                      @change="arrivalTimeChange"
                    />
                    <a-time-picker
                      style="width: 80px; margin-left: 2px"
                      v-model="model.orderInfo.arrivalTimeSpan"
                      :default-value="moment('12:00', 'HH:mm')"
                      format="HH:mm"
                      :allowClear="false"
                      @change="arrivalTimeSpanChange"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="预离时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.dueOutTime2"
                  >
                    <j-date
                      placeholder="预离时间"
                      v-model="model.orderInfo.dueOutTime2"
                      style="width: 120px"
                      :allowClear="false"
                      :disabled-date="disabledDate"
                      :disabled="model.orderInfo.bookingType === 2"
                      @change="arrivalTimeChange2"
                    />
                    <a-time-picker
                      style="width: 80px; margin-left: 2px"
                      v-model="model.orderInfo.dueOutTimeSpan"
                      format="HH:mm"
                      :allowClear="false"
                      :disabled="model.orderInfo.bookingType === 2"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="宾客类型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.customerType"
                  >
                    <a-select
                      placeholder="宾客类型"
                      v-model="model.orderInfo.customerType"
                    >
                      <a-select-option :value="1"> 散客 </a-select-option>
                      <a-select-option :value="2"> 会员 </a-select-option>
                      <a-select-option :value="3"> 协议单位 </a-select-option>
                      <a-select-option :value="4"> 中介 </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12" v-if="model.orderInfo.customerType === 2">
                  <a-form-model-item
                    label="会员"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.roomPriceSlnId"
                  >
                    <a-select
                      placeholder="会员"
                      option-label-prop="label"
                      v-model="model.orderInfo.roomPriceSlnId"
                      @change="roomPriceSlnIdChange"
                    >
                      <a-select-option
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                        v-for="(item, index) in busMemberCardList"
                      >
                        {{ item.name }}-{{ item.gradeName }}-{{ item.balance }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="房价方案"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.roomPriceSlnId"
                  >
                    <a-select
                      placeholder="房价方案"
                      v-model="model.orderInfo.roomPriceSlnId"
                    >
                      <a-select-option value="会员价"> 会员价 </a-select-option>
                      <a-select-option value="平日价"> 平日价 </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="销售员工"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.warranter"
                  >
                    <a-select
                      placeholder="销售员工"
                      v-model="model.orderInfo.warranter"
                    >
                      <a-select-option
                        :value="item.id"
                        v-for="item in warranterList"
                        :key="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item
                    label="早餐数量"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.breakfastNum"
                  >
                    <a-input-number
                      v-model="model.orderInfo.breakfastNum"
                      placeholder="早餐数量"
                      :min="0"
                    ></a-input-number
                    >份
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item
                    label="订单备注"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                    :wrapperCol="{
                      xs: { span: 24 },
                      sm: { span: 15 },
                    }"
                    prop="orderInfo.remark"
                  >
                    <a-textarea
                      v-model="model.orderInfo.remark"
                      rows="4"
                      placeholder="订单备注"
                    />
                  </a-form-model-item>
                </a-col>
              </div>
              <div style="width: 43%">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <h4
                    style="
                      color: rgba(255, 141, 26, 1);
                      font-weight: 600;
                      margin-top: 15px;
                    "
                  >
                    财务信息
                  </h4>
                  <div>
                    <a-switch v-model="depositSplit" />押金均摊记账到每个房间
                  </div>
                </div>
                <a-divider />
                <a-table
                  :columns="columns"
                  :data-source="model.roomPrices"
                  :pagination="false"
                  rowKey="id"
                  :scroll="{ y: 200, x: 500 }"
                >
                  <template slot="prefPrice" slot-scope="text, record, index">
                    <editable-cell
                      :text="text"
                      @change="onCellChange('prefPrice', index, $event)"
                    />
                  </template>
                </a-table>
                <div
                  style="
                    color: rgba(255, 87, 51, 1);
                    font-weight: 600;
                    text-align: right;
                  "
                >
                  合计应收：{{ amount.toFixed(2) }}
                </div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 30px;
                  "
                >
                  <!-- <h4
                    style="
                      color: rgba(255, 141, 26, 1);
                      font-weight: 600;
                      margin-top: 15px;
                    "
                  >
                    收款
                  </h4> -->
                  <a-tabs
                    default-active-key="1"
                    @change="paymentTabsChange"
                    :tabBarStyle="{ fontWeight: 600 }"
                  >
                    <a-tab-pane key="1" tab="收款">
                      <a-table
                        :columns="columns2"
                        :data-source="model.orderFees"
                        :pagination="false"
                        rowKey="id"
                        :scroll="{ y: 160 }"
                      >
                        <template
                          slot="subjectTypeLabel"
                          slot-scope="text, record, index"
                        >
                          <div>
                            <!-- <a-input
                        style="margin: -5px 0"
                        :value="text"
                        @change="
                          (e) => handleChange(e.target.value, index, 'subjectTypeLabel')
                        "
                      /> -->
                            <a-select
                              v-model="model.orderFees[index].subjectType"
                              placeholder="费项"
                            >
                              <a-select-option :value="2">
                                房费
                              </a-select-option>
                              <a-select-option :value="1">
                                押金
                              </a-select-option>
                            </a-select>
                          </div>
                        </template>
                        <template
                          slot="payType"
                          slot-scope="text, record, index"
                        >
                          <div>
                            <a-select
                              v-model="model.orderFees[index].payType"
                              placeholder="收款方式"
                            >
                              <a-select-option
                                :value="item.id"
                                v-for="item in payTypeList"
                                :key="item.id"
                              >
                                {{ item.name }}
                              </a-select-option>
                            </a-select>
                          </div>
                        </template>
                        <template slot="money" slot-scope="text, record, index">
                          <div>
                            <a-input-number
                              v-model="record.money"
                              :min="1"
                              @change="presetNumChange($event, record)"
                            />
                          </div>
                        </template>
                      </a-table>
                      <div
                        style="color: rgba(255, 141, 26, 1); font-weight: 200"
                      >
                        <!-- <p style="margin-bottom: 2px">
                          实收：支付宝600.00元；微信292.00元；现金1000.00元；会员卡400元。
                        </p> -->
                        <p style="margin-bottom: 2px">
                          合计实款：{{ orderFeesAmout.toFixed(2) }}
                        </p>
                      </div>
                      <div
                        style="color: rgba(255, 87, 51, 1); font-weight: 200"
                      >
                        <p v-if="orderFeesArrearsAmout < 0">
                          欠费:{{ orderFeesArrearsAmout.toFixed(2) }}元
                        </p>
                      </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="信用卡预授权">
                      <a-row
                        v-for="(item, index) in payPalModel.list"
                        :key="index"
                      >
                        <a-col :span="9">
                          <a-form-model-item
                            :labelCol="{
                              xs: { span: 24 },
                              sm: { span: 5 },
                            }"
                            :wrapperCol="{
                              xs: { span: 24 },
                              sm: { span: 22 },
                            }"
                            prop="key1"
                          >
                            <a-input
                              v-model="item.key1"
                              placeholder="银行卡号"
                            ></a-input>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="9">
                          <a-form-model-item
                            :labelCol="{
                              xs: { span: 24 },
                              sm: { span: 5 },
                            }"
                            :wrapperCol="{
                              xs: { span: 24 },
                              sm: { span: 22 },
                            }"
                            prop="key2"
                          >
                            <a-input
                              v-model="item.key2"
                              placeholder="预授权号"
                              :min="1"
                            ></a-input>
                          </a-form-model-item>
                        </a-col>
                        <a-col :span="6">
                          <a-form-model-item
                            :labelCol="{
                              xs: { span: 24 },
                              sm: { span: 5 },
                            }"
                            :wrapperCol="{
                              xs: { span: 24 },
                              sm: { span: 22 },
                            }"
                            prop="key3"
                          >
                            <a-input-number
                              v-model="item.key3"
                              placeholder="金额"
                              :min="1"
                            ></a-input-number>
                          </a-form-model-item>
                        </a-col>
                      </a-row>
                    </a-tab-pane>
                    <div slot="tabBarExtraContent">
                      <a-switch v-model="paymentSplit" />押金、房费分开收款
                      <a-button type="link" @click="pulsFee">
                        添加费项
                      </a-button>
                    </div>
                  </a-tabs>
                </div>
              </div>
            </div>
          </div>
        </a-row>
      </a-form-model>
    </j-form-container>
    <select-room-form-modal
      ref="modalSelectRoomForm"
      @ok="modalFormOk"
    ></select-room-form-modal>
  </a-spin>
</template>

<script>
import { httpAction, getAction, postAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import moment from "moment";
import EditableCell from "./EditableCell.vue";
import SelectRoomFormModal from "./SelectRoomFormModal.vue";
const columns = [
  // {
  //     title: "",
  //     dataIndex: "key",
  //     width: 20,
  //   },
  {
    title: "房间号",
    dataIndex: "roomNo",
    width: 70,
  },
  {
    title: "房型",
    dataIndex: "layoutName",
    width: 80,
  },
  {
    title: "门市价",
    dataIndex: "marketPrice",
    width: 60,
  },
  {
    title: "优惠价",
    dataIndex: "prefPrice",
    width: 120,
    scopedSlots: { customRender: "prefPrice" },
  },
  {
    title: "天数",
    dataIndex: "day",
    width: 60,
  },
  {
    title: "房费",
    dataIndex: "roomFee",
    width: 80,
  },
  {
    title: "押金",
    dataIndex: "deposit",
    // width: 60,
  },
];

const columns2 = [
  {
    title: "费项",
    dataIndex: "subjectType",
    width: "25%",
    scopedSlots: { customRender: "subjectTypeLabel" },
  },
  {
    title: "收款方式",
    dataIndex: "payType",
    width: "25%",
    scopedSlots: { customRender: "payType" },
  },
  {
    title: "应缴",
    dataIndex: "receivable",
    width: "25%",
  },
  {
    title: "实收",
    dataIndex: "money",
    width: "25%",
    scopedSlots: { customRender: "money" },
  },
];
const data = [];
for (let i = 0; i < 2; i++) {
  data.push({
    id: i,
    key1: `100${i}`,
    key2: "双人床",
    key3: 298,
    key4: 298,
    key5: 2,
    key6: 298,
    key7: 298,
  });
}
const data2 = [];
for (let i = 0; i < 2; i++) {
  data2.push({
    id: i,
    key1: "押金",
    key2: "支付宝",
    key3: 298,
    key4: 298,
  });
}
const panes = [
  { roomNo: "1001", content: "", id: "1001" },
  { roomNo: "1002", content: "", id: "1002" },
];
const date = new Date();
const endDate = new Date(date.setDate(date.getDate() + 1));
export default {
  name: "BillRoomForm",
  components: { EditableCell, SelectRoomFormModal },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      payPalModel: { list: [{ key1: "", key2: "", key3: "" }] },
      depositSplit: true,
      paymentSplit: true,
      activeKey: "",
      newTabIndex: 0,
      selectedRowKeys: [],
      // data,
      columns,
      // data2,
      columns2,
      wakeList: [{}],
      // model: { rooms: panes, data: data, data2: data2 },
      modelDefault: {},
      model: {
        // data: data,
        orderInfo: {
          rooms: panes,
          data: data,
          data2: data2,
          bookingOrdersType: 1,
          arrivalTime2: moment(new Date()).format("YYYY-MM-DD"),
          dueOutTime2: moment(endDate).format("YYYY-MM-DD"),
          arrivalTimeSpan: moment("18:00", "HH:mm"),
          dueOutTimeSpan: moment("12:00", "HH:mm"),
          bookingType: 1,
          dayCount: 1,
          warrantType: 1,
          hourRoomId: "",
          breakfastNum: 0,
          vipCustomerId: "",
        },
        roomIds: [],
        livingRoomDayPrices: [],
        roomPrices: [],
        orderFees: [],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        "orderInfo.bookingType": [
          { required: true, message: "请选择入住类型!" },
        ],
        "orderInfo.arrivalTime2": [
          { required: true, message: "请选择入住时间!" },
        ],
        "orderInfo.dueOutTime2": [
          { required: true, message: "请选择预离时间!" },
        ],
        "orderInfo.customerSource": [
          { required: true, message: "请选择客人来源!" },
        ],
        "orderInfo.bookingDicWay": [
          { required: true, message: "请选择预定方式!" },
        ],
        "orderInfo.customerType": [
          { required: true, message: "请选择客人类型!" },
        ],
        contactName: [{ required: true, message: "请输入联系人!" }],
        phone: [{ required: true, message: "请输入电话!" }],
      },
      url: {
        add: "business/busRoomBookingOrders/living",
        edit: "business/busRoomBookingOrders/living",
        queryById: "/business/busMeetingRoom/queryById",
      },
      result: [],
      selectIndex: 0,
      customerSourceList: [],
      bookingdicWayList: [],
      warranterList: [],
      hourRoomRuleList: [],
      canUserRooms: [],
      customerList: [],
      oldcustomerList: [],
      depositRule: {},
      roomLayoutList: [],
      amount: 0,
      roomIdsIndex: 0,
      busMemberCardList: [],
      payTypeList: [],
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
    orderFeesAmout() {
      var sum = 0;
      this.model.orderFees.forEach((item) => {
        sum += item.money;
      });
      return sum;
    },
    orderFeesArrearsAmout() {
      return this.orderFeesAmout - this.amount;
    },
  },
  created() {
    var _info = JSON.parse(localStorage.getItem("storeInfo"));
    if (_info) {
      this.model.hotelId = _info.id;
    }
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    getAction("/business/busDictItem/list", {
      hotelId: _info.id,
      dictId: "1639538915239743490",
    }).then((res) => {
      if (res.success) {
        this.customerSourceList = res.result.records;
      }
    });
    getAction("/business/busDictItem/list", {
      hotelId: _info.id,
      dictId: "1639544187093995521",
    }).then((res) => {
      if (res.success) {
        this.bookingdicWayList = res.result.records;
      }
    });
    getAction("/business/busSalesPerson/list", {
      hotelId: _info.id,
      pageNo: 1,
      pageSize: 100,
    }).then((res) => {
      if (res.success) {
        this.warranterList = res.result.records;
      }
    });

    getAction("/rooms/cesHourRoomRule/list", {
      pageNo: 1,
      pageSize: 100,
    }).then((res) => {
      if (res.success) {
        this.hourRoomRuleList = res.result.records;
      }
    });
    getAction("/bus/busCustomer/list", {}).then((res) => {
      if (res.success) {
        this.customerList = res.result.records;
        this.oldcustomerList = JSON.parse(JSON.stringify(this.customerList));
      }
    });
    getAction("/business/busDepositSetting/queryByHotelId", {
      hotelId: _info.id,
    }).then((res) => {
      if (res.success) {
        this.depositRule = res.result;
      }
    });
    getAction("/business/busMemberCard/list", {
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        this.busMemberCardList = res.result.records;
      }
    });

    postAction("/rooms/cesAllDayPriceRule/fetch", { hotelId: _info.id }).then(
      (res) => {
        if (res.success) {
          if (
            res.result &&
            res.result.cesAllDayPriceRule &&
            res.result.cesAllDayPriceRule.leaveTime
          ) {
            this.model.orderInfo.dueOutTimeSpan = moment(
              res.result.cesAllDayPriceRule.leaveTime,
              "HH:mm"
            );
          }
        }

        this.loadRooms();
      }
    );
    //  this.getcesRoomLayout();
  },
  methods: {
    presetNumChange(e, record) {
      console.log(e, record);
    },
    async getcesRoomLayout() {
      await getAction("/rooms/cesRoomLayout/list", {
        pageSize: 99999,
        pageNo: 1,
      }).then((res) => {
        if (res.success) {
          this.roomLayoutList = res.result.records;
          console.log("roomLayoutList");
        }
      });
    },
    async getbusRoomPayType() {
      await getAction("/business/busRoomPayType/list", {
        pageSize: 99999,
        pageNo: 1,
      }).then((res) => {
        if (res.success) {
          this.payTypeList = res.result.records;
        }
      });
    },
    roomPriceSlnIdChange(e) {
      this.model.orderInfo.vipCustomerId = e;
    },
    loadRooms() {
      // this.model.roomPrices = [];
      // this.model.roomIds = [];
      this.amount = 0;
      getAction("/rooms/cesRooms/can-user-rooms", {
        startOf:
          this.model.orderInfo.arrivalTime2 +
          " " +
          moment(this.model.orderInfo.arrivalTimeSpan).format("HH:mm"),
        endOf:
          this.model.orderInfo.dueOutTime2 +
          " " +
          moment(this.model.orderInfo.dueOutTimeSpan).format("HH:mm"),
        bookingType: this.model.orderInfo.bookingType,
        hourRoomRuleId: this.model.orderInfo.hourRoomId,
        cancelLayout: true,
      }).then((res) => {
        if (res.success) {
          res.result.forEach((t) => {
            // t.layout = Object.assign({}, t.layout, {
            //   presetNum: 0,
            //   oldTags: t.layout.canUseCount,
            // });
            t.buildingRooms.forEach((b) => {
              b.floorRooms.forEach((f) => {
                this.$set(f, "check", 0);
              });
            });
          });
          this.canUserRooms = res.result;
        }
      });
    },
    hourRoomIdChange() {
      if (this.model.orderInfo.bookingType === 2) {
        var find = this.hourRoomRuleList.find(
          (t) => t.id === this.model.orderInfo.hourRoomId
        );
        if (find) {
          var mDate = moment(
            this.model.orderInfo.arrivalTime2 +
              " " +
              moment(this.model.orderInfo.arrivalTimeSpan).format("HH:mm")
          ).add(find.afterOpenRoom, "minutes");
          this.model.orderInfo.dueOutTime2 = mDate.format("YYYY-MM-DD");

          this.model.orderInfo.dueOutTimeSpan = moment(
            mDate.format("HH:mm"),
            "HH:mm"
          );
        }
      }
      this.loadRooms();
    },
    bookingTypeChange(e) {
      if (this.model.orderInfo.bookingType == 1) {
        this.model.orderInfo.hourRoomId = "";
      } else {
        var hourRoomRule = this.hourRoomRuleList[0];
        if (hourRoomRule) {
          this.model.orderInfo.hourRoomId = hourRoomRule.id;
        }
      }
      if (this.model.orderInfo.bookingType === 2) {
        var find = this.hourRoomRuleList.find(
          (t) => t.id === this.model.orderInfo.hourRoomId
        );
        if (find) {
          var mDate = moment(
            this.model.orderInfo.arrivalTime2 +
              " " +
              moment(this.model.orderInfo.arrivalTimeSpan).format("HH:mm")
          ).add(find.afterOpenRoom, "minutes");
          this.model.orderInfo.dueOutTime2 = mDate.format("YYYY-MM-DD");

          this.model.orderInfo.dueOutTimeSpan = moment(
            mDate.format("HH:mm"),
            "HH:mm"
          );
        }
      } else if (this.model.orderInfo.bookingType === 1) {
        var mDate = moment(this.model.orderInfo.arrivalTime2).add(1, "days");
        this.model.orderInfo.dueOutTime2 = mDate.format("YYYY-MM-DD");
      }
      this.loadRooms();
    },
    dayCountChange(e) {
      this.model.orderInfo.dueOutTime2 = moment(
        this.model.orderInfo.arrivalTime2
      )
        .add(e, "days")
        .format("YYYY-MM-DD");
      this.loadRooms();
    },
    disabledDate(current) {
      return current && current < moment().add(-1, "days").endOf("day");
    },
    arrivalTimeChange(e) {
      var v = parseInt(
        (new Date(this.model.orderInfo.dueOutTime2).getTime() -
          new Date(this.model.orderInfo.arrivalTime2).getTime()) /
          (1000 * 60 * 60 * 24)
      );
      if (v <= 0) {
        this.model.orderInfo.dueOutTime2 = moment(
          this.model.orderInfo.arrivalTime2
        )
          .add(1, "days")
          .format("YYYY-MM-DD");
      }
      v = parseInt(
        (new Date(this.model.orderInfo.dueOutTime2).getTime() -
          new Date(this.model.orderInfo.arrivalTime2).getTime()) /
          (1000 * 60 * 60 * 24)
      );
      this.model.orderInfo.dayCount = Math.abs(v);
      this.loadRooms();
    },
    arrivalTimeChange2(e) {
      var v = parseInt(
        (new Date(this.model.orderInfo.dueOutTime2).getTime() -
          new Date(this.model.orderInfo.arrivalTime2).getTime()) /
          (1000 * 60 * 60 * 24)
      );
      if (v <= 0) {
        this.model.orderInfo.arrivalTime2 = moment(
          this.model.orderInfo.dueOutTime2
        )
          .add(-1, "days")
          .format("YYYY-MM-DD");
      }
      v = parseInt(
        (new Date(this.model.orderInfo.dueOutTime2).getTime() -
          new Date(this.model.orderInfo.arrivalTime2).getTime()) /
          (1000 * 60 * 60 * 24)
      );
      this.model.orderInfo.dayCount = Math.abs(v);
      this.loadRooms();
    },
    arrivalTimeSpanChange(m, time) {
      console.log(time);
      console.log(moment(m).format("HH:mm"));
      if (this.model.orderInfo.bookingType === 2) {
        var find = this.hourRoomRuleList.find(
          (t) => t.id === this.model.orderInfo.hourRoomId
        );
        if (find) {
          var mDate = moment(
            this.model.orderInfo.arrivalTime2 +
              " " +
              moment(this.model.orderInfo.arrivalTimeSpan).format("HH:mm")
          ).add(find.afterOpenRoom, "minutes");
          this.model.orderInfo.dueOutTime2 = mDate.format("YYYY-MM-DD");

          this.model.orderInfo.dueOutTimeSpan = moment(
            mDate.format("HH:mm"),
            "HH:mm"
          );
        }
      }
      this.loadRooms();
    },
    handleSearch(value) {
      let result;
      if (!value) {
        result = this.oldcustomerList;
      } else {
        result = this.oldcustomerList.filter((t) => t.name.includes(value));
      }
      this.customerList = result;
    },
    handleSelectMember(room, e) {
      var find = this.customerList.find((t) => t.id === e);
      room.key1 = find.name;
      room.key2 = 1;
      room.key3 = "汉";
      // room.key4 = find.phone;
      room.key5 = find.phone;
      // room.key6 = "火星";
      this.$set(room, "customerId", find.id);
    },
    pulsRoom() {
      this.$refs.modalSelectRoomForm.add(this.canUserRooms);
      this.$refs.modalSelectRoomForm.title = "选择房间";
      this.$refs.modalSelectRoomForm.disableSubmit = false;
    },
    paymentTabsChange(e) {},
    pulsFee() {
      var payType = this.payTypeList[0];
      this.model.orderFees.push({
        subjectType: 2,
        subjectTypeLabel: "预收房费",
        payType: payType ? payType.id : "",
        payTypeLabel: payType ? payType.name : "",
        receivable: 0,
        money: 0,
        roomId: this.model.orderFees[0].roomId,
      });
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.model.roomPrices];
      const target = dataSource[dataIndex];
      console.log("target", target);
      if (target) {
        target[key] = value;
        target.roomFee = value * target.day;
        target.deposit = this.compuleDeposit(value);
        this.model.roomPrices = dataSource;
      }

      var sum = 0;
      this.model.roomPrices.forEach(function (item) {
        sum += item.roomFee + item.deposit;
      });
      this.amount = sum;
      console.log("this.model.roomPrices", this.model.roomPrices);
    },
    // handleChange(value, index, column) {
    //   const newData = [...this.data2];
    //   const target = newData[index];
    //   if (target) {
    //     target[column] = value;
    //     this.data2 = newData;
    //   }
    // },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    add() {
      console.log(1);
      const panes = this.panes;
      const activeKey = `newTab${this.newTabIndex++}`;
      panes.push({
        title: `New Tab ${activeKey}`,
        content: "",
        key: activeKey,
      });
      this.panes = panes;
      this.activeKey = activeKey;
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handleAdd() {},
    puls(room) {
      if (!room.livingCustomers2) {
        this.$set(room, "livingCustomers2", [
          { gender: 1, certType: 1, roomId: room.id },
        ]);
      } else {
        room.livingCustomers2.push({ gender: 1, certType: 1, roomId: room.id });
      }
    },
    remove(room, index) {
      room.livingCustomers2.splice(index, 1);
    },
    moment,
    onChange(e) {
      console.log(e);
    },
    add2(roomLive) {
      this.modelDefault = Object.assign({}, this.modelDefault, {
        roomIds: [roomLive],
      });
      this.edit(this.modelDefault);
    },
    editTabs(e) {
      console.log("editTabs", e);
      var index = this.model.roomIds.findIndex((t) => t.id == e);
      this.model.roomIds.splice(index, 1);
    },
    tabClick(e) {
      console.log("tabClick", e);
      var index = this.model.roomIds.findIndex((t) => t.id == e);
      this.roomIdsIndex = index;
    },
    modalFormOk(e) {
      console.log("e", e);
      this.modelDefault = Object.assign({}, this.modelDefault, {
        roomIds: e,
      });
      this.edit(this.modelDefault);
    },
    compuleDeposit(prefPrice) {
      var deposit = 0;
      if (this.depositRule) {
        if (this.depositRule.depositType === 1) {
          deposit = prefPrice * this.depositRule.depositMultiple;
        } else if (this.depositRule.depositType === 2) {
          deposit = prefPrice + this.depositRule.depositMultiple;
        } else if (this.depositRule.depositType === 3) {
          deposit = this.depositRule.depositMoney;
        }
      }
      return deposit;
    },
    getSubjectTypeLabel(value) {
      switch (value) {
        case 1:
          return "押金";
        case 2:
          return "预收房费";
        default:
          return "";
      }
    },
    addList(roomLiveList, key) {
      console.log("roomLiveList", roomLiveList);
      this.modelDefault = Object.assign({}, this.modelDefault, {
        roomIds: roomLiveList,
      });
      this.modelDefault.orderInfo.bookingOrdersType = key;
      this.edit(this.modelDefault);
    },
    async edit(record) {
      console.log("edit");
      this.visible = true;
      this.model = Object.assign({}, record);
      console.log("this.model", this.model);
      if (this.roomLayoutList.length === 0) {
        await this.getcesRoomLayout();
      }
      if (this.payTypeList == 0) {
        await this.getbusRoomPayType();
      }
      if (this.model.roomIds && this.model.roomIds.length > 0) {
        this.activeKey = this.model.roomIds[0].id;

        var roomPrices = [];
        var orderFees = [];
        this.model.roomIds.forEach((item) => {
          var roomLayout = this.roomLayoutList.find(
            (t) => (t.id = item.layoutId)
          );
          roomPrices.push({
            roomNo: item.name,
            roomId: item.id,
            marketPrice: item.marketPrice,
            prefPrice: item.marketPrice,
            day: this.model.orderInfo.dayCount,
            roomFee: item.marketPrice * this.model.orderInfo.dayCount,
            deposit: this.compuleDeposit(item.marketPrice),
            layoutName: roomLayout ? roomLayout.name : "",
            layoutId: item.layoutId,
          });
          var payType = this.payTypeList[0];

          orderFees.push({
            subjectType: 2,
            subjectTypeLabel: "预收房费",
            payType: payType ? payType.id : "",
            payTypeLabel: payType ? payType.name : "",
            receivable: item.marketPrice,
            money: item.marketPrice,
            roomId: item.id,
          });
          var deposit = this.compuleDeposit(item.marketPrice);
          if (deposit > 0) {
            orderFees.push({
              subjectType: 1,
              subjectTypeLabel: "押金",
              payType: payType ? payType.id : "",
              payTypeLabel: payType ? payType.name : "",
              receivable: deposit,
              money: deposit,
              roomId: item.id,
            });
          }
        });
        this.model.roomPrices = roomPrices;
        var sum = 0;
        this.model.roomPrices.forEach(function (item) {
          sum += item.roomFee + item.deposit;
        });
        this.amount = sum;

        this.model.orderFees = orderFees;
        console.log("this.model", this.model);
      }
      // console.log("this.amount2", JSON.stringify(this.amount));
    },
    submitForm() {
      const that = this;
      that.model.livingRoomDayPrices = [];
      console.log("that.model.roomPrices", that.model.roomPrices);
      that.model.roomPrices.forEach((t) => {
        for (var b = 0; b < that.model.orderInfo.dayCount; b++) {
          var dayTime = moment(this.model.orderInfo.arrivalTime2)
            .add(b, "days")
            .format("YYYY-MM-DD");
          that.model.livingRoomDayPrices.push({
            livingType: 1,
            dayTime: dayTime,
            price: t.prefPrice,
            roomLayoutId: t.layoutId,
            roomId: t.roomId,
          });
        }
      });
      that.model.roomIds.forEach((t) => {
        t.roomId = t.id;
        var obj = {
          certNo: t.key4,
          certType: 1,
          customerId: t.customerId,
          customerName: t.key1,
          gender: t.key2,
          phone: t.key5,
          roomId: t.id,
        };
        if (!t.livingCustomers2 || t.livingCustomers2.length == 0) {
          t.livingCustomers = [obj];
        } else {
          t.livingCustomers = [...[obj], ...t.livingCustomers2];
        }
      });
      console.log("this.model", this.model);
      if (that.model.roomIds.length <= 0) {
        that.$message.warning("请先添加房间");
        return;
      }
      // 触发表单验证
      this.$refs.form.validate((valid, err) => {
        if (valid) {
          this.model.orderInfo.arrivalTime =
            this.model.orderInfo.arrivalTime2 +
            " " +
            moment(this.model.orderInfo.arrivalTimeSpan).format("HH:mm");
          this.model.orderInfo.dueOutTime =
            this.model.orderInfo.dueOutTime2 +
            " " +
            moment(this.model.orderInfo.dueOutTimeSpan).format("HH:mm");
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
          } else {
            httpurl += this.url.edit;
            method = "put";
          }
          // if (this.model.orderInfo.bookingOrdersId) {
          //   httpurl = "/business/busRoomBookingOrders/add-batch";
          //   method = "post";
          // }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok", res.result);
              } else {
                if (res.message.indexOf("与预约时间有冲突") >= 0) {
                  that.$confirm({
                    title: "提示",
                    content: res.message + "是否确定入住?",
                    onOk: function () {
                      that.model.confirm = true;
                      httpAction(httpurl, that.model, method)
                        .then((res) => {
                          if (res.success) {
                            that.$message.success(res.message);
                            that.$emit("ok", res.result);
                          } else {
                            if (res.message.indexOf("与预约时间有冲突") >= 0) {
                            } else {
                              that.$message.warning(res.message);
                            }
                          }
                        })
                        .finally(() => {
                          that.confirmLoading = false;
                        });
                    },
                  });
                } else {
                  that.$message.warning(res.message);
                }
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        } else {
          console.log(err);
          var keys = Object.keys(err);
          console.log("keys", keys);
          var some = keys.some(
            (t) => t.indexOf("roomIds[" + this.roomIdsIndex + "]") >= 0
          );
          if (!some) {
            this.$message.warning("请输入其他房间必填信息");
          }
        }
      });
    },
  },
};
</script>
<style scoped>
/deep/ .ant-btn-link {
  flex: 1;
  color: rgba(255, 141, 26, 1) !important;
}
/deep/ .ant-btn-background-ghost {
  color: rgba(0, 0, 0, 0.45) !important;
}
.menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
  margin-top: 12px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  /* top: 4px; */
  margin-left: 5px;
  font-size: 18px;
  color: #1890ff;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
/deep/.ant-table-thead > tr > th {
  background: rgba(42, 130, 228, 1);
  color: #ffffff;
}
/deep/.ant-divider-horizontal {
  margin: 12px 0 !important;
}
/deep/ .ant-table-tbody .ant-table-row td {
  padding-top: 5px;
  padding-bottom: 5px;
}
/deep/.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 5px 5px !important;
  overflow-wrap: break-word;
}
/deep/ .ant-form-item {
  margin-bottom: 5px !important;
}
/deep/ .ant-tabs-nav .ant-tabs-tab-active {
  color: rgba(255, 141, 26, 1);
}
/deep/.ant-tabs-nav .ant-tabs-tab:hover {
  color: rgba(255, 141, 26, 1);
}
/deep/.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  color: rgba(255, 141, 26, 1);
}
</style>