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;
                        "
                      >
                        宾客信息
                      </h4>
                      <div v-if="model.roomIds&&model.roomIds.length>1"><a-switch v-model="otherRoomSync" />附属房间录入信息</div>
                    </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="12">
                      <a-form-model-item
                        label="姓名"
                        :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                        :wrapperCol="{
                          xs: { span: 24 },
                          sm: { span: 16 },
                        }"
                        :prop="`roomIds[${aindex}].key1`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入姓名!',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-auto-complete style="width: 60%;"
                          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-icon type="contacts" style="font-size: 18px;margin-left: 5px;" @click="readCardNo" />
                        <span style="cursor: pointer;" v-if="room.busMemberCard&&room.busMemberCard.id" @click="showMemberCard(room.busMemberCard)">会员</span>
                        <span style="cursor: pointer;" v-if="room.busMarketAgreementUnit&&room.busMarketAgreementUnit.id" @click="showAgreementUnit(room.busMarketAgreementUnit)"> 协议</span>
                        <span style="cursor: pointer;" v-if="room.ruZhuHistory&&room.ruZhuHistory.phone" @click="showRuZhuHistory(room.ruZhuHistory.phone)"> 客史</span>
                        
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                      <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="6">
                      <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`"
                      >
                        <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`"
                      >
                        <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>
                          <a-icon
                  type="right"
                  v-if="room.invalid"
                  @click="room.invalid=false"
                />
                <a-icon type="down" v-else @click="room.invalid=true" />
                        </div>
                      </div>
                    </a-col>
                    <template v-for="(item, index) in room.livingCustomers2" v-if="!room.invalid">
                      <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="contacts" style="font-size: 18px;margin-left: 5px;" @click="readCardNo" />
                          <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-option :value="3"> 自用 </a-select-option>
                      <a-select-option :value="4"> 免费 </a-select-option>
                      <a-select-option :value="5"> 长租 </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="24" v-if="model.orderInfo.customerType === 2">
                    <a-card :bordered="true" style="width: 100%;padding: 0 !important;">
                      <p>
                        <a-form-model-item
                    label="会员"
                    :labelCol="{
                              xs: { span: 24 },
                              sm: { span: 2 },
                            }"
                            :wrapperCol="{
                              xs: { span: 24 },
                              sm: { span: 22 },
                            }"
                    prop="orderInfo.vipCustomerId"
                  >
                        <a-auto-complete v-model="vipCustomerData.name" @select="(e)=>handleSelectVip(e)" @search="handleSearchVip">
                      <template slot="dataSource">
                        <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>
                      </template>
                    </a-auto-complete>
                    </a-form-model-item>
                      </p>
                      <p>
                        <a-row>
                          <a-col :span="8">名称：{{ vipCustomerData.name }}</a-col>
                          <a-col :span="8">电话：{{ vipCustomerData.mobile }}</a-col>
                          <a-col :span="8">级别：{{ vipCustomerData.gradeName }}</a-col>
                        </a-row>
                        <a-row>
                          <a-col :span="8">余额：{{ vipCustomerData.balance }}</a-col>
                          <a-col :span="8">积分：{{ vipCustomerData.integral }}</a-col>
                          <a-col :span="8">卡号：{{ vipCustomerData.cardNo }}</a-col>
                        </a-row>
                      </p>
                    </a-card>
                </a-col>
                <!-- <a-col :span="12" v-if="model.orderInfo.customerType === 3">
                  <a-form-model-item
                    label="协议单位"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.roomPriceSlnId"
                  >
                    <a-select
                      placeholder="协议单位"
                      option-label-prop="label"
                      v-model="model.orderInfo.contractTeamId"
                      @change="contractTeamIdChange"
                    >
                      <a-select-option
                        :key="item.id"
                        :value="item.id"
                        :label="item.customerName"
                        v-for="(item, index) in busMarketAgreementUnitList"
                      >
                        {{ item.customerName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col> -->
                <!-- <a-col :span="12"></a-col> -->
                <a-col :span="24" v-if="model.orderInfo.customerType === 3">
                  <!-- <a-form-model-item
                    label="协议合同"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.contractTeamProtocolId"
                  >
                    <span style="color:red;cursor: pointer;" @click="showAgreementUnitTable(model.orderInfo.contractTeamId)">{{ model.orderInfo.contractTeamProtocolName }}</span>
                  </a-form-model-item> -->
                  <a-card :bordered="true" style="width: 100%;padding: 0 !important;">
                    <a-row>
                      <a-col :span="12">
                        <a-form-model-item
                    label="协议单位"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.contractTeamId"
                  >
                        <a-auto-complete v-model="agreementUnitData.customerName" @select="(e)=>handleSelectAgreementUnit(e)" @search="handleSearchAgreementUnit">
                      <template slot="dataSource">
                        <a-select-option
                        :key="item.id"
                        :value="item.id"
                        :label="item.customerName"
                        v-for="(item, index) in busMarketAgreementUnitList"
                      >
                      {{ item.customerName }}
                      </a-select-option>
                      </template>
                    </a-auto-complete>
                    </a-form-model-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-model-item
                    label="协议合同"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="orderInfo.contractTeamProtocolId"
                  >
                    <span style="color:red;cursor: pointer;" @click="showAgreementUnitTable(model.orderInfo.contractTeamId)">{{ model.orderInfo.contractTeamProtocolName }}</span>
                  </a-form-model-item>
                        </a-col>
                    </a-row>
                      <p>
                        <a-row>
                          <a-col :span="12">名称：{{ agreementUnitData.customerName }}</a-col>
                          <a-col :span="12">签约开始日期：{{ busMarketAgreementCustomer.signTime }}</a-col>
                          <a-col :span="12">签约结束日期：{{ busMarketAgreementCustomer.effective }}</a-col>
                          <a-col :span="12">可用额度：{{ agreementUnitData.balance||0 }}</a-col>
                        </a-row>
                      </p>
                    </a-card>
                </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">
                    <div>
                      {{text}}<a-icon @click="onCellExpand(index)" style="margin-left:10px;" type="edit" />
                    <!-- <editable-cell
                      :text="text"
                      
                      @change.stop="onCellChange('prefPrice', index, $event)"
                    /> -->
                    </div>
                  </template>
                  <template slot="deposit" slot-scope="text, record, index">
                    <editable-cell
                      :text="text"
                      @change="onCellChangeCopy('deposit', 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="0"
                              @change="presetNumChange($event, record)"
                            />
                          </div>
                        </template>
                      </a-table>
                      <div
                        style="color: rgba(255, 141, 26, 1); font-weight: 200"
                      >
                        <p style="margin-bottom: 2px">
                          <template></template>
                          实收：{{ orderFeesText }}
                        </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 style="display:flex;justify-content: end; margin-top:20px;">

<a-checkbox defaultChecked>打印入住登记单</a-checkbox></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-modal :visible="editPriceModal" title="调价" @cancel="editPriceModal = false" :width="800" @ok="editPriceOk">
      <template v-if="editPriceData.length>0">
      <table v-for="(item, index) in editPriceData" :key="index">
        <tr v-if="index==0">
          <td style="text-align:center;background:#722ed1;color:#fff;">
            <!-- 房号 -->
          </td>
          <td style="text-align:center;background:#722ed1;color:#fff;">
            批量调价
          </td>
          <td style="text-align:center;background:#1890ff;color:#fff;">
            价格调整(元/天)
          </td>
        </tr>
        <th>
          <tr>
            <td style="text-align:center;color:#722ed1;height:60px;width:100px;">
              <div>房号</div>
              <div style="line-height:30px">
                {{item.roomNo}}
              </div>
            </td>
          </tr>
        </th>
        <th>
          <tr>
            <td style="text-align:center;color:#722ed1;height:60px">
              <div>每日房价</div>
              <div>
                <a-input-number :placeholder="item.marketPrice.toString()" @change="batchPrice($event, index)"></a-input-number>
              </div>
            </td>
          </tr>
        </th>
        <th style="display:flex;flex-wrap:wrap;height:60px;overflow: auto;">
          <td v-for="(sItem, sIndex) in item.edit" :key="sIndex">
            <div style="text-align:center;">
              {{sItem.day}}
            </div>
            <div>
              <a-input-number v-model="sItem.price" />
            </div>
          </td>
        </th>
      </table>
      </template>
    </a-modal>
<member-card-modal ref="modalMemberCardInfo"></member-card-modal>
<agreement-unit-modal ref="modalAgreementUnitInfo"></agreement-unit-modal>
<agreement-unit-modal-table ref="modalAgreementUnitTable" @ok="modalAgreementUnitTableOk"></agreement-unit-modal-table>
<history-modal ref="modalHistoryInfo"></history-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";
import MemberCardModal from "./MemberCardModal";
import AgreementUnitModal from "./AgreementUnitModal";
import AgreementUnitModalTable from "./AgreementUnitModalTable";
import HistoryModal from "./HistoryModal";
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: 100,
    scopedSlots: { customRender: "prefPrice" },
  },
  {
    title: "天数",
    dataIndex: "day",
    width: 50,
  },
  {
    title: "房费",
    dataIndex: "roomFee",
    width: 80,
  },
  {
    title: "押金",
    dataIndex: "deposit",
    scopedSlots: { customRender: "deposit" },
    width: 120,
  },
];

