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

<template>
  <div class="content-box">
    <div class="title">
      <div class="cameratxt">系统通知</div>
    </div>
    <div class="contentss">
      <div class="left">
        <div class="titles">公寓设置</div>
        <div class="tooltips">
          <div class="img img1">
            <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 systemData.coverPicture"
                    :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" v-if="systemData.coverPicture">{{
                  switchImgInd2 + 1 + "/" + systemData.coverPicture.length
                }}</span>
                <div class="lookImg" v-if="systemData.coverPicture">
                  <img src="@/assets/lookImg.png" alt="" @click="lookImg" />
                  <div
                    class="delimg"
                    @click="delImgList(item)"
                    v-if="flagBtn.gongyushezhi == 1"
                  ></div>
                </div>
              </div>
              <el-upload
                v-if="flagBtn.gongyushezhi == 1"
                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(0, 97, 255, 1)"
                    >上传图片</el-button
                  >
                </template>
                <template #tip>
                  <!-- <div class="el-upload__tip">
                    （注：图片大小不超过10M，建议按16:9比例）
                  </div> -->
                </template>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">名称:</div>
              <el-input
                v-if="flagBtn.gongyushezhi == 1"
                clearable
                v-model.trim="systemData.name"
                @blur="systemChange"
                placeholder="请输入名称"
                style="max-width: 300px; width: 280px"
              />
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 300px;
                  width: 280px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 8px;
                "
                >{{ systemData.name }}</span
              >
            </div>
            <div class="conts">
              <div class="name">开业时间:</div>
              <el-date-picker
                v-if="flagBtn.gongyushezhi == 1"
                v-model="systemData.openingTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :prefix-icon="Calendar"
                placeholder="请选择开业时间"
                style="max-width: 300px; width: 280px"
                @change="systemChange"
              />
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 300px;
                  width: 280px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 8px;
                "
                >{{ systemData.openingTime }}</span
              >
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">地址:</div>
              <el-input
                v-if="flagBtn.gongyushezhi == 1"
                clearable
                v-model.trim="systemData.address"
                @blur="systemChange"
                placeholder="请输入地址"
                style="max-width: 300px; width: 280px"
              />
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 300px;
                  width: 280px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 8px;
                  overflow-x: auto;
                "
                >{{ systemData.address }}</span
              >
            </div>
            <div class="conts">
              <div class="name">装修时间:</div>
              <el-date-picker
                v-if="flagBtn.gongyushezhi == 1"
                v-model="systemData.decorationTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :prefix-icon="Calendar"
                placeholder="请选择装修时间"
                style="max-width: 300px; width: 280px"
                @change="systemChange"
              />
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 300px;
                  width: 280px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 8px;
                "
                >{{ systemData.decorationTime }}</span
              >
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">全日房入住时间:</div>
              <!-- <el-time-picker
                v-model="systemData.liveTime"
                format="HH:mm"
                value-format="HH:mm"
                :prefix-icon="Calendar"
                placeholder="请输入入住时间"
                style="max-width: 300px; width: 280px"
                @change="systemChange"
              /> -->
              <el-time-picker
                v-if="flagBtn.gongyushezhi == 1"
                v-model="systemData.liveTime"
                is-range
                range-separator="-"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="systemChange"
              />
              <span
                v-else
                style="
                  display: inline-block;
                  max-width: 300px;
                  width: 280px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 8px;
                "
                >{{ systemData.liveTime[0] }} -
                {{ systemData.liveTime[1] }}</span
              >
            </div>
            <!-- <div class="conts">
              <div class="name">离店时间:</div>
              <el-time-picker
                v-model="systemData.leaveTime"
                format="HH:mm"
                value-format="HH:mm"
                :prefix-icon="Calendar"
                placeholder="请选择离店时间"
                style="max-width: 300px; width: 280px"
                @change="systemChange"
              />
            </div> -->
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">钟点房入住时间:</div>
              <div class="hourlivetime">
                <div
                  class="addlive"
                  v-for="(i, ind) in systemData.hourlivetime"
                >
                  <el-time-picker
                    v-if="flagBtn.gongyushezhi == 1"
                    v-model="i.time"
                    is-range
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    @change="systemChange"
                  />
                  <span
                    v-else
                    style="
                      display: inline-block;
                      max-width: 300px;
                      width: 280px;
                      border: 1px solid #ccc;
                      border-radius: 3px;
                      height: 30px;
                      line-height: 30px;
                      padding-left: 8px;
                    "
                    >{{ i.time[0] }} - {{ i.time[1] }}</span
                  >
                  <img
                    v-if="flagBtn.gongyushezhi == 1"
                    class="img"
                    src="@/assets/addRoom.png"
                    @click="addhourClick(ind)"
                    alt=""
                  />
                  <img
                    class="img"
                    src="@/assets/delRoom.png"
                    @click="delhourClick(ind)"
                    alt=""
                    v-if="ind != 0 && flagBtn.gongyushezhi == 1"
                  />
                  <div class="img" alt="" v-else />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">电话号码:</div>
              <el-input
                v-if="flagBtn.gongyushezhi == 1"
                clearable
                v-model.trim="systemData.phoneNumbr"
                @blur="systemChange"
                class="w-50 m-2"
                placeholder="请输入电话号码"
                style="max-width: 300px; width: 280px"
              />
              <span
                v-else
                style="display: inline-block; max-width: 300px; width: 280px"
                >{{ systemData.phoneNumbr }}</span
              >
            </div>
          </div>
        </div>

        <div class="tooltips">
          <div class="rows">
            <div class="textarea">
              <div class="name">公寓简介:</div>
              <!-- <el-input
                v-if="flagBtn.gongyushezhi == 1"
                v-model="systemData.introductory"
                :rows="9"
                maxlength="1000"
                type="textarea"
                show-word-limit
                placeholder="请输入公寓简介"
                @blur="systemChange"
              /> -->
              <Richtext
                v-if="textShow"
                @richtextClick="richtextClick"
                :fatherMessage="fatherMessage"
              ></Richtext>
              <!-- <span v-else style="display: inline-block;max-width: 600px; width: 1000px;height:200px;border: 1px solid #ccc;overflow: auto;border-radius: 3px;padding: 5px 8px;">{{ systemData.introductory }}</span> -->
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="ApartmentSetting">
          <div class="titles">
            <div class="title">设施服务设置</div>
            <el-button
              v-if="flagBtn.sheshifuwushezhi == 1"
              @click="facilityServicesAdd"
              type="primary"
              color="rgba(0, 97, 255, 1)"
              >添加
            </el-button>
          </div>
          <el-table
            :row-class-name="tableRowClassName"
            :data="tableData.list"
            @selection-change="handleSelectionChange"
            :header-cell-style="{
              background: 'rgba(240, 243, 247, 1)',
              height: '50px',
              border: 0,
            }"
          >
            <el-table-column
              align="center"
              prop="iconPath"
              label="图标"
              width="120"
            >
              <template #default="{ row }">
                <img
                  :src="row.iconPath"
                  alt=""
                  style="width: 30px; height: 30px"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="houseService"
              label="房型服务"
            />
            <el-table-column
              v-if="flagBtn.sheshifuwushezhi == 1"
              align="center"
              label="操作"
            >
              <template #default="scope">
                <div class="options">
                  <div class="look" @click="facilityServicesEdit(scope.row)">
                    编辑
                  </div>
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否删除此设施服务?"
                    @confirm="facilityServicesDel(scope.row)"
                    @cancel="cancelEvent"
                  >
                    <template #reference>
                      <div class="del">删除</div>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="titles">
            <div class="set">退房设置</div>
          </div>
          <div class="system">
            <span>退房后 </span>
            <el-input
              v-if="flagBtn.tuifangshezhi == 1"
              clearable
              v-model.trim="checkOutData.turnOffTime"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入时间"
              @blur="checkOutSettingUpdate"
            >
              <template #suffix>
                <img
                  src="@/assets/icons/clock.png"
                  alt=""
                  style="width: 15px"
                />
              </template>
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ checkOutData.turnOffTime }}</span
            >
            <span>分钟，断电</span>
          </div>
          <div class="system">
            <span>预定时间最多 </span>
            <el-input
              v-if="flagBtn.tuifangshezhi == 1"
              clearable
              v-model.trim="checkOutData.preDay"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入天数"
              @blur="checkOutSettingUpdate"
            >
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ checkOutData.preDay }}</span
            >
            <span>天</span>
          </div> -->
          <div class="titles">
            <div class="set">
              补助设置<span style="font-size: 14px; padding: 0 15px"
                >/ 每房每日定额</span
              >
            </div>
          </div>
          <div class="system">
            <span>每人补助水量 </span>
            <el-input
              v-if="flagBtn.buzhushezhi == 1"
              clearable
              v-model.trim="subsidySetupData.freeQuotaOfWater"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入吨数"
              @blur="subsidySetupUpdate"
            >
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ subsidySetupData.freeQuotaOfWater }}</span
            >
            <span>吨</span>
            <span
              style="
                margin: 0 15px;
                display: inline-block;
                height: 32px;
                width: 2px;
                border-right: 1px solid rgba(166, 166, 166, 1);
              "
            ></span>
            <span>每人补助电量 </span>
            <el-input
              v-if="flagBtn.buzhushezhi == 1"
              clearable
              v-model.trim="subsidySetupData.freeQuotaOfElectric"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入度数"
              @blur="subsidySetupUpdate"
            >
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ subsidySetupData.freeQuotaOfElectric }}</span
            >
            <span>度</span>
          </div>
          <div class="titles">
            <div class="set">黑名单设置</div>
          </div>
          <div class="system">
            <span>预订未入住超 </span>
            <el-input
              v-if="flagBtn.heimingdanshezhi == 1"
              clearable
              v-model.trim="blackListData.num"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入天数"
              @blur="blackListDataUpdate"
            >
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ blackListData.num }}</span
            >
            <span>次，进入黑名单，不可免费预订</span>
          </div>
          <!-- <div class="titles">
            <div class="set">催缴设置</div>
          </div>
          <div class="system">
            <span>每 </span>
            <el-input
              v-if="flagBtn.cuijiaoshezhi == 1"
              clearable
              v-model.trim="callSystemData.askForPayment"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入天数"
              @blur="callSystemDataUpdate"
            >
            </el-input>
            <span
              v-else
              style="
                display: inline-block;
                width: 150px;
                border: 1px solid #ccc;
                border-radius: 3px;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                margin: 0 8px;
              "
              >{{ callSystemData.askForPayment }}</span
            >
            <span>天，对待结账老师进行催缴</span>
          </div> -->
        </div>
      </div>
    </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>
    <!-- 查看设施服务添加 -->
    <el-dialog
      class="addtable"
      v-model="addtableDataDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialongTitle"
      align-center
      width="500"
      :before-close="cancelAddtable"
    >
      <div class="slider">
        <el-form
          ref="addtableRef"
          :model="addtableRuleForm"
          :rules="addtableRules"
          label-width="100px"
          class="demo-ruleForm"
          size="default"
          label-position="left"
          status-icon
          :inline="true"
        >
          <el-form-item label="图标 :" prop="icon">
            <div class="lookImg">
              <img :src="addtableRuleForm.icon" alt="" @click="lookImg(i)" />
              <div
                class="lookImgs"
                @click="lookImgs(addtableRuleForm.icon)"
                v-if="addtableRuleForm.icon"
              >
                <img src="@/assets/lookImg.png" alt="" />
              </div>
            </div>
            <el-upload
              class="avatar-uploader"
              action=""
              list-type="picture"
              :on-preview="handleAddtablePreview"
              :on-change="handleAddtableChange"
              :http-request="handleAddtableUpload"
              :before-upload="beforeAddtableAvatarUpload"
            >
              <template #trigger>
                <el-button type="primary" color="rgba(0, 97, 255, 1)"
                  >上传图片</el-button
                >
              </template>
              <template #tip>
                <div class="el-upload__tip">
                  （注：图片大小不超过1M，建议按1:1比例）
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="房型服务 :" prop="name">
            <el-input
              v-model.trim="addtableRuleForm.name"
              placeholder="请输入房型服务"
              clearable
            />
          </el-form-item>
          <el-form-item class="options">
            <el-button
              color="rgba(41, 109, 227, 1)"
              class="queding"
              type="primary"
              @click="submitAddtable(addtableRef)"
            >
              确认
            </el-button>
            <el-button type="primary" plain @click="cancelAddtable"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  onBeforeMount,
  onUnmounted,
} 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 Richtext from "./richtext.vue";

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

