ihotel-manage/src/views/order/order.vue

<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="searchInput.keyWord"
              class="w-50 m-2"
              placeholder="请输入关键字查询"
              style="width: 230px"
            />
          </div>
          <div class="condition">
            <span>房间类型 : </span>
            <el-select
              :clearable="true"
              v-model="searchInput.houseType"
              class="m-2"
              style="width: 180px"
              placeholder="请选择房间类型"
              @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-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-select>
          </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
            style="margin-left: 20px"
            color="rgba(41, 109, 227, 1)"
            type="primary"
            class="search"
            @click="importExcel"
            ><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" type="selection" width="80" /> -->
          <!-- <el-table-column
                width="150"
                align="center "
                type="index"
                label="序号"
              /> -->
          <el-table-column
            align="center"
            prop="orderNumber"
            show-overflow-tooltip
            width="180"
            label="订单编号"
          >
            <template #default="{ row }">
              <span>
                {{ row.orderNumber }}
              </span>
            </template>
          </el-table-column>
          <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"
            prop="reserveName"
            width="100"
            label="用户名称"
          />
          <el-table-column
            align="center"
            prop="phone"
            width="180"
            label="手机号码"
          />
          <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"
            prop="houseNumber"
            label="房号"
            width="100"
          />
          <el-table-column
            align="center"
            width="130"
            prop="orderPrice"
            label="订单金额(元)"
          />
          <el-table-column
            align="center"
            prop="orderStatusName"
            label="订单状态"
            width="120"
          >
            <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>
            </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"
            fixed="right"
            label="操作"
            width="300"
          >
            <template #default="scope">
              <div class="edit">
                <!-- 取消订单 -->
                <el-popconfirm
                  v-if="scope.row.orderStart == 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 == 3"
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderliveRoom(scope.row)"
                  >入住</span
                >
                <!-- 退房 -->
                <el-popconfirm
                  v-if="scope.row.orderStart == 4"
                  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"
                  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"
                  style="cursor: pointer; margin: 0 10px"
                  @click="roomChangeClick(scope.row)"
                  >换房</span
                >
                <!-- 下发密码 -->
                <!-- <el-popconfirm
                  v-if="scope.row.orderStart == 4"
                  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> -->
                <!-- 入住 -->
                <span
                  v-if="scope.row.orderStart == 1 || scope.row.orderStart == 2"
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderliveRoom(scope.row)"
                  >入住</span
                >
                <!-- 详情 -->
                <span
                  style="cursor: pointer; margin: 0 10px"
                  @click="orderInfoClick(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="order.userName"
                placeholder=""
              ></el-input>
            </div>
            <div class="user">
              <div class="name">联系方式</div>
              <el-input v-model="order.userPhone"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">订单号</div>
              <el-input v-model="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="order.allOfReceiveAmount"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">入住时间</div>
              <el-input v-model="order.realStartTime"></el-input>
            </div>
            <div class="user">
              <div class="name">离住时间</div>
              <el-input v-model="order.realEndTime"></el-input>
            </div>
          </div>
          <div class="info">
            <div class="user">
              <div class="name">入住天数</div>
              <el-input v-model="order.housDay"></el-input>
            </div>
            <div class="user">
              <div class="name">支付时间</div>
              <el-input v-model="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="checkInRuleForm.name"
                    placeholder="请输入预订人"
                    clearable
                    style="width: 150px"
                  />
                </el-form-item>
                <el-form-item label="手机号码 :" prop="phone">
                  <el-input
                    v-model="checkInRuleForm.phone"
                    placeholder="请输入手机号码"
                    clearable
                    style="width: 150px"
                  />
                </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="请选择类型"
                    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"
                      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"
                      style="width: 200px"
                    />
                  </div>
                </el-form-item>

                <el-form-item label="房价 :" prop="roomPrice">
                  <div class="block">
                    <el-input
                      v-model="checkInRuleForm.roomPrice"
                      clearable
                      placeholder="请输入房价"
                      style="width: 150px"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="预住天数 :" prop="dayNum">
                  <div class="block">
                    <el-input
                      v-model="checkInRuleForm.dayNum"
                      placeholder="请输入预住天数"
                      clearable
                      style="width: 150px"
                    />
                  </div>
                </el-form-item>
              </div>
              <div class="titles">
                <img src="@/assets/icons/electronicKey.png" alt="" />
                <span>电子钥匙 </span>
              </div>
              <div class="tags">
                <div
                  class="changeItem"
                  :class="checkInIndex == 3 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(3)"
                >
                  指纹
                </div>
                <div
                  class="changeItem"
                  :class="checkInIndex == 2 ? 'changeItem_active' : ''"
                  @click="checkInChangeItem(2)"
                >
                  ic/身份证卡
                </div>
                <!-- <div
                class="changeItem"
                :class="checkInIndex == 3 ? 'changeItem_active' : ''"
                @click="checkInChangeItem(3)"
              >
                密码
              </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"
                    label="卡号 :"
                    prop="icCard"
                  >
                    <el-input
                      v-model="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>
                  <!-- <el-form-item label="生效日期 :" prop="effectiveTime">
                    <div class="block">
                      <el-date-picker
                        v-model="checkInRuleForm.effectiveTime"
                        type="datetime"
                        placeholder="选择生效日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 200px"
                        @change="effectiveTimeChange"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item label="失效日期 :" prop="failureTime">
                    <div class="block">
                      <el-date-picker
                        v-model="checkInRuleForm.failureTime"
                        type="datetime"
                        placeholder="选择失效日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 200px"
                        @change="failureTimeChange"
                      />
                    </div>
                  </el-form-item>
                  <el-radio-group
                    v-model="radioFingerprintDate"
                    @change="radioFingerprintChange"
                  >
                    <el-radio label="一个星期">一个星期</el-radio>
                    <el-radio label="一个月">一个月</el-radio>
                    <el-radio label="半年">半年</el-radio>
                    <el-radio label="一年">一年</el-radio>
                    <el-radio label="长期">长期</el-radio>
                  </el-radio-group> -->
                </div>
                <div class="keys" v-if="checkInIndex == 1">
                  <el-tabs
                    v-model="checkInIndex"
                    class="demo-tabs"
                    @tab-change="checkInPassClick"
                  >
                    <el-tab-pane label="时效密码" :name="1"> </el-tab-pane>
                    <!-- <el-tab-pane label="无网络密码" :name="2"> </el-tab-pane> -->
                    <el-tab-pane label="临时密码" :name="3"> </el-tab-pane>
                  </el-tabs>
                  <el-form-item label="密码 :" prop="pass">
                    <el-input
                      v-model="checkInRuleForm.pass"
                      placeholder="请输入6-8位数密码或者点击随机生成"
                      style="width: 400px"
                    >
                      <template #append>
                        <div @click="randomCipher">随机生成</div>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="生效日期 :" prop="effectiveTime">
                    <div class="block">
                      <el-date-picker
                        v-model="checkInRuleForm.effectiveTime"
                        type="datetime"
                        placeholder="选择生效日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 200px"
                        @change="endT"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item label="失效日期 :" prop="failureTime">
                    <div class="block">
                      <el-date-picker
                        v-model="checkInRuleForm.failureTime"
                        type="datetime"
                        placeholder="选择失效日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 200px"
                        @change="endT"
                      />
                    </div>
                  </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>
            </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="payPriceRuleForm.order"
                    clearable
                    placeholder="请输入入住订单"
                    style="width: 300px"
                  />
                </div>
              </el-form-item>
              <el-form-item label="金额 :" prop="price">
                <div class="block">
                  <el-input
                    v-model="payPriceRuleForm.price"
                    clearable
                    placeholder="请输入金额"
                    style="width: 300px"
                  />
                </div>
              </el-form-item>
              <el-form-item label="付款方式 :" prop="type">
                <div v-if="checkInRuleForm.orderStatus != 2 || checkInRuleForm.orderStatus != 3">
                  <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>
                <span v-else style="color: #09ae22">{{
                  checkInRuleForm.orderStatus == 2 || checkInRuleForm.orderStatus == 3
                    ? "当前订单已支付，可直接入住"
                    : ""
                }}</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="roomChangeFooter">
            <div class="options">
              <el-button
                v-if="
                  checkInRuleForm.orderStatus == 2 || checkInRuleForm.orderStatus == 2 || 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="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="roomChangeRuleForm.houseNumberNow"
                class="w-50 m-2"
                style="width: 80px"
              />
              <span class="title">新房号 : </span>

              <el-input
                clearable
                v-model="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 nowDay = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [],
});