const columns2 = [
  {
    title: "费项",
    dataIndex: "subjectType",
    width: "25%",
    scopedSlots: { customRender: "subjectTypeLabel" },
  },
  {
    title: "收款方式",
    dataIndex: "payType",
    width: "25%",
    scopedSlots: { customRender: "payType" },
  },
  {
    title: "应缴",
    dataIndex: "receivable",
    width: "25%",
    scopedSlots: { customRender: "prefPrice" },
  },
  {
    title: "实收",
    dataIndex: "money",
    width: "25%",
    scopedSlots: { customRender: "money" },
  },
];
const date = new Date();
const endDate = new Date(date.setDate(date.getDate() + 1));
export default {
  name: "BillRoomForm",
  components: {
    EditableCell,
    SelectRoomFormModal,
    MemberCardModal,
    AgreementUnitModal,
    AgreementUnitModalTable,
    HistoryModal,
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      editDepositModal: false,
      //会员选中数据
      vipCustomerData: {},
      agreementUnitData: { customerName: "" },
      busMarketAgreementCustomer: {},
      otherRoomSync: true,
      payPalModel: { list: [{ key1: "", key2: "", key3: "" }] },
      depositSplit: true,
      paymentSplit: true,
      activeKey: "",
      PriceData: [],
      newTabIndex: 0,
      //调价弹窗
      editPriceModal: false,
      //调价的索引
      editPriceIndex: null,
      selectedRowKeys: [],
      // data,
      columns,
      // data2,
      columns2,
      wakeList: [{}],
      // model: { rooms: panes, data: data, data2: data2 },
      modelDefault: {},
      model: {
        // data: data,
        orderInfo: {
          rooms: [],
          data: [],
          data2: [],
          bookingOrdersType: 1,
          arrivalTime2: moment(new Date()).format("YYYY-MM-DD"),
          dueOutTime2: moment(endDate).format("YYYY-MM-DD"),
          arrivalTimeSpan: moment(new Date(), "HH:mm"),
          dueOutTimeSpan: moment("12:00", "HH:mm"),
          bookingType: 1,
          dayCount: 1,
          warrantType: 1,
          hourRoomId: "",
          breakfastNum: 0,
          vipCustomerId: "",
          customerType: 1,
          contractTeamProtocolName: "",
          customerSource: "",
        },
        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,
      oldBusMemberCardList: [],
      busMemberCardList: [],
      payTypeList: [],
      busMemberCard: {},
      oldBusMarketAgreementUnitList: [],
      busMarketAgreementUnitList: [],
      ruZhuHistoryList: [],
      remenmberPayState: null,
      loadRemenmberPayState: false,
    };
  },
  computed: {
    editPriceData() {
      // let arr = [];
      // arr.length = this.model.orderInfo.dayCount;
      // for (let i = 0; i < arr.length; i++) {
      //   arr[i] = {
      //     day: this.addDate(this.model.orderInfo.arrivalTime2, i),
      //     price:
      //       (this.model.roomPrices[this.editPriceIndex] &&
      //         this.model.roomPrices[this.editPriceIndex].prefPrice) ||
      //       0,
      //   };
      //   let idx =
      //     this.model.roomPrices[this.editPriceIndex] &&
      //     this.model.roomPrices[this.editPriceIndex].editPriceTime &&
      //     this.model.roomPrices[this.editPriceIndex].editPriceTime.findIndex(
      //       (item) => item == arr[i].day
      //     );
      //   if (idx > -1) {
      //     console.log(idx);
      //     arr[i].price = this.model.roomPrices[this.editPriceIndex].editPrice[idx];
      //   }
      //   arr[i] = {
      //     day: this.addDate(this.model.orderInfo.arrivalTime2, i),
      //     price:0
      //   };
      // }
      let copy = JSON.parse(JSON.stringify(this.model.roomPrices));
      for (let i = 0; i < copy.length; i++) {
        let money = copy[i].prefPrice;
        let brr = [];
        brr.length = this.model.orderInfo.dayCount;
        for (let j = 0; j < brr.length; j++) {
          brr[j] = {
            day: this.addDate(this.model.orderInfo.arrivalTime2, j),
            price: money,
          };
          if (
            this.model.roomPrices[i].editPriceTime &&
            this.model.roomPrices[i].editPriceTime.length > 0
          ) {
            let idx = this.model.roomPrices[i].editPriceTime.findIndex(
              (item) => item == brr[j].day
            );
            if (idx > -1) {
              brr[j].price = this.model.roomPrices[i].editPrice[idx];
            }
          }
        }
        // brr.fill({day: this.addDate(this.model.orderInfo.arrivalTime2, i),price:money})
        // brr[i] = {
        //   day: this.addDate(this.model.orderInfo.arrivalTime2, i),
        //   price:money
        // };
        copy[i].edit = brr;
        copy[i].day = this.model.orderInfo.dayCount;
      }
      this.PriceData = copy;
      return copy;
    },

    formDisabled() {
      return this.disabled;
    },
    orderFeesAmout() {
      var sum = 0;
      this.model.orderFees.forEach((item) => {
        sum += item.money;
      });
      return sum;
    },
    orderFeesArrearsAmout() {
      return this.orderFeesAmout - this.amount;
    },
    orderFeesText() {
      var text = "";
      this.model.orderFees.forEach((item) => {
        var find = this.payTypeList.find((t) => t.id == item.payType);
        if (find) {
          text += find.name + ":" + item.money + "元;";
        }
      });
      return text;
    },
    cPhone() {
      let a = this.model.roomIds.map((t) => t.key5);
      return a;
    },
  },
  watch: {
    otherRoomSync(value) {
      if (!value) {
        if (this.modelDefault.roomIds && this.modelDefault.roomIds.length > 0) {
          if (this.modelDefault.roomIds[0].key1) {
            for (var i = 1; i < this.modelDefault.roomIds.length; i++) {
              var room = this.modelDefault.roomIds[i];
              if (!room.key1) {
                this.$set(room, "key1", this.modelDefault.roomIds[0].key1);
                this.$set(room, "key2", this.modelDefault.roomIds[0].key2);
                this.$set(room, "key3", this.modelDefault.roomIds[0].key3);
                this.$set(room, "key4", this.modelDefault.roomIds[0].key4);
                this.$set(room, "key5", this.modelDefault.roomIds[0].key5);
                this.$set(room, "key6", this.modelDefault.roomIds[0].key6);
                this.$set(
                  room,
                  "customerId",
                  this.modelDefault.roomIds[0].customerId
                );
              }
            }
          }
        }
      }
    },
    depositSplit(value) {
      if (!value) {
        var yajin = this.model.roomPrices.reduce((sum, val) => {
          let total = sum + val.deposit;
          return isNaN(total) ? 0 : total;
        }, 0);
        this.model.roomPrices.forEach((t) => {
          t.deposit = 0;
        });
        this.model.roomPrices[0].deposit = yajin;
      } else {
        this.model.roomPrices.forEach((t) => {
          t.deposit = this.compuleDeposit(t.marketPrice);
        });
      }
    },
    paymentSplit(value) {
      if (this.loadRemenmberPayState) {
        console.log(1111111, this.loadRemenmberPayState);
        if (!value) {
          var list2 = this.model.orderFees.filter(
            (t) => t.subjectType == 2 && (!t.add || t.add != 1)
          );
          var list1 = this.model.orderFees.filter((t) => t.subjectType == 1);
          var list = this.model.orderFees.filter(
            (t) =>
              (t.subjectType != 1 && t.subjectType != 2) ||
              (t.add && t.add == 1)
          );
          list2.forEach((t) => {
            var yjList = list1.filter((b) => b.roomId == t.roomId);
            var yajin = yjList.reduce((sum, val) => {
              let total = sum + val.money;
              return isNaN(total) ? 0 : total;
            }, 0);
            t.yajing = yajin;
            t.money += yajin;
            t.receivable = t.money;
          });
          this.model.orderFees = [...list, ...list2];
        } else {
          // var list2 = this.model.orderFees.filter(
          //   (t) => t.subjectType == 2 && (!t.add || t.add != 1)
          // );
          // var list1 = [];

          // var list = this.model.orderFees.filter(
          //   (t) =>
          //     (t.subjectType != 1 && t.subjectType != 2) || (t.add && t.add == 1)
          // );
          // list2.forEach((t) => {
          //   if (t.yajing && t.yajing > 0) {
          //     t.money -= t.yajing;
          //     t.receivable = t.money;
          //     var item = JSON.parse(JSON.stringify(t));
          //     item.subjectType = 1;
          //     item.money = t.yajing;
          //     item.yajing = 0;
          //     item.receivable = item.money;
          //     list1.push(item);
          //   }
          // });
          // list = [...list, ...list1];
          // this.model.orderFees = [...list, ...list2];
          this.loadOrderFees();
        }
      }
    },
    // "model.roomIds": {
    //   handler(newValue, oldValue) {
    //     console.log(newValue, oldValue);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
    cPhone: {
      handler: function (val, old) {
        console.log(val, old);
        var index = this.model.roomIds.findIndex((t) => t.id == this.activeKey);
        if (index >= 0) {
          var find = this.model.roomIds[index];
          find.busMemberCard = this.busMemberCardList.find(
            (t) => t.mobile == val[index]
          );
          if (!find.busMemberCard) {
            find.busMarketAgreementUnit = this.busMarketAgreementUnitList.find(
              (t) => t.phone == val[index]
            );
          } else {
            find.busMarketAgreementUnit = {};
          }
          if (find.busMemberCard && find.busMemberCard.id) {
            this.model.orderInfo.customerType = 2;
            this.model.orderInfo.roomPriceSlnId = find.busMemberCard.id;
          } else if (
            find.busMarketAgreementUnit &&
            find.busMarketAgreementUnit.id
          ) {
            this.model.orderInfo.customerType = 3;
          } else {
            this.model.orderInfo.customerType = 1;
          }
          if (this.ruZhuHistoryList && this.ruZhuHistoryList.length > 0) {
            find.ruZhuHistory = this.ruZhuHistoryList.find(
              (t) => t.phone == val[index]
            );
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  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;
        if (this.customerSourceList) {
          this.model.orderInfo.customerSource = this.customerSourceList[0].id;
        }
      }
    });
    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;
        this.oldBusMemberCardList = JSON.parse(
          JSON.stringify(this.busMemberCardList)
        );
      }
    });
    getAction("/business/busMarketAgreementUnit/list", {
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        this.busMarketAgreementUnitList = res.result.records;
        this.oldBusMarketAgreementUnitList = JSON.parse(
          JSON.stringify(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();
      }
    );

    getAction("/business/busRoomBookingOrders/ruzhu-history-list", {
      phone: "",
      pageSize: 99999,
      pageNo: 1,
    }).then((res) => {
      if (res.success) {
        this.ruZhuHistoryList = res.result.records;
      }
    });
    //  this.getcesRoomLayout();
  },
  methods: {
    priceInput(e, idx, sidx) {
      console.log(e, idx, sidx);
      this.editPriceData[idx].edit[sidx].price = e;
    },
    handleSearchAgreementUnit(value) {
      let result;
      if (!value) {
        result = this.oldBusMarketAgreementUnitList;
      } else {
        result = this.oldBusMarketAgreementUnitList.filter((t) =>
          t.customerName.includes(value)
        );
      }
      this.busMarketAgreementUnitList = JSON.parse(JSON.stringify(result));
    },
    handleSelectAgreementUnit(value) {
      let result = this.busMarketAgreementUnitList.find((t) => t.id == value);
      this.model.orderInfo.contractTeamId = value;
      this.agreementUnitData = JSON.parse(JSON.stringify(result));
      this.contractTeamIdChange(value);
    },
    handleSearchVip(value) {
      let result;
      if (!value) {
        result = this.oldBusMemberCardList;
      } else {
        console.log("this.oldBusMemberCardList", this.oldBusMemberCardList);
        result = this.oldBusMemberCardList.filter((t) => {
          return (
            t.name.includes(value) ||
            (t.cardNo && t.cardNo.includes(value)) ||
            (t.mobile && t.mobile.includes(value))
          );
        });
      }
      this.busMemberCardList = JSON.parse(JSON.stringify(result));
    },
    handleSelectVip(value) {
      console.log(value);
      let result = this.busMemberCardList.find((t) => t.id == value);
      this.model.orderInfo.vipCustomerId = value;
      this.vipCustomerData = JSON.parse(JSON.stringify(result));
      this.vipCustomerIdChange(result.id);
    },

    loadOrderFees() {
      var arr = [];
      if (!this.loadRemenmberPayState) {
        arr = this.remenmberPayState.split("-");
        this.paymentSplit = arr[0] == "1";
      }
      var orderFees = [];
      var roomIndex = 0;
      var payType = this.payTypeList[0];

      this.model.roomPrices.forEach((item) => {
        var money = item.roomFee;
        var deposit = item.deposit;
        if (!orderFees.some((t) => t.roomId == this.model.roomIds[0].id)) {
          if (!this.paymentSplit) {
            money = item.roomFee + deposit;
          }
          if (!this.paymentSplit) {
            if (arr.length === 3) {
              if (arr[1] == "1") {
                orderFees.push({
                  subjectType: 2,
                  subjectTypeLabel: "预收房费",
                  payType: payType ? payType.id : "",
                  payTypeLabel: payType ? payType.name : "",
                  receivable: money,
                  money: money,
                  roomId: this.model.roomIds[0].id,
                });
              } else if (arr[1] == "2") {
                orderFees.push({
                  subjectType: 1,
                  subjectTypeLabel: "押金",
                  payType: payType ? payType.id : "",
                  payTypeLabel: payType ? payType.name : "",
                  receivable: deposit,
                  money: deposit,
                  roomId: this.model.roomIds[0].id,
                });
              }
            } else {
              orderFees.push({
                subjectType: 2,
                subjectTypeLabel: "预收房费",
                payType: payType ? payType.id : "",
                payTypeLabel: payType ? payType.name : "",
                receivable: money,
                money: money,
                roomId: this.model.roomIds[0].id,
              });
            }
          } else {
            orderFees.push({
              subjectType: 2,
              subjectTypeLabel: "预收房费",
              payType: payType ? payType.id : "",
              payTypeLabel: payType ? payType.name : "",
              receivable: money,
              money: money,
              roomId: this.model.roomIds[0].id,
            });
          }

          if (this.paymentSplit) {
            if (deposit > 0) {
              orderFees.push({
                subjectType: 1,
                subjectTypeLabel: "押金",
                payType: payType ? payType.id : "",
                payTypeLabel: payType ? payType.name : "",
                receivable: deposit,
                money: deposit,
                roomId: this.model.roomIds[0].id,
              });
            }
          }
        } else {
          var find = orderFees.find(
            (t) => t.subjectType == 2 && t.roomId == this.model.roomIds[0].id
          );
          if (find) {
            if (roomIndex == 0) {
              find.money = item.roomFee;
              find.receivable = item.roomFee;
            } else {
              find.money += item.roomFee;
              find.receivable += item.roomFee;
            }
            if (!this.paymentSplit) {
              find.money += deposit;
              find.receivable += deposit;
            }
          }
          if (this.paymentSplit) {
            var find2 = orderFees.find(
              (t) => t.subjectType == 1 && t.roomId == this.model.roomIds[0].id
            );
            if (find2) {
              if (deposit > 0) {
                if (roomIndex == 0) {
                  find2.money = deposit;
                  find2.receivable = deposit;
                } else {
                  find2.money += deposit;
                  find2.receivable += deposit;
                }
              }
            }
          }
        }
        roomIndex++;
      });

      this.model.orderFees = orderFees;
      setTimeout(() => {
        this.loadRemenmberPayState = true;
      }, 100);
    },
    readCardNo() {
      this.$message.error("接口程序未打开，请打开接口程序");
    },
    contractTeamIdChange(e) {
      this.model.orderInfo.contractTeamId = e;
      getAction("/business/busMarketAgreementCustomer/list", {
        agreementId: this.model.orderInfo.contractTeamId,
      }).then((res) => {
        if (res.success) {
          var list = res.result.records;
          if (list && list.length > 0) {
            this.model.orderInfo.contractTeamProtocolName = list[0].name;
            this.model.orderInfo.contractTeamProtocolId = list[0].id;
            this.busMarketAgreementCustomer = list[0];
            var info = list[0];
            if (info.fixedDiscount == 1 && info.discount > 0) {
              if (this.model.roomPrices && this.model.roomPrices.length > 0) {
                var i = 0;
                this.model.roomPrices.forEach((t) => {
                  t.prefPrice = (t.marketPrice * info.discount) / 100;
                  t.roomFee = t.prefPrice * t.day;
                  var editPrice = [];
                  if (t.editPrice && t.editPrice.length > 0) {
                    t.editPrice.forEach((p) => {
                      editPrice.push(t.prefPrice);
                    });
                    t.editPrice = editPrice;
                  }
                  this.editPriceIndex = i;
                  this.editPriceOk();
                  i++;
                  console.log("t", t);
                });
              }
            }
          }
        }
      });
    },
    vipCustomerIdChange(vipCustomerId) {
      var find = this.busMemberCardList.find((t) => t.id == vipCustomerId);
      getAction("/org.jeecg.modules.business/busMarketMember/queryById", {
        id: find.gradeId,
      }).then((res) => {
        if (res.success) {
          var info = res.result;
          if (info) {
            if (info.type == 0 && info.discount > 0) {
              if (this.model.roomPrices && this.model.roomPrices.length > 0) {
                var i = 0;
                this.model.roomPrices.forEach((t) => {
                  t.prefPrice = (t.marketPrice * info.discount) / 100;
                  t.roomFee = t.prefPrice * t.day;
                  var editPrice = [];
                  if (t.editPrice && t.editPrice.length > 0) {
                    t.editPrice.forEach((p) => {
                      editPrice.push(t.prefPrice);
                    });
                    t.editPrice = editPrice;
                  }
                  this.editPriceIndex = i;
                  this.editPriceOk();
                  i++;
                  console.log("t", t);
                });
              }
            }
          }
        }
      });
    },
    modalAgreementUnitTableOk(e) {
      var info = e;
      this.model.orderInfo.contractTeamProtocolName = info.name;
      this.model.orderInfo.contractTeamProtocolId = info.id;
      this.busMarketAgreementCustomer = info;
      if (info.fixedDiscount == 1 && info.discount > 0) {
        if (this.model.roomPrices && this.model.roomPrices.length > 0) {
          var i = 0;
          this.model.roomPrices.forEach((t) => {
            t.prefPrice = (t.marketPrice * info.discount) / 100;
            t.roomFee = t.prefPrice * t.day;
            var editPrice = [];
            if (t.editPrice && t.editPrice.length > 0) {
              t.editPrice.forEach((p) => {
                editPrice.push(t.prefPrice);
              });
              t.editPrice = editPrice;
            }
            this.editPriceIndex = i;
            this.editPriceOk();
            i++;
            console.log("t", t);
          });
        }
      }
    },
    showRuZhuHistory(phone) {
      this.$refs.modalHistoryInfo.add(phone);
      this.$refs.modalHistoryInfo.title = "历史入住信息";
      this.$refs.modalHistoryInfo.disableSubmit = true;
    },
    showMemberCard(busMemberCard) {
      console.log("busMemberCard", busMemberCard);
      this.$refs.modalMemberCardInfo.edit(busMemberCard);
      this.$refs.modalMemberCardInfo.title = "会员信息";
      this.$refs.modalMemberCardInfo.disableSubmit = true;
    },
    showAgreementUnit(busMarketAgreementUnit) {
      console.log("busMarketAgreementUnit", busMarketAgreementUnit);
      this.$refs.modalAgreementUnitInfo.edit(busMarketAgreementUnit);
      this.$refs.modalAgreementUnitInfo.title = "协议单位信息";
      this.$refs.modalAgreementUnitInfo.disableSubmit = true;
    },
    showAgreementUnitTable(agreementId) {
      this.$refs.modalAgreementUnitTable.add(agreementId);
      this.$refs.modalAgreementUnitTable.title = "选择协议";
      this.$refs.modalAgreementUnitTable.disableSubmit = true;
    },
    //批量调价
    batchPrice(e, index) {
      console.log(e);
      // this.editPriceData.forEach((ele) => {
      //   ele.price = e;
      // });
      this.editPriceData[index].edit.forEach((ele) => {
        ele.price = e;
      });
    },

    //根据传入的数字将日期加上对应的天数
    addDate(date, days) {
      console.log(date, days);
      let time = new Date(date);
      time.setDate(time.getDate() + days);
      let m = time.getMonth() + 1;
      let d = time.getDate();
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      return time.getFullYear() + "-" + m + "-" + d;
    },
    /**
     * 点击修改图标时
     */
    onCellExpand(idx) {
      console.log(idx);
      this.editPriceIndex = idx;
      console.log("11111111111111111111111", this.model.roomPrices);
      this.editPriceModal = true;
    },

    /**
     * 修改完成
     */
    editPriceOk() {
      console.log(this.model.roomPrices);
      // this.model.roomPrices[this.editPriceIndex].editPriceTime = [];
      // this.model.roomPrices[this.editPriceIndex].editPrice = [];
      // this.editPriceData.forEach((ele) => {
      //   this.model.roomPrices[this.editPriceIndex].editPriceTime.push(ele.day);
      //   this.model.roomPrices[this.editPriceIndex].editPrice.push(ele.price);
      // });
      // console.log(this.model.roomPrices);
      // this.model.roomPrices[this.editPriceIndex].prefPrice =
      //   this.editPriceData[0].price;
      // this.onCellChange(
      //   "prefPrice",
      //   this.editPriceIndex,
      //   this.editPriceData[0].price
      // );
      // this.editPriceData.forEach((ele) => {
      //   ele.price = 0;
      // });
      this.model.roomPrices = JSON.parse(JSON.stringify(this.editPriceData));
      this.model.roomPrices.forEach((ele, index) => {
        ele.editPriceTime = [];
        ele.editPrice = [];
        ele.edit.forEach((t, tdx) => {
          ele.editPriceTime.push(t.day), ele.editPrice.push(t.price);
        });
        ele.prefPrice = ele.edit[0].price;
      });
      // this.editPriceData.forEach((ele, index) => {
      //   if (this.model.roomPrices[index].roomId==ele.roomId) {
      //     this.model.roomPrices[index].editPriceTime = [];
      //     this.model.roomPrices[index].editPrice = [];
      //     ele.edit.forEach(t=>{
      //       this.model.roomPrices[index].editPriceTime.push(t.day);
      //       this.model.roomPrices[index].editPrice.push(t.price);
      //       this.model.roomPrices[index].prefPrice = ele.edit[0].price;
      //     })
      //       this.onCellChange(
      //         "prefPrice",
      //         index,
      //         ele.edit[0].price
      //       );
      //   }
      // });
      console.log(this.model.roomPrices);
      this.editPriceModal = false;

      var sum = 0;
      var money2 = 0;
      var deposit2 = 0;
      for (var i = 0; i < this.model.roomPrices.length; i++) {
        var money = 0;
        var item = this.model.roomPrices[i];
        if (item.editPrice && item.editPrice.length > 0) {
          item.editPrice.forEach((p) => {
            money += p;
          });
          item.roomFee = money;
          sum += money + item.deposit;
        } else {
          sum += item.roomFee + item.deposit;
        }

        money2 += item.roomFee;
        deposit2 += item.deposit;
        // var find = this.model.orderFees.find(
        //   (t) =>
        //     t.subjectType == 2 &&
        //     t.roomId == this.model.roomPrices[this.editPriceIndex].roomId
        // );
        // if (find && find.roomId == item.roomId) {
        //   find.money = money;
        //   find.receivable = money;
        // }
      }
      var find = this.model.orderFees.find(
        (t) => t.subjectType == 2 && t.roomId == this.model.roomIds[0].id
      );
      if (find) {
        find.money = money2;
        find.receivable = money2;
        if (!this.paymentSplit) {
          find.money += deposit2;
          find.receivable += deposit2;
        }
      }
      var find2 = this.model.orderFees.find(
        (t) => t.subjectType == 1 && t.roomId == this.model.roomIds[0].id
      );
      if (find2) {
        find2.money = deposit2;
        find2.receivable = deposit2;
      }
      this.amount = sum;
    },

    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",
                  this.model.roomIds.some((r) => r.id == f.id) ? 1 : 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) {
      if (e) {
        this.model.orderInfo.dueOutTime2 = moment(
          this.model.orderInfo.arrivalTime2
        )
          .add(e, "days")
          .format("YYYY-MM-DD");
      }
      this.loadRooms();

      // this.edit(this.modelDefault);
      var i = 0;
      this.model.roomPrices.forEach((t) => {
        t.day = this.model.orderInfo.dayCount;
        this.editPriceIndex = i;
        this.editPriceOk();
        i++;
      });
      console.log(this.model.roomPrices);
    },
    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();
      this.dayCountChange();
    },
    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();
      this.dayCountChange();
    },
    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) {
      console.log("room", room);
      var find = this.customerList.find((t) => t.id === e);
      this.$set(room, "key1", find.name);
      this.$set(room, "key2", 1);
      this.$set(room, "key3", "汉");
      this.$set(room, "key5", find.phone);
      this.$set(room, "customerId", find.id);
    },
    pulsRoom() {
      console.log(this.canUserRooms);
      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({
        add: 1,
        subjectType: 2,
        subjectTypeLabel: "预收房费",
        payType: payType ? payType.id : "",
        payTypeLabel: payType ? payType.name : "",
        receivable: 0,
        money: 0,
        roomId: this.model.roomIds[0].id,
      });
    },
    onCellChange(key, dataIndex, value) {
      console.log(key, value);
      console.log(this.model.roomPrices[dataIndex]);
      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);
    },
    onCellChangeCopy(key, dataIndex, value) {
      console.log(key, value);
      console.log(this.depositRule);
      console.log(this.model.roomPrices[dataIndex]);
      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;
      }
      // this.editPriceData.forEach(ele=>{
      //   if (target.roomId==ele.roomId) {
      //     ele.deposit = target.deposit
      //   }
      // })

      var sum = 0;
      var money2 = 0;
      var deposit2 = 0;
      for (var i = 0; i < this.model.roomPrices.length; i++) {
        var money = 0;
        var item = this.model.roomPrices[i];
        if (item.editPrice && item.editPrice.length > 0) {
          item.editPrice.forEach((p) => {
            money += p;
          });
          item.roomFee = money;
          sum += money + item.deposit;
        } else {
          sum += item.roomFee + item.deposit;
        }

        money2 += item.roomFee;
        deposit2 += item.deposit;
        // var find = this.model.orderFees.find(
        //   (t) =>
        //     t.subjectType == 2 &&
        //     t.roomId == this.model.roomPrices[this.editPriceIndex].roomId
        // );
        // if (find && find.roomId == item.roomId) {
        //   find.money = money;
        //   find.receivable = money;
        // }
      }
      var find = this.model.orderFees.find(
        (t) => t.subjectType == 2 && t.roomId == this.model.roomIds[0].id
      );
      if (find) {
        find.money = money2;
        find.receivable = money2;
        if (!this.paymentSplit) {
          find.money += deposit2;
          find.receivable += deposit2;
        }
      }
      var find2 = this.model.orderFees.find(
        (t) => t.subjectType == 1 && t.roomId == this.model.roomIds[0].id
      );
      if (find2) {
        find2.money = deposit2;
        find2.receivable = deposit2;
      }
      this.amount = sum;
    },
    // 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);
      console.log("this.canUserRooms", this.canUserRooms);
      this.canUserRooms.forEach((t) => {
        t.buildingRooms.forEach((b) => {
          b.floorRooms.forEach((f) => {
            if (f.id == e) {
              f.check = 0;
            }
          });
        });
      });
      this.model.roomPrices = this.model.roomPrices.filter(
        (t) => t.roomId != e
      );
      // this.model.orderFees = this.model.orderFees.filter((t) => t.roomId != e);
      this.model.orderFees.forEach((t) => {
        if (t.roomId == e) {
          t.roomId = this.model.roomIds[0].id;
        }
      });
      var sum = 0;
      var money2 = 0;
      var deposit2 = 0;
      for (var i = 0; i < this.model.roomPrices.length; i++) {
        var money = 0;
        var item = this.model.roomPrices[i];
        if (item.editPrice && item.editPrice.length > 0) {
          item.editPrice.forEach((p) => {
            money += p;
          });
          item.roomFee = money;
          sum += money + item.deposit;
        } else {
          sum += item.roomFee + item.deposit;
        }
        money2 += item.roomFee;
        deposit2 += item.deposit;
      }
      var find = this.model.orderFees.find(
        (t) => t.subjectType == 2 && t.roomId == this.model.roomIds[0].id
      );
      if (find) {
        find.money = money2;
        find.receivable = money2;
      }
      var find2 = this.model.orderFees.find(
        (t) => t.subjectType == 1 && t.roomId == this.model.roomIds[0].id
      );
      if (find2) {
        find2.money = deposit2;
        find2.receivable = deposit2;
      }
      this.amount = sum;
    },
    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.model.roomPrices = this.model.roomPrices.filter((t) =>
        e.some((r) => r.id == t.roomId)
      );
      this.model.orderFees = this.model.orderFees.filter((t) =>
        e.some((r) => r.id == t.roomId)
      );
      var roomIds = this.model.roomIds.filter((t) =>
        e.some((r) => r.id == t.id)
      );
      var newRoomIds = e.filter(
        (t) => !this.model.roomIds.some((r) => r.id == t.id)
      );
      this.modelDefault = Object.assign({}, this.modelDefault, {
        roomIds: [...roomIds, ...newRoomIds],
        roomPrices: this.model.roomPrices,
        orderFees: this.model.orderFees,
        orderInfo: this.model.orderInfo,
      });
      if (!this.otherRoomSync) {
        if (this.modelDefault.roomIds && this.modelDefault.roomIds.length > 0) {
          if (this.modelDefault.roomIds[0].key1) {
            for (var i = 1; i < this.modelDefault.roomIds.length; i++) {
              var room = this.modelDefault.roomIds[i];
              if (!room.key1) {
                this.$set(room, "key1", this.modelDefault.roomIds[0].key1);
                this.$set(room, "key2", this.modelDefault.roomIds[0].key2);
                this.$set(room, "key3", this.modelDefault.roomIds[0].key3);
                this.$set(room, "key4", this.modelDefault.roomIds[0].key4);
                this.$set(room, "key5", this.modelDefault.roomIds[0].key5);
                this.$set(room, "key6", this.modelDefault.roomIds[0].key6);
                this.$set(
                  room,
                  "customerId",
                  this.modelDefault.roomIds[0].customerId
                );
              }
            }
          }
        }
      }
      if (this.modelDefault.roomIds && this.modelDefault.roomIds.length > 2) {
        var mainRoom = this.modelDefault.roomIds[0];
        var sortRooms = this.modelDefault.roomIds
          .filter((t) => t.id != mainRoom.id)
          .sort(function (a, b) {
            return a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1;
          });
        this.modelDefault.roomIds = [...[mainRoom], ...sortRooms];
      }
      console.log(this.modelDefault);
      console.log(" this.modelDefault.roomIds", this.modelDefault.roomIds);
      this.canUserRooms[0].buildingRooms.forEach((ele) => {
        ele.floorRooms.forEach((b) => {
          b.check = 0;
        });
        this.modelDefault.roomIds.forEach((t) => {
          ele.floorRooms.forEach((b) => {
            if (b.id == t.id) {
              b.check = 1;
            }
          });
        });
      });
      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: JSON.parse(JSON.stringify(roomLiveList)),
      });
      this.modelDefault.orderInfo.bookingOrdersType = key;
      this.model.orderInfo.bookingOrdersType = key;
      this.edit(this.modelDefault);
    },
    async edit(record) {
      console.log("edit", record);
      this.activeKey = record.roomIds[0].id;
      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.remenmberPayState) {
        await this.getHotelInfo();
      }
      if (this.customerSourceList) {
        if (!this.model.orderInfo.customerSource) {
          this.model.orderInfo.customerSource = this.customerSourceList[0].id;
        }
      }
      if (this.model.roomIds && this.model.roomIds.length > 0) {
        this.activeKey = this.model.roomIds[0].id;

        var roomPrices = [];
        var orderFees = [];
        var roomIndex = 0;
        this.model.roomIds.forEach((item) => {
          if (!item.key2) {
            this.$set(item, "key2", 1);
            this.$set(item, "key3", "汉");
          }
          var roomLayout = this.roomLayoutList.find(
            (t) => (t.id = item.layoutId)
          );
          this.editPriceIndex = this.model.roomPrices.findIndex(
            (t) => t.roomId == item.id
          );
          var find = this.model.roomPrices[this.editPriceIndex];
          if (!find) {
            var obj = {
              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,
            };
            roomPrices.push(obj);
          } else {
            find.day = this.model.orderInfo.dayCount;
            this.editPriceOk();
          }
          var payType = this.payTypeList[0];
          // if (!this.model.orderFees.some((t) => t.roomId == item.id)) {
          //   orderFees.push({
          //     subjectType: 2,
          //     subjectTypeLabel: "预收房费",
          //     payType: payType ? payType.id : "",
          //     payTypeLabel: payType ? payType.name : "",
          //     receivable: item.marketPrice * this.model.orderInfo.dayCount,
          //     money: item.marketPrice * this.model.orderInfo.dayCount,
          //     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,
          //     });
          //   }
          // } else {
          //   // var find = this.model.orderFees.find(
          //   //   (t) => t.subjectType == 2 && t.roomId == item.id
          //   // );
          //   // if (find) {
          //   //   find.money = money;
          //   //   find.receivable = money;
          //   // }
          // }
          // if (
          //   !this.model.orderFees.some(
          //     (t) => t.roomId == this.model.roomIds[0].id
          //   )
          // ) {
          //   orderFees.push({
          //     subjectType: 2,
          //     subjectTypeLabel: "预收房费",
          //     payType: payType ? payType.id : "",
          //     payTypeLabel: payType ? payType.name : "",
          //     receivable: item.marketPrice * this.model.orderInfo.dayCount,
          //     money: item.marketPrice * this.model.orderInfo.dayCount,
          //     roomId: this.model.roomIds[0].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: this.model.roomIds[0].id,
          //     });
          //   }
          // } else {
          //   var deposit = this.compuleDeposit(item.marketPrice);
          //   var find = this.model.orderFees.find(
          //     (t) => t.subjectType == 2 && t.roomId == this.model.roomIds[0].id
          //   );
          //   if (find) {
          //     if (roomIndex == 0) {
          //       find.money = item.marketPrice * this.model.orderInfo.dayCount;
          //       find.receivable =
          //         item.marketPrice * this.model.orderInfo.dayCount;
          //     } else {
          //       find.money += item.marketPrice * this.model.orderInfo.dayCount;
          //       find.receivable +=
          //         item.marketPrice * this.model.orderInfo.dayCount;
          //     }
          //     if (!this.paymentSplit) {
          //       find.money += deposit;
          //       find.receivable += deposit;
          //     }
          //   }
          //   var find2 = this.model.orderFees.find(
          //     (t) => t.subjectType == 1 && t.roomId == this.model.roomIds[0].id
          //   );
          //   if (find2) {
          //     if (deposit > 0) {
          //       if (roomIndex == 0) {
          //         find2.money = deposit;
          //         find2.receivable = deposit;
          //       } else {
          //         find2.money += deposit;
          //         find2.receivable += deposit;
          //       }
          //     }
          //   }
          // }
          // roomIndex++;
        });
        this.model.roomPrices = [...this.model.roomPrices, ...roomPrices];
        if (this.model.roomPrices && this.model.roomPrices.length > 2) {
          var mainRoom = this.model.roomPrices[0];
          var sortRooms = this.model.roomPrices
            .filter((t) => t.roomId != mainRoom.roomId)
            .sort(function (a, b) {
              return a.roomNo.toUpperCase() > b.roomNo.toUpperCase() ? 1 : -1;
            });
          this.model.roomPrices = [...[mainRoom], ...sortRooms];
        }
        var sum = 0;
        this.model.roomPrices.forEach(function (item) {
          sum += item.roomFee + item.deposit;
        });
        this.amount = sum;
        // console.log("orderFees", orderFees);

        this.loadOrderFees();
        // this.model.orderFees = [...this.model.orderFees, ...orderFees];
      }
    },
    async getHotelInfo() {
      var _info = JSON.parse(localStorage.getItem("storeInfo"));
      await getAction("/business/busHotel/queryById", { id: _info.id }).then(
        (res) => {
          if (res.success) {
            this.remenmberPayState = res.result.remenmberPayState || "1-1-2";
          }
        }
      );
    },
    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: t.editPriceTime ? t.editPriceTime[b].toString() : dayTime,
            // price:  t.editPrice? t.editPrice[b].toString() : t.prefPrice,
            price:
              t.editPrice && t.editPriceTime && t.editPriceTime[b] == dayTime
                ? t.editPrice[b].toString()
                : t.prefPrice,
            // 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,
          nation: t.key3,
          address: t.key6,
          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";
          }
          console.log(this.model);
          // return
          // this.model.orderInfo.bookingOrdersType =  this.modelDefault.orderInfo.bookingOrdersType;
          // if (this.model.orderInfo.bookingOrdersId) {
          //   httpurl = "/business/busRoomBookingOrders/add-batch";
          //   method = "post";
          // }
          // that.$emit("ok", {order:'res.result', model:this.model});
          // return
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok", { order: res.result, model: that.model });
                var arr = [
                  that.paymentSplit ? 1 : 2,
                  this.model.orderFees[0].subjectType == 1 ? 2 : 1,
                  this.model.orderFees[0].subjectType == 1 ? 2 : 1,
                ];
                getAction("/business/busHotel/set-pay-state", {
                  hotelId: this.model.hotelId,
                  type: arr.join("-"),
                }).then((res) => {});
              } 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", {
                              order: res.result,
                              model: that.model,
                            });
                          } 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>