<template>
  <div class="container">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">校园安全</div>
      <div class="title_sub">Campus security</div>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 门禁通行汇总区域 -->
      <div class="sub_title">门禁通行汇总</div>
      <div class="device">
        <div class="device_box cursor" @click="handleClick(1)">
          <div class="box_img">
            <div class="box_num" ref="deviceDom">{{ deviceNum }}</div>
          </div>
          机动车
        </div>

        <div class="device_box cursor" @click="handleClick(2)">
          <div class="box_img">
            <div class="box_num" ref="deviceDom2">{{ deviceNum2 }}</div>
          </div>
          人员通行
        </div>
      </div>

      <!-- 预警推送区域 -->
      <div class="sub_title">预警推送</div>
      <div class="form">
        <el-table :data="tableData" height="280">
          <el-table-column label="序号" align="center" width="40">
            <template #default="scope">
              <div class="order">{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>

          <el-table-column label="姓名" align="center" width="50">
            <template #default="{ row }">
              {{ row.warningName ? row.warningName : "未知" }}
            </template>
          </el-table-column>

          <el-table-column
            prop="dateTime"
            label="时间"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="type"
            label="类别"
            align="center"
            width="62"
            show-overflow-tooltip
          />
          <el-table-column
            prop="location"
            label="地点"
            align="center"
            width="71"
            show-overflow-tooltip
          />
          <el-table-column label="状态" align="center" width="62">
            <template #default="{ row }">
              <div v-if="row.statu === 0">未处理</div>
              <div class="red" v-if="row.status === 2">已推送</div>
              <div class="green" v-if="row.status === 1">已处理</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 实时监控画面区域 -->
      <div class="sub_title">
        实时监控画面
        <span class="more" @click="handleCheckMore">查看更多 ></span>
      </div>
      <div class="video">
        <div class="video_box" v-for="(item, index) in videoList" :key="index">
          <video
            :src="item.url"
            controls
            muted
            autoplay
            class="box_video"
            disablePictureInPicture
            controlsList="nodownload  noplaybackrate"
          ></video>
          <div class="box_name">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <!-- 机动车弹窗区域 -->
    <el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      width="770"
    >
      <div class="pop_box">
        <!-- 标题区域 -->
        <div class="box_title">车闸通行记录</div>
        <div class="pop_close" @click="handleClose(1)">×</div>

        <!-- 输入框区域 -->
        <div class="search_box">
          <el-input
            v-model="carNumber"
            style="width: 174px"
            clearable
            placeholder="请输入车牌号"
          />

          <div class="btn" @click="handleSearch">查询</div>
        </div>

        <!-- 筛选框区域 -->
        <div class="select_box">
          出口类型：
          <el-select
            v-model="typeValue"
            placeholder="请选择出口类型"
            clearable
            style="width: 175px"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <span style="margin-left: 50px">时间：</span>
          <el-date-picker
            style="width: 140px"
            v-model="timeValue"
            type="datetimerange"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
          />
        </div>

        <!-- 表格 -->
        <div class="form">
          <el-table :data="tableData_pop" height="400">
            <el-table-column label="车牌" prop="carNo" align="center">
            </el-table-column>

            <el-table-column label="图像" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.image"
                  style="width: 51px; height: 51px"
                  :src="row.image"
                  hide-on-click-modal
                  :preview-src-list="[row.image]"
                  fit="cover"
                  preview-teleported
                />
                <div v-else>暂无图片</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="dataTime"
              label="记录时间"
              align="center"
              show-overflow-tooltip
            />

            <el-table-column label="出口类型" align="center">
              <template #default="{ row }">
                {{ row.type == 1 ? "进" : "出" }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页器区域 -->
        <div class="pag">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            small
            :pager-count="5"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 人员通行弹窗区域 -->
    <el-dialog
      v-model="dialogVisible2"
      :close-on-click-modal="false"
      :show-close="false"
      width="1158"
    >
      <div class="pop_box2">
        <!-- 标题区域 -->
        <div class="box_title">门禁通行汇总</div>
        <div class="pop_close" @click="handleClose(2)">×</div>

        <!-- 输入框区域 -->
        <div class="search_box2">
          <el-input
            v-model="keyWord"
            style="width: 174px"
            clearable
            placeholder="请输入关键字"
          />

          <div class="btn" @click="handleSearchPeople">查询</div>

          <span style="margin-left: 30px">年级：</span>
          <el-select
            v-model="gradeValue"
            placeholder="请选择年级："
            style="width: 175px"
            clearable
            @change="changeGrade"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <span style="margin-left: 30px">班级：</span>
          <el-select
            v-model="classValue"
            placeholder="请选择班级："
            style="width: 175px"
            clearable
          >
            <el-option
              v-for="item in classOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <span style="margin-left: 30px">通行状态：</span>
          <el-select
            v-model="statusValue"
            placeholder="请选择通行状态："
            style="width: 175px"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- 筛选框区域 -->
        <div class="select_box2">
          出口类型：
          <el-select
            v-model="typeValue2"
            placeholder="请选择出口类型"
            style="width: 175px"
            clearable
          >
            <el-option
              v-for="item in typeOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <span style="margin-left: 50px">时间：</span>
          <el-date-picker
            style="width: 140px"
            v-model="timeValue"
            type="datetimerange"
            start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>

        <!-- 表格 -->
        <div class="form">
          <el-table :data="tableData_pop2" height="400">
            <el-table-column label="设备编号" prop="sn" align="center">
            </el-table-column>

            <el-table-column label="设备名称" prop="type" align="center">
            </el-table-column>

            <el-table-column label="部门" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.departmentName ? row.departmentName : "未知" }}
              </template>
            </el-table-column>

            <el-table-column label="班级" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ row.className ? row.className : "未知" }}
              </template>
            </el-table-column>

            <el-table-column label="姓名" prop="name" align="center">
            </el-table-column>

            <el-table-column label="人员编号" align="center">
              <template #default="{ row }">
                {{ row.cardNo ? row.cardNo : "未知" }}
              </template>
            </el-table-column>
            <el-table-column label="图像" align="center">
              <template #default="{ row }">
                <el-image
                  v-if="row.image"
                  style="width: 51px; height: 51px"
                  :src="row.image"
                  hide-on-click-modal
                  :preview-src-list="[row.image]"
                  fit="cover"
                  preview-teleported
                />
                <div v-else>暂无图片</div>
              </template>
            </el-table-column>
            <el-table-column label="识别分组" align="center">
              <template #default="{ row }">
                <div v-if="row.openType == 0">白名单比对</div>
                <div v-if="row.openType == 1">人证比对</div>
                <div v-if="row.openType == 2">IC卡比对</div>
              </template>
            </el-table-column>
            <el-table-column
              label="记录时间"
              prop="dateTime"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column label="出口类型" align="center">
              <template #default="{ row }">
                {{ row.access == 0 ? "出" : "进" }}
              </template>
            </el-table-column>
            <el-table-column label="通行" align="center">
              <template #default="{ row }">
                {{ row.resultStatus == 0 ? "失败" : "成功" }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页器区域 -->
        <div class="pag">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            small
            :pager-count="5"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange2"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { countUpNum } from "@/utils/countUpNum";
import {
  reqGetSmartWarning,
  reqGetCarRecord,
  reqGetPeopleRecord,
  reqGetTotalCount,
  reqGetGradeList,
  reqGetClassList,
} from "@/api/school/index";
// @ts-ignore
import { reqVideoLogin, reqVideoPull, reqVideoStop } from "@/api/video/index";
// 引入解密函数
import { decryptDes } from "@/utils/des";

// 机动车数据
const deviceNum = ref(0);
// 人员通行数据
const deviceNum2 = ref(0);
// 机动车DOM元素
const deviceDom = ref();
// 人员通行DOM元素
const deviceDom2 = ref();

// 机动车弹窗显示隐藏控制
const dialogVisible = ref(false);
// 车牌号绑定数据
const carNumber = ref("");
// 出口类型绑定数据
const typeValue = ref("");
// 出口类型选项数据
const typeOptions = [
  {
    value: "2",
    label: "出",
  },
  {
    value: "1",
    label: "进",
  },
];
// 时间绑定数据
const timeValue = ref([]);
// 机动车表格数据
const tableData_pop = ref([]);

// 当前页
const currentPage = ref(1);
// 每页多少条
const pageSize = ref(5);
// 总条数
const total = ref(0);

// 行人弹窗显示隐藏控制
const dialogVisible2 = ref(false);
// 关键字数据
const keyWord = ref("");
// 年级绑定数据
const gradeValue = ref("");
// 年级选项数组
const gradeOptions = ref<any>([]);
// 班级绑定数据
const classValue = ref("");
// 班级选项数组
const classOptions = ref<any>([]);
// 通行状态数据
const statusValue = ref("");
// 通行状态选项数组
const statusOptions = [
  {
    value: "1",
    label: "成功",
  },
  {
    value: "0",
    label: "失败",
  },
];
// 出口类型绑定数据
const typeValue2 = ref("");
// 出口类型选项数据
const typeOptions2 = [
  {
    value: "0",
    label: "出",
  },
  {
    value: "1",
    label: "进",
  },
];
// 行人表格数据
const tableData_pop2 = ref([]);

// 预警推送数据
const tableData = ref([]);

// 路由器实例
const $router = useRouter();

// 监控列表
const videoList = ref<any>([
  {
    title: "大门口1",
    url: "https://www.campussmartlife.com/wzszlocalvideozlm/live/c70_1.live.mp4",
    d: "D70",
  },
  {
    title: "大门口2",
    url: "https://www.campussmartlife.com/wzszlocalvideozlm/live/c68_1.live.mp4",
    d: "D68",
  },
  {
    title: "前操场1",
    url: "https://www.campussmartlife.com/wzszlocalvideozlm/live/c118_1.live.mp4",
    d: "D118",
  },
  {
    title: "前操场2",
    url: "https://www.campussmartlife.com/wzszlocalvideozlm/live/c120_1.live.mp4",
    d: "D120",
  },
]);

onMounted(() => {
  // 获取通行总数
  getTotalCount();

  // 获取预警推送信息
  getSmartWarning();

  // 登录获取监控权限
  getVideoLogin();

  // 拉流
  initVideo();
});

onUnmounted(() => {
  // 关流
  stopVideo();
});

// 获取通行总数
const getTotalCount = async () => {
  const res = await reqGetTotalCount();
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    deviceNum.value = result.carCount;
    deviceNum2.value = result.accessCount;

    // 让数字动起来
    getCountUpNum();
  }
};

