<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">订单管理</span>
    </div>
    <div class="scroll">
      <div class="top">
        <ul>
          <li>
            <p>{{ pendingOrderSum }}</p>
            <span>待接单订单总数（单）</span>
          </li>
          <li>
            <p>{{ orderSum }}</p>
            <span>订单总数（单）</span>
          </li>
          <li>
            <p>{{ consumerOrderSum }}</p>
            <span>已消费订单总数（单）</span>
          </li>
          <li>
            <p>{{ sumAccount }}</p>
            <span>已消费订单总额（元）</span>
          </li>
        </ul>
      </div>
      <div class="middle">
        <div class="filter">
          <div class="condition">
            <span>关键字 : </span>
            <el-input
              :clearable="true"
              @clear="searchBtn"
              v-model="searchInput.keyWord"
              class="w-50 m-2"
              placeholder="请输入订单号、预定人、手机号"
              style="width: 230px"
            />
          </div>
          <div class="condition">
            <span>订单状态 : </span>
            <el-select
              :clearable="false"
              v-model="searchInput.status"
              class="m-2"
              placeholder="请选择订单状态"
            >
              <el-option label="全部" :value="0" />
              <el-option label="待支付" :value="1" />
              <el-option label="已支付" :value="2" />
              <el-option label="待入住" :value="3" />
              <el-option label="已入住" :value="4" />
              <el-option label="已消费" :value="5" />
              <el-option label="支付超时" :value="6" />
              <el-option label="已取消" :value="7" />
              <el-option label="已退单" :value="8" />
              <el-option label="已退款" :value="9" />
              <el-option label="退款中" :value="10" />
            </el-select>
          </div>
          <div class="condition">
            <span>支付时间 : </span>
            <el-date-picker
              v-model="searchInput.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :prefix-icon="Calendar"
              placeholder="请选择日期"
            />
          </div>

          <el-button
            style="margin-left: 20px"
            color="rgba(9, 101, 98, 1)"
            type="primary"
            class="search"
            @click="searchBtn"
            ><el-icon>
              <Search />
            </el-icon>
            <span>查询</span></el-button
          >
          <el-button
            style="margin-left: 20px"
            color="rgba(9, 101, 98, 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="orderNum" label="订单号">
            <template #default="{ row }">
              <div class="orderNum" @click="orderInfo(row)">
                {{ row.orderNum }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="orderStatusName" label="状态">
          </el-table-column>
          <el-table-column align="center" prop="userName" label="预订人" />
          <el-table-column align="center" prop="userPhone" label="手机号码" />
          <el-table-column align="center" prop="houseName" label="预定房型" />
          <el-table-column
            align="center"
            prop="houseOrderNumber"
            label="房间数(间)"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="100"
            prop="houseTotalPrice"
            label="订单金额(元)"
          />
          <el-table-column
            align="center"
            prop="payTime"
            label="支付时间"
            width="180"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="150"
          >
            <template #default="scope">
              <div>
                <!-- 已支付 -->
                <div class="edit" v-if="scope.row.orderStatus == 2">
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否接单?"
                    @confirm="orderOptions('接单', scope.row)"
                  >
                    <template #reference>
                      <div class="look">接单</div>
                    </template>
                  </el-popconfirm>
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否退单?"
                    @confirm="orderOptions('退单', scope.row)"
                  >
                    <template #reference>
                      <div class="look looks">退单</div>
                    </template>
                  </el-popconfirm>
                </div>
                <!-- 待入住  -->
                <div class="edit" v-else-if="scope.row.orderStatus == 3">
                  <div class="look" @click="getHousing(scope.row)">入住</div>
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否退单?"
                    @confirm="orderOptions('退单', scope.row)"
                  >
                    <template #reference>
                      <div class="look looks">退单</div>
                    </template>
                  </el-popconfirm>
                </div>
                <!-- 已入住 -->
                <div class="edit" v-else-if="scope.row.orderStatus == 4">
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否退款?"
                    @confirm="orderOptions('退款', scope.row)"
                  >
                    <template #reference>
                      <div class="look">退款</div>
                    </template>
                  </el-popconfirm>
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否退房?"
                    @confirm="orderOptions('退房', scope.row)"
                  >
                    <template #reference>
                      <div class="look looks">退房</div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加耗材弹窗 -->
        <!-- <el-dialog
          class="addStaff"
          v-model="addDialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :title="dialongTitle"
          align-center
          width="700"
          :before-close="handleVideoClose"
        >
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            size="default"
            label-position="left"
            status-icon
          >
            <el-form-item label="姓名 :" prop="userName">
              <el-input
                v-model="ruleForm.userName"
                placeholder="请输入姓名"
                clearable
              />
            </el-form-item>
            <el-form-item label="维修班 :" prop="teamId">
              <el-select
                v-model="ruleForm.teamId"
                class="m-2"
                placeholder="请选择维修班"
              >
                <el-option label="校方人员" :value="0" />
                <el-option label="第三方人员" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="微校卡号 :" prop="cardNumber">
              <el-input
                v-model="ruleForm.cardNumber"
                placeholder="请输入微校卡号"
                clearable
              />
            </el-form-item>
            <el-form-item label="身份 :" prop="userzzId">
              <el-select
                v-model="ruleForm.userzzId"
                class="m-2"
                placeholder="请选择身份"
              >
                <el-option
                  v-for="item in userzzIdsList"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码 :" prop="userPhone">
              <el-input
                v-model="ruleForm.userPhone"
                placeholder="请输入手机号码"
                clearable
              />
            </el-form-item>
            <el-form-item label="校区 :" prop="schoolId">
              <el-select
                v-model="ruleForm.schoolId"
                class="m-2"
                placeholder="请选择校区"
                @change="changeSchool"
              >
                <el-option label="黄家湖校区" :value="1" />
                <el-option label="墨轩湖校区" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="工种 :" prop="workType">
              <el-select
                v-model="ruleForm.workType"
                class="m-2"
                placeholder="请选择工种"
              >
                <el-option
                  v-for="item in workTypeList"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="关联报修类型 :"
              prop="articleIds"
              class="checkbox"
            >
              <el-tree
                :data="articleIdsList"
                :props="{ label: 'name', children: 'children', value: 'id' }"
                node-key="id"
                show-checkbox
                ref="articleIdsRef"
                @check-change="handleArticleIds"
              />
            </el-form-item>
            <el-form-item label="关联楼栋 :" prop="buildIds">
              <el-tree
                :data="treeValue.list"
                :props="{ label: 'name', children: 'children', value: 'id' }"
                node-key="id"
                show-checkbox
                ref="buildIdsRef"
                @check-change="handleCheckChange"
              />
            </el-form-item>
            <el-form-item label="接单考核时间 :" prop="acceptanceTime">
              <div class="kaohe">
                <el-input
                  v-model="ruleForm.acceptanceTime"
                  :clearable="false"
                  placeholder="考核时间"
                  style="width: 150px"
                >
                  <template #suffix>
                    <img
                      src="@/assets/timer.png"
                      alt=""
                      style="width: 15px; height: 15px"
                    />
                  </template>
                </el-input>
                <span style="margin-left: 5px">分钟</span>
              </div>
            </el-form-item>
            <el-form-item
              style="
                padding-bottom: 40px;
                border-bottom: 1px solid rgba(230, 230, 230, 1);
              "
              label="维修考核时间 :"
              prop="maintenanceTime"
            >
              <div class="kaohe">
                <el-input
                  v-model="ruleForm.maintenanceTime"
                  :clearable="false"
                  placeholder="考核时间"
                  style="width: 150px"
                >
                  <template #suffix>
                    <img
                      src="@/assets/timer.png"
                      alt=""
                      style="width: 15px; height: 15px"
                    />
                  </template>
                </el-input>
                <span style="margin-left: 5px">分钟</span>
              </div>
            </el-form-item>

            <el-form-item class="options">
              <el-button
                color="rgba(111, 182, 184, 1)"
                class="queding"
                type="primary"
                @click="submitAdd(ruleFormRef)"
              >
                确定
              </el-button>
              <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog> -->

        <!-- 订单详情 -->
        <el-dialog
          class="addStaff"
          v-model="addDialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="订单详情"
          align-center
          width="760"
          :before-close="cancelInfo"
        >
          <div class="order_info">
            <div class="workNum">
              <span class="titles">订单状态:</span
              ><span>{{ ruleForm.orderStatusName }}</span>
            </div>
            <div class="workNum">
              <span class="titles">订单号:</span
              ><span>{{ ruleForm.orderNum }}</span>
            </div>
            <div class="workNum">
              <span class="titles">创建时间:</span
              ><span>{{ ruleForm.createTime }}</span>
            </div>
            <div class="workNum">
              <span class="titles">房型:</span
              ><span>{{ ruleForm.houseName }}</span>
            </div>
            <div class="workNum">
              <span class="titles">住客姓名:</span
              ><span>{{ ruleForm.userName }}</span>
            </div>
            <div class="workNum">
              <span class="titles">联系电话:</span
              ><span>{{ ruleForm.userPhone }}</span>
            </div>
            <div class="workNum">
              <span class="titles">预计到店:</span
              ><span>{{ ruleForm.orderStartTime }}</span>
            </div>
            <div class="workNum">
              <span class="titles">订单金额:</span
              ><span>{{ ruleForm.houseTotalPrice }}</span>
            </div>
            <div class="workNum">
              <span class="titles">支付时间:</span
              ><span>{{ ruleForm.payTime }}</span>
            </div>
            <div class="workNum">
              <span class="titles">入住时间:</span
              ><span>{{ ruleForm.orderLiveTime }}</span>
            </div>
            <div class="workNum">
              <span class="titles" style="width: 108px">预计入住时间:</span
              ><span>{{ ruleForm.orderStartTime }}</span>
            </div>
            <div class="workNum">
              <span class="titles" style="width: 108px">预计离店时间:</span
              ><span>
                {{ ruleForm.orderEndTime }}
              </span>
            </div>
            <div class="workNum" v-if="ruleForm.orderStatus == 3">
              <span class="titles" style="width: 95px">可分配房间:</span>
              <!-- <el-checkbox-group v-model="checkRoomNum">
                <el-checkbox-button
                  v-for="i in houseNumber"
                  :key="i.id"
                  :label="i.id"
                  >{{ i.numberName }}</el-checkbox-button
                >
              </el-checkbox-group> -->
              <!-- <el-checkbox-group
                v-model="ruleForm.houseNumberIds"
                @change="infoRoomNum"
              >
                <el-checkbox
                  v-for="i in houseNumber"
                  :key="i.id"
                  :label="i.id"
                  >{{ i.numberName }}</el-checkbox
                >
              </el-checkbox-group> -->
              <ul>
                <li
                  v-for="i in houseNumber"
                  :key="i.id"
                  @click="infoRoomNum(i)"
                  :class="i.flag == 2 ? 'is_active' : ''"
                >
                  {{ i.numberName }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 已支付 -->
          <div class="options" v-if="ruleForm.orderStatus == 2">
            <el-button
              color="rgba(9, 101, 98, 1)"
              class="queding"
              type="primary"
              @click="orderOptions('接单')"
            >
              接单
            </el-button>
            <el-button
              color="rgba(212, 48, 48, 1)"
              @click="orderOptions('退单')"
              >退单</el-button
            >
          </div>
          <!-- 待入住 -->
          <div class="options" v-else-if="ruleForm.orderStatus == 3">
            <el-button
              color="rgba(9, 101, 98, 1)"
              class="queding"
              type="primary"
              @click="getHouseYes('详情入住')"
            >
              入住
            </el-button>
            <el-button
              color="rgba(212, 48, 48, 1)"
              @click="orderOptions('退单')"
              >退单</el-button
            >
          </div>
          <!-- 已入住 -->
          <div
            class="options"
            v-else-if="
              ruleForm.orderStatus == 4 && ruleForm.orderEndTime >= nowDay
            "
          >
            <el-button
              color="rgba(9, 101, 98, 1)"
              class="queding"
              type="primary"
              @click="orderOptions('退款')"
            >
              退款
            </el-button>
            <el-button
              color="rgba(212, 48, 48, 1)"
              @click="orderOptions('退房')"
              >退房</el-button
            >
          </div>
        </el-dialog>
        <!-- 入住 -->
        <el-dialog
          class="addStaff"
          v-model="houseNumberDialog"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          title="选择房间"
          align-center
          width="450"
          :before-close="houseNumberCancel"
        >
          <div class="houseNumber">
            <h3>
              {{ houseNumberList.houseName }}({{
                houseNumberList.orderLiveTime
              }})
            </h3>
            <!-- <el-checkbox-group v-model="houseNumberList.houseNumberIds">
              <el-checkbox-button
                v-for="i in houseNumber"
                :key="i.id"
                :label="i.id"
                >{{ i.numberName }}</el-checkbox-button
              >
            </el-checkbox-group> -->
            <ul>
              <li
                v-for="i in houseNumber"
                :key="i.id"
                @click="checkRoomNum(i)"
                :class="i.flag == 2 ? 'is_active' : ''"
              >
                {{ i.numberName }}
              </li>
            </ul>
          </div>
          <div class="options">
            <el-button
              color="rgba(9, 101, 98, 1)"
              class="queding"
              type="primary"
              @click="getHouseYes('入住')"
            >
              入住
            </el-button>
            <el-button @click="houseNumberCancel">取消</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 分页组件 -->
      <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>
    </div>
  </div>
  <div class="firstLogin" v-if="flag == 1 ? true : false">
    <div class="goInfo">
      <h2>欢迎登陆靖安乡村民宿管理平台</h2>
      <p>为了完善您的民宿信息，请前往信息维护页面进行完善</p>
      <el-button
        style="margin-left: 20px"
        color="rgba(9, 101, 98, 1)"
        type="primary"
        class="search"
        @click="goInfo"
      >
        立即前往</el-button
      >
    </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 { 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: [
    // {
    //   userName: "124145523",
    //   teamName: "",
    //   schoolName: "李四",
    //   userPhone: "1455532141",
    //   userZzname: "三人房",
    //   buildName: 21,
    //   workTypeName: 2300,
    //   acceptanceTime: "2023-08-03 21:09:12",
    // },
    // {
    //   userName: "124145523",
    //   teamName: "",
    //   schoolName: "李四",
    //   userPhone: "1455532141",
    //   userZzname: "三人房",
    //   buildName: 21,
    //   workTypeName: 2300,
    //   acceptanceTime: "2023-08-03 21:09:12",
    // },
    // {
    //   userName: "124145523",
    //   teamName: "",
    //   schoolName: "李四",
    //   userPhone: "1455532141",
    //   userZzname: "三人房",
    //   buildName: 21,
    //   workTypeName: 2300,
    //   acceptanceTime: "2023-08-03 21:09:12",
    // },
  ],
});

const searchInput = reactive({
  keyWord: "",
  status: 0,
  createTime: "",
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(7);
const total = ref(); // 当前总数
const selectData = reactive({ list: [] }); // 多选框选择的数据
const pendingOrderSum = ref(); // 待接单数
const orderSum = ref(); // 订单总数
const consumerOrderSum = ref(); // 已消费订单
const sumAccount = ref(); // 已消费订单总金额
const addDialogVisible = ref(false); // 控制添加员工弹窗

// 入住选择房间号弹窗（0--------------------------------）
const houseNumberDialog = ref(false);
// 选择房间号列表数据
const houseNumber = ref([]);
// 房间号对应的房间类型
const houseNumberList = ref({
  houseName: "", // 房间名字
  orderLiveTime: "", // 时间
  id: "", // 房间id
  houseNumberIds: [], // 选择的房间号
  houseOrderNumber: "", // 客户订了房间的数量
});
// const roomNumSel = ref(); // 入住时选中的房间

// 详情弹窗
const ruleForm = reactive({
  orderStatusName: "", // 订单状态
  orderStatus: "", // 订单状态
  orderNum: "", // 订单号
  createTime: "", // 订房时间
  houseName: "", //房型
  userName: "", // 住房姓名
  userPhone: "", // 联系电话
  orderStartTime: "", // 预计到店
  houseTotalPrice: "", // 订单金额
  payTime: "", // 支付时间
  orderLiveTime: "", // 订房时间
  orderStartTime: "", //预计入住时间
  orderEndTime: "", //~预计离店时间
  houseOrderNumber: "", // 客户订了房间的数量
  houseNumberIds: [],
  id: "",
});
// const checkRoomNum = ref({}); // 详情中选择的房间号

watch(
  () => searchInput.createTime,
  (newVal, oldVal) => {
    console.log("监听时间:", newVal);
    if (newVal == null) {
      getList();
    }
  }
);
// 第一次登录页面判断是否去信息维护界面
const goInfo = () => {
  // router.push({
  //   path: `/seniorCelebrity/houseInfo`,
  // });
  sessionStorage.setItem("isLogin", 0);
  router.push({ name: "houseInfo", params: { flag: 1 } });
};
// 查看员工列表
const getList = async () => {
  loading.value = true;
  let data = {
    page: currentPage.value, // 当前页
    rows: pageSize.value, // 一页数据条数
    ledgerParam: searchInput.keyWord,
    managerId: sessionStorage.getItem("token"),
  };
  if (searchInput.createTime) {
    data.payStartTime = searchInput.createTime[0];
    data.payEndTime = searchInput.createTime[1];
  }

  if (searchInput.status) {
    if (searchInput.status != 0) {
      data.orderStatus = searchInput.status;
    }
  }
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/bookquearyBookPage.action",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    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.bookIPage.pageList;
    total.value = res.data.data.bookIPage.total;
    pendingOrderSum.value = res.data.data.pendingOrderSum;
    orderSum.value = res.data.data.orderSum;
    consumerOrderSum.value = res.data.data.consumerOrderSum;
    sumAccount.value = res.data.data.sumAccount;
    loading.value = false;
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

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

// 详情弹窗 （--------------------------------------）
const orderInfo = async (row) => {
  console.log(row);
  // 获取房间号接口
  ruleForm.houseNumberIds = "";
  // checkRoomNum.value = "";
  let data = { id: row.id };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/bookgetById.action",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "可选房间号");
  // console.log(res.data.data.houseNumbers, "房间号");
  res.data.data.houseNumbers.forEach((item) => {
    item.flag = 1;
  });

  houseNumber.value = res.data.data.houseNumbers;
  // houseNumberList.value.houseName = res.data.data.houseName;
  // houseNumberList.value.orderLiveTime = res.data.data.orderLiveTime;

  addDialogVisible.value = true;
  ruleForm.orderStatusName = row.orderStatusName;
  ruleForm.orderStatus = row.orderStatus;
  ruleForm.orderNum = row.orderNum;
  ruleForm.createTime = row.createTime;
  ruleForm.houseName = row.houseName;
  ruleForm.userName = row.userName;
  ruleForm.userPhone = row.userPhone;
  ruleForm.orderStartTime = row.orderStartTime;
  ruleForm.houseTotalPrice = row.houseTotalPrice;
  ruleForm.payTime = row.payTime;
  ruleForm.orderLiveTime = row.orderLiveTime;
  ruleForm.orderStartTime = row.orderStartTime;
  ruleForm.orderEndTime = row.orderEndTime;
  ruleForm.houseOrderNumber = row.houseOrderNumber;
  ruleForm.id = row.id;
};
// 取消详情
const cancelInfo = () => {
  addDialogVisible.value = false;
  ruleForm.orderStatusName = "";
  ruleForm.orderStatus = "";
  ruleForm.orderNum = "";
  ruleForm.createTime = "";
  ruleForm.houseName = "";
  ruleForm.userName = "";
  ruleForm.userPhone = "";
  ruleForm.orderStartTime = "";
  ruleForm.houseTotalPrice = "";
  ruleForm.payTime = "";
  ruleForm.orderLiveTime = "";
  ruleForm.houseNumberIds = "";
  // checkRoomNum.value = "";
  ruleForm.id = "";
  houseNumber.value.forEach((item) => {
    item.flag = 1;
  });
};
// 详情选择房间号
const infoRoomNum = (i) => {
  console.log(i);
  let roomNum = ruleForm.houseOrderNumber;
  if (ruleForm.houseNumberIds.length < roomNum) {
    if (i.flag == 1) {
      i.flag = 2;
    } else {
      i.flag = 1;
    }
    ruleForm.houseNumberIds = [];
    houseNumber.value.forEach((item) => {
      if (item.flag == 2) {
        ruleForm.houseNumberIds.push(item.id);
      }
    });
  } else if (ruleForm.houseNumberIds.length == roomNum && i.flag == 2) {
    i.flag = 1;
    ruleForm.houseNumberIds = [];
    houseNumber.value.forEach((item) => {
      if (item.flag == 2) {
        ruleForm.houseNumberIds.push(item.id);
      }
    });
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: `房客只订了${roomNum}间房`,
      center: true,
    });
  }
};

//订单操作按钮
const orderOptions = async (flag, row) => {
  console.log(row);
  let type;
  if (flag == "接单") {
    type = 1;
  } else if (flag == "入住") {
    type = 2;
  } else if (flag == "退房") {
    type = 3;
  } else if (flag == "退单") {
    type = 4;
  } else if (flag == "退款") {
    type = 5;
  }
  if (type == 1 || type == 2 || type == 3) {
    let id;
    if (row) {
      id = row.id;
    } else {
      id = ruleForm.id;
    }
    let data = {
      type: type,
      id: id,
    };
    console.log(data, flag);

    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/bookupdateBookStatus.action",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log("接单", res);
    if (res.data.code == 200) {
      addDialogVisible.value = false;
      getList();
      // 将房间号重置flag=1
      houseNumber.value.forEach((item) => {
        item.flag = 1;
      });
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (type == 4 || type == 5) {
    let id;
    if (row) {
      id = row.id;
    } else {
      id = ruleForm.id;
    }
    let data = new FormData();
    data.set("bookingId", id);
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/abkchargeback.action",
      headers: {},
      data: data,
    });
    console.log("退单或退款成功", res);

    if (res.data.code == 200) {
      addDialogVisible.value = false;
      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 getHousing = async (row) => {
  houseNumberDialog.value = true;
  console.log(row);
  houseNumberList.value.houseOrderNumber = row.houseOrderNumber;
  houseNumberList.value.houseNumberIds = "";
  houseNumberList.value.id = row.id;
  let data = { id: row.id };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/bookgetById.action",
    headers: {
      // token: sessionStorage.getItem("token"),
      // user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "可选房间号");
  res.data.data.houseNumbers.forEach((item) => {
    item.flag = 1;
  });
  houseNumber.value = res.data.data.houseNumbers;
  houseNumberList.value.houseName = res.data.data.houseName;
  houseNumberList.value.orderLiveTime = res.data.data.orderLiveTime;
};
// 关闭入住弹窗
const houseNumberCancel = () => {
  houseNumberDialog.value = false;
  houseNumber.value.forEach((item) => {
    item.flag = 1;
  });
};
// 入住选择房间号
const checkRoomNum = (i) => {
  let roomNum = houseNumberList.value.houseOrderNumber;
  // 判断选择几间房间;
  if (houseNumberList.value.houseNumberIds.length < roomNum) {
    if (i.flag == 1) {
      i.flag = 2;
    } else {
      i.flag = 1;
    }
    houseNumberList.value.houseNumberIds = [];
    houseNumber.value.forEach((item) => {
      if (item.flag == 2) {
        houseNumberList.value.houseNumberIds.push(item.id);
      }
    });
  } else if (
    houseNumberList.value.houseNumberIds.length == roomNum &&
    i.flag == 2
  ) {
    i.flag = 1;
    houseNumberList.value.houseNumberIds = [];
    houseNumber.value.forEach((item) => {
      if (item.flag == 2) {
        houseNumberList.value.houseNumberIds.push(item.id);
      }
    });
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: `房客只订了${roomNum}间房`,
      center: true,
    });
  }
};

// 确定入住
const getHouseYes = async (title) => {
  if (title == "详情入住") {
    let data = {
      id: ruleForm.id,
      type: 2,
      houseNumberIds: ruleForm.houseNumberIds.join(","),
      // houseNumberIds: checkRoomNum.value,
    };
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/bookupdateBookStatus.action",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res);
    if (res.data.code == 200) {
      addDialogVisible.value = false;
      getList();
      houseNumber.value.forEach((item) => {
        item.flag = 1;
      });
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else if (title == "入住") {
    let data = {
      id: houseNumberList.value.id,
      type: 2,
      houseNumberIds: houseNumberList.value.houseNumberIds.join(","),
    };
    let res = await axios({
      method: "post",
      url: api.value + "/mhotel/bookupdateBookStatus.action",
      headers: {
        // token: sessionStorage.getItem("token"),
        // user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(res);
    if (res.data.code == 200) {
      houseNumberDialog.value = false;
      getList();
      houseNumber.value.forEach((item) => {
        item.flag = 1;
      });
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};
//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    ledgerParam: searchInput.keyWord,
    managerId: sessionStorage.getItem("token"),
  };
  if (searchInput.createTime) {
    data.payStartTime = searchInput.createTime[0];
    data.payEndTime = searchInput.createTime[1];
  }
  if (searchInput.status) {
    data.orderStatus = searchInput.status;
  }
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/booktoBookExcel.action",
    headers: {
      // token: sessionStorage.getItem("token"),
    },
    params: data,
  });
  console.log(res, "导出订单管理");
  if (res.data.code == 200) {
    var downloadPath = res.data.downurl;
    // window.open(downloadPath);
    window.location.href = downloadPath;
    var downloadLink = document.createElement("a");
    downloadLink.style.display = "none"; // 使其隐藏
    downloadLink.href = downloadPath;
    downloadLink.download = "";
    downloadLink.click();
    document.body.appendChild(downloadLink);
    document.body.removeChild(downloadLink);
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.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 {
  min-width: 1000px;
  width: calc(100vw - 240px);
  // height: calc(100vh - 120px);
  height: calc(100vh - 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);

  .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: block;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }

    .is_active {
      color: rgba(111, 182, 184, 1);
    }
  }
  .scroll {
    height: calc(100% - 61px);
    overflow: auto;
  }
  .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;
      }
    }
  }

  .middle {
    width: 96%;
    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;

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

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

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

      span {
        color: #fff;
      }
    }

    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }

    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }

    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }

    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }

  .footer {
    width: 96%;
    // height: 402px;
    margin: 10px auto 30px;

    .el-table--fit {
      // height: 402px;
      :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;

        .orderNum {
          color: rgba(111, 182, 184, 1);
          cursor: pointer;
        }
      }

      :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;
      }

      :deep(.looks) {
        color: red;
      }

      // :deep(.look):hover {
      //   border: 1px solid rgba(111, 182, 184, 1);
      // }
    }

    // 添加员工弹窗样式
    :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: 80px;
            }

            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;
            }
          }
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    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);
      }

      :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;
      }
    }
  }
}

.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>