const searchInput = reactive({
  keyWord: "",
  houseType: "",
  status: "",
  payTime: "",
  refundTime: "",
  cancelTime: "",
  liveTime: "",
  leaveTime: "",
}); // 搜索按钮数据

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

// 详情
const orderInfoVisible = ref(false); // 详情弹窗
const order = reactive({
  userName: "", // 姓名
  userPhone: "", // 联系方式
  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 orderDialogVisible = ref(false); // 控制添加员工弹窗
const changeIndex = ref(1);
const checkInIndex = ref(3);
const checkInRef = ref();
const checkInRuleForm = reactive({
  title: "",
  type: "",
  name: "",
  phone: "",
  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",
    },
  ],
  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: "",
});
// 表单验证
const payPriceRules = reactive({
  order: [{ required: true, message: "入住订单不能为空", trigger: "blur" }],
  price: [
    {
      required: true,
      message: "金额不能为空",
      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 getList = async () => {
  loading.value = true;
  let data = {
    adminId: sessionStorage.getItem("permissionSettingId"),
    page: currentPage.value, // 当前页
    size: pageSize.value, // 一页数据条数
    keyWord: searchInput.keyWord,
    houseType: searchInput.houseType,
    orderStatus: searchInput.status,
  };
  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];
  }

  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.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);
  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.houseId = data.houseId;
    checkInRuleForm.orderStatus = data.orderStatus;
    checkInRuleForm.houseNumberId = data.houseNumberId;
    checkInRuleForm.orderNumber = data.orderNumber;
    checkInRuleForm.forecastTime = data.reserveLiveTime;
    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;
  if (flag == 3) {
    checkInRuleForm.pass = "";
    checkInRuleForm.icCard = "";
  } else if (flag == 2) {
    checkInRuleForm.pass = "";
    checkInRuleForm.fingerprintNum = "";
  } else if (flag == 1) {
    checkInRuleForm.fingerprintNum = "";
    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(JSON.parse(evt.data).data.portNames[1]); // 获取到 USB接口
      let params1 = {
        type: 1,
        data: {
          type: 0,
          portName: JSON.parse(evt.data).data.portNames[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 radioFingerprintChange = (value) => {
  // console.log(value);
  radioFingerprintDate.value = value;
  if (radioFingerprintDate.value == "一个星期") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "week")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一个月") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "半年") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(6, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一年") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(1, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "长期") {
    checkInRuleForm.failureTime = dayjs(checkInRuleForm.effectiveTime)
      .add(100, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  }
};
// 改变生效日期
const effectiveTimeChange = (val) => {
  console.log(val);
  if (radioFingerprintDate.value == "一个星期") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "week")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一个月") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "半年") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(6, "month")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "一年") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(1, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  } else if (radioFingerprintDate.value == "长期") {
    checkInRuleForm.failureTime = dayjs(val)
      .add(100, "year")
      .format("YYYY-MM-DD HH:mm:ss");
  }
};
// 改变失效日期
const failureTimeChange = (val) => {
  console.log(val);
  radioFingerprintDate.value = "";
};
// 判断失效日期大于生效日期
const endT = () => {
  if (checkInRuleForm.failureTime && checkInRuleForm.effectiveTime) {
    if (checkInRuleForm.failureTime < checkInRuleForm.effectiveTime) {
      ElMessage({
        type: "error",
        showClose: true,
        message: "失效日期应大于生效日期至少一天",
        center: true,
      });
      checkInRuleForm.failureTime = "";
    }
  }
};

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) {
      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 data = {
          adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
          adminId: sessionStorage.getItem("id"), //用户id
          houseId: checkInRuleForm.houseId,
          houseNumberId: checkInRuleForm.houseNumberId,
          liveName: checkInRuleForm.name,
          phone: checkInRuleForm.phone,
          // "idCard": "362425123456891011",
          cardNumber: "", //有就填，没有就不填
          liveTime: checkInRuleForm.forecastTime,
          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) {
          orderDialogVisible.value = false;
          payPriceVisible.value = false;
          paymentCodeVisible.value = false;
          getList();
          // clearInterval(timer.value)
          // timer.value=null
          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 livedata = {
              adminMenuId: sessionStorage.getItem("permissionSettingId"), //权限表id
              adminId: sessionStorage.getItem("id"), //用户id
              houseId: checkInRuleForm.houseId,
              houseNumberId: checkInRuleForm.houseNumberId,
              liveName: checkInRuleForm.name,
              phone: checkInRuleForm.phone,
              // "idCard": "362425123456891011",
              cardNumber: "", //有就填，没有就不填
              liveTime: checkInRuleForm.forecastTime,
              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();
              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 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 orderCheckout = async (row) => {
  console.log(row, "退房");
  let datas = {
    orderNumber: row.orderNumber,
    houseNumberId: row.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();
    ElMessage({
      type: "success",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
// 退款
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 orderCancel = async (row) => {
  console.log(row, "取消预定");
  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,
    });
  }
};
// 订单退款
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"),
    page: currentPage.value, // 当前页
    size: pageSize.value, // 一页数据条数
    keyWord: searchInput.keyWord,
    houseType: searchInput.houseType,
    orderStatus: searchInput.status,
  };
  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];
  }
  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;
  flag.value = sessionStorage.getItem("isLogin");
  if (sessionStorage.getItem("isLogin") != 1) {
    getList();
  }
});
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: 750px;
        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(.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 {
        /* // overflow: auto;
    // padding: 10px 20px 10px 20px; */
        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(.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>