<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">订单管理</span>
    </div>
    <div class="middles">
      <div class="middle">
        <div class="filter">
          <div class="condition">
            <el-input
              :clearable="true"
              @change="searchBtn"
              v-model.trim="searchInput.keyWord"
              class="w-50 m-2"
              placeholder="请输入预订人、手机号码、身份证、房间号"
              style="width: 290px"
            />
          </div>
          <div class="condition">
            <span>部门 : </span>
            <el-select
              v-model="searchInput.orgId"
              placeholder="请选择部门"
              style="width: 200px"
              @change="searchBtn"
              :clearable="true"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="condition">
            <span>楼栋单元 : </span>
            <el-select
              v-model="searchInput.buildingId"
              placeholder="请选择楼栋单元"
              style="width: 200px"
              @change="searchBtn"
              :clearable="true"
            >
              <el-option
                v-for="item in buildData"
                :key="item.id"
                :label="`${item.building}${item.element}`"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="condition">
            <span>房间类型 : </span>
            <el-select
              :clearable="true"
              v-model="searchInput.houseType"
              class="m-2"
              style="width: 180px"
              placeholder="请选择房间类型"
              @change="houseTypeChange"
            >
              <el-option label="全日房" :value="1" />
              <el-option label="钟点房" :value="2" />
            </el-select>
          </div>
          <div class="condition">
            <span>房型名称 : </span>
            <el-select
              style="width: 180px"
              v-model="searchInput.houseId"
              class="m-2"
              placeholder="请选择房型名称"
              :clearable="true"
              @change="searchBtn"
            >
              <el-option
                :label="`${i.roomName}(${i.roomType == 1 ? '全' : '钟'})`"
                :value="i.id"
                v-for="i in roomTypeData"
              />
            </el-select>
          </div>
          <div class="condition">
            <span>状态 : </span>
            <el-select
              :clearable="true"
              v-model="searchInput.status"
              class="m-2"
              placeholder="请选择状态"
              style="width: 180px"
              @change="searchBtn"
            >
              <el-option label="待支付" :value="1" />
              <el-option label="已支付" :value="2" />
              <el-option label="待入住" :value="3" />
              <el-option label="已入住" :value="4" />
              <el-option label="待结账" :value="5" />
              <el-option label="退款中" :value="6" />
              <el-option label="已退款" :value="7" />
              <el-option label="已退房" :value="8" />
              <el-option label="已取消，超时" :value="9" />
              <el-option label="已支付，未入住" :value="10" />
            </el-select>
          </div>
          <div class="condition">
            <span>钥匙类型 : </span>
            <el-select
              style="width: 180px"
              v-model="searchInput.lockType"
              class="m-2"
              placeholder="请选择钥匙类型"
              :clearable="true"
              @change="searchBtn"
            >
              <el-option label="密码" value="1" />
              <el-option label="房卡" value="2" />
              <el-option label="指纹" value="3" />
              <el-option label="身份证" value="4" />
              <el-option label="钥匙" value="5" />
            </el-select>
          </div>
          <div
            class="condition"
            v-if="searchInput.lockType == 2 || searchInput.lockType == 5"
          >
            <span>钥匙归还状态 : </span>
            <el-select
              style="width: 180px"
              v-model="searchInput.lockStatus"
              class="m-2"
              placeholder="请选择钥匙归还状态"
              :clearable="true"
              @change="searchBtn"
            >
              <el-option label="已归还" value="1" />
              <el-option label="待归还" value="2" />
            </el-select>
          </div>
          <div class="condition">
            <span>支付时间 : </span>
            <el-date-picker
              v-model="searchInput.payTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </div>
          <div class="condition">
            <span>退款时间 : </span>
            <el-date-picker
              v-model="searchInput.refundTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </div>
          <div class="condition">
            <span>取消时间 : </span>
            <el-date-picker
              v-model="searchInput.cancelTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </div>
          <div class="condition">
            <span>入住时间 : </span>
            <el-date-picker
              v-model="searchInput.liveTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </div>
          <div class="condition">
            <span>离店时间 : </span>
            <el-date-picker
              v-model="searchInput.leaveTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
              style="width: 280px"
              @change="searchBtn"
            />
          </div>

          <!-- <el-button
            style="margin-left: 20px"
            color="rgba(41, 109, 227, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
            ><el-icon>
              <Search />
            </el-icon>
            <span>查询</span></el-button
          > -->
          <el-button
            v-if="flagBtn.daochu == 1"
            style="margin-left: 20px"
            color="rgba(41, 109, 227, 1)"
            type="primary"
            class="search"
            @click="importExcel"
            ><span>导出订单</span></el-button
          >
          <el-button
            style="margin-left: 20px"
            color="rgba(41, 109, 227, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
            ><span>刷新订单列表</span></el-button
          >
        </div>
      </div>
      <div class="footer" v-loading="loading">
        <el-table
          :row-class-name="tableRowClassName"
          :data="tableData.list"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <el-table-column
            align="center"
            prop="houseNumber"
            label="房号"
            width="100"
          />
          <el-table-column
            align="center"
            prop="houseName"
            width="140"
            label="房间类型"
          >
            <template #default="{ row }">
              {{ row.houseName
              }}<span style="color: #1e7dfb">
                ({{ row.roomType == 1 ? "全" : "钟" }})</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" width="140" label="钥匙类型">
            <template #default="{ row }">
              <div v-if="row.lockStatus == 1">
                <span style="display: inline-block; transform: translateY(-4px)"
                  >密码</span
                >
                <img
                  v-if="row.orderStart == 4"
                  @click="lookPassword(row)"
                  style="
                    width: 25px;
                    cursor: pointer;
                    margin-left: 3px;
                    transform: translateY(3px);
                  "
                  src="../../assets/icons/eyes.png"
                  alt=""
                />
                <img
                  v-if="row.orderStart == 8"
                  @click="lookPassword(row)"
                  style="
                    width: 25px;
                    cursor: pointer;
                    margin-left: 3px;
                    transform: translateY(3px);
                  "
                  src="../../assets/icons/passEyes.png"
                  alt=""
                />
              </div>
              <div v-if="row.lockStatus == 2">
                <span>房卡</span>
                <span
                  v-if="row.giveBack == 1"
                  style="
                    display: inline-block;
                    border: 1px solid #096562;
                    color: #096562;
                    border-radius: 3px;
                    padding: 1px 4px;
                    margin-left: 3px;
                  "
                  >已归还</span
                >
                <span
                  v-if="row.giveBack == 2"
                  style="
                    display: inline-block;
                    border: 1px solid #0061ff;
                    color: #0061ff;
                    border-radius: 3px;
                    padding: 1px 4px;
                    margin-left: 3px;
                  "
                  >待归还</span
                >
              </div>
              <div v-if="row.lockStatus == 3">
                <span>指纹</span>
                <span></span>
              </div>
              <div v-if="row.lockStatus == 4">
                <span>身份证</span>
                <span></span>
              </div>
              <div v-if="row.lockStatus == 5">
                <span>钥匙</span>
                <span
                  v-if="row.giveBack == 1"
                  style="
                    display: inline-block;
                    border: 1px solid #096562;
                    color: #096562;
                    border-radius: 3px;
                    padding: 1px 4px;
                    margin-left: 3px;
                  "
                  >已归还</span
                >
                <span
                  v-if="row.giveBack == 2"
                  style="
                    display: inline-block;
                    border: 1px solid #0061ff;
                    color: #0061ff;
                    border-radius: 3px;
                    padding: 1px 4px;
                    margin-left: 3px;
                  "
                  >待归还</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="reserveName"
            label="预订人"
            width="100"
          />
          <el-table-column
            align="center"
            prop="phone"
            label="手机号码"
            width="180"
          />
          <el-table-column
            align="center"
            prop="liveName"
            label="入住人"
            width="100"
          />
          <el-table-column
            align="center"
            prop="idCard"
            label="身份证号"
            width="190"
          />
          <el-table-column
            align="center"
            prop="orgName"
            label="部门"
            width="100"
          />
          <el-table-column
            align="center"
            prop="cardNumber"
            label="部门职工号"
            width="150"
          />
          <el-table-column
            align="center"
            prop="orderNumber"
            show-overflow-tooltip
            width="190"
            label="订单号"
          >
            <template #default="{ row }">
              <span>
                {{ row.orderNumber }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="reserveLiveTime"
            label="预入住时间"
            width="180"
          />
          <el-table-column
            align="center"
            prop="reserveLeaveTime"
            label="预离店时间"
            width="180"
          />
          <el-table-column
            align="center"
            prop="liveTime"
            label="入住时间"
            width="180"
          />
          <el-table-column
            align="center"
            prop="leaveTime"
            label="离店时间"
            width="180"
          />
          <el-table-column
            align="center"
            width="130"
            prop="orderPrice"
            label="订单金额(元)"
          />
          <el-table-column
            align="center"
            prop="orderStatusName"
            label="订单状态"
            width="130"
          >
            <template #default="{ row }">
              <div style="color: #f07218" v-if="row.orderStart == 1">
                待支付
              </div>
              <div style="color: #09ae22" v-if="row.orderStart == 2">
                已支付
              </div>
              <div style="color: #9bab0a" v-if="row.orderStart == 3">
                待入住
              </div>
              <div style="color: #0b89d7" v-if="row.orderStart == 4">
                已入住
              </div>
              <div style="color: #4d17b1" v-if="row.orderStart == 5">
                待结账
              </div>
              <div style="color: #eb3f0a" v-if="row.orderStart == 6">
                退款中
              </div>
              <div style="color: #84a712" v-if="row.orderStart == 7">
                已退款
              </div>
              <div style="color: #1b14e5" v-if="row.orderStart == 8">
                已退房
              </div>
              <div style="color: #818282" v-if="row.orderStart == 9">
                已取消，超时
              </div>
              <div style="color: #eebe77" v-if="row.orderStart == 10">
                已支付，未入住
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付类型" width="120">
            <template #default="{ row }">
              <div style="color: #09ae22" v-if="row.payType == 1">微信支付</div>
              <div style="color: #09ae22" v-if="row.payType == 2">现金支付</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="orderStatusName"
            label="来源渠道"
            width="120"
          >
            <template #default="{ row }">
              <div style="color: #000" v-if="row.orderChannel == 1">
                移动端订单
              </div>
              <div style="color: #000" v-if="row.orderChannel == 2">
                管理端订单
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            prop="payTime"
            label="支付时间"
          />
          <el-table-column
            align="center"
            width="180"
            prop="refundTime"
            label="退款时间"
            ><template #default="{ row }">
              <span v-if="row.refundTime">{{
                dayjs(row.refundTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            prop="cancelTime"
            label="取消时间"
          >
            <template #default="{ row }">
              <span v-if="row.cancelTime">{{
                dayjs(row.cancelTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="180"
            show-overflow-tooltip
            prop="remark"
            label="备注"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="320"
          >
            <template #default="scope">
              <div class="edit">
                <!-- 取消订单 -->
                <el-popconfirm
                  v-if="scope.row.orderStart == 1 && flagBtn.quxiao == 1"
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="是否取消订单?"
                  @confirm="orderCancel(scope.row)"
                >
                  <template #reference>
                    <div class="look">取消订单</div>
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  v-if="
                    (scope.row.orderStart == 2 || scope.row.orderStart == 3) &&
                    flagBtn.quxiao == 1
                  "
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="当前订单已付款，取消订单 '将不退款' ，是否继续?"
                  @confirm="orderCancel(scope.row)"
                >
                  <template #reference>
                    <div class="look">取消订单</div>
                  </template>
                </el-popconfirm>
                <!-- 订单退款 -->
                <!-- <el-popconfirm
                  v-if="
                    scope.row.orderStart == 2 ||
                    scope.row.orderStart == 3 ||
                    scope.row.orderStart == 4
                  "
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="是否退款?"
                  @confirm="orderRefund(scope.row)"
                >
                  <template #reference>
                    <div class="look">退款</div>
                  </template>
                </el-popconfirm> -->

                <!-- 退房 -->
                <span
                  v-if="scope.row.orderStart == 4 && flagBtn.ruzhu == 1"
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderCheckout(scope.row)"
                  >退房</span
                >
                <!-- <el-popconfirm
                  v-if="scope.row.orderStart == 4 && flagBtn.ruzhu==1"
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="是否退房?"
                  @confirm="orderCheckout(scope.row)"
                >
                  <template #reference>
                    <div class="look">退房</div>
                  </template>
                </el-popconfirm> -->
                <!-- 退款 -->
                <el-popconfirm
                  v-if="
                    (scope.row.orderStart == 2 || scope.row.orderStart == 3) &&
                    flagBtn.tuikuan == 1
                  "
                  width="220"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#f89626"
                  title="是否退款?"
                  @confirm="orderPayout(scope.row)"
                >
                  <template #reference>
                    <div class="look">退款</div>
                  </template>
                </el-popconfirm>
                <!-- 换房 -->
                <span
                  v-if="scope.row.orderStart == 4 && flagBtn.huanfang == 1"
                  style="cursor: pointer; margin: 0 10px"
                  @click="roomChangeClick(scope.row)"
                  >换房</span
                >
                <!-- 入住 -->
                <span
                  v-if="
                    (scope.row.orderStart == 1 ||
                      scope.row.orderStart == 2 ||
                      scope.row.orderStart == 3) &&
                    flagBtn.ruzhu == 1
                  "
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderliveRoom(scope.row)"
                  >入住</span
                >
                <!-- 详情 -->
                <span
                  v-if="flagBtn.xiangqing == 1"
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderInfoClick(scope.row)"
                  >详情</span
                >
                <!-- 备注 -->
                <span
                  v-if="flagBtn.beizhu == 1"
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderRemarkClick(scope.row)"
                  >备注</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pageSize">
          <span></span>
          <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper, slot"
            :total="total"
            @update:current-page="handleCurrentChange"
          />
        </div>
        <!-- 详情弹窗区域 -->
        <el-dialog
          class="orderInfo"
          title="订单详情"
          v-model="orderInfoVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          align-center
          width="850"
          :before-close="orderInfoClose"
        >
          <div class="userinfo">用户信息</div>
          <div class="info">
            <div class="user">
              <div class="name">预订人</div>
              <el-input v-model.trim="order.userName" placeholder=""></el-input>
            </div>
            <div class="user">
              <div class="name">联系方式</div>
              <el-input v-model.trim="order.userPhone"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">入住人</div>
              <el-input v-model.trim="order.liveName" placeholder=""></el-input>
            </div>
            <div class="user">
              <div class="name">身份证号</div>
              <el-input v-model.trim="order.idCard"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">订单号</div>
              <el-input v-model.trim="order.orderNo"></el-input>
              <!-- <el-tooltip placement="top" :content="order.orderNo">
                <el-input v-model="order.orderNo"></el-input>
              </el-tooltip> -->
            </div>
            <div class="user">
              <div class="name">支付金额（元）</div>
              <el-input v-model.trim="order.allOfReceiveAmount"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">入住时间</div>
              <el-input v-model.trim="order.realStartTime"></el-input>
            </div>
            <div class="user">
              <div class="name">离住时间</div>
              <el-input v-model.trim="order.realEndTime"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">入住天数</div>
              <el-input v-model.trim="order.housDay"></el-input>
            </div>
            <div class="user">
              <div class="name">支付时间</div>
              <el-input v-model.trim="order.payTime"></el-input>
            </div>
          </div>

          <!-- 水费区域 -->
          <div class="rate">水费明细</div>
          <div class="water">
            表计：{{ order.watermeter }} &nbsp;&nbsp;&nbsp;楼层：{{
              order.floor
            }}
            &nbsp;&nbsp;&nbsp;抄表时间：{{ order.realStartTime }}
          </div>
          <el-table
            :data="waterTable.list"
            max-height="93"
            style="width: 832px"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column
              prop="waterVolume"
              align="center"
              label="用水量（吨）"
            ></el-table-column>
            <el-table-column
              prop="priceOfWater"
              align="center"
              label="水价（元）"
            ></el-table-column>
            <el-table-column
              prop="allowance"
              align="center"
              label="补助量（吨）"
            ></el-table-column>
            <el-table-column
              prop="cost"
              align="center"
              label="产生水费（元）"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>

          <!-- 电费区域 -->
          <div class="rate">电费明细</div>
          <div class="water">
            表计：{{ order.elemeter }} &nbsp;&nbsp;&nbsp;楼层：{{
              order.floor
            }}
            &nbsp;&nbsp;&nbsp;抄表时间：{{ order.realStartTime }}
          </div>
          <el-table
            :data="electricTable.list"
            max-height="93"
            style="width: 832px"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column
              prop="eleVolume"
              align="center"
              label="用电量（度）"
            ></el-table-column>
            <el-table-column
              prop="priceOfEle"
              align="center"
              label="电价（元）"
            ></el-table-column>
            <el-table-column
              prop="allowance"
              align="center"
              label="补助量（度）"
            ></el-table-column>
            <el-table-column
              prop="cost"
              align="center"
              label="产生电费（元）"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 订单入住 -->
        <el-dialog
          class="checkInDialog"
          v-model="orderDialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          align-center
          width="900"
        >
          <div class="titleHeader">
            <div class="title">
              <span>{{ checkInRuleForm.title }}</span>
            </div>
            <div
              class="cancel"
              @click="orderInfoCancel"
              style="font-size: 20px"
            >
              ×
            </div>
          </div>
          <div class="roomChangeBody">
            <el-form
              ref="checkInRef"
              :model="checkInRuleForm"
              :rules="checkInRules"
              class="reserveRuleForm"
              :size="formSize"
              label-position="left"
              status-icon
            >
              <div class="titles">
                <img src="@/assets/icons/info.png" alt="" />
                <span>住客信息 </span>
              </div>
              <div class="residentInfo">
                <el-form-item label="预订人 :" prop="name">
                  <el-input
                    v-model.trim="checkInRuleForm.name"
                    placeholder="请输入预订人"
                    clearable
                    style="width: 150px"
                    :disabled="true"
                  />
                </el-form-item>
                <el-form-item label="手机号码 :" prop="phone">
                  <el-input
                    v-model.trim="checkInRuleForm.phone"
                    placeholder="请输入手机号码"
                    clearable
                    style="width: 220px"
                    :disabled="true"
                  />
                </el-form-item>
              </div>
              <div class="residentInfo">
                <el-form-item label="入住人 :" prop="checkName">
                  <el-input
                    v-model.trim="checkInRuleForm.checkName"
                    placeholder="请输入入住人"
                    clearable
                    style="width: 150px"
                  />
                </el-form-item>
                <el-form-item label="身份证号 :" prop="checkIdcard">
                  <el-input
                    v-model.trim="checkInRuleForm.checkIdcard"
                    placeholder="请输入身份证号"
                    clearable
                    style="width: 220px"
                  />
                </el-form-item>
              </div>
              <div class="titles">
                <img src="@/assets/icons/info.png" alt="" />
                <span>入住信息 </span>
              </div>
              <div class="checkIn">
                <el-form-item label="类型 :" prop="type">
                  <el-select
                    v-model="checkInRuleForm.type"
                    class="m-2"
                    placeholder="请选择类型"
                    :disabled="true"
                    style="width: 150px"
                  >
                    <el-option label="全日房" :value="1" />
                    <el-option label="钟点房" :value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="预抵日期 :" prop="forecastTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.forecastTime"
                      type="datetime"
                      placeholder="选择预抵日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :disabled="true"
                      style="width: 200px"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="预离日期 :" prop="preionizationTime">
                  <div class="block">
                    <el-date-picker
                      v-model="checkInRuleForm.preionizationTime"
                      type="datetime"
                      placeholder="选择预抵日期"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :disabled="true"
                      style="width: 200px"
                    />
                  </div>
                </el-form-item>

                <el-form-item label="房价 :" prop="roomPrice">
                  <div class="block">
                    <el-input
                      v-model.trim="checkInRuleForm.roomPrice"
                      clearable
                      placeholder="请输入房价"
                      :disabled="true"
                      style="width: 150px"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="预住天数 :" prop="dayNum">
                  <div class="block">
                    <el-input
                      v-model.trim="checkInRuleForm.dayNum"
                      placeholder="请输入预住天数"
                      clearable
                      :disabled="true"
                      style="width: 150px"
                    />
                  </div>
                </el-form-item>
              </div>
              <div class="titles">
                <img src="@/assets/icons/electronicKey.png" alt="" />
                <span>电子钥匙 </span>
              </div>
              <div class="tags" v-if="lockShow">
                <div
                  class="changeItem"
                  :class="checkInIndex == 5 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(5)"
                >
                  钥匙
                </div>
                <div
                  class="changeItem"
                  :class="checkInIndex == 1 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(1)"
                >
                  密码
                </div>
                <div
                  class="changeItem"
                  :class="checkInIndex == 2 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(2)"
                >
                  房卡
                </div>
                <div
                  class="changeItem"
                  :class="checkInIndex == 3 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(3)"
                >
                  指纹
                </div>
                <div
                  class="changeItem"
                  :class="checkInIndex == 4 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(4)"
                >
                  身份证卡
                </div>
              </div>
              <div class="tags" v-else>
                <div
                  class="changeItem"
                  :class="checkInIndex == 5 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(5)"
                >
                  钥匙
                </div>
              </div>
              <div class="changeKeys">
                <div class="icCard" v-if="checkInIndex != 1">
                  <el-form-item
                    v-if="checkInIndex == 3"
                    label="指纹 :"
                    prop="fingerprintNum"
                  >
                    <el-input
                      v-model="checkInRuleForm.fingerprintNum"
                      placeholder="请录入指纹"
                      style="width: 400px"
                      type="textarea"
                      rows="4"
                    />
                    <span
                      style="
                        color: rgba(0, 97, 255, 1);
                        margin-left: 10px;
                        cursor: pointer;
                      "
                      @click="readFingerprint"
                      >录入</span
                    >
                  </el-form-item>
                  <el-form-item
                    v-if="checkInIndex == 2 || checkInIndex == 4"
                    label="卡号 :"
                    prop="icCard"
                  >
                    <el-input
                      v-model.trim="checkInRuleForm.icCard"
                      placeholder="请输入卡号"
                      style="width: 400px"
                      type="textarea"
                      rows="4"
                    >
                      <template #append>
                        <div @click="randomCipher">随机生成</div>
                      </template>
                    </el-input>
                    <span
                      style="
                        color: rgba(0, 97, 255, 1);
                        margin-left: 10px;
                        cursor: pointer;
                      "
                      @click="readIcCard"
                      >读卡</span
                    >
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <!-- <div class="titles">
            <img src="@/assets/icons/calendar.png" alt="" />
            <span>未来7天占用状态</span>
          </div> -->
          </div>
          <div
            class="roomChangeFooter"
            v-if="
              checkInRuleForm.orderStatus == 1 ||
              checkInRuleForm.orderStatus == 2 ||
              checkInRuleForm.orderStatus == 3
            "
          >
            <div class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                type="primary"
                @click="checkInConfirm(checkInRef)"
                style="margin-right: 20px"
              >
                入住
              </el-button>
              <span style="color: #e8a849" v-if="checkAdvanceTime"
                >( 提示：当前未到入住时间，是否前提办理入住？)&nbsp;&nbsp;</span
              >
            </div>
          </div>
        </el-dialog>

        <!-- 确定入住 弹出支付页面弹窗 -->
        <el-dialog
          class="payPriceVialog"
          v-model="payPriceVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="支付"
          align-center
          width="650"
          :before-close="cancelPayPrice"
        >
          <div class="roomChangeBody">
            <el-form
              ref="payPriceRef"
              :model="payPriceRuleForm"
              :rules="payPriceRules"
              class="payPriceRuleForm"
              :size="formSize"
              label-width="100px"
              label-position="left"
              status-icon
            >
              <div class="titles">
                <img src="@/assets/icons/info.png" alt="" />
                <span>订单信息 </span>
              </div>
              <el-form-item label="入住订单 :" prop="order">
                <div class="block">
                  <el-input
                    v-model.trim="payPriceRuleForm.order"
                    clearable
                    placeholder="请输入入住订单"
                    :disabled="true"
                    style="width: 300px"
                  />
                </div>
              </el-form-item>
              <el-form-item label="金额 :" prop="price">
                <div class="block">
                  <el-input
                    v-model.trim="payPriceRuleForm.price"
                    clearable
                    placeholder="请输入金额"
                    :disabled="false"
                    style="width: 300px"
                  />
                </div>
              </el-form-item>
              <el-form-item label="付款方式 :" prop="type">
                <span
                  v-if="
                    checkInRuleForm.orderStatus == 2 ||
                    checkInRuleForm.orderStatus == 3
                  "
                  style="color: #09ae22"
                >
                  当前订单已支付，可直接入住
                </span>
                <div v-else>
                  <el-select
                    v-model="payPriceRuleForm.type"
                    class="m-2"
                    placeholder="请选择付款方式"
                    style="width: 300px; margin-right: 15px"
                  >
                    <el-option label="微信" :value="1" />
                    <el-option label="现金" :value="2" />
                  </el-select>
                  <el-button
                    type="primary"
                    color="rgba(41, 109, 227, 1)"
                    @click="paymentCodeClick"
                    v-if="payPriceRuleForm.type == 1"
                    :disabled="payPriceSuccess"
                  >
                    扫码支付
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="roomChangeFooter">
            <div class="options">
              <el-button
                v-if="
                  checkInRuleForm.orderStatus == 2 ||
                  checkInRuleForm.orderStatus == 3 ||
                  payPriceRuleForm.type == 2
                "
                color="rgba(41, 109, 227, 1)"
                type="primary"
                @click="configPayPrice(payPriceRef)"
                style="margin-right: 20px"
              >
                确定入住
              </el-button>
            </div>
          </div>
        </el-dialog>

        <!-- 微信扫码支付界面弹窗 -->
        <el-dialog
          class="paymentCodeVialog"
          v-model="paymentCodeVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="扫码支付"
          align-center
          width="650"
          :before-close="cancelPaymentCode"
        >
          <div class="roomChangeBody">
            <div class="unpaid">
              待支付 : <span>{{ payPriceRuleForm.price }}</span> 元
            </div>
            <div class="imgTitle">
              <img :src="qrCodeImgUrl" />
              <div class="successPay" v-if="successPay">
                <img src="@/assets/icons/success.png" alt="" />
              </div>
            </div>
          </div>
          <!-- <div class="roomChangeFooter">
          <div class="options">
            <el-button
              plain
              type="primary"
              @click="paymentCodeConfirm()"
              style="margin-right: 20px"
            >
              已支付
            </el-button>
            <el-button @click="cancelPaymentCode()" style="margin-right: 20px">
              取消支付
            </el-button>
          </div>
        </div> -->
        </el-dialog>

        <!-- 退房 -->
        <el-dialog
          class="checkOutDialog"
          v-model="checkOutVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="退房"
          align-center
          width="450"
          :before-close="cancelCheckOut"
        >
          <div class="middles">
            <!-- <div class="content">确定退房吗？</div> -->
            <div v-if="checkLockFlag == 2">
              <div style="color: #e6a23c; margin: 10px 0">
                提示：当前开锁方式为房卡时需要归还房卡！！！
              </div>
              <div class="content">是否归还了房卡？</div>
              <el-radio-group v-model="checkOutForm.lockBack">
                <el-radio :value="1" size="large">是</el-radio>
                <el-radio :value="2" size="large">否</el-radio>
              </el-radio-group>
            </div>
            <div v-else-if="checkLockFlag == 5">
              <div style="color: #e6a23c; margin: 10px 0">
                提示：当前开锁方式为钥匙时需要归还钥匙！！！
              </div>
              <div class="content">是否归还了钥匙？</div>
              <el-radio-group v-model="checkOutForm.lockBack">
                <el-radio :value="1" size="large">是</el-radio>
                <el-radio :value="2" size="large">否</el-radio>
              </el-radio-group>
            </div>
            <div v-else>
              <div class="content">确定是否退房？</div>
            </div>
            <div class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                class="queding"
                type="primary"
                @click="checkOutConfirm"
              >
                确定
              </el-button>
              <el-button @click="cancelCheckOut">取消</el-button>
            </div>
          </div>
        </el-dialog>

        <!-- 查看密码 -->
        <el-dialog
          class="passDialog"
          v-model="passVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="查看密码"
          align-center
          width="400"
          :before-close="cancelPass"
        >
          <div class="middle">
            <div class="content">
              <span class="pass">{{ passForm.pass }}</span>
              <span>（生效时间：{{ passForm.reserveLiveTime }}）</span>
              <span>（失效时间：{{ passForm.reserveLeaveTime }}）</span>
            </div>
            <div class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                class="queding"
                type="primary"
                @click="cancelPass"
              >
                确定
              </el-button>
              <el-button @click="cancelPass">取消</el-button>
            </div>
          </div>
        </el-dialog>

        <!-- 备注 -->
        <el-dialog
          class="remarkDialog"
          v-model="remarkVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="备注"
          align-center
          width="460"
          :before-close="orderRemarkCancel"
        >
          <div class="cont">
            <!-- <div class="title">备注 ：</div> -->
            <div class="remark">
              <el-input
                v-model.trim="remarkForm.remark"
                placeholder="请输入备注"
                style="width: 420px; margin: 20px 0 10px 0"
                type="textarea"
                rows="4"
              >
              </el-input>
            </div>
            <div class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                class="queding"
                type="primary"
                @click="orderRemarkConfig"
              >
                确定
              </el-button>
              <el-button @click="orderRemarkCancel">取消</el-button>
            </div>
          </div>
        </el-dialog>

        <!-- 换房弹窗 -->
        <el-dialog
          class="roomChangeDialog"
          v-model="roomChangeVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          align-center
          width="1000"
        >
          <div class="titleHeader">
            <div class="title">
              <span
                >{{ roomChangeRuleForm.houseName }}
                {{ roomChangeRuleForm.houseNumber }}</span
              >
            </div>
            <div
              class="cancel"
              @click="cancelRoomChange"
              style="font-size: 20px"
            >
              ×
            </div>
          </div>
          <div class="roomChangeBody">
            <div class="middles">
              <div class="changeItemss">
                <div
                  class="changeNews"
                  :class="roomChangeIndex == 1 ? 'changeNews_active' : ''"
                  @click="changeRoom(1)"
                >
                  {{ roomChangeRuleForm.houseName
                  }}<span>
                    ({{ roomChangeRuleForm.roomType == 1 ? "全" : "钟" }})</span
                  >
                </div>
              </div>
            </div>
            <div class="room">
              <div class="floors">
                <div class="cards" v-for="item in roomChangeList.list">
                  <div class="roomList" @click="roomCheck(item)">
                    <div class="roomNumber">{{ item.roomNumber }}</div>
                    <img
                      v-if="checkInd == item.id"
                      class="check"
                      src="@/assets/icons/roomCheck.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="roomChangeFooter">
            <!-- <div class="reason">
            <el-select
              v-model="value"
              class="m-2"
              style="width: 860px"
              placeholder="请选择原因"
            >
              <el-option label="房间灯光暗" value="1" />
              <el-option label="房间无电" value="2" />
            </el-select>
            <span class="reason_">换房原因 : </span>
          </div> -->
            <div class="options">
              <el-button
                color="rgba(41, 109, 227, 1)"
                type="primary"
                @click="submitroomChange"
                style="margin-right: 20px"
              >
                确定
              </el-button>
              <el-button @click="cancelRoomChange" style="margin: 0 20px 0 30px"
                >取消</el-button
              >
              <el-input
                clearable
                v-model.trim="roomChangeRuleForm.houseNumberNow"
                class="w-50 m-2"
                style="width: 80px"
              />
              <span class="title">新房号 : </span>

              <el-input
                clearable
                v-model.trim="roomChangeRuleForm.roomPriceNow"
                class="w-50 m-2"
                style="width: 80px"
              />
              <span class="title">新房价 : </span>
            </div>
          </div>
        </el-dialog>

        <!-- 指纹读取弹窗 -->
        <el-dialog
          class="fingerprint"
          v-model="addFingerprintVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="添加指纹"
          align-center
          width="550"
          :before-close="cancelAddFingerprint"
        >
          <div class="el-footer">
            <div style="height: 350px; margin: 30px auto">
              <el-steps direction="vertical" :active="stepindex">
                <el-step
                  v-for="i in step.list"
                  :key="i.id"
                  :title="`步骤 ${i.id}`"
                  :description="i.title"
                ></el-step>
              </el-steps>
            </div>
          </div>
        </el-dialog>

        <!-- 身份证读卡弹窗 -->
        <el-dialog
          class="addIdentityCard"
          v-model="addIdentityCardVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="添加身份证"
          align-center
          width="650"
          :before-close="cancelAddIdentityCard"
        >
          <div class="steps">
            <el-steps
              :space="200"
              :active="identityCardIndex"
              finish-status="success"
            >
              <el-step title="环境准备" />
              <el-step title="配置" />
              <el-step title="完成" />
            </el-steps>
          </div>
          <div
            class="title"
            v-if="identityCardIndex == 0 || identityCardIndex == 1"
            style="color: #fc2307"
          >
            {{ identityCardTitle }}
          </div>
          <div class="title" v-else style="color: #68c23c">
            {{ identityCardTitle }}
          </div>
          <div class="icons">
            <img
              v-if="identityCardIndex == 0 || identityCardIndex == 1"
              src="@/assets/icons/error.png"
              alt=""
            />
            <img
              v-if="identityCardIndex == 2"
              class="loading"
              src="@/assets/icons/loading.png"
              alt=""
            />
            <img
              v-if="identityCardIndex == 3"
              src="@/assets/icons/success.png"
              alt=""
            />
          </div>
          <div class="retry">可以尝试<span @click="retry">重试</span></div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import QRCode from "qrcode";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
const flag = ref(true);

const flagBtn = ref(); // 按钮权限
const nowDay = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [],
});

const roomTypeData = ref(); // 房型数据
const buildData = ref(); // 楼栋数据
const departmentList = ref(); // 部门数据

const searchInput = reactive({
  keyWord: "",
  department: "", // 部门
  buildingId: "", // 楼栋单元
  houseType: "", // 房间类型
  houseId: "", // 房型名称
  status: "", // 状态 已退房
  lockType: "", // 钥匙类型
  lockStatus: "", // 钥匙归还状态
  payTime: "",
  refundTime: "",
  cancelTime: "",
  liveTime: "",
  leaveTime: "",
  orgId: "",
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数

// 详情
const orderInfoVisible = ref(false); // 详情弹窗
const order = reactive({
  userName: "", // 预订人
  userPhone: "", // 联系方式
  liveName: "", // 入住人
  idCard: "", // 身份证号
  orderNo: "", // 订单号
  allOfReceiveAmount: "", // 支付金额（元）
  realStartTime: "", // 入住时间
  realEndTime: "", // 离住时间
  housDay: "", // 入住天数
  payTime: "", // 支付时间
  floor: "", // 楼层
  watermeter: "", // 水表计
  elemeter: "", // 电表计
});
const waterTable = reactive({
  list: [
    {
      waterVolume: "",
      priceOfWater: "",
      allowance: "",
      cost: "",
    },
  ],
}); // 水费明细
const electricTable = reactive({
  list: [
    {
      eleVolume: "",
      priceOfEle: "",
      allowance: "",
      cost: "",
    },
  ],
}); // 电费明细

// 退房弹窗 ------------------------------------------------------
const checkOutVisible = ref(false);
const checkLockFlag = ref(); // 判断需要归还的是房卡还是钥匙
const checkOutForm = reactive({
  orderNumber: "",
  houseNumberId: "",
  lockBack: 1,
});

// 查看密码弹窗 0----------------------------------------------------------
const passVisible = ref(false);
const passForm = reactive({
  pass: "",
  reserveLiveTime: "",
  reserveLeaveTime: "",
});

// 备注弹窗 ------------------------------------------------------
const remarkVisible = ref(false);
const remarkForm = reactive({
  remark: "",
  id: "",
});

// 入住（---------------------------------------------------------）
const orderDialogVisible = ref(false); // 控制添加员工弹窗
const changeIndex = ref(1);
const checkAdvanceTime = ref(false); // 判断当前房间的入住时间和现在时间作对比，提前入住要提示
const checkInIndex = ref(3);
const checkInRef = ref();
const lockShow = ref(false);
const checkInRuleForm = reactive({
  title: "",
  type: "",
  name: "",
  phone: "",
  checkName: "", // 入住人
  checkIdcard: "", // 身份证号
  houseId: "",
  orderStatus: "",
  houseNumberId: "",
  orderNumber: "", // 订单号
  forecastTime: "", // 预抵日期
  preionizationTime: "", // 预离日期
  roomPrice: "", // 房价
  dayNum: "", // 预住天数
  pass: "", // 密码
  icCard: "", // ic/身份证号
  fingerprintNum: "", // 指纹
  effectiveTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 生效日期
  failureTime: "", // 失效日期
  id: "",
});
var checkInName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入姓名"));
  }

  var reg = /^[\u4e00-\u9fa5]{2,6}$/;
  if (!reg.test(value)) {
    callback(new Error("必须为2-6个汉字！"));
  } else {
    callback();
  }
};
// 表单验证
const checkInRules = reactive({
  type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    { validator: checkInName, trigger: "blur" },
  ],
  phone: [
    {
      required: true,
      message: "号码不能为空",
      trigger: "blur",
    },
  ],
  checkName: [
    { required: true, message: "入住人不能为空", trigger: "blur" },
    { validator: checkInName, trigger: "blur" },
  ],
  checkIdcard: [
    {
      required: true,
      message: "身份证号不能为空",
      trigger: "blur",
    },
  ],
  arrivalTime: [
    {
      required: true,
      message: "到店时间不能为空",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "客类不能为空",
      trigger: "blur",
    },
  ],
  forecastTime: [
    {
      required: true,
      message: "预抵日期不能为空",
      trigger: "blur",
    },
  ],
  preionizationTime: [
    {
      required: true,
      message: "预离日期不能为空",
      trigger: "blur",
    },
  ],
  roomPrice: [
    {
      required: true,
      message: "房价不能为空",
      trigger: "blur",
    },
  ],
  dayNum: [
    {
      required: true,
      message: "预住天数不能为空",
      trigger: "blur",
    },
  ],
  pass: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
  fingerprintNum: [
    {
      required: true,
      message: "指纹不能为空",
      trigger: "blur",
    },
  ],
  icCard: [
    {
      required: true,
      message: "ic/身份证号不能为空",
      trigger: "blur",
    },
  ],
  effectiveTime: [
    {
      required: true,
      message: "生效时间不能为空",
      trigger: "blur",
    },
  ],
  failureTime: [
    {
      required: true,
      message: "失效时间不能为空",
      trigger: "blur",
    },
  ],
});
// 添加指纹弹窗
const addFingerprintVisible = ref(false);
const stepindex = ref(0); // 录取指纹步骤
const step = reactive({
  list: [
    { id: 1, title: "" },
    { id: 2, title: "" },
    { id: 3, title: "" },
    { id: 4, title: "" },
  ],
}); // 指纹步骤数据
const ws = ref("");
const radioFingerprintDate = ref();
// ic/身份证卡
const addIdentityCardVisible = ref(false);
const identityCardIndex = ref(0);
const identityCardTitle = ref();
const radioIcDate = ref();

// 弹出支付页面(-----------------------------------------)
const payPriceVisible = ref(false);
const payPriceRef = ref();
const payPriceSuccess = ref(false); // 判断订单是否支付成功
const payPriceRuleForm = reactive({
  order: "",
  price: "",
  type: "",
  id: "",
});
// 表单验证
var priceRules = (rule, value, callback) => {
  let reg = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("金额必须大于等于0且不能超过两位小数"));
  }
};
const payPriceRules = reactive({
  order: [{ required: true, message: "入住订单不能为空", trigger: "blur" }],
  price: [
    {
      required: true,
      message: "金额不能为空",
      trigger: "blur",
    },
    { validator: priceRules, trigger: "blur" },
  ],
  type: [
    {
      required: true,
      message: "付款方式不能为空",
      trigger: "blur",
    },
  ],
  paymentCode: [
    {
      required: true,
      message: "付款码不能为空",
      trigger: "blur",
    },
  ],
});

// 微信扫码支付界面 （-------------------------------------------）
const paymentCodeVisible = ref(false);
const qrCodeImgUrl = ref(); // 微信二维码链接
const timer = ref(); // 定时器获取订单状态
const successPay = ref(false); // 判断是否支付成功

// 换房弹窗(----------------------------------------------------)
const roomChangeVisible = ref(false);
const roomChangeIndex = ref(1);
const roomChangeRuleForm = reactive({
  houseName: "", // 原本的房型
  houseNumber: "", // 原本的房号
  roomType: "", // 原本的房间类型
  orderNumber: "", // 订单号
  liveTime: "", // 预抵日期 （全日房）
  roomLiveTime: "", // 钟点时长（钟点房）
  forecastTime: "", // 预抵日期（钟点房）
  preionizationTime: "", //预离日期（钟点房）
  roomPrice: "", // 房价
  houseNumberId: "", // 原来的房间id

  houseNameNow: "", // 勾选的房型
  houseNumberNow: "", // 勾选的房号
  roomTypeNow: "", // 勾选的房间类型
  roomPriceNow: "", // 勾选的房间价格
  houseNumberIdNow: "", // 勾选的房间id
});
const checkInd = ref();
const roomChangeList = reactive({ list: [] });

// 楼栋单元数据
const schoolData = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/building/beDisplayBar",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(res, "楼栋单元下拉框");
  if (res.data.code == 200) {
    buildData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 房型列表数据
const roomTypeList = async () => {
  const data = {
    type: searchInput.houseType,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house/displayBar",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "房型列表数据");
  if (res.data.code == 200) {
    roomTypeData.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 部门数据
const departmentData = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/organization/queryAll",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(res, "部门数据");
  if (res.data.code == 200) {
    departmentList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 查看员工列表
const getList = async () => {
  loading.value = true;
  let data = {
    adminId: sessionStorage.getItem("permissionSettingId"),
    page: currentPage.value, // 当前页
    size: pageSize.value, // 一页数据条数
    keyWord: searchInput.keyWord,
    houseType: searchInput.houseType,
    houseId: searchInput.houseId,
    buildingId: searchInput.buildingId,
    orderStatus: searchInput.status,
    keyType: searchInput.lockType,
    giveBack: searchInput.lockStatus,
    orgId: searchInput.orgId,
  };
  if (searchInput.payTime) {
    data.payPriceStartTime = searchInput.payTime[0];
    data.payPriceEndTime = searchInput.payTime[1];
  }
  if (searchInput.refundTime) {
    data.refundStartTime = searchInput.refundTime[0];
    data.refundEndTime = searchInput.refundTime[1];
  }
  if (searchInput.liveTime) {
    data.liveStartTime = searchInput.liveTime[0];
    data.liveEndTime = searchInput.liveTime[1];
  }
  if (searchInput.leaveTime) {
    data.leaveStartTime = searchInput.leaveTime[0];
    data.leaveEndTime = searchInput.leaveTime[1];
  }
  if (searchInput.cancelTime) {
    data.cancelStartTime = searchInput.cancelTime[0];
    data.cancelEndTime = searchInput.cancelTime[1];
  }

  let res = await axios({
    method: "get",
    url: api.value + "/house-order/pageList",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "订单管理");
  if (res.data.code == 200) {
    // res.data.data.bookIPage.pageList.forEach((item) => {
    //   if (item.orderStatus == 1) {
    //     item.orderStatusName = "待支付";
    //   } else if (item.orderStatus == 2) {
    //     item.orderStatusName = "已支付";
    //   } else if (item.orderStatus == 3) {
    //     item.orderStatusName = "待入住";
    //   } else if (item.orderStatus == 4) {
    //     item.orderStatusName = "已入住";
    //   } else if (item.orderStatus == 5) {
    //     item.orderStatusName = "已消费";
    //   } else if (item.orderStatus == 6) {
    //     item.orderStatusName = "支付超时";
    //   } else if (item.orderStatus == 7) {
    //     item.orderStatusName = "已取消";
    //   } else if (item.orderStatus == 8) {
    //     item.orderStatusName = "已退单";
    //   } else if (item.orderStatus == 9) {
    //     item.orderStatusName = "已退款";
    //   } else if (item.orderStatus == 10) {
    //     item.orderStatusName = "退款中";
    //   }
    // });
    tableData.list = res.data.data.list;
    total.value = res.data.data.totalCount;
    loading.value = false;
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 详情弹窗 (----------------------------------------------)
const orderInfoClick = async (row) => {
  orderInfoVisible.value = true;
  order.floor = row.houseName + " " + row.houseNumber;
  console.log(row);
  let data = {
    orderNumber: row.orderNumber,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-order/particulars",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "详情信息");
  if (res.data.code == 200) {
    let data = res.data.data.houseOrder;
    order.userName = data.reserveName;
    order.userPhone = data.reservePhone;
    order.liveName = row.liveName;
    order.idCard = row.idCard;
    order.orderNo = data.orderNumber;
    order.allOfReceiveAmount = data.payPrice;
    order.realStartTime = data.reserveLiveTime;
    order.realEndTime = data.reserveLeaveTime;
    order.housDay = data.liveDay;
    order.payTime = data.payTime;
    order.watermeter = res.data.data.waterEquipmentMeterName;
    order.elemeter = res.data.data.electricEquipmentMeterName;
    waterTable.list = [
      {
        waterVolume: data.waterConsume, // 用水量（吨）
        priceOfWater: 2.1, // 水价（元）
        allowance: res.data.data.freeQuotaOfWater, // 补助量（吨）
        cost: data.waterCost, // 产生水费（元）
      },
    ];
    electricTable.list = [
      {
        eleVolume: data.electricConsume, // 用电量（吨）
        priceOfEle: 0.6, // 电价（元）
        allowance: res.data.data.freeQuotaOfElectric, // 补助量（吨）
        cost: data.electricCost, // 产生电费（元）
      },
    ];
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 关闭详情弹窗
const orderInfoClose = () => {
  orderInfoVisible.value = false;
};
// 入住弹窗 (----------------------------------------------)
const orderliveRoom = async (row) => {
  console.log(row);
  checkAdvanceTime.value = false; // 重置判断是否前提办理入住
  // 判断有没有绑定门锁 没有的话只能用钥匙
  {
    let data = {
      houseNumberId: row.houseNumberId,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/house-lock/ifBinging",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      params: data,
    });
    console.log(res, "判断房间是否绑定了设备");
    if (res.data.data.binging == 1) {
      lockShow.value = true;
      checkInIndex.value = 3;
    } else {
      lockShow.value = false;
      checkInIndex.value = 5;
      ElMessage({
        type: "warning",
        showClose: true,
        message: "当前房间未绑定门锁设备",
        center: true,
      });
    }
  }

  orderDialogVisible.value = true;
  let data = {
    orderNumber: row.orderNumber,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-order/particulars",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "详情信息");
  if (res.data.code == 200) {
    let data = res.data.data.houseOrder;
    checkInRuleForm.title = row.houseName + " " + row.houseNumber;
    // infoRuleForm.type=row.
    checkInRuleForm.name = row.reserveName;
    checkInRuleForm.phone = row.phone;
    checkInRuleForm.checkName = "";
    checkInRuleForm.checkIdcard = "";
    checkInRuleForm.houseId = data.houseId;
    checkInRuleForm.orderStatus = data.orderStatus;
    checkInRuleForm.houseNumberId = data.houseNumberId;
    checkInRuleForm.orderNumber = data.orderNumber;
    checkInRuleForm.forecastTime = data.reserveLiveTime;
    let nowTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    if (nowTime < checkInRuleForm.forecastTime) {
      checkAdvanceTime.value = true;
    }
    console.log(nowTime, "现在时间");
    console.log(checkInRuleForm.forecastTime, "预抵日期");
    console.log(nowTime < checkInRuleForm.forecastTime);

    checkInRuleForm.preionizationTime = data.reserveLeaveTime;
    checkInRuleForm.roomPrice = row.orderPrice;
    checkInRuleForm.type = row.roomType;
    checkInRuleForm.dayNum = data.liveDay;
    checkInRuleForm.pass = "";
    checkInRuleForm.icCard = "";
    checkInRuleForm.fingerprintNum = "";
    checkInRuleForm.effectiveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    checkInRuleForm.failureTime = "";
    if (res.data.data.fingerprint) {
      checkInIndex.value = 3;
      checkInRuleForm.fingerprintNum = res.data.data.fingerprint;
    }
    if (res.data.data.idCardInformation) {
      checkInIndex.value = 2;
      checkInRuleForm.icCard = res.data.data.idCardInformation;
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 指纹 卡片 密码切换
const checkInChangeItem = (flag) => {
  checkInIndex.value = flag;
  checkInRuleForm.fingerprintNum = "";
  checkInRuleForm.pass = "";
  checkInRuleForm.icCard = "";
  if (flag == 4) {
    checkInRuleForm.icCard = "";
  } else if (flag == 2) {
    checkInRuleForm.icCard = "";
  }
};
// 指纹录取 （1111111）
const readFingerprint = () => {
  addFingerprintVisible.value = true;
  step.list = [
    { id: 1, title: "" },
    { id: 2, title: "" },
    { id: 3, title: "" },
    { id: 4, title: "" },
  ];
  stepindex.value = 0;
  var wsUrl = "ws://localhost:8181/";
  let websocket = new WebSocket(wsUrl);
  ws.value = websocket;
  websocket.onopen = function (evt) {
    var params = { type: 101, data: null };
    websocket.send(JSON.stringify(params));
  };
  websocket.onmessage = function (evt) {
    console.log(evt.data, "输出指纹数据");
    let data = JSON.parse(evt.data);
    if (data.type == 0) {
      console.log(data.data.portNames);
      let num = 0;
      if (data.data.portNames) {
        num = data.data.portNames.length;
        console.log(JSON.parse(evt.data).data.portNames[num - 1]);
      }
      // console.log(JSON.parse(evt.data).data.portNames[1]); // 获取到 USB接口
      let params1 = {
        type: 1,
        data: {
          type: 0,
          portName: JSON.parse(evt.data).data.portNames[num - 1],
          baudRate: 115200,
        },
      };
      websocket.send(JSON.stringify(params1));
    } else if (data.type == 110) {
      console.log("已获取设备信息");
    } else if (data.type == 11) {
      var params2 = {
        type: 2,
        data: {
          totalStep: 4,
        },
      };
      websocket.send(JSON.stringify(params2));
    } else if (data.type == 21) {
      if (data.data.step == 0) {
        // console.log("请按压指纹");
        ElMessage({
          message: "请开始按压指纹",
          type: "success",
        });
      } else {
        // console.log(`请按下同一指纹，第${data.data.step}次按压`);
        if (data.data.step <= 4) {
          step.list.forEach((item) => {
            if (item.id == data.data.step) {
              item.title = `请按下同一指纹，第${data.data.step}次录入指纹成功`;
            }
          });
        }
        stepindex.value = data.data.step;
      }
      // _this.$message.warning("请将手指按在传感器上");
      if (data.data.step > 4) {
        var params = {
          type: 3,
          data: {
            id: data.data.id,
          },
        };
        websocket.send(JSON.stringify(params));
      }
    } else if (data.type == 31) {
      checkInRuleForm.fingerprintNum = data.data.template;
      console.log(data.data.template, "指纹数据");
      addFingerprintVisible.value = false;
      ws.value.close();
      ElMessage({
        message: "指纹录取成功",
        type: "success",
      });
      // setTimeout(() => {
      //   _this.fingerprintShow = false;
      //   ws.value.close();
      // }, 1500);
    } else {
      ElMessage({
        message: "设备连接失败，请刷新重新录入",
        type: "error",
      });
    }
  };
  websocket.onclose = function (evt) {
    console.log("关闭连接");
    // ws.value.close();
  };
  websocket.onerror = function (evt) {
    // console.log("错误提示");
  };
};
const cancelAddFingerprint = () => {
  addFingerprintVisible.value = false;
  // checkInRuleForm.icCard = "";
  // checkInRuleForm.fingerprintNum = "";
  // checkInRuleForm.pass = "";
  ws.value.close();
};

const Card = () => {
  var wsUrl = "ws://localhost:8181/";
  let websocket = new WebSocket(wsUrl);
  // wsidentityCard.value = websocket;
  websocket.onopen = function (evt) {
    var params = { type: 104, data: null };
    websocket.send(JSON.stringify(params));
  };

  websocket.onmessage = function (evt) {
    let data = JSON.parse(evt.data);
    console.log(data);
    if (data.type == 141) {
      identityCardTitle.value = "请插入设备";
      identityCardIndex.value = 0;
    } else if (data.type == 150) {
      identityCardTitle.value = "配置失败，请检查卡片是否已放置设备上";
      identityCardIndex.value = 1;
    } else if (data.type == 140) {
      checkInRuleForm.icCard = data.data.uid;
      console.log(data.data.uid, "读取的卡号");

      identityCardIndex.value = 2;
      identityCardTitle.value = "读卡中";

      if (data.data.uid) {
        setTimeout(() => {
          identityCardIndex.value = 3;
          identityCardTitle.value = "读卡成功";
          addIdentityCardVisible.value = false;
        }, 1500);
      }
    }
  };
};
// 读取卡号
const readIcCard = () => {
  addIdentityCardVisible.value = true;
  // identityCardNum.value = "";
  Card();
};
const cancelAddIdentityCard = () => {
  addIdentityCardVisible.value = false;
  // checkInRef.value.resetFields();
};
// 重试 身份卡
const retry = () => {
  // identityCardNum.value = "";
  Card();
};
// 密码 （3333333333）
const checkInPassClick = (value) => {
  console.log(value);
};
// 随机密码
const randomCipher = async () => {
  let res = await axios({
    method: "get",
    url: api.value + "/unlocking-admin/getPassWord",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(res, "随机密码");
  if (res.data.code == 200) {
    infoRuleForm.pass = res.data.data.passWord;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const orderInfoCancel = (row) => {
  orderDialogVisible.value = false;
};

// 弹出支付页面 (-------------------------------------)
const checkInConfirm = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      payPriceRuleForm.order = checkInRuleForm.orderNumber;
      payPriceRuleForm.price = checkInRuleForm.roomPrice;
      payPriceRuleForm.type = 1;
      payPriceVisible.value = true;
      // let data = {
      //   orderNumber:payPriceRuleForm.order,
      //   adminId:sessionStorage.getItem('permissionSettingId')
      // };
      // let res = await axios({
      //   method: "get",
      //   url: api.value + "/house-order/particulars",
      //   headers: {
      //     token: sessionStorage.getItem("token"),
      //     user_head: sessionStorage.getItem("user_head"),
      //   },
      //   params: data,
      // });
      // console.log(res, "订单管理-订单详情");
      // if (res.data.code == 200) {
      //   if(res.data.data.orderStatus==2){
      //     payPriceSuccess.value=true
      //   }else{
      //     payPriceSuccess.value=false
      //   }
      // } else {
      //   ElMessage({
      //     type: "error",
      //     showClose: true,
      //     message: res.data.message,
      //     center: true,
      //   });
      // }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 100);
// 确定入住
const configPayPrice = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (
        checkInRuleForm.orderStatus == 2 ||
        checkInRuleForm.orderStatus == 3
      ) {
        let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
        let data = {
          adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
          adminId: sessionStorage.getItem("id"), //用户id
          houseId: checkInRuleForm.houseId,
          houseNumberId: checkInRuleForm.houseNumberId,
          liveName: checkInRuleForm.checkName,
          // phone: checkInRuleForm.phone,
          idCard: checkInRuleForm.checkIdcard,
          // cardNumber: "", //有就填，没有就不填
          // liveTime: checkInRuleForm.forecastTime,
          liveTime: liveTime,
          leaveTime: checkInRuleForm.preionizationTime,
          payPrice: checkInRuleForm.roomPrice,
          liveDay: checkInRuleForm.dayNum,
          lockStatus: checkInIndex.value, //开锁方式 1：密码，2：卡片 3：指纹
          fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
          idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
          orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
        };
        let res = await axios({
          method: "post",
          url: api.value + "/house-number-state/checkIdCard",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res, "确定入住");
        if (res.data.code == 200) {
          getList();
          // 支付入住成功弹窗查看密码弹窗
          if (checkInIndex.value == 1) {
            passVisible.value = true;
            let data = {
              orderNumber: checkInRuleForm.orderNumber,
              adminId: sessionStorage.getItem("permissionSettingId"),
            };
            let res = await axios({
              method: "get",
              url: api.value + "/house-order/particulars",
              headers: {
                token: sessionStorage.getItem("token"),
                user_head: sessionStorage.getItem("user_head"),
              },
              params: data,
            });
            console.log(res, "点击房间查看详情");
            if (res.data.code == 200) {
              passForm.pass = res.data.data.houseOrder.keyPassWord;
              passForm.reserveLiveTime = dayjs(
                res.data.data.houseOrder.liveTime
              ).format("YYYY-MM-DD HH:mm:ss");
              passForm.reserveLeaveTime =
                res.data.data.houseOrder.reserveLeaveTime;
            }
          } else {
            orderDialogVisible.value = false;
            payPriceVisible.value = false;
            paymentCodeVisible.value = false;
          }
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let datassss = {
          orderNumber: payPriceRuleForm.order,
          payType: payPriceRuleForm.type,
          price: payPriceRuleForm.price,
        };
        let resssss = await axios({
          method: "post",
          url: api.value + "/house-order/payOrderPrice",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: datassss,
        });
        if (resssss.data.code == 200) {
          let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
          let data = {
            adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
            adminId: sessionStorage.getItem("id"), //用户id
            houseId: checkInRuleForm.houseId,
            houseNumberId: checkInRuleForm.houseNumberId,
            liveName: checkInRuleForm.checkName,
            // phone: checkInRuleForm.phone,
            idCard: checkInRuleForm.checkIdcard,
            // cardNumber: "", //有就填，没有就不填
            // liveTime: checkInRuleForm.forecastTime,
            liveTime: liveTime,
            leaveTime: checkInRuleForm.preionizationTime,
            payPrice: checkInRuleForm.roomPrice,
            liveDay: checkInRuleForm.dayNum,
            lockStatus: checkInIndex.value, //开锁方式 1：密码，2：卡片 3：指纹
            fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
            idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
            orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
          };
          let res = await axios({
            method: "post",
            url: api.value + "/house-number-state/checkIdCard",
            headers: {
              token: sessionStorage.getItem("token"),
              user_head: sessionStorage.getItem("user_head"),
            },
            data: data,
          });
          console.log(res, "确定入住");
          if (res.data.code == 200) {
            getList();
            // 支付入住成功弹窗查看密码弹窗
            if (checkInIndex.value == 1) {
              passVisible.value = true;
              let data = {
                orderNumber: checkInRuleForm.orderNumber,
                adminId: sessionStorage.getItem("permissionSettingId"),
              };
              let res = await axios({
                method: "get",
                url: api.value + "/house-order/particulars",
                headers: {
                  token: sessionStorage.getItem("token"),
                  user_head: sessionStorage.getItem("user_head"),
                },
                params: data,
              });
              console.log(res, "点击房间查看详情");
              if (res.data.code == 200) {
                passForm.pass = res.data.data.houseOrder.keyPassWord;
                passForm.reserveLiveTime = dayjs(
                  res.data.data.houseOrder.liveTime
                ).format("YYYY-MM-DD HH:mm:ss");
                passForm.reserveLeaveTime =
                  res.data.data.houseOrder.reserveLeaveTime;
              }
            } else {
              orderDialogVisible.value = false;
              payPriceVisible.value = false;
              paymentCodeVisible.value = false;
            }
            ElMessage({
              type: "success",
              showClose: true,
              message: res.data.message,
              center: true,
            });
          } else {
            ElMessage({
              type: "error",
              showClose: true,
              message: res.data.message,
              center: true,
            });
          }
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: resssss.data.message,
            center: true,
          });
        }
        console.log(resssss, "扫码支付显示二维码");
      }

      // let data = new FormData();
      // data.append("outTradeNo", payPriceRuleForm.order);
      // let res = await axios({
      //   method: "post",
      //   url: api.value + "/house-order/queryOrderById",
      //   headers: {
      //     token: sessionStorage.getItem("token"),
      //     user_head: sessionStorage.getItem("user_head"),
      //   },
      //   data: data,
      // });
      // console.log(res, "支付界面-查询订单");
      // if (res.data.code == 200) {
      //   if (res.data.data.tradeState == "SUCCESS") {

      //   } else {
      //     ElMessage({
      //       type: "error",
      //       showClose: true,
      //       message: res.data.data.tradeStateDesc,
      //       center: true,
      //     });
      //   }
      // } else {
      //   ElMessage({
      //     type: "error",
      //     showClose: true,
      //     message: res.data.message,
      //     center: true,
      //   });
      // }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 100);

// 微信扫码支付界面 (----------------------------------------)
const paymentCodeClick = async () => {
  paymentCodeVisible.value = true;
  successPay.value = false; // 判断是否支付成功
  let data = {
    orderNumber: payPriceRuleForm.order,
    payType: payPriceRuleForm.type,
    price: payPriceRuleForm.price,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-order/payOrderPrice",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "扫码支付显示二维码");
  if (res.data.code == 200) {
    let img = QRCode.toDataURL(res.data.data.codeUrl);
    img.then((t) => {
      qrCodeImgUrl.value = t;
      timer.value = setInterval(async () => {
        let datas = new FormData();
        datas.append("outTradeNo", payPriceRuleForm.order);
        let ress = await axios({
          method: "post",
          url: api.value + "/house-order/queryOrderById",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: datas,
        });
        console.log(ress, "微信支付查询订单");
        if (ress.data.code == 200) {
          if (ress.data.data.tradeState == "SUCCESS") {
            successPay.value = true;
            let liveTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
            let livedata = {
              adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
              adminId: sessionStorage.getItem("id"), //用户id
              houseId: checkInRuleForm.houseId,
              houseNumberId: checkInRuleForm.houseNumberId,
              liveName: checkInRuleForm.checkName,
              // phone: checkInRuleForm.phone,
              idCard: checkInRuleForm.checkIdcard,
              // cardNumber: "", //有就填，没有就不填
              // liveTime: checkInRuleForm.forecastTime,
              liveTime: liveTime,
              leaveTime: checkInRuleForm.preionizationTime,
              payPrice: checkInRuleForm.roomPrice,
              liveDay: checkInRuleForm.dayNum,
              lockStatus: checkInIndex.value, //开锁方式 1：密码，2：卡片 3：指纹
              fingerprint: checkInRuleForm.fingerprintNum, // 指纹特征码 有就填，没有就不填
              idCardInformation: checkInRuleForm.icCard, // 卡片特征码 有就填，没有就不填
              orderNumber: checkInRuleForm.orderNumber, //有订单就填，没有就不填
            };
            let liveres = await axios({
              method: "post",
              url: api.value + "/house-number-state/checkIdCard",
              headers: {
                token: sessionStorage.getItem("token"),
                user_head: sessionStorage.getItem("user_head"),
              },
              data: livedata,
            });
            console.log(liveres, "确定入住");
            if (liveres.data.code == 200) {
              clearInterval(timer.value);
              timer.value = null;
              getList();
              // 支付入住成功弹窗查看密码弹窗
              if (checkInIndex.value == 1) {
                passVisible.value = true;
                let data = {
                  orderNumber: checkInRuleForm.orderNumber,
                  adminId: sessionStorage.getItem("permissionSettingId"),
                };
                let res = await axios({
                  method: "get",
                  url: api.value + "/house-order/particulars",
                  headers: {
                    token: sessionStorage.getItem("token"),
                    user_head: sessionStorage.getItem("user_head"),
                  },
                  params: data,
                });
                console.log(res, "点击房间查看详情");
                if (res.data.code == 200) {
                  passForm.pass = res.data.data.houseOrder.keyPassWord;
                  passForm.reserveLiveTime = dayjs(
                    res.data.data.houseOrder.liveTime
                  ).format("YYYY-MM-DD HH:mm:ss");
                  passForm.reserveLeaveTime =
                    res.data.data.houseOrder.reserveLeaveTime;
                }
              } else {
                orderDialogVisible.value = false;
                payPriceVisible.value = false;
                paymentCodeVisible.value = false;
              }
              ElMessage({
                type: "success",
                showClose: true,
                message: ress.data.data.tradeStateDesc,
                center: true,
              });
            } else {
              ElMessage({
                type: "error",
                showClose: true,
                message: liveres.data.message,
                center: true,
              });
            }
          } else {
            successPay.value = false;
            payPriceSuccess.value = false;
          }
        } else {
        }
      }, 2000);
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelPaymentCode = () => {
  clearInterval(timer.value);
  timer.value = null;
  paymentCodeVisible.value = false;
};

// 查看密码弹窗 -------------------------------------------------------
const lookPassword = (i) => {
  console.log(i);
  passVisible.value = true;
  passForm.pass = i.keyPassWord;
  if (i.orderStart == 4) {
    passForm.reserveLiveTime = i.liveTime;
    passForm.reserveLeaveTime = i.reserveLeaveTime;
  } else if (i.orderStart == 8) {
    passForm.reserveLiveTime = i.liveTime;
    passForm.reserveLeaveTime = i.leaveTime;
  }
};
const cancelPass = () => {
  passVisible.value = false;
  orderDialogVisible.value = false;
  payPriceVisible.value = false;
  paymentCodeVisible.value = false;
};

// 退房（--------------------------------------------------------------）
const orderCheckout = async (row) => {
  checkLockFlag.value = row.lockStatus;
  checkOutVisible.value = true;
  console.log(row, "退房");
  checkOutForm.orderNumber = row.orderNumber;
  checkOutForm.houseNumberId = row.houseNumberId;
};
const checkOutConfirm = async () => {
  let datas = {
    orderNumber: checkOutForm.orderNumber,
    houseNumberId: checkOutForm.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let ress = await axios({
    method: "post",
    url: api.value + "/house-number-state/checkOut",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: datas,
  });
  console.log(ress, "房态管理-退房");
  if (ress.data.code == 200) {
    getList();
    // 如果是房卡或者钥匙的话要在退房成功调用退还钥匙接口
    if (checkLockFlag.value == 2 || checkLockFlag.value == 5) {
      let datas = {
        houseOrderId: checkOutForm.orderNumber,
        giveBack: checkOutForm.lockBack,
      };
      let ress = await axios({
        method: "get",
        url: api.value + "/house-order/ifGiveBack",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        params: datas,
      });
      console.log(ress, "归还钥匙");
      // if (ress.data.code == 200) {
      checkOutVisible.value = false;
      // }
    } else {
      checkOutVisible.value = false;
    }
    ElMessage({
      type: "success",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
const cancelCheckOut = () => {
  checkOutVisible.value = false;
};

// 备注弹窗
const orderRemarkClick = (row) => {
  remarkVisible.value = true;
  remarkForm.remark = row.remark;
  remarkForm.id = row.id;
};
const orderRemarkConfig = async () => {
  let datas = {
    houseOrderId: remarkForm.id,
    remark: remarkForm.remark,
  };
  let ress = await axios({
    method: "get",
    url: api.value + "/house-order/saveRemark",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: datas,
  });
  console.log(ress, "订单-备注");
  if (ress.data.code == 200) {
    getList();
    remarkVisible.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
const orderRemarkCancel = () => {
  remarkVisible.value = false;
};

// 换房 (---------------------------------------------------------------)
const roomChangeClick = async (row) => {
  roomChangeVisible.value = true;
  roomChangeRuleForm.houseName = row.houseName;
  roomChangeRuleForm.houseNumber = row.houseNumber;
  roomChangeRuleForm.roomType = row.roomType;
  roomChangeRuleForm.orderNumber = row.orderNumber;
  roomChangeRuleForm.houseNumberId = row.houseNumberId;
  roomChangeRuleForm.forecastTime = row.liveTime;
  roomChangeRuleForm.preionizationTime = row.leaveTime;
  let data = {
    liveTime: row.liveTime,
    leaveTime: row.leaveTime,
    houseNumberId: row.houseNumberId,
    adminId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/house-number-state/roomChangePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "换房界面");
  if (res.data.code == 200) {
    roomChangeList.list = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 切换房类型
const changeRoom = (ind) => {
  roomChangeIndex.value = ind;
  if (ind == 1) {
  } else if (ind == 2) {
  }
};
// 勾选房间
const roomCheck = (row) => {
  checkInd.value = row.id;
  roomChangeRuleForm.houseNumberNow = row.roomNumber;
  roomChangeRuleForm.roomPriceNow = row.roomPrice;
  roomChangeRuleForm.houseNumberIdNow = row.id;
};
// 确定换房
const submitroomChange = async () => {
  let data = {
    initialHouseNumberId: roomChangeRuleForm.houseNumberId, // 初始的房间id
    houseNumberId: roomChangeRuleForm.houseNumberIdNow, // 勾选的房间id
    orderNumber: roomChangeRuleForm.orderNumber,
    adminId: sessionStorage.getItem("id"), //用户id
    adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
  };
  console.log(data);
  let res = await axios({
    method: "post",
    url: api.value + "/house-number-state/roomChange",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "确定换房");
  if (res.data.code == 200) {
    getList();
    roomChangeVisible.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 关闭换房
const cancelRoomChange = () => {
  roomChangeVisible.value = false;
  checkInd.value = "";
  roomChangeRuleForm.houseNumberNow = "";
  roomChangeRuleForm.roomPriceNow = "";
  roomChangeRuleForm.houseNumberId = "";
};

// 退款 （-------------------------------------------------------------------------）
const orderPayout = async (row) => {
  console.log(row, "退款");
  let data = {
    orderNumber: row.orderNumber,
    houseNumberId: row.houseNumberId,
    usersId: sessionStorage.getItem("id"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/house-order/cancelApplet",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "房态管理-退款");
  if (res.data.code == 200) {
    setTimeout(async () => {
      let datas = new FormData();
      datas.append("refundNo", row.id);
      let ress = await axios({
        method: "post",
        url: api.value + "/house-order/queryRefundById",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("user_head"),
        },
        data: datas,
      });
      console.log(ress, "微信支付查询退款");
      if (ress.data.data.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: ress.data.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: ress.data.data.message,
          center: true,
        });
      }
    }, 1500);
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);

// 改变房间类型改变房间名称
const houseTypeChange = (val) => {
  searchInput.houseId = "";
  roomTypeList().then((res) => {
    searchBtn();
  });
};

// 取消订单 （------------------------------------------------------）
const orderCancel = async (row) => {
  console.log(row, "取消预定");
  // 待支付订单
  if (row.orderStart == 1) {
    let data = {
      orderNumber: row.orderNumber,
      houseNumberId: row.houseNumberId,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-order/cancel",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "取消预定");
    if (res.data.code == 200) {
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
  // 已支付 未入住 订单
  else if (row.orderStart == 2 || row.orderStart == 3) {
    let data = {
      orderNumber: row.orderNumber,
      houseNumberId: row.houseNumberId,
      adminId: sessionStorage.getItem("permissionSettingId"),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/house-order/payNotCheckIn",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("user_head"),
      },
      data: data,
    });
    console.log(res, "取消预定");
    if (res.data.code == 200) {
      getList();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};
// 订单退款
const orderRefund = async (row) => {
  console.log(row);
};

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};
//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    adminId: sessionStorage.getItem("permissionSettingId"),
    keyWord: searchInput.keyWord,
    houseType: searchInput.houseType,
    orderStatus: searchInput.status,
    houseId: searchInput.houseId,
    keyType: searchInput.lockType,
    giveBack: searchInput.lockStatus,
    buildingId: searchInput.buildingId,
    orgId: searchInput.orgId,
  };
  if (searchInput.payTime) {
    data.payPriceStartTime = searchInput.payTime[0];
    data.payPriceEndTime = searchInput.payTime[1];
  }
  if (searchInput.refundTime) {
    data.refundStartTime = searchInput.refundTime[0];
    data.refundEndTime = searchInput.refundTime[1];
  }
  if (searchInput.liveTime) {
    data.liveStartTime = searchInput.liveTime[0];
    data.liveEndTime = searchInput.liveTime[1];
  }
  if (searchInput.leaveTime) {
    data.leaveStartTime = searchInput.leaveTime[0];
    data.leaveEndTime = searchInput.leaveTime[1];
  }
  if (searchInput.cancelTime) {
    data.cancelStartTime = searchInput.cancelTime[0];
    data.cancelEndTime = searchInput.cancelTime[1];
  }
  if (searchInput.leaveTime) {
    data.leaveStartTime = searchInput.leaveTime[0];
    data.leaveEndTime = searchInput.leaveTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/house-order/queryExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
    responseType: "blob",
  });
  console.log(res, "导出");
  if (res.status == 200) {
    let name = `订单信息`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 1000);

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;
  const btnflag = JSON.parse(sessionStorage.getItem("btnflag"));
  flagBtn.value = btnflag.order;
  console.log(flagBtn.value, "按钮权限");

  flag.value = sessionStorage.getItem("isLogin");
  getList();
  roomTypeList();
  schoolData();
  departmentData();
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  color: #84a712;
  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;

    span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      margin-right: 20px;
      cursor: pointer;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }

  .top {
    width: 96%;
    height: 150px;
    margin: 20px auto;

    ul {
      padding: 0;
      margin: 0;
      height: 100%;
      list-style: none;
      display: flex;

      li {
        background-color: rgba(242, 242, 242, 1);
        border-radius: 10px;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
          font-size: 40px;
          font-weight: 700;
          color: #000;
          margin: 0;
        }

        span {
          color: #000;
          font-size: 18px;
          font-weight: 400;
        }
      }

      li:not(:last-child) {
        margin-right: 36px;
      }
    }
  }

  .middles {
    height: calc(100% - 61px);
    display: flex;
    flex-direction: column;
  }

  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 10px 0 0 0;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;
        font-size: 14px;

        :deep(.el-input .el-input__inner) {
          font-size: 14px;
        }

        span {
          margin: 0 10px 0 0;
        }
      }
    }

    .gongneng {
      margin: 10px 0 20px 0;

      span {
        color: #fff;
      }
    }
  }

  .footer {
    flex: 1;
    width: calc(100% - 60px);
    margin: 10px auto 0;
    overflow: auto;

    .el-table--fit {
      width: 100%;
      height: calc(100% - 60px);
      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 15px;

        tr {
          color: #000;
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 15px;
        color: #000;
      }

      :deep(.el-table__row):nth-child(2n) {
        .el-table-fixed-column--right {
          background-color: rgba(240, 243, 247, 1);
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      :deep(.edit) {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(111, 182, 184, 1);
      }

      :deep(.look) {
        padding: 0 10px;
        cursor: pointer;
        border: 1px solid transparent;
      }
    }
    .pageSize {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 13px 0;

      span {
        color: #000;
      }

      .el-pagination {
        // width: 1600px;
        :deep(.el-pagination__total) {
          color: #000;
        }

        :deep(.el-pagination__goto) {
          color: #000;
        }

        :deep(.el-pagination__classifier) {
          color: #000;
        }

        :deep(.el-input__wrapper) {
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          box-shadow: none;
        }

        :deep(.el-pager li) {
          margin: 0 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.el-pager li.is-active) {
          // background-color: rgba(111, 182, 184, 1);
          border: 1px solid rgba(0, 97, 255, 1);
          color: rgba(0, 97, 255, 1);
        }

        :deep(.btn-prev) {
          margin-right: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }

        :deep(.btn-next) {
          margin-left: 5px;
          border: 1px solid rgba(0, 0, 0, 1);
          border-radius: 5px;
          background-color: transparent;
        }
      }
    }
    // 添加员工弹窗样式
    :deep(.addStaff) {
      // height: 600px;
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        overflow: auto;
        padding: 0px 20px 10px 20px;

        .order_info {
          margin: 20px 0 15px 0;

          .title {
            display: flex;
            align-items: center;
            margin: 25px 0 10px 0;

            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }

            span {
              color: #000;
              font-size: 18px;
              font-weight: 800;
            }
          }

          // 排列模式样式
          .workNum {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 16px;

            .titles {
              color: rgba(128, 128, 128, 1);
              margin-right: 12px;
              font-weight: 200;
              width: 120px;
            }

            span {
              color: #000;
              // font-weight: 600;
            }

            ul {
              list-style: none;
              display: flex;
              flex-wrap: wrap;
              margin: 0;
              padding: 0;

              li {
                border: 1px solid rgba(166, 166, 166, 1);
                margin-right: 10px;
                padding: 1px 4px;
                border-radius: 6px;
                cursor: pointer;
              }

              li.is_active {
                background-color: rgba(9, 101, 98, 1);
                color: #fff;
              }
            }

            // .el-checkbox-button {
            //   margin-right: 10px;
            //   border: 1px solid #ccc;
            //   border-radius: 4px;
            //   box-sizing: border-box;
            //   .el-checkbox-button__inner {
            //     border: none;
            //     border-radius: 3px;
            //   }
            // }
            // .el-checkbox-button.is-focus {
            //   .el-checkbox-button__inner {
            //     color: #fff;
            //     background-color: rgba(9, 101, 98, 1);
            //   }
            // }
          }
        }

        .options {
          margin: 0 0 10px 0;
          width: 95%;
          display: flex;
          flex-direction: row-reverse;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }

        .houseNumber {
          margin: 20px 0;

          // .el-checkbox-button {
          //   margin-right: 10px;
          //   border: 1px solid #ccc;
          //   border-radius: 4px;
          //   box-sizing: border-box;
          //   .el-checkbox-button__inner {
          //     border: none;
          //     border-radius: 3px;
          //   }
          // }
          // .el-checkbox-button.is-focus {
          //   .el-checkbox-button__inner {
          //     color: #fff;
          //     background-color: rgba(9, 101, 98, 1);
          //   }
          // }
          ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;

            li {
              border: 1px solid rgba(166, 166, 166, 1);
              margin-right: 10px;
              padding: 1px 4px;
              border-radius: 6px;
              cursor: pointer;
            }

            li.is_active {
              background-color: rgba(9, 101, 98, 1);
              color: #fff;
            }
          }
        }
      }
    }
    //   订单详情
    :deep(.orderInfo) {
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        padding: 0 38px;
        height: 810px;
        overflow: auto;

        .userinfo {
          font-size: 18px;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
          text-align: left;
          margin-top: 15px;
        }

        .info {
          display: flex;

          .user {
            margin-right: 120px;
            .name {
              text-align: left;
              padding: 12px 0;
            }

            .el-input {
              width: 283px;
              // height: 30px;
              opacity: 1;
              // margin-right: 81px;
              // .el-input__inner {
              //   color: #000;
              // }
            }
          }
        }

        .rate {
          font-size: 18px;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
          text-align: left;
          margin: 15px 0;
        }

        .water {
          text-align: left;
          font-size: 16px;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
        }

        .el-table {
          margin: 10px 0;

          tr {
            height: 48px;
          }

          .el-table__body-wrapper {
            overflow: visible;
          }
        }
      }
    }
    // 订单入住
    :deep(.checkInDialog) {
      /* // height: 600px; */
      border-radius: 11px;
      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        display: none;

        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        padding: 0;
        .titleHeader {
          height: 60px;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          background-color: rgb(237, 241, 245);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          .title {
            span:nth-child(1) {
              font-size: 23px;
              font-weight: 700;
              color: #000;
            }
            span:nth-child(2) {
              color: #000;
            }
          }
          .cancel {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
          }
        }
        .roomChangeBody {
          margin: 0 20px 80px;
          .titles {
            color: rgba(0, 97, 255, 1);
            font-size: 16px;
            display: flex;
            align-items: center;
            margin: 15px 0;
            img {
              width: 22px;
              margin-right: 10px;
            }
          }
          .operation {
            margin: 15px 0;
          }
          .tags {
            display: flex;
            margin: 15px 0;
            .changeItem {
              width: 85px;
              height: 30px;
              background-color: rgba(230, 230, 230, 1);
              text-align: center;
              line-height: 30px;
              font-size: 14px;
              margin-right: 15px;
              border-radius: 3px;
              color: rgba(166, 166, 166, 1);
              cursor: pointer;
            }
            .changeItem_active {
              background-color: rgba(222, 234, 252, 1);
              color: rgba(0, 97, 255, 1);
            }
          }
          .residentInfo {
            display: flex;
            .el-form-item {
              margin-right: 20px;
            }
          }
          .checkIn {
            display: flex;
            flex-wrap: wrap;
            .el-form-item {
              margin-right: 20px;
            }
          }
          .keys {
            .el-form-item {
              .el-input-group__append {
                background-color: rgba(222, 234, 252, 1);
                color: rgba(0, 97, 255, 1);
                cursor: pointer;
                user-select: none;
              }
            }
          }
          /* // .reserveRuleForm {
      //   display: flex;
      //   flex-wrap: wrap;
      //   .el-form-item {
      //     margin-right: 15px;
      //   }
      // } */
        }
        .roomChangeFooter {
          /* // height: 80px; */
          margin: 0 20px 0;
          padding: 15px 0 20px 0;
          border-top: 1px solid rgba(230, 230, 230, 1);
          .options {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            /* // margin: 30px 0 0 0; */
          }
        }
      }
    }
    // 身份证读取
    :deep(.addIdentityCard) {
      border-radius: 11px;
      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        padding: 30px 20px 10px 20px;
        height: 330px;
        font-size: 16px;
        font-weight: 600;
        color: #000;
        .el-steps {
          width: 600px;
          transform: translateX(90px);
          margin: 0 0 40px 0;
        }
        .title {
          text-align: center;
        }
        .icons {
          display: flex;
          justify-content: center;
          img {
            width: 70px;
            margin: 40px 0;
          }
          .loading {
            animation: move 3s linear;
          }
          @keyframes move {
            0% {
              transform: rotate(0);
            }
            100% {
              transform: rotate(360deg);
            }
          }
        }
        .retry {
          text-align: center;
          span {
            color: red;
            padding: 0 8px;
            cursor: pointer;
          }
        }
      }
    }
    // 指纹弹窗
    :deep(.fingerprint) {
      width: 611px;
      height: 486px;
      border-radius: 11px;
      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        padding: 0;
        .elbody {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 20px;
          font-size: 18px;
          color: #000;
          border-bottom: 0.5px solid #ccc;

          i {
            cursor: pointer;
          }
        }
      }
      .el-dialog__footer {
        .el-button--primary {
          background: rgba(41, 109, 227, 1);
        }
      }
    }
    // 退房
    :deep(.checkOutDialog) {
      /* // height: 600px; */
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(245, 249, 255, 1);
        font-weight: 600;
        height: 60px;
        padding: 0 20px;
        line-height: 60px;
        margin: 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 20px 20px 20px;
        /* // height: 200px;
        // display: flex;
        // flex-direction: column-reverse; */

        .middles {
          color: #000;
          .content {
            font-size: 16px;
            letter-spacing: 1px;
            padding: 20px 0;
          }
          .options {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            margin: 10px 0;

            .queding {
              margin-left: 20px;
            }
          }
          .item {
            display: flex;
            align-items: center;
            margin: 24px 0;

            .title {
              width: 100px;
              text-align: right;
              margin-right: 10px;
            }
          }
          .againPass {
            margin: 24px 0 40px 0;
          }
        }
      }
    }
    // 查看密码
    :deep(.passDialog) {
      /* // height: 600px; */
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(245, 249, 255, 1);
        font-weight: 600;
        height: 60px;
        padding: 0 20px;
        line-height: 60px;
        margin: 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 20px 20px 20px;
        /* // height: 200px;
        // display: flex;
        // flex-direction: column-reverse; */

        .middle {
          color: #000;
          .content {
            height: 100px;
            padding: 0 0 20px 0;
            // font-size: 16px;
            // letter-spacing: 1px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .pass {
              font-size: 35px;
              font-weight: 600;
              margin: 20px 0 0 0;
            }
          }
          .options {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            margin: 10px 0;

            .queding {
              margin-left: 20px;
            }
          }
          .item {
            display: flex;
            align-items: center;
            margin: 24px 0;

            .title {
              width: 100px;
              text-align: right;
              margin-right: 10px;
            }
          }
          .againPass {
            margin: 24px 0 40px 0;
          }
        }
      }
    }
    // 换房弹窗
    :deep(.roomChangeDialog) {
      /* // height: 600px; */
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        display: none;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0;
        .titleHeader {
          height: 60px;
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          background-color: rgb(237, 241, 245);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          .title {
            span:nth-child(1) {
              font-size: 23px;
              font-weight: 700;
              color: #000;
            }
            span:nth-child(2) {
              color: #000;
            }
          }
          .cancel {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
          }
        }
        .roomChangeBody {
          display: flex;
          max-height: 500px;
          margin: 0 20px 50px;
          .middles {
            width: 150px;
            /* // margin: 0 auto; */
            color: #000;
            /* //   切换  消息记录  操作记录 */
            .changeItemss {
              /* // margin: 20px 0; */
              width: 130px;
              .changeNews {
                margin: 15px 0;
                height: 40px;
                background-color: rgba(230, 230, 230, 1);
                text-align: center;
                line-height: 40px;
                font-size: 14px;
                border-radius: 3px;
                color: rgba(166, 166, 166, 1);
                cursor: pointer;
              }
              .changeNews_active {
                background-color: rgba(222, 234, 252, 1);
                color: rgba(0, 97, 255, 1);
              }
            }
          }
          .room {
            width: calc(100% - 130px);
            height: 100%;
            margin: 10px 0 0 0;
            .floors {
              width: calc(100%);
              overflow: auto;
              display: flex;
              flex-wrap: wrap;
              .cards {
                width: 200px;
                height: 140px;
                background: rgb(240, 243, 247);
                margin: 5px 18px 18px 0;
                border: 1px solid #0061ff;
                position: relative;
                border-radius: 4px;
                .roomList {
                  width: 200px;
                  height: 140px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .roomNumber {
                    font-size: 22px;
                    color: #000;
                  }
                  .check {
                    opacity: 0.8;
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    width: 25px;
                    height: 25px;
                  }
                }
              }
            }
          }
          .room::-webkit-scrollbar-track {
            background-color: #daeeff;
          }

          .room::-webkit-scrollbar {
            background-color: #0888f8;
            height: 3px;
            width: 4px;
          }

          .room::-webkit-scrollbar-thumb {
            background: #57b2ff;
            border-radius: 4px;
            height: 3px;
            width: 4px;
          }
        }
        .roomChangeFooter {
          height: 60px;
          margin: 0 20px 0;
          .reason {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            .reason_ {
              color: #000;
              margin-right: 10px;
            }
          }
          .options {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            margin: 30px 0 0 0;
            .title {
              margin: 0 10px;
            }
          }
        }
      }
    }
    // 备注
    :deep(.remarkDialog) {
      /* // height: 600px; */
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(245, 249, 255, 1);
        font-weight: 600;
        height: 60px;
        padding: 0 20px;
        line-height: 60px;
        margin: 0;
        border-bottom: 1px solid rgba(230, 230, 230, 1);

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 20px 10px;
        .title {
          padding: 15px 0;
        }
        .options {
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          margin: 10px 0;

          .queding {
            margin-left: 20px;
          }
        }
        .item {
          display: flex;
          align-items: center;
          margin: 24px 0;

          .title {
            width: 100px;
            text-align: right;
            margin-right: 10px;
          }
        }
        .againPass {
          margin: 24px 0 40px 0;
        }
      }
    }
    // 确定入住 弹出支付页面弹窗
    :deep(.payPriceVialog) {
      /* // height: 600px; */
      border-radius: 11px;
      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
        padding: 0;
        .roomChangeBody {
          margin: 0 20px 80px;
          .titles {
            color: rgba(0, 97, 255, 1);
            font-size: 16px;
            display: flex;
            align-items: center;
            margin: 15px 0;
            img {
              width: 22px;
              margin-right: 10px;
            }
          }
          .operation {
            margin: 15px 0;
          }
        }
        .roomChangeFooter {
          /* // height: 80px; */
          margin: 0 20px 0;
          padding: 15px 0 20px 0;
          border-top: 1px solid rgba(230, 230, 230, 1);
          .options {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            /* // margin: 30px 0 0 0; */
          }
        }
      }
    }
    // 微信扫码支付界面弹窗
    :deep(.paymentCodeVialog) {
      /* // height: 600px; */
      border-radius: 11px;
      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;
        .el-dialog__headerbtn {
          outline: none;
        }
      }
      .el-dialog__body {
        /* // overflow: auto; */
        /* // padding: 10px 20px 10px 20px; */
        padding: 0;
        .roomChangeBody {
          margin: 0 20px 80px;
          .unpaid {
            font-size: 20px;
            color: #000;
            margin: 20px 0;
            span {
              font-size: 30px;
              font-weight: 800;
              color: rgba(212, 48, 48, 1);
            }
          }
          .imgTitle {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            img {
              width: 300px;
              height: 300px;
            }
            .successPay {
              width: 300px;
              height: 300px;
              background-color: rgba(255, 255, 255, 0.7);
              position: absolute;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 55px;
                height: 55px;
                z-index: 9999;
              }
            }
            /* // p{
        //   text-align: center;
        // } */
          }
        }
        .roomChangeFooter {
          /* // height: 80px; */
          margin: 0 20px 0;
          padding: 15px 0 20px 0;
          border-top: 1px solid rgba(230, 230, 230, 1);
          .options {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            /* // margin: 30px 0 0 0; */
          }
        }
      }
    }
  }
}

.el-input {
  width: 192px;
}

.firstLogin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh);
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1000000;
  display: flex;
  justify-content: center;
  align-items: center;

  .goInfo {
    width: 655px;
    height: 408px;
    background-color: #fff;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;

    h2 {
      margin: 0;
      font-size: 28px;
    }

    p {
      margin: 60px 0;
      padding: 0;
      font-size: 18px;
    }
  }
}
</style>
