<template>
  <div class="content-box">
    <div class="title">
      <div class="cameratxt">系统通知</div>
    </div>
    <div class="content">
      <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 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(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
                clearable
                v-model="ruleForm.name"
                @clear="searchBtn"
                class="w-50 m-2"
                placeholder="请输入名称"
              />
            </div>
            <div class="conts">
              <div class="name">开业时间:</div>
              <el-date-picker
                v-model="searchInput.openingTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择开业时间"
                style="width: 340px"
              />
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">地址:</div>
              <el-input
                clearable
                v-model="ruleForm.name"
                @clear="searchBtn"
                class="w-50 m-2"
                placeholder="请输入地址"
              />
            </div>
            <div class="conts">
              <div class="name">装修时间:</div>
              <el-date-picker
                v-model="searchInput.openingTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择装修时间"
                style="width: 340px"
              />
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">入住时间:</div>
              <el-input
                clearable
                v-model="ruleForm.name"
                @clear="searchBtn"
                class="w-50 m-2"
                placeholder="请输入入住时间"
                style="width: 308px"
              />
            </div>
            <div class="conts">
              <div class="name">离店时间:</div>
              <el-date-picker
                v-model="searchInput.openingTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :prefix-icon="Calendar"
                placeholder="请选择离店时间"
                style="width: 340px"
              />
            </div>
          </div>
        </div>
        <div class="tooltips">
          <div class="rows">
            <div class="conts">
              <div class="name">电话号码:</div>
              <el-input
                clearable
                v-model="ruleForm.name"
                @clear="searchBtn"
                class="w-50 m-2"
                placeholder="请输入电话号码"
                style="width: 308px"
              />
            </div>
          </div>
        </div>

        <div class="tooltips">
          <div class="rows">
            <div class="textarea">
              <div class="name">公寓简介:</div>
              <el-input
                v-model="textarea"
                :rows="9"
                maxlength="1000"
                type="textarea"
                show-word-limit
                placeholder="请输入公寓简介"
                style="width: 850px"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="ApartmentSetting">
          <div class="titles">
            <div class="title">公寓设置</div>
            <el-button 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"
              width="140"
              prop="icon"
              label="图标"
            />
            <el-table-column align="center" prop="serve" label="房型服务" />
            <el-table-column align="center" label="操作" width="220">
              <template #default="scope">
                <div class="options">
                  <div class="look" @click="edit(scope.row)">编辑</div>
                  <el-popconfirm
                    width="220"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    icon-color="#f89626"
                    title="是否删除此账号?"
                    @confirm="del(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
              clearable
              v-model="ruleForm.day"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入时间"
              @blur="timeUpdata"
            >
              <template #suffix>
                <img
                  src="@/assets/icons/clock.png"
                  alt=""
                  style="width: 15px"
                />
              </template>
            </el-input>
            <span>分钟，断电</span>
          </div>
          <div class="system">
            <span>预定时间最多 </span>
            <el-input
              clearable
              v-model="ruleForm.day"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入天数"
              @blur="timeUpdata"
            >
            </el-input>
            <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
              clearable
              v-model="ruleForm.day"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入吨数"
              @blur="timeUpdata"
            >
            </el-input>
            <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
              clearable
              v-model="ruleForm.day"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入度数"
              @blur="timeUpdata"
            >
            </el-input>
            <span>度</span>
          </div>
          <div class="titles">
            <div class="set">催缴设置</div>
          </div>
          <div class="system">
            <span>每 </span>
            <el-input
              clearable
              v-model="ruleForm.day"
              style="width: 150px; margin: 0 8px"
              placeholder="请输入天数"
              @blur="timeUpdata"
            >
            </el-input>
            <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>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, 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 { 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({
  list: [
    {
      icon: "@",
      serve: "烟雾报警器",
    },
    {
      icon: "#",
      serve: "烟雾报警器",
    },
    {
      icon: "￥",
      serve: "烟雾报警器",
    },
    {
      icon: "%",
      serve: "烟雾报警器",
    },
    {
      icon: "!",
      serve: "烟雾报警器",
    },
  ],
});

// 添加员工弹窗数据 (------------------------------------)
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 () => {
  loading.value = true;
  let data = {
    managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/mhotel/hotelgetByHotelInfo.action",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    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;

    tableData.value = res.data.data;

    ruleForm.id = tableData.value.id;

    ruleForm.coverImg = tableData.value.coverImg;

    ruleForm.hpositionWens = tableData.value.hpositionWens;

    loading.value = false;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.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);
  fileList.list = fileList.list.filter((i, index) => {
    // return i.id != item.id;
    return index != switchImgInd2.value;
  });
};

//轮播图上传(-----------------------------------------------)
// 移出照片
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");
  let data = new FormData();
  data.set("files", file.file);
  let res = await axios({
    method: "post",
    url: api.value + "/file/cos/upload",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    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 lookImg = () => {
  bgImg.value = true;
  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;
  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;
  let flag = route.params.flag;
  console.log(flag);

  getList();
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  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;
    }
  }

  .content {
    width: 96%;
    // height: 100%;
    margin: 0 auto;
    display: flex;

    .left {
      width: 850px;
      color: #000;

      .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__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;
              }
            }
          }
          .avatar-uploader {
            margin: 20px 0 10px 90px;
          }
        }
        .rows {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .conts {
            display: flex;
            align-items: center;
            .name {
              padding: 0 12px 0 0;
            }
            .el-input {
              width: 340px;
            }
          }
          .textarea {
            .name {
              margin: 5px 0 15px 0;
            }
          }
        }
      }
    }

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

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

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

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