Homestay_manage_business/src/views/roomInfo/roomInfo.vue

<template>
  <div class="content-box" v-loading="loading">
    <div class="title">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">民宿管理/民宿信息</span>
      <el-button
        type="primary"
        color="rgba(9, 101, 98, 1)"
        @click="maintain"
        v-if="store.state.user.level == 2"
        >信息维护</el-button
      >
    </div>
    <div class="content">
      <div class="left">
        <div class="titles">民宿信息</div>
        <div class="tooltips">
          <div class="cont">
            <span>图片:</span>
          </div>
          <div class="img img1">
            <div class="img_title">
              <span>封面图</span>
            </div>
            <div class="tupian">
              <img :src="tableData.coverImg" alt="" />
              <div
                class="lookImg"
                @click="lookImg(1)"
                v-if="tableData.coverImg"
              >
                <img src="@/assets/lookImg.png" alt="" />
              </div>
            </div>
          </div>
          <div class="img img2">
            <div class="img_title">
              <span>详情图</span>
            </div>
            <div class="carousel">
              <div class="pre" @click="infoImgClick('left')">
                <img src="@/assets/left.png" alt="" />
              </div>
              <el-carousel
                ref="infoImg"
                indicator-position="none"
                arrow="always"
                :autoplay="false"
                @change="switchImg"
                :initial-index="switchImgInd"
              >
                <el-carousel-item
                  v-for="(item, index) in imgList2"
                  :key="item.id"
                  :name="index"
                >
                  <img :src="item.url" alt="" />
                </el-carousel-item>
              </el-carousel>
              <div class="pre" @click="infoImgClick('right')">
                <img src="@/assets/right.png" alt="" />
              </div>
              <span class="numImg">{{
                switchImgInd + 1 + "/" + imgList2.length
              }}</span>
              <div class="lookImg" @click="lookImg(2)" v-if="imgList2.length">
                <img src="@/assets/lookImg.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>名称:</span>
            <span>{{ tableData.hotelName }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>所属乡镇:</span>
            <span>{{ tableData.hotelTownshipName }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>法人:</span>
            <span class="titleContent">{{ tableData.corpnName }}</span>
          </div>
          <div class="cont">
            <span>联系电话:</span>
            <span> {{ tableData.corpnPhone }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>户主姓名:</span>
            <span class="titleContent">{{ tableData.cardName }}</span>
          </div>
          <div class="cont">
            <span>取款账号:</span>
            <span>{{ tableData.bankCard }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>类型:</span>
            <span class="titleContent">{{ tableData.hTypeName }}</span>
          </div>
          <div class="cont">
            <span>状态:</span>
            <span v-if="tableData.hstatus == 1">营业</span>
            <span v-else-if="tableData.hstatus == 2">休息</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont address">
            <span>地址:</span>
            <span>{{ tableData.hposition }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>开业时间:</span>
            <span class="titleContent">{{ tableData.openTime }}</span>
          </div>
          <div class="cont">
            <span>装修时间:</span>
            <span>{{ tableData.fitupTime }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>入住时间:</span>
            <span class="titleContent">{{ tableData.liveTime }}</span>
          </div>
          <div class="cont">
            <span>离店时间:</span>
            <span>{{ tableData.leaveTime }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>客房数:</span>
            <span>{{ tableData.roomNumber }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>简介:</span>
            <div class="introduce">
              {{ tableData.remark }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="titles">民宿设施</div>
        <div class="tooltips">
          <div class="configuration" v-for="i in tableData.hconfigNames">
            <img :src="i.fileUrl" alt="" />
            <span>{{ i.name }}</span>
          </div>
        </div>
        <div class="titles">默认设置</div>
        <div class="tooltips">
          <div class="cont">
            <span>接单设置:</span>
            <span v-if="tableData.isOrder == 1">自动接单</span>
            <span v-if="tableData.isOrder == 2">手动接单</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>是否自动退房:</span>
            <span v-if="tableData.isCheckout == 1">是</span>
            <span v-if="tableData.isCheckout == 2">否</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>锁定时间:</span>
            <span>{{ tableData.lockTime }}</span>
          </div>
        </div>
        <div class="tooltips">
          <div class="cont">
            <span>用户是否能取消订单:</span>
            <span v-if="tableData.isCanorder == 1">是</span>
            <span v-if="tableData.isCanorder == 2">否</span>
          </div>
        </div>
      </div>
      <!-- 信息维护弹窗 -->
      <el-dialog
        class="addStaff"
        v-model="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="信息维护"
        align-center
        width="900"
        :before-close="cancelAdd"
      >
        <div class="slider">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
            size="default"
            label-position="left"
            status-icon
            :inline="true"
          >
            <div class="titles"><span>基础信息</span></div>
            <div class="form_item tag">
              <div class="items">
                <el-form-item label="名宿图片 :" prop="coverImg">
                  <div class="tooltips">
                    <div class="img img1">
                      <div class="img_title">
                        <span>封面图:</span>
                      </div>
                      <div class="updateImg">
                        <img :src="img1" alt="" />
                        <div class="lookImgs" @click="lookImg(3)" v-if="img1">
                          <img src="@/assets/lookImg.png" alt="" />
                        </div>
                        <el-upload
                          class="avatar-uploader"
                          action=""
                          list-type="picture"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :on-change="handleChange"
                          :before-upload="beforeAvatarUpload"
                          :http-request="handleUpload"
                        >
                          <template #trigger>
                            <el-button
                              type="primary"
                              color="rgba(9, 101, 98, 1)"
                              @click="updateImg"
                              >上传图片</el-button
                            >
                          </template>
                          <template #tip>
                            <div class="el-upload__tip">
                              （注：图片大小不超过10M，建议按3:2比例）
                            </div>
                          </template>
                        </el-upload>
                      </div>
                    </div>
                    <div class="img img2">
                      <div class="img_title">
                        <span>详情图:</span>
                      </div>
                      <div class="updateImg">
                        <div class="carousel">
                          <div class="pre" @click="infoImgClick2('left')">
                            <img src="@/assets/left.png" alt="" />
                          </div>
                          <el-carousel
                            ref="infoImg2"
                            indicator-position="none"
                            arrow="always"
                            :autoplay="false"
                            @change="switchImg2"
                            :initial-index="switchImgInd2"
                          >
                            <el-carousel-item
                              v-for="item in fileList.list"
                              :key="item.id"
                            >
                              <img :src="item.url" alt="" />
                            </el-carousel-item>
                          </el-carousel>
                          <div class="pre" @click="infoImgClick2('right')">
                            <img src="@/assets/right.png" alt="" />
                          </div>
                          <span class="numImg">{{
                            switchImgInd2 + 1 + "/" + fileList.list.length
                          }}</span>
                          <div class="lookImg" v-if="fileList.list.length">
                            <img
                              src="@/assets/lookImg.png"
                              alt=""
                              @click="lookImg(4)"
                            />
                            <div class="delimg" @click="delImgList(item)"></div>
                          </div>
                        </div>
                        <el-upload
                          class="avatar-uploader"
                          action=""
                          :on-preview="handlePreview2"
                          :on-remove="handleRemove2"
                          :on-change="handleChange2"
                          :http-request="handleUpload2"
                          :before-upload="beforeAvatarUpload2"
                        >
                          <template #trigger>
                            <el-button
                              type="primary"
                              color="rgba(9, 101, 98, 1)"
                              >上传图片</el-button
                            >
                          </template>
                          <template #tip>
                            <div class="el-upload__tip">
                              （注：图片大小不超过10M，建议按16:9比例）
                            </div>
                          </template>
                        </el-upload>
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="form_item tag">
              <div class="items">
                <el-form-item label="名称 :">
                  <span>{{ tableData.hotelName }}</span>
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="所属乡镇 :">
                  <span>{{ tableData.hotelTownshipName }}</span>
                </el-form-item>
              </div>
            </div>
            <div class="form_item tag">
              <div class="items">
                <el-form-item label="法人 :">
                  <span>{{ tableData.corpnName }}</span>
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="联系电话 :">
                  <span>{{ tableData.corpnPhone }}</span>
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="民宿类型 :" prop="htype">
                  <el-select
                    v-model="ruleForm.htype"
                    class="m-2"
                    placeholder="请选择民宿类型"
                  >
                    <el-option
                      v-for="i in teamIdName"
                      :label="i.name"
                      :value="`${i.id}`"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="状态 :" prop="hstatus">
                  <el-select
                    v-model="ruleForm.hstatus"
                    class="m-2"
                    placeholder="请选择状态"
                  >
                    <el-option label="营业" :value="1" />
                    <el-option label="休息" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="form_item tag">
              <div class="items">
                <el-form-item label="户主姓名 :">
                  <span>{{ tableData.cardName }}</span>
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="取款账号 :">
                  <span>{{ tableData.bankCard }}</span>
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="详细地址 :" prop="hposition">
                  <el-input
                    v-model="ruleForm.hposition"
                    placeholder="请输入地址"
                    :clearable="false"
                  >
                    <template #suffix>
                      <img
                        src="@/assets/map.png"
                        style="width: 16px; cursor: pointer"
                        alt=""
                        @click="clickMap"
                      />
                    </template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="经纬度 :">
                  <span>{{ ruleForm.hpositionWens }}</span>
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="开业时间 :" prop="openTime">
                  <el-date-picker
                    v-model="ruleForm.openTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :prefix-icon="Calendar"
                    placeholder="请选择开业时间"
                    :clearable="true"
                  />
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="装修时间 :" prop="fitupTime">
                  <el-date-picker
                    v-model="ruleForm.fitupTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :prefix-icon="Calendar"
                    placeholder="请选择装修时间"
                    :clearable="true"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="入店时间 :" prop="liveTime">
                  <!-- <el-date-picker
                    v-model="ruleForm.liveTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :prefix-icon="Calendar"
                    placeholder="请选择入店时间"
                    :clearable="true"
                  /> -->
                  <el-time-picker
                    v-model="ruleForm.liveTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="请选择入店时间"
                  />
                </el-form-item>
              </div>
              <div class="items">
                <el-form-item label="离店时间 :" prop="leaveTime">
                  <!-- <el-date-picker
                    v-model="ruleForm.leaveTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :prefix-icon="Calendar"
                    placeholder="请选择离店时间"
                    :clearable="true"
                  /> -->
                  <el-time-picker
                    v-model="ruleForm.leaveTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="请选择离店时间"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="客房数 :">
                  <!-- <el-input
                    v-model.number="ruleForm.roomNumber"
                    placeholder="请输入客房数"
                    clearable
                  /> -->
                  <span>{{ tableData.roomNumber }}</span>
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items intro">
                <el-form-item label="简介 :" prop="remark">
                  <el-input
                    v-model="ruleForm.remark"
                    placeholder="请输入民宿简介信息"
                    :rows="4"
                    type="textarea"
                    :maxlength="200"
                    clearable
                    autosize
                    :show-word-limit="true"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="titles">
              <span>民宿配置</span
              ><span>（最多可选择5个设施信息展示，管理端民宿配置管理）</span>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="" prop="hconfig">
                  <el-checkbox-group
                    @change="checkHouse"
                    v-model="checkedCities"
                    :max="5"
                  >
                    <el-checkbox v-for="city in cities" :label="`${city.id}`">{{
                      city.name
                    }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
            <div class="titles">
              <span>默认设置</span>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="接单设置 :" prop="isOrder">
                  <el-select
                    v-model="ruleForm.isOrder"
                    class="m-2"
                    placeholder="请选择接单设置"
                  >
                    <el-option label="自动接单" :value="1" />
                    <el-option label="手动接单" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
              <div class="items default">
                <el-form-item label="是否自动退房 :" prop="isCheckout">
                  <el-select
                    v-model="ruleForm.isCheckout"
                    class="m-2"
                    placeholder="请选择是否自动退房"
                  >
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="form_item">
              <div class="items">
                <el-form-item label="锁定时间 :" prop="lockTime">
                  <!-- <el-select
                    v-model="ruleForm.lockTime"
                    class="m-2"
                    placeholder="请选择维修班"
                  >
                    <el-option label="校方人员" :value="0" />
                    <el-option label="第三方人员" :value="1" />
                  </el-select> -->
                  <el-input
                    v-model="ruleForm.lockTime"
                    placeholder="请输入锁定时间"
                    clearable
                  />
                </el-form-item>
              </div>
              <div class="items default">
                <el-form-item label="用户是否能取消订房 :" prop="isCanorder">
                  <el-select
                    v-model="ruleForm.isCanorder"
                    class="m-2"
                    placeholder="请选择是否能取消订房"
                  >
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="form_item nowDay">
              <div class="now"></div>
              <div class="items">
                <el-form-item label="入住当天 :" prop="cancelTime">
                  <el-time-picker
                    :editable="false"
                    v-model="ruleForm.cancelTime"
                    format="HH:mm"
                    value-format="HH:mm"
                    placeholder="请选择时间"
                  />
                </el-form-item>
                <span>之前可以取消订单</span>
              </div>
            </div>
            <div class="footer">
              （注：锁定时间为订单待支付倒计时时间，订单待支付前客房锁定）
            </div>
            <el-form-item class="options">
              <el-button
                color="rgba(9, 101, 98, 1)"
                class="queding"
                type="primary"
                @click="submitAdd(ruleFormRef)"
              >
                保存
              </el-button>
              <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

      <el-dialog
        class="mapDialong"
        v-model="mapDialong"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="地图"
        align-center
        width="1200"
        :before-close="closeMap"
      >
        <Map
          @mapClick="mapDatas"
          :fatherMessage="fatherMessage"
          :key="fatherMessage.timer"
        ></Map>
      </el-dialog>
    </div>
    <div class="bgImg" v-if="bgImg">
      <el-carousel
        @click="bgImg = false"
        ref="bgImg"
        indicator-position
        arrow="always"
        :autoplay="false"
        @change="switchBgImg"
        trigger
        :initial-index="switchImgInd3"
      >
        <el-carousel-item v-for="item in bgImgList" :key="item.id">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onBeforeMount, onMounted } from "vue";
import { useRouter, useRoute } 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 COS from "cos-js-sdk-v5";
import Map from "@/views/map/map.vue";

import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
const route = useRoute(); // 获取router-push传过来的flag
// 表格数据
const loading = ref(true);
const tableData = ref({});

// 添加员工弹窗数据 (------------------------------------)
const addDialogVisible = ref(false); // 控制添加员工弹窗
const cities = ref([]); // 名宿配置数据
const checkedCities = ref([]); // 名宿配置选中数据
const teamIdName = ref(); // 民宿配置

const infoImg = ref(); // 控制走马灯ref
const switchImgInd = ref(0); // 幻灯片的默认索引

const infoImg2 = ref(); // 控制走马灯ref
const switchImgInd2 = ref(0); // 幻灯片的默认索引

const img1File = ref(); // 弹窗中封面图地址
const img1 = ref();

const imgList2 = ref([]); // 弹窗中详情图地址(幻灯片)
const fileList = reactive({ list: [] }); // 添加多张图片的文件

const mapDialong = ref(false); // 打开地图弹窗
const searchInput = reactive({
  keyWord: "",
  teamId: "",
  schoolId: "",
}); // 搜索按钮数据

// 添加员工表单数据
const ruleFormRef = ref();
const ruleForm = reactive({
  coverImg: "", //封面图
  htype: "", //民宿类型
  hstatus: "", //状态(1 营业 2.休息)
  hposition: "", //详细地址
  openTime: "", //开业时间
  fitupTime: "", //装修时间
  liveTime: [], //入住时间
  leaveTime: [], //离店时间
  roomNumber: "", //客房数
  remark: "", //
  hconfig: "", //酒店配置
  isOrder: "", //接单设置（1自动接单 2手动接单）
  isCheckout: "", //是否自动退房（1是 2否）
  isCanorder: "", //是否能取消订单（1是 2否）
  lockTime: "", //订单锁定时间
  fileListJson: "", //民宿详细图
  hpositionWens: "", // 经纬度
  cancelTime: "", // 入住当天 取消订单
  id: "",
});
// 传给子组件的参数
const fatherMessage = ref({
  position: "",
  lat: "",
  lng: "",
  timer: "",
});

// 点击查看图片
const bgImg = ref(false);
const bgImgList = ref([]);
const switchImgInd3 = ref();
const flags = ref(); // 记录是谁点击查看图片

// 锁定时间验证
const validatePrice = (rule, value, callback) => {
  var reg = /^\+?[1-9]\d*$/; // 大于0的正整数
  if (reg.test(value) && value <= 60) {
    // 非大于0的正整数，给出提示
    callback();
  } else {
    callback(new Error("锁定时间范围为1~60之间的正整数"));
  }
  // if (/^([1-6])?[1-9]$/.test(value)) {
  //   callback();
  // } else {
  //   callback(new Error("锁定时间范围在1~60之间"));
  // }
};
// 表单验证
const rules = reactive({
  // serial: [{ required: true, message: "序列号不能为空", trigger: "blur" }],
  coverImg: [{ required: true, message: "封面图不能为空", trigger: "blur" }],
  htype: [{ required: true, message: "民宿类型不能为空", trigger: "blur" }],
  hstatus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  hposition: [
    { required: true, message: "详细地址不能为空", trigger: "change" },
  ],
  openTime: [{ required: true, message: "开业时间不能为空", trigger: "blur" }],
  fitupTime: [{ required: true, message: "装修时间不能为空", trigger: "blur" }],
  liveTime: [{ required: true, message: "入住时间不能为空", trigger: "blur" }],
  leaveTime: [{ required: true, message: "离店时间不能为空", trigger: "blur" }],
  roomNumber: [{ required: true, message: "客房数不能为空", trigger: "blur" }],
  hconfig: [{ required: true, message: "民宿配置不能为空", trigger: "blur" }],
  isOrder: [{ required: true, message: "接单设置不能为空", trigger: "blur" }],
  isCheckout: [
    { required: true, message: "是否自动退房不能为空", trigger: "blur" },
  ],
  lockTime: [
    { required: true, message: "锁定时间不能为空", trigger: "change" },
    { validator: validatePrice, trigger: "change" },
  ],
  isCanorder: [
    { required: true, message: "是否能取消订单不能为空", trigger: "blur" },
  ],
  fileListJson: [
    { required: true, message: "详情图不能为空", trigger: "blur" },
  ],
  cancelTime: [
    { required: true, message: "取消订单不能为空", trigger: "blur" },
  ],
});

// 查看员工列表
const getList = async () => {
  loading.value = true;
  let data = {
    managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/hotelgetByHotelInfo.action",
    headers: {},
    params: data,
  });
  console.log(res, "民宿信息");
  if (res.data.code == 200) {
    if (res.data.data.hconfig) {
      res.data.data.hconfigNames = [];
      res.data.data.hconfig.split(",").forEach((item) => {
        cities.value.forEach((i) => {
          if (item == i.id) {
            res.data.data.hconfigNames.push({
              name: i.name,
              fileUrl: i.fileUrl,
            });
          }
        });
      });
    }
    fileList.list = res.data.data.fileInfoList;
    imgList2.value = res.data.data.fileInfoList;
    // img1.value = res.data.data.coverImg;
    // console.log(!res.data.data.lockTime, "锁定时间");

    // if (!res.data.data.lockTime) {
    //   res.data.data.lockTime = 0;
    // }
    tableData.value = res.data.data;

    ruleForm.id = tableData.value.id;

    ruleForm.coverImg = tableData.value.coverImg;

    ruleForm.hpositionWens = tableData.value.hpositionWens;
    if (tableData.value.hconfig) {
      checkedCities.value = tableData.value.hconfig.split(",");
    }
    loading.value = false;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

const mapDatas = (data) => {
  if (data.flag) {
    console.log(data, "确定");
    ruleForm.hposition = data.address;
    ruleForm.hpositionWens = data.lat + "," + data.lng;
    mapDialong.value = false;
  } else {
    console.log(data, "取消");
    mapDialong.value = false;
  }
};

// 点击地图定位按钮
const clickMap = () => {
  console.log(tableData.value, "点击了地图定位");
  fatherMessage.value.position = tableData.value.hposition;
  fatherMessage.value.lng = tableData.value.hpositionWens.split(",")[0];
  fatherMessage.value.lat = tableData.value.hpositionWens.split(",")[1];
  fatherMessage.value.timer = new Date().getTime();
  mapDialong.value = true;
};

//维护信息（--------------------------------------）
const maintain = async () => {
  console.log(tableData.value.fileInfoList);

  img1.value = tableData.value.coverImg;
  ruleForm.fileListJson = fileList.list;
  ruleForm.htype = tableData.value.htype;
  ruleForm.hstatus = tableData.value.hstatus;
  ruleForm.hposition = tableData.value.hposition;
  ruleForm.openTime = tableData.value.openTime;

  ruleForm.fitupTime = tableData.value.fitupTime;

  ruleForm.liveTime = tableData.value.liveTime;
  ruleForm.leaveTime = tableData.value.leaveTime;
  ruleForm.roomNumber = tableData.value.roomNumber;
  ruleForm.remark = tableData.value.remark;
  ruleForm.hconfig = tableData.value.hconfig;
  if (tableData.value.hconfig) {
    checkedCities.value = tableData.value.hconfig.split(",");
  }
  ruleForm.isOrder = tableData.value.isOrder;
  ruleForm.isCheckout = tableData.value.isCheckout;
  ruleForm.isCanorder = tableData.value.isCanorder;

  ruleForm.lockTime = tableData.value.lockTime;
  ruleForm.cancelTime = tableData.value.cancelTime;

  addDialogVisible.value = true;
};
// 取消维护
const cancelAdd = () => {
  addDialogVisible.value = false;
  fileList.list = tableData.value.fileInfoList;
  ruleFormRef.value.resetFields();
};

// 左右切换走马灯
const infoImgClick = (val) => {
  if (val == "right") {
    //点击右按钮切换至下一页走马灯
    infoImg.value.next();
  } else {
    //点击左按钮切换至上一页走马灯
    infoImg.value.prev();
  }
};

// 得到当前幻灯片的索引
const switchImg = (val) => {
  //   console.log(val);
  switchImgInd.value = val;
};
// 左右切换走马灯
const infoImgClick2 = (val) => {
  if (val == "right") {
    //点击右按钮切换至下一页走马灯
    infoImg2.value.next();
  } else {
    //点击左按钮切换至上一页走马灯
    infoImg2.value.prev();
  }
};
// 得到当前幻灯片的索引
const switchImg2 = (val) => {
  //   console.log(val);
  switchImgInd2.value = val;
};
// 删除幻灯片中的图片
const delImgList = (item) => {
  console.log(switchImgInd2.value);
  // console.log(item);
  fileList.list = fileList.list.filter((i, index) => {
    // return i.id != item.id;
    return index != switchImgInd2.value;
  });
};
// 封面图上传(------------------------------------------------------)
// 添加照片时往fileList列表中添加图片信息(封面图上传图片)
const handleChange = (file, fileLists) => {
  console.log(file, "file11111");
  if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
    img1.value = file.url;
  }
  // ruleForm.coverImg = file.url;
};
// 可以获取图片参数(封面图上传图片)
const handleUpload = async (file) => {
  console.log(file, "2222");
  img1File.value = file.file;
  if (img1File.value) {
    const cos = new COS({
      SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
      SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
      SecurityToken: "1320402385",
      Bucket: "jinganminsu-1320402385",
      Region: "ap-nanjing",
    });

    const files = file.file;
    console.log(files, "files文件");

    const key = file.file.name; // 设置上传到 COS 后的文件名

    cos.putObject(
      {
        Bucket: "jinganminsu-1320402385",
        Region: "ap-nanjing",
        Key: key,
        Body: files,
        onProgress: function (progressData) {
          console.log(JSON.stringify(progressData));
        },
      },
      function (err, data) {
        if (err) {
          console.error(err, "请求失败");
        } else {
          console.log(data, "请求成功");
          ruleForm.coverImg = "https://" + data.Location;
          // 成功
        }
      }
    );

    // datas.set("files", img1File.value);
    // let ress = await axios({
    //   method: "post",
    //   url: api.value + "/file/cos/upload",
    //   headers: {},
    //   data: datas,
    // });
    // console.log(ress, "图片上传成功封面图");
    // ruleForm.coverImg = ress.data.data;
  }
};
// 移出图片(封面图上传图片)
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
// 限制上传图片的大小
const beforeAvatarUpload = (rawFile) => {
  console.log(rawFile.type);

  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片的大小不能超过10MB!");
    return false;
  }
  return true;
};

//轮播图上传(-----------------------------------------------)
// 移出照片
const handleRemove2 = (uploadFile, uploadFiles) => {
  // console.log(uploadFile.uid, uploadFiles);
  fileList.list = fileList.list.filter((item) => {
    return item.uid != uploadFile.uid;
  });
  ruleForm.fileListJson = fileList.list;
};
// 点击图片的查看按钮
const handlePreview2 = (file) => {
  // imgUrl.value = file.url;
  // imgVisible.value = true;
  // console.log(file);
};
// 限制上传图片的大小
const beforeAvatarUpload2 = (rawFile) => {
  // console.log(rawFile.type);
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片的大小不能超过10MB!");
    return false;
  }
  return true;
};
// 添加照片时往fileList列表中添加图片信息
const handleChange2 = async (file, fileLists) => {
  // console.log(file, "1111");
  // fileList.list.push(file);
};
// 可以获取图片参数
const handleUpload2 = async (file) => {
  if (fileList.list.length >= 6) {
    ElMessage.error("最多可上传6张图片!");
    return false;
  }
  console.log(file, "22222222");
  img1File.value = file.file;
  const cos = new COS({
    SecretId: "AKIDJSP9gz469yZv77tQjotsgHguvjIgtvkL",
    SecretKey: "b3MVRD1g8RYS9g195oMkvukQvDKZfbOz",
    SecurityToken: "1320402385",
    Bucket: "jinganminsu-1320402385",
    Region: "ap-nanjing",
  });

  const files = file.file;
  console.log(files, "files文件");

  const key = file.file.name; // 设置上传到 COS 后的文件名

  cos.putObject(
    {
      Bucket: "jinganminsu-1320402385",
      Region: "ap-nanjing",
      Key: key,
      Body: files,
      onProgress: function (progressData) {
        console.log(JSON.stringify(progressData));
      },
    },
    function (err, data) {
      if (err) {
        console.error(err, "请求失败");
      } else {
        console.log(data, "请求成功");
        // ruleForm.coverImg = "https://" + data.Location;
        let arr = {
          uid: file.file.uid,
          url: "https://" + data.Location,
        };

        fileList.list = fileList.list.concat([arr]);
        ruleForm.fileListJson = fileList.list;
        // 成功
      }
    }
  );
  // let data = new FormData();
  // data.set("files", file.file);
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/file/cos/upload",
  //   headers: {},
  //   data: data,
  // });
  // console.log(res, "图片上传成功详情图");
  // if (res.data.code == 1) {
  //   // res.data.data.uid = file.file.uid;
  //   // console.log([res.data.data]);
  //   let arr = {
  //     uid: file.file.uid,
  //     url: res.data.data,
  //   };

  //   fileList.list = fileList.list.concat([arr]);
  //   ruleForm.fileListJson = fileList.list;
  // }
};
// 确认维护信息
const submitAdd = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = new FormData();
      data.set("coverImg", ruleForm.coverImg);
      data.set("htype", ruleForm.htype);
      data.set("hstatus", ruleForm.hstatus);
      data.set("hposition", ruleForm.hposition);
      data.set("openTime", ruleForm.openTime);
      data.set("fitupTime", ruleForm.fitupTime);
      data.set("liveTime", ruleForm.liveTime);
      data.set("leaveTime", ruleForm.leaveTime);
      // data.set("roomNumber", ruleForm.roomNumber);
      data.set("remark", ruleForm.remark);
      data.set("hconfig", ruleForm.hconfig);
      data.set("isOrder", ruleForm.isOrder);
      data.set("isCheckout", ruleForm.isCheckout);
      data.set("isCanorder", ruleForm.isCanorder);
      data.set("lockTime", ruleForm.lockTime);
      data.set("hpositionWens", ruleForm.hpositionWens);
      data.set("fileListJson", JSON.stringify(fileList.list));
      data.set("id", ruleForm.id);
      data.set("managerId", sessionStorage.getItem("token"));
      data.set("hname", tableData.value.hotelName);
      data.set("createId", sessionStorage.getItem("roomId"));
      data.set("cancelTime", ruleForm.cancelTime);

      console.log(ruleForm);

      let res = await axios({
        method: "post",
        url: api.value + "/mhotel/hotelupdateHotel.action",
        headers: {},
        data: data,
      });
      console.log(res, "维护信息");
      if (res.data.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
        addDialogVisible.value = false;
        ruleFormRef.value.resetFields();
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1500);

// 选择民宿配置
const checkHouse = (val) => {
  console.log(val);
  checkedCities.value = val;
  ruleForm.hconfig = val.join(",");
};

// 查看图片
const lookImg = (flag) => {
  bgImg.value = true;
  if (flag == 1) {
    flags.value = 1;
    let arr = [
      {
        url: tableData.value.coverImg,
        id: tableData.value.coverImg,
      },
    ];
    bgImgList.value = arr;
  } else if (flag == 2) {
    flags.value = 2;
    console.log(imgList2.value);
    let arr = [];
    imgList2.value.forEach((item) => {
      arr.push({
        url: item.url,
        id: item.id,
      });
    });
    switchImgInd3.value = switchImgInd.value;
    bgImgList.value = arr;
  } else if (flag == 3) {
    flags.value = 3;
    let arr = [
      {
        url: img1.value,
        id: tableData.value.coverImg,
      },
    ];
    bgImgList.value = arr;
  } else if (flag == 4) {
    flags.value = 4;
    let arr = [];
    fileList.list.forEach((item) => {
      arr.push({
        url: item.url,
        id: item.id,
      });
    });
    switchImgInd3.value = switchImgInd2.value;
    bgImgList.value = arr;
  }
};
// 切换图片后缩列图也跟着变
const switchBgImg = (val) => {
  console.log(val);
  switchImgInd3.value = val;
  if (flags.value == 2) {
    infoImg.value.setActiveItem(val);
  } else if (flags.value == 4) {
    infoImg2.value.setActiveItem(val);
  }
};
onBeforeMount(async () => {
  api.value = store.state.user.api;
  let flag = route.params.flag;
  console.log(flag);

  if (flag == 1) {
    maintain();
  }
  // 查看房型配置
  let data = {
    code: 2,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/mhotel/hotelqueryList.action",
    headers: {},
    params: data,
  });
  console.log(res, "房型配置");
  cities.value = res.data.data;

  // 民宿类型配置
  let datas = {
    code: 1,
  };
  let ress = await axios({
    method: "get",
    url: api.value + "/mhotel/hotelqueryList.action",
    headers: {},
    params: datas,
  });
  console.log(ress, "民宿类型配置");
  teamIdName.value = ress.data.data;
  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 240px);
  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);

  .title {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-weight: 600;

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

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

  .content {
    width: calc(100% - 60px);
    height: calc(100%);
    overflow: auto;
    margin: 0 auto;
    display: flex;

    .left {
      flex: 1;
      height: 100%;
      color: #000;

      .titles {
        font-size: 18px;
        margin: 8px 0;
        font-weight: 700;
      }

      .tooltips {
        display: flex;
        margin: 15px 0;

        .titleContent {
          display: inline-block;
          width: 100px;
        }

        .img {
          display: flex;
          margin-right: 20px;

          .img_title {
            // margin: 0 20px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
              display: inline-block;
              width: 53px;
            }
          }
        }

        .img1 {
          .tupian {
            width: 183px;
            height: 121px;
            opacity: 1;
            border-radius: 10px;

            .lookImg {
              width: 183px;
              height: 121px;
              cursor: pointer;
              position: relative;
              top: -127px;
              left: 0;
              border-radius: 10px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 30px;
                height: 30px;
                opacity: 0;
              }
            }

            .lookImg:hover {
              background-color: rgba(0, 0, 0, 0.2);

              img {
                opacity: 1;
              }
            }
          }

          img {
            width: 183px;
            height: 121px;
            opacity: 1;
            border-radius: 10px;
          }
        }

        .img2 {
          .carousel {
            height: 120px;
            display: flex;
            align-items: center;
            position: relative;

            .pre {
              img {
                width: 30px;
                cursor: pointer;
              }
            }

            .numImg {
              position: relative;
              color: #fff;
              right: 70px;
              bottom: -40px;
            }

            .el-carousel {
              width: 213px;
              height: 120px;

              img {
                width: 213px;
                height: 120px;
              }

              :deep(.el-carousel__container) {
                border: 1px solid #ccc;
                height: 120px !important;
                box-sizing: border-box;

                .el-carousel__arrow {
                  display: none;
                }
              }
            }

            .lookImg {
              width: 213px;
              height: 120px;
              cursor: pointer;
              position: absolute;
              top: 0;
              left: 30px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 30px;
                height: 30px;
                opacity: 0;
              }
            }

            .lookImg:hover {
              background-color: rgba(0, 0, 0, 0.2);

              img {
                opacity: 1;
              }
            }
          }
        }

        .cont:nth-child(1) {
          span:nth-child(1) {
            color: rgba(128, 128, 128, 1);
            display: inline-block;
            width: 80px;
          }
        }

        .cont:nth-child(2) {
          margin-left: 100px;

          span:nth-child(1) {
            color: rgba(128, 128, 128, 1);
            display: inline-block;
            width: 80px;
          }
        }

        .address {
          display: flex;

          span:nth-child(2) {
            display: inline-block;
            width: 85%;
          }
        }
      }

      .tooltips:last-child {
        .cont {
          display: flex;

          .introduce {
            width: 85%;
            height: 170px;
            overflow: auto;
          }
        }
      }
    }

    .right {
      flex: 1;
      height: 100%;
      color: #000;
      padding: 0 0 0 60px;

      .titles {
        font-size: 18px;
        margin: 8px 0;
        font-weight: 700;
      }

      .tooltips {
        display: flex;
        flex-wrap: wrap;
        margin: 15px 0;

        .cont:nth-child(1) {
          span:nth-child(1) {
            color: rgba(128, 128, 128, 1);
            display: inline-block;
            padding-right: 10px;
          }
        }

        .configuration {
          display: flex;
          align-items: center;
          margin: 5px 10px;

          img {
            width: 28px;
            height: 28px;
            margin-right: 8px;
          }
        }
      }
    }

    // 添加员工弹窗样式
    :deep(.addStaff) {
      height: 800px;
      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: 10px 30px 10px 35px;

        .slider {
          height: 720px;
          overflow: auto;
        }

        .tooltips {
          display: flex;

          .img {
            display: flex;

            .img_title {
              span {
                display: inline-block;
                width: 60px;
              }
            }

            .updateImg {
              display: flex;
              flex-direction: column;
              //   align-items: center;
              width: 300px;

              .el-button {
                margin-top: 10px;
              }

              .lookImgs {
                width: 183px;
                height: 121px;
                cursor: pointer;
                position: absolute;
                top: 0;
                left: 60px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  width: 30px;
                  height: 30px;
                  opacity: 0;
                }
              }

              .lookImgs:hover {
                background-color: rgba(0, 0, 0, 0.2);

                img {
                  opacity: 1;
                }
              }
            }
          }
        }

        .img1 {
          img {
            width: 183px;
            height: 121px;
            opacity: 1;
            border-radius: 10px;
          }

          .updateImg {
            .el-upload {
              margin-left: 45px;
            }

            .el-upload__tip {
              color: rgba(212, 48, 48, 1);
              transform: translateX(-30px);
            }

            .el-upload-list {
              display: none;
            }
          }
        }

        .img2 {
          position: relative;

          .carousel {
            height: 120px;
            display: flex;
            align-items: center;

            .pre {
              img {
                width: 30px;
                cursor: pointer;
              }
            }

            .numImg {
              position: relative;
              color: #fff;
              right: 70px;
              bottom: -40px;
            }

            .el-carousel {
              width: 213px;
              height: 120px;

              img {
                width: 213px;
                height: 120px;
              }

              .el-carousel__container {
                border: 1px solid #ccc;
                height: 120px !important;
                box-sizing: border-box;

                .el-carousel__arrow {
                  display: none;
                }
              }
            }

            .lookImg {
              width: 213px;
              height: 120px;
              position: absolute;
              z-index: 99;
              top: 0;
              left: 90px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                width: 30px;
                height: 30px;
                opacity: 0;
              }

              .delimg {
                width: 30px;
                height: 30px;
                background-image: url("@/assets/imgDel.png");
                background-size: 100%;
                opacity: 0;
                margin-left: 5px;
              }
            }

            .lookImg:hover {
              background-color: rgba(0, 0, 0, 0.2);

              img {
                opacity: 1;
                cursor: pointer;
              }

              .delimg {
                opacity: 1;
                cursor: pointer;
              }
            }
          }

          .updateImg {
            .el-upload {
              margin-left: 90px;
            }

            .el-upload__tip {
              margin-left: 20px;
              color: rgba(212, 48, 48, 1);
            }

            // 录播图显示文件
            .el-upload-list {
              display: none;
            }
          }
        }

        .el-input {
          width: 200px;
        }

        .el-form {
          .titles {
            font-weight: 600;
            color: #000;
            font-size: 18px;
            margin: 10px 0 20px 0;

            span:nth-child(2) {
              color: rgba(212, 48, 48, 1);
            }
          }

          .footer {
            color: rgba(212, 48, 48, 1);
          }

          .form_item {
            display: flex;
            .items {
              .el-checkbox-group {
                height: 100%;
                line-height: 0;
              }
            }
            .intro {
              .el-form-item__content {
                width: 550px;
              }
            }

            .default {
              .el-form-item__label {
                width: 160px !important;
              }
            }
          }

          .tag {
            .el-form-item__content {
              width: 200px;
            }
          }

          .nowDay {
            margin-bottom: 18px;

            .el-form-item__label {
              width: 90px !important;
            }

            .el-form-item {
              margin: 0 10px 0 0;
            }

            .now {
              width: 332px;
            }
          }
        }

        .options {
          width: 100%;
          margin: 25px 0 15px 0;

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

            display: flex;
            flex-direction: row-reverse;
          }
        }
      }
    }

    // 添加员工弹窗样式
    :deep(.mapDialong) {
      height: 800px;
      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;
      }
    }
  }

  .bgImg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);

    // border-radius: 50px;
    :deep(.el-carousel__container) {
      width: 100%;
      height: calc(100vh);

      .el-carousel__item {
        display: flex;
        justify-content: center;

        img {
          height: 100%;
        }
      }
    }
  }
}
</style>