// 获取预警推送信息
const getSmartWarning = async () => {
  const res = await reqGetSmartWarning({
    currentPage: 1,
    pageCount: 10,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    tableData.value = res.data.list;
  }
};

// 登录获取监控权限
const getVideoLogin = async () => {
  const res = await reqVideoLogin({
    username: "admin",
    password: "admin.123456",
  });
  // console.log(res);
  localStorage.setItem("admin_token", res.data.token);
};

// 拉流
const initVideo = () => {
  videoList.value.forEach(async (ele: any) => {
    await reqVideoPull({
      d: ele.d,
      nowLine: "1",
      isNvr: "1",
    });
  });
};

// 查看更多按钮回调
const handleCheckMore = () => {
  // 关流
  stopVideo();

  $router.push("/more");
};

// 关流
const stopVideo = () => {
  videoList.value.forEach(async (ele: any) => {
    await reqVideoStop({
      d: ele.d,
      nowLine: "1",
    });
  });
};

const handleClick = (type: number) => {
  timeValue.value = [];
  total.value = 0;
  currentPage.value = 1;

  // type 1代表机动车 2代表人员通行
  if (type === 1) {
    // console.log("机动车");

    carNumber.value = "";
    typeValue.value = "";
    tableData_pop.value = [];

    getCarRecord();
    dialogVisible.value = true;
  } else if (type === 2) {
    // console.log("人员通行");

    getGradeList();

    keyWord.value = "";
    gradeValue.value = "";
    classValue.value = "";
    statusValue.value = "";
    typeValue2.value = "";

    getPeopleRecord();
    dialogVisible2.value = true;
  }
};

// 获取机动车记录
const getCarRecord = async () => {
  const res = await reqGetCarRecord({
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    keyWord: carNumber.value,
    type: typeValue.value,
    startTime: timeValue.value ? timeValue.value[0] : "",
    endTime: timeValue.value ? timeValue.value[1] : "",
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    tableData_pop.value = result.list;
    total.value = result.totalCount;
  }
};

// 获取人员通行记录
const getPeopleRecord = async () => {
  const res = await reqGetPeopleRecord({
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    keyWord: keyWord.value,
    gradeId: gradeValue.value,
    classId: classValue.value,
    resultStatus: statusValue.value,
    inOut: typeValue2.value,
    startTime: timeValue.value ? timeValue.value[0] : "",
    endTime: timeValue.value ? timeValue.value[1] : "",
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    tableData_pop2.value = result.list;
    total.value = result.totalCount;
  }
};

const handleSearchPeople = () => {
  currentPage.value = 1;

  getPeopleRecord();
};

// 获取年级列表数据
const getGradeList = async () => {
  const res = await reqGetGradeList();
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    gradeOptions.value = result;
  }
};

// 切换年级时触发的回调
const changeGrade = async () => {
  const res = await reqGetClassList({
    gradeId: gradeValue.value,
  });
  // console.log(res);
  if ((res as any).code == 200) {
    const result = JSON.parse(decryptDes(res.data));
    // console.log(result);
    classOptions.value = result;
  }
};

// 点击关闭图标时的回调
const handleClose = (type: number) => {
  if (type === 1) {
    dialogVisible.value = false;
  } else if (type === 2) {
    dialogVisible2.value = false;
  }
};

// 机动车弹窗切换分页器的回调
const handleCurrentChange = (v: number) => {
  // console.log(v);
  currentPage.value = v;
  getCarRecord();
};

// 人员通行弹窗切换分页器的回调
const handleCurrentChange2 = (v: number) => {
  // console.log(v);
  currentPage.value = v;
  getPeopleRecord();
};

// 点击查询按钮回调
const handleSearch = () => {
  currentPage.value = 1;
  getCarRecord();
};

// 让数字动起来
const getCountUpNum = () => {
  countUpNum(deviceDom.value, deviceNum.value);
  countUpNum(deviceDom2.value, deviceNum2.value);
};
</script>

<style lang="scss" scoped>
.container {
  width: 435px;
  height: 951px;
  color: #fff;
  background-image: url(@/assets/images/box-bg.png);

  .title {
    display: flex;
    align-items: center;
    width: 430px;
    height: 47px;
    font-family: "庞门正道标题体";
    background-image: url(@/assets/images/title-bg.png);
    background-size: 100% 100%;

    .title_text {
      margin-left: 38px;
      font-size: 20px;
      text-shadow: 0px 0px 9px #158eff;
    }

    .title_sub {
      margin-left: 19px;
      font-size: 12px;
      color: #215a8e;
    }
  }

  .content {
    padding: 20px 19px 0 14px;
    height: 904px;

    .sub_title {
      display: flex;
      padding-left: 28px;
      height: 35px;
      line-height: 18px;
      color: #abd6ff;
      font-weight: bold;
      background-image: url(@/assets/images/title-bg2.png);
      background-size: 100% 100%;

      .more {
        margin-left: auto;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .device {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 130px;

      .device_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;

        .box_img {
          margin-bottom: 5px;
          width: 80px;
          height: 48px;
          font-size: 19px;
          font-weight: bold;
          text-align: center;
          background-image: url(@/assets/images/device.png);
          background-size: 100% 100%;

          .box_num {
            animation: float 3s linear infinite;
          }
        }
      }

      .cursor {
        cursor: pointer;
      }
    }

    .form {
      margin: 26px 0;
      height: 274px;
      overflow: hidden;

      .order {
        margin: auto;
        width: 24px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #ffeb3b;
        background-color: rgba(255, 235, 59, 0.3);
      }

      .red {
        color: #ff6b6b;
      }

      .green {
        color: #40f7eb;
      }
    }

    .video {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-evenly;
      padding-top: 24px;
      height: 320px;

      .video_box {
        position: relative;
        width: 198px;
        height: 134px;
        border-radius: 5px;

        .box_video {
          width: 198px;
          height: 134px;
        }

        // 隐藏进度条
        video::-webkit-media-controls-timeline {
          display: none !important;
        }

        // 隐藏播放按钮
        video::-webkit-media-controls-play-button {
          display: none !important;
        }

        // 隐藏当前播放的时间点
        video::-webkit-media-controls-current-time-display {
          display: none !important;
        }

        // 隐藏剩余时间
        video::-webkit-media-controls-time-remaining-display {
          display: none !important;
        }

        .box_name {
          position: absolute;
          top: 0;
          left: 0;
          padding-left: 26px;
          width: 100%;
          height: 30px;
          font-size: 16px;
          background-color: rgba($color: #000, $alpha: 0.5);
        }
      }
    }
  }

  .pop_box {
    position: relative;
    padding: 22px 36px 0 22px;
    width: 770px;
    height: 670px;
    color: #fff;
    border-radius: 16px;
    background-color: rgba(31, 58, 87, 0.8);

    .box_title {
      padding-left: 36px;
      width: 710px;
      height: 35px;
      font-size: 16px;
      color: #bbe2fe;
      background-image: url(@/assets/images/2.png);
      background-size: cover;
    }

    .pop_close {
      position: absolute;
      top: 14px;
      right: 38px;
      width: 24px;
      height: 24px;
      line-height: 18px;
      text-align: center;
      color: #a6a6a6;
      font-size: 25px;
      border-radius: 2px;
      border: 1px solid #a6a6a6;
      cursor: pointer;
    }

    .search_box {
      display: flex;
      margin-top: 35px;
      margin-bottom: 18px;

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        width: 58px;
        height: 32px;
        cursor: pointer;
        background-image: linear-gradient(
          to top,
          rgba(26, 94, 232, 0.8),
          rgba(61, 198, 239, 0.4),
          rgba(29, 242, 228, 0.8)
        );
      }
    }

    .select_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .pag {
      display: flex;
      justify-content: flex-end;
      margin-top: 28px;
    }
  }

  .pop_box2 {
    position: relative;
    padding: 22px 36px 0 22px;
    width: 1158px;
    height: 670px;
    color: #fff;
    border-radius: 16px;
    background-color: rgba(31, 58, 87, 0.8);

    .box_title {
      padding-left: 36px;
      width: 1095px;
      height: 35px;
      font-size: 16px;
      color: #bbe2fe;
      background-image: url(@/assets/images/3.png);
      background-size: cover;
    }

    .pop_close {
      position: absolute;
      top: 14px;
      right: 38px;
      width: 24px;
      height: 24px;
      line-height: 18px;
      text-align: center;
      color: #a6a6a6;
      font-size: 25px;
      border-radius: 2px;
      border: 1px solid #a6a6a6;
      cursor: pointer;
    }

    .search_box2 {
      display: flex;
      align-items: center;
      margin-top: 35px;
      margin-bottom: 18px;

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        width: 58px;
        height: 32px;
        cursor: pointer;
        background-image: linear-gradient(
          to top,
          rgba(26, 94, 232, 0.8),
          rgba(61, 198, 239, 0.4),
          rgba(29, 242, 228, 0.8)
        );
      }
    }

    .select_box2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 364px;
      margin-bottom: 16px;
    }

    .pag {
      display: flex;
      justify-content: flex-end;
      margin-top: 28px;
    }
  }
}

/*最外层透明*/
.form ::v-deep(.el-table),
.form ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.form ::v-deep(.el-table th),
.form ::v-deep(.el-table tr),
.form ::v-deep(.el-table td),
::v-deep(.el-table th.el-table__cell.is-leaf) {
  background-color: transparent !important;
  color: white;
  font-size: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  height: 40px;
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(58, 126, 199, 0.5);
}
// 清除表格默认padding
::v-deep(.el-table .cell) {
  padding: 0;
}

// 动画滚动
::v-deep(.el-scrollbar__view) {
  // animation: run 12s linear infinite;
}

::v-deep(.el-dialog),
::v-deep(.el-dialog__header),
::v-deep(.el-dialog__body) {
  padding: 0;
  background-color: transparent;
}

::v-deep(.el-input__wrapper) {
  background-color: rgba(48, 75, 95, 0.6);
}

::v-deep(.el-pagination__goto),
::v-deep(.el-pagination__total),
::v-deep(.el-pagination__classifier),
::v-deep(.el-pagination .el-input__inner) {
  color: #fff;
}

::v-deep(.el-range-input),
::v-deep(.el-input__inner) {
  color: #fff;
}
</style>