const flagBtn = ref(); // 按钮权限
// 设置详情数据  (====================)
const systemData = reactive({
  address: null,
  coverPicture: [],
  decorationTime: null,
  id: null,
  introductory: null,
  hourlivetime: [],
  liveTime: [],
  name: null,
  openingTime: null,
  phoneNumbr: null,
});
// 富文本内容
const textShow = ref(false);
const fatherMessage = ref({
  data: "",
});

// 查看设施服务设置数据 (===========================)
const tableData = reactive({
  list: [],
});
const addtableDataDialog = ref(false);
const dialongTitle = ref("设施服务添加");
const addtableRef = ref();
const addtableRuleForm = reactive({
  id: "",
  icon: "",
  name: "",
});
const addtableRules = reactive({
  icon: [{ required: true, message: "图标不能为空", trigger: "blur" }],
  name: [{ required: true, message: "房型服务不能为空", trigger: "blur" }],
});
// 退房设置数据 （====================================）
const checkOutData = reactive({
  id: "",
  turnOffTime: "",
  preDay: "",
});
// 补助设置查询
const subsidySetupData = reactive({
  freeQuotaOfElectric: "",
  freeQuotaOfWater: "",
  id: "",
});
// 催缴设置查询
const callSystemData = reactive({
  id: "",
  askForPayment: "",
});
// 黑名单设置
const blackListData = reactive({
  id: "",
  num: "",
});

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

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

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

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

// 添加员工表单数据
const ruleForm = reactive({
  name: "研究生公寓", // 名称
  openingTime: "", // 开业时间
  id: "",
});

// 点击查看图片
const bgImg = ref(false);
const bgImgList = ref([]);
const switchImgInd3 = ref();

// 系统设置信息
const getList = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/apartment-setting/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "系统设置信息");
  if (res.data.code == 200) {
    systemData.address = res.data.data.address;
    if (res.data.data.coverPicture) {
      systemData.coverPicture = res.data.data.coverPicture;
    } else {
      systemData.coverPicture = [];
    }
    systemData.decorationTime = res.data.data.decorationTime;
    systemData.id = res.data.data.id;
    // console.log(res.data.data.introductory);
    systemData.introductory = res.data.data.introductory;
    fatherMessage.value.data = res.data.data.introductory;
    let arr = res.data.data.hourTime.split(",");
    let hourData = [];
    arr.forEach((i) => {
      let time = i.split("-");
      hourData.push({
        time: time,
      });
    });
    console.log(hourData);

    systemData.hourlivetime = hourData;
    systemData.liveTime[0] = res.data.data.liveTime;
    systemData.liveTime[1] = res.data.data.leaveTime;
    systemData.name = res.data.data.name;
    systemData.openingTime = res.data.data.openingTime;
    systemData.phoneNumbr = res.data.data.phoneNumbr;
  } else {
    if (res.data.code == 500) {
      console.log(res.data);
      if (res.data.message == "无效token,请重新登入") {
        router.push({ path: "/login" });
      }
    }
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 添加钟点房时间列表
const addhourClick = () => {
  systemData.hourlivetime.push({ time: [] });
};
// 删除钟点房时间列表
const delhourClick = (ind) => {
  systemData.hourlivetime.splice(ind, 1);
  console.log(systemData.hourlivetime);
  systemChange();
};
// 查看设施服务设置
const facilityServices = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let ress = await axios({
    method: "get",
    url: api.value + "/facility-services/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(ress, "查看设施服务设置");
  if (ress.data.code == 200) {
    tableData.list = ress.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
// 退房设置查询
const checkOutSetting = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let resss = await axios({
    method: "get",
    url: api.value + "/check-out-setting/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(resss, "退房设置查询");
  if (resss.data.code == 200) {
    checkOutData.id = resss.data.data[0].id;
    checkOutData.turnOffTime = resss.data.data[0].turnOffTime;
    checkOutData.preDay = resss.data.data[0].preDay;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};
// 补助设置查询
const subsidySetup = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let resss = await axios({
    method: "get",
    url: api.value + "/subsidy-setup/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(resss, "补助设置查询");
  if (resss.data.code == 200) {
    subsidySetupData.freeQuotaOfElectric =
      resss.data.data[0].freeQuotaOfElectric;
    subsidySetupData.freeQuotaOfWater = resss.data.data[0].freeQuotaOfWater;
    subsidySetupData.id = resss.data.data[0].id;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};
// 催缴设置查询
const callSystem = async () => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
  };
  let resss = await axios({
    method: "get",
    url: api.value + "/call-system/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(resss, "催缴设置查询");
  if (resss.data.code == 200) {
    callSystemData.askForPayment = resss.data.data[0].askForPayment;
    callSystemData.id = resss.data.data[0].id;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};
// 黑名单设置
const blackList = async () => {
  let resss = await axios({
    method: "get",
    url: api.value + "/blacklist-setting/list",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
  });
  console.log(resss, "黑名单设置");
  if (resss.data.code == 200) {
    blackListData.num = resss.data.data.count;
    blackListData.id = resss.data.data.id;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};
// 系统设置信息修改 (===============================================================)
const systemChange = async () => {
  let arr = [];
  systemData.coverPicture.forEach((item) => {
    arr.push(item.url);
  });
  console.log(systemData.hourlivetime);
  let flag = systemData.hourlivetime.some((item) => {
    return item.time.length == 0;
  });
  let hourlivetime = [];
  if (flag) {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "时间段不能为空",
      center: true,
    });
    return false;
  } else {
    systemData.hourlivetime.forEach((item) => {
      let val = item.time.join("-");
      hourlivetime.push(val);
    });
  }
  console.log(hourlivetime.join(","));
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"), //权限表id
    id: systemData.id, //id(不带id时是添加，带id时是修改)
    coverPicture: arr.join(","), //封面图，多张用，隔开
    name: systemData.name, //名称
    address: systemData.address, //地址
    openingTime: systemData.openingTime, //开业时间
    decorationTime: systemData.decorationTime, //装修时间
    liveTime: systemData.liveTime[0], //入住时间
    leaveTime: systemData.liveTime[1], //离店时间
    hourTime: hourlivetime.join(","), // 钟点房时段
    phoneNumbr: systemData.phoneNumbr, //电话号码
    introductory: systemData.introductory, //简介
  };
  let res = await axios({
    method: "post",
    url: api.value + "/apartment-setting/updateOrSave",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "系统设置信息修改");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 富文本编辑器 (----------------------------------------------------)

const richtextClick = lodash.debounce((data) => {
  console.log(data, "富文本传过来的数据");
  systemData.introductory = data.html;
  fatherMessage.value.data = data.html;
  if (flagBtn.value.gongyushezhi == 1) {
    systemChange();
  }
}, 500);

// 查看设施服务添加 （===============================================================）
const facilityServicesAdd = async () => {
  addtableDataDialog.value = true;
  addtableRuleForm.icon = "";
  addtableRuleForm.name = "";
  addtableRuleForm.id = "";
};
const cancelAddtable = () => {
  addtableDataDialog.value = false;
};
// 上传图片
const handleAddtableChange = async (file, fileList) => {
  console.log(file, "11111111");
};
// 可以获取图片参数(封面图上传图片)
const handleAddtableUpload = async (file) => {
  console.log(file, "22222222");
  let data = new FormData();
  data.set("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/upload/save",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "成功上传图片");
  if (res.data.code == 200) {
    addtableRuleForm.icon = res.data.data.url;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 限制上传图片的大小
const beforeAddtableAvatarUpload = (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 > 1) {
    ElMessage.error("图片的大小不能超过1MB!");
    return false;
  }
  return true;
};
// 确认维护信息
const submitAddtable = lodash.debounce(async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        permissionSettingId: sessionStorage.getItem("permissionSettingId"), //权限表id
        iconPath: addtableRuleForm.icon, //图标路径
        houseService: addtableRuleForm.name, //房型服务
      };
      if (addtableRuleForm.id) {
        data.id = addtableRuleForm.id;
        let res = await axios({
          method: "post",
          url: api.value + "/facility-services/update",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res, "确定编辑服务");
        if (res.data.code == 200) {
          facilityServices();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addtableDataDialog.value = false;
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let res = await axios({
          method: "post",
          url: api.value + "/facility-services/save",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("user_head"),
          },
          data: data,
        });
        console.log(res, "确定添加服务");
        if (res.data.code == 200) {
          facilityServices();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addtableDataDialog.value = false;
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
}, 1500);
const facilityServicesEdit = (row) => {
  console.log(row);
  addtableDataDialog.value = true;
  addtableRuleForm.icon = row.iconPath;
  addtableRuleForm.name = row.houseService;
  addtableRuleForm.id = row.id;
};
// 删除服务设置
const facilityServicesDel = async (row) => {
  let data = {
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    id: row.id,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/facility-services/delete",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    params: data,
  });
  console.log(res, "删除服务设置");
  if (res.data.code == 200) {
    facilityServices();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 退房设置修改 （===============================================================）
const checkOutSettingUpdate = async () => {
  let data = {
    id: checkOutData.id, //退房设置id(不带id时是添加，带id时是修改)
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    turnOffTime: checkOutData.turnOffTime, //退房后断水断电时间 单位：分钟
    preDay: checkOutData.preDay, //预定提前天数 单位：天
  };
  let resss = await axios({
    method: "post",
    url: api.value + "/check-out-setting/saveOrUpdate",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(resss, "退房设置修改");
  if (resss.data.code == 200) {
    checkOutSetting();
    ElMessage({
      type: "success",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};

// 补助设置修改 （================================================================）
const subsidySetupUpdate = async () => {
  let data = {
    id: subsidySetupData.id, //补助设置id(不带id时是添加，带id时是修改)
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    freeQuotaOfWater: subsidySetupData.freeQuotaOfWater, //水免费额度
    freeQuotaOfElectric: subsidySetupData.freeQuotaOfElectric, //电免费额度
  };
  let resss = await axios({
    method: "post",
    url: api.value + "/subsidy-setup/saveOrUpdate",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(resss, "补助设置修改");
  if (resss.data.code == 200) {
    subsidySetup();
    ElMessage({
      type: "success",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};

// 催缴设置修改 （================================================================）
const callSystemDataUpdate = async () => {
  let data = {
    id: callSystemData.id, //催缴设置id(不带id时是添加，带id时是修改)
    permissionSettingId: sessionStorage.getItem("permissionSettingId"),
    askForPayment: callSystemData.askForPayment,
  };
  let resss = await axios({
    method: "post",
    url: api.value + "/call-system/saveOrUpdate",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(resss, "催缴设置修改");
  if (resss.data.code == 200) {
    callSystem();
    ElMessage({
      type: "success",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};

// 黑名单设置修改 （================================================================）
const blackListDataUpdate = async () => {
  let data = {
    id: blackListData.id, //催缴设置id(不带id时是添加，带id时是修改)
    count: blackListData.num,
  };
  let resss = await axios({
    method: "post",
    url: api.value + "/blacklist-setting/update",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(resss, "催缴设置修改");
  if (resss.data.code == 200) {
    blackList();
    ElMessage({
      type: "success",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resss.data.message,
      center: true,
    });
  }
};

// 左右切换走马灯
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);
  systemData.coverPicture = systemData.coverPicture.filter((i, index) => {
    // return i.count != item.count;
    return index != switchImgInd2.value;
  });
  systemChange();
};

//轮播图上传(-----------------------------------------------)
// 移出照片
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) => {
  console.log(file, "22222222");
  let data = new FormData();
  data.set("file", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/upload/save",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("user_head"),
    },
    data: data,
  });
  console.log(res, "成功上传图片");
  if (res.data.code == 200) {
    console.log(systemData.coverPicture);

    systemData.coverPicture.push({
      url: res.data.data.url,
      count: systemData.coverPicture.length,
    });
    systemChange();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  console.log(systemData.coverPicture, "详情图片");
};
// 查看图片一张
const lookImgs = (i) => {
  bgImg.value = true;
  let arr = [];
  arr.push({
    url: i,
  });
  bgImgList.value = arr;
};
// 查看图片多张
const lookImg = () => {
  bgImg.value = true;
  // let arr = [];
  // systemData.coverPicture.forEach((item) => {
  //   arr.push({
  //     url: item.url,
  //     count: item.count,
  //   });
  // });
  switchImgInd3.value = switchImgInd2.value;
  bgImgList.value = systemData.coverPicture;
};
// 切换图片后缩列图也跟着变
const switchBgImg = (val) => {
  console.log(val);
  switchImgInd3.value = val;
  infoImg2.value.setActiveItem(val);
};
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
onBeforeMount(async () => {
  api.value = store.state.user.api;
  const btnflag = JSON.parse(sessionStorage.getItem("btnflag"));
  flagBtn.value = btnflag.system;
  console.log(flagBtn.value, "按钮权限");
  getList();
  facilityServices();
  checkOutSetting();
  subsidySetup();
  callSystem();
  blackList();
});
onMounted(() => {
  setTimeout(() => {
    textShow.value = true;
  }, 1000);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .title {
    // width: calc(100wh - 40px);
    .cameratxt {
      height: 60px;
      line-height: 60px;
      margin: 0 30px;
      border-bottom: 1px solid #ccc;
      color: #000;
      font-size: 18px;
      font-weight: 600;
    }
  }

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

    .left {
      // width: 900px;
      width: calc(100% - 600px);
      min-width: 750px;
      color: #000;
      margin-right: 50px;
      .titles {
        font-size: 18px;
        margin: 20px 0;
        font-weight: 700;
      }

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

        .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;
            }
          }
          .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__arrow) {
                display: none;
              }
              :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;
              }
              .delimg {
                background: url("../../assets/imgDel.png");
                background-size: 100% 100%;
                width: 30px;
                height: 30px;
                opacity: 0;
              }
            }

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

              img {
                opacity: 1;
              }
              .delimg {
                opacity: 1;
              }
            }
          }
          .avatar-uploader {
            margin: 20px 0 10px 90px;
            :deep(.el-upload-list) {
              display: none;
            }
          }
        }
        .rows {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .conts {
            display: flex;
            align-items: center;
            .name {
              width: 80px;
              margin: 0 12px 0 0;
            }
            .el-input {
              max-width: 300px;
            }
          }
          .textarea {
            width: 100%;
            .name {
              margin: 5px 0 15px 0;
            }
          }
          .hourlivetime {
            display: flex;
            // align-items: center;
            flex-direction: column;
            .addlive {
              display: flex;
              align-items: center;
              margin-bottom: 15px;
              .img {
                width: 28px;
                height: 28px;
                margin-left: 15px;
                margin-right: 0;
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .right {
      // width: calc(100% - 950px);
      width: 600px;
      height: 100%;
      color: #000;

      .ApartmentSetting {
        .titles {
          display: flex;
          justify-content: space-between;
          align-items: center;
          //   border-bottom: 1px solid rgba(229, 229, 229, 1);
          .title {
            font-size: 18px;
            padding: 20px 0;
            font-weight: 700;
          }
          .set {
            font-size: 18px;
            font-weight: 700;
            margin: 30px 0 0 0;
          }
        }
        .el-table--fit {
          height: 100%;
          :deep(.el-table__header-wrapper) {
            background-color: #000;
            font-size: 15px;
            color: #000;
            .cell {
              color: #000;
            }
          }
          :deep(.el-table__body-wrapper) {
            .el-scrollbar {
              height: 200px;
            }
          }
          :deep(.el-table__row) {
            height: 50px;
            font-size: 15px;
            color: #000;
          }
          :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(.options) {
            display: flex;
            justify-content: center;
            align-items: center;
            .reset {
              color: rgba(9, 101, 98, 1);
              cursor: pointer;
            }
            .look {
              margin: 0 15px;
              color: rgba(30, 125, 251, 1);
              cursor: pointer;
            }
            .del {
              color: rgba(212, 48, 48, 1);
              cursor: pointer;
            }
          }
        }
        .system {
          margin: 20px 0 0 0;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .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%;
        }
      }
    }
  }
  // 添加房型弹窗样式
  :deep(.addtable) {
    height: 400px;
    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 30px;
      .el-form {
        display: flex;
        flex-direction: column;
        .el-form-item__content {
          .lookImg {
            width: 120px;
            height: 120px;
            margin-bottom: 10px;
            img {
              width: 120px;
              height: 120px;
            }
            .lookImgs {
              width: 120px;
              height: 120px;
              cursor: pointer;
              position: absolute;
              background-color: rgba(0, 0, 0, 0.3);
              left: 0;
              top: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              img {
                width: 30px;
                height: 30px;
              }
            }
            .lookImgs:hover {
              opacity: 1;
            }
          }
          .avatar-uploader {
            .el-upload-list {
              display: none;
            }
          }
        }
      }
      .options {
        width: 100%;
        margin: 10px 0;

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

          display: flex;
          flex-direction: row-reverse;
        }
      }
    }
  }
}
</style>