<template>
  <div class="content-box">
    <div class="left">
      <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon>
      <span class="cameratxt">摄像机管理</span>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <span>厂商 </span>
          <el-input
            clearable
            v-model="searchInput.vendor"
            class="w-50 m-2"
            placeholder="请输入厂商"
            style="width: 150px"
          />
        </div>
        <div class="condition">
          <span>IP地址 </span>
          <el-input
            clearable
            v-model="searchInput.ip"
            class="w-50 m-2"
            placeholder="请输入IP地址"
            style="width: 180px"
          />
        </div>
        <div class="condition">
          <span>状态 </span>
          <el-select
            style="width: 120px"
            v-model="searchInput.statu"
            class="m-2"
            placeholder="请选择状态"
          >
            <el-option label="离线" value="0" />
            <el-option label="在线" value="1" />
          </el-select>
        </div>
        <div class="condition">
          <span>设备型号 </span>
          <el-input
            clearable
            v-model="searchInput.unitType"
            class="w-50 m-2"
            placeholder="请输入设备型号"
            style="width: 200px"
          />
        </div>

        <div class="condition">
          <span>协议 </span>
          <el-input
            clearable
            v-model="searchInput.agreement"
            class="w-50 m-2"
            placeholder="请输入协议"
          />
        </div>
        <div class="condition">
          <span>安装位置 </span>
          <el-input
            clearable
            v-model="searchInput.installationSite"
            class="w-50 m-2"
            placeholder="请输入安装位置"
          />
        </div>

        <div class="condition">
          <span>摄像机编码 </span>
          <el-input
            clearable
            v-model="searchInput.cameraCoding"
            class="w-50 m-2"
            placeholder="请输入摄像机编码"
          />
        </div>

        <div class="condition">
          <span>备注 </span>
          <el-input
            clearable
            v-model="searchInput.remark"
            class="w-50 m-2"
            placeholder="请输入备注"
          />
        </div>
        <div class="condition">
          <span>创建人员 </span>
          <el-input
            clearable
            style="width: 150px"
            v-model="searchInput.creater"
            class="w-50 m-2"
            placeholder="创建人员"
          />
        </div>
        <div class="condition">
          <span>创建时间 </span>
          <el-date-picker
            v-model="searchInput.createTime"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <div class="condition">
          <span>最后更新人员 </span>
          <el-input
            clearable
            style="width: 180px"
            v-model="searchInput.lastUpdater"
            class="w-50 m-2"
            placeholder="请输入最后更新人员"
          />
        </div>
        <div class="condition">
          <span>最后更新时间 </span>
          <el-date-picker
            v-model="searchInput.lastUpdateTime"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <el-button
          style="margin-left: 20px"
          type="primary"
          class="search"
          @click="searchBtn"
          >搜索</el-button
        >
        <el-button type="primary" plain @click="resetSearch">重置</el-button>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <el-button type="primary" plain @click="addlist">新增</el-button>
        <el-button type="success" plain @click="importExcel">导入</el-button>
        <el-button type="warning" plain @click="downLoad">导出</el-button>
        <el-button type="danger" plain @click="allDel">删除</el-button>
      </div>

      <!-- 导入摄像机IP列表按钮 -->
      <el-dialog
        v-model="importByExcelDialog"
        title="导入用户信息"
        width="45%"
        align-center
        class="importExecl"
      >
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="下载模板 1" :icon="Pointer" />
          <el-step title="执行上传 2" :icon="Upload" />
          <el-step title="导入完成 3" :icon="Select" />
        </el-steps>
        <div class="cont">
          <div class="download">
            <el-icon :size="30"><Pointer /></el-icon
            ><span>请按照数据模板导入数据</span>
          </div>
          <el-button type="primary">
            <a
              href="/video/videoManage/monitoringTemplate.xlsx"
              style="color: #fff"
              >下载模板</a
            >
          </el-button>
          <div class="upload">
            <div class="download">
              <el-icon :size="30"><Upload /></el-icon
              ><span>将文件上传(用户上传的excel文件需要符合规定的格式)</span>
            </div>
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
              :limit="1"
              :multiple="false"
              action="none"
              :auto-upload="false"
              :on-change="changeUpload"
              :before-remove="beforeRemove"
            >
              <el-button type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">仅允许上传一个文件</div>
              </template>
            </el-upload>
          </div>
          <div class="accomplish">
            <el-button
              type="primary"
              :disabled="active == 1"
              style="margin-top: 12px"
              @click="next"
              >完成导入</el-button
            >
          </div>
        </div>
      </el-dialog>

      <!-- 编辑/新增摄像头IP -->
      <el-dialog
        v-model="centerDialogVisible"
        :title="dialongTitle"
        width="40%"
        align-center
        :before-close="editClose"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="厂商" prop="count">
            <el-input v-model="ruleForm.count" placeholder="请输入厂商" />
          </el-form-item>
          <el-form-item label="IP地址" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入IP地址" />
          </el-form-item>
          <el-form-item label="状态" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择状态">
              <el-option label="在线" value="1" />
              <el-option label="离线" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="创建人"
            prop="username"
            v-show="dialongTitle == '新增摄像头IP'"
          >
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入创建人姓名"
            />
          </el-form-item>
          <el-form-item label="摄像头密码" prop="pass">
            <el-input v-model="ruleForm.pass" placeholder="请输入摄像头密码" />
          </el-form-item>
          <el-form-item
            label="最后更新人"
            prop="username"
            v-show="dialongTitle == '修改摄像头IP'"
          >
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入更新人姓名"
            />
          </el-form-item>
          <el-form-item label="设备型号" prop="date1">
            <el-input v-model="ruleForm.date1" placeholder="请输入设备型号" />
          </el-form-item>
          <el-form-item label="协议" prop="types">
            <el-input
              v-model="ruleForm.types"
              placeholder="请输入协议"
            ></el-input>
          </el-form-item>
          <el-form-item label="安装位置" prop="date2">
            <el-input v-model="ruleForm.date2" placeholder="请输入安装位置" />
          </el-form-item>

          <el-form-item label="摄像机编码" prop="resource">
            <el-input
              v-model="ruleForm.resource"
              placeholder="请输入摄像机编码"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="备注" prop="desc">
            <el-input
              v-model="ruleForm.desc"
              type="textarea"
              placeholder="请输入备注"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              确定
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div class="footer">
      <el-table
        :row-class-name="tableRowClassName"
        :data="tableData.list"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="80" />
        <el-table-column align="center" prop="ip" label="IP地址" width="200" />
        <el-table-column
          align="center"
          prop="cameraCoding"
          label="摄像机编码"
          width="200"
        />
        <el-table-column
          align="center"
          prop="installationSite"
          label="安装位置"
          width="200"
        />
        <el-table-column
          align="center"
          prop="outputLink"
          label="输出链接"
          width="650"
        />
        <el-table-column
          align="center"
          prop="unitType"
          label="设备型号"
          width="250"
        />
        <el-table-column
          align="center"
          prop="vendor"
          label="厂商"
          width="120"
        />
        <el-table-column
          align="center"
          prop="agreement"
          label="协议"
          width="120"
        />
        <el-table-column
          align="center"
          prop="remark"
          label="备注"
          width="200"
        />
        <el-table-column
          align="center"
          prop="creater"
          label="创建人员"
          width="120"
        />
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          width="250"
        />
        <el-table-column
          align="center"
          prop="lastUpdater"
          label="最后更新人员"
          width="100"
        />
        <el-table-column
          align="center"
          prop="lastUpdateTime"
          label="最后更新时间"
          width="250"
        />
        <el-table-column align="center" prop="statu" label="状态" width="100" />
        <el-table-column align="center" fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button link type="primary" @click="palyVideo(scope.row)"
              >播放</el-button
            >
            <el-button link type="primary" @click="handleUp(scope.row)"
              >编辑</el-button
            >
            <el-button link type="primary" @click="linkClick(scope.row)"
              >输出链接</el-button
            >
            <el-button link type="primary" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 播放按钮弹窗 -->
      <el-dialog
        class="playVideo"
        v-model="videoDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="playTitle"
        align-center
        width="60%"
        :before-close="handleVideoClose"
      >
        <div class="player-box" v-if="lineTitleShow">
          <div style="width: 100%; height: 600px" class="palyer3"></div>
        </div>
        <div class="player-box" v-else>
          <div class="prism-player" id="wasmPlayer" v-if="hwVideoShow"></div>
        </div>
        <div
          v-show="lineTitleShow"
          class="line"
          @click="lineIn"
          @mouseleave="leaveLineItem"
        >
          <div class="linetitle">{{ lineTitle }}</div>
        </div>
        <div
          class="lineItem"
          v-show="lineShow"
          @click="lineClick"
          @mouseleave="leaveLineItem"
          @mouseenter="mouseLineItem"
        >
          <div class="item" v-for="item in lines">{{ item }}</div>
        </div>
      </el-dialog>

      <!-- 输出链接弹窗 -->
      <el-dialog
        class="link"
        v-model="linkDialogVisible"
        title="输出链接"
        width="30%"
        align-center
      >
        <div class="linkcontent">
          <p>{{ playUrl }}</p>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <div class="format">
              <el-radio-group
                v-model="radioFormat"
                size="large"
                @change="sureLink"
              >
                <el-radio-button label="flv" />
                <el-radio-button label="hls" />
                <el-radio-button label="mp4" />
                <el-radio-button label="ts" />
              </el-radio-group>
            </div>
            <!-- <el-button class="sure" type="primary" @click="sureLink"> 确定 </el-button> -->
          </div>
        </template>
      </el-dialog>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @update:current-page="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onBeforeMount, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import axios from "axios";
import lodash from "lodash";
import LivePlayer from "@liveqing/liveplayer-v3"; // 播放器
const router = useRouter();
// 表格数据
const tableData = reactive({ list: [] });
const activeIndex = ref("vidicon"); // 默认跳转路由
const dialongTitle = ref(""); // 弹窗标题

const searchInput = reactive({
  vendor: "",
  ip: "",
  statu: "",
  unitType: "",
  agreement: "",
  installationSite: "",
  outputLink: "",
  cameraCoding: "",
  remark: "",
  creater: "",
  lastUpdater: "",
  createTime: "",
  lastUpdater: "",
}); // 搜索按钮数据
5;

const radioFormat = ref("flv");
const playUrl = ref(""); // 输出链接地址
const playerUrl = ref(""); //播放地址
const player = ref(""); // 播放器对象
const player2 = ref(""); // 播放器对象
const playIP = ref(""); // 当前播放IP
const playKey = ref(""); // 当前播放IP key
const playTitle = ref(""); // 当全部播放标题
const lineShow = ref(false); // 路线展示
const playVendor = ref(""); // 厂商
const lines = ref(["线路一", "线路二", "线路三"]);
const lineTitle = ref("线路二"); // 路线标题
const oldLine = ref(""); // 切换之前的线路
const lineTitleShow = ref(true);
const hwVideoShow = ref(true); // easyplayer播放器关闭销毁

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(); // 当前总数
const selectData = reactive({ list: [] }); // 多选框选择的数据

const importByExcelDialog = ref(false); // 控制导入弹窗
const active = ref(1); // 导入步骤计数
const fileList = ref(); // 上传的文件

const centerDialogVisible = ref(false); // 控制新增或修改弹窗开关
const linkDialogVisible = ref(false); // 控制输出链接弹窗开关
const videoDialogVisible = ref(false); // 控制播放弹窗开关

const urlLink = ref(); // 输出链接

// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
  region: "",
  count: "",
  date1: "",
  date2: "",
  types: [],
  resource: "",
  desc: "",
  username: "",
  pass: "",
  id: "",
});
// 表单验证
const rules = reactive({
  region: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "blur",
    },
  ],
  name: [
    { required: true, message: "IP地址不能为空", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  count: [
    {
      required: true,
      message: "厂商不能为空",
      trigger: "blur",
    },
  ],
  date1: [
    {
      required: true,
      message: "设备型号不能为空",
      trigger: "blur",
    },
  ],
  date2: [
    {
      required: true,
      message: "安装位置不能为空",
      trigger: "blur",
    },
  ],
  types: [
    {
      required: true,
      message: "协议不能为空",
      trigger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "更新人员姓名不能为空",
      trigger: "blur",
    },
  ],
  pass: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
  resource: [
    {
      required: true,
      message: "摄像机编码不能为空",
      trigger: "blur",
    },
  ],
  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
});
// 获取摄像头列表
const getList = async (curPage) => {
  let createTimeStart = "";
  let createTimeEnd = "";
  if (searchInput.createTime) {
    createTimeStart = searchInput.createTime[0];
    createTimeEnd = searchInput.createTime[1];
  }
  let lastUpdateTimeStart = "";
  let lastUpdateTimeEnd = "";
  if (searchInput.lastUpdateTime) {
    lastUpdateTimeStart = searchInput.lastUpdateTime[0];
    lastUpdateTimeEnd = searchInput.lastUpdateTime[1];
  }
  let data = {
    vendor: searchInput.vendor,
    ip: searchInput.ip,
    statu: searchInput.statu,
    agreement: searchInput.agreement,
    installationSite: searchInput.installationSite,
    outputLink: searchInput.outputLink,
    cameraCoding: searchInput.cameraCoding,
    remark: searchInput.remark,
    creater: searchInput.creater,
    lastUpdater: searchInput.lastUpdater,
    createTimeStart,
    createTimeEnd,
    lastUpdateTimeStart,
    lastUpdateTimeEnd,
    pageSize: 10,
    curPage,
  };
  let res = await vidiconsApi.queryCamera(data);
  res.data.list.forEach((item) => {
    if (item.statu == 1) {
      item.statu = "在线";
    } else {
      item.statu = "离线";
    }
  });
  tableData.list = res.data.list;
  total.value = res.data.totalCount;
  // console.log(res);
};

// 路由
const handleSelect = (key, keyPath) => {
  router.push({
    path: `/vidicons/${key}`,
  });
};
// 搜索功能
const searchBtn = lodash.debounce(async () => {
  let createTimeStart = "";
  let createTimeEnd = "";
  if (searchInput.createTime) {
    createTimeStart = searchInput.createTime[0];
    createTimeEnd = searchInput.createTime[1];
  }
  let lastUpdateTimeStart = "";
  let lastUpdateTimeEnd = "";
  if (searchInput.lastUpdateTime) {
    lastUpdateTimeStart = searchInput.lastUpdateTime[0];
    lastUpdateTimeEnd = searchInput.lastUpdateTime[1];
  }
  let data = {
    vendor: searchInput.vendor,
    ip: searchInput.ip,
    statu: searchInput.statu,
    agreement: searchInput.agreement,
    installationSite: searchInput.installationSite,
    outputLink: searchInput.outputLink,
    cameraCoding: searchInput.cameraCoding,
    remark: searchInput.remark,
    creater: searchInput.creater,
    lastUpdater: searchInput.lastUpdater,
    createTimeStart,
    createTimeEnd,
    lastUpdateTimeStart,
    lastUpdateTimeEnd,
    pageSize: 10,
    curPage: 1,
  };
  let res = await vidiconsApi.queryCamera(data);
  if (res.success) {
    ElMessage({
      type: "success",
      showClose: true,
      message: "搜索成功",
      center: true,
    });
    // console.log(res.data.list);
    res.data.list.forEach((item) => {
      if (item.statu == 1) {
        item.statu = "在线";
      } else {
        item.statu = "离线";
      }
    });
    currentPage.value = 1;
    tableData.list = res.data.list;
    total.value = res.data.totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "搜索失败",
      center: true,
    });
  }
}, 300);
const Enters = (e) => {
  console.log("按键:", e.key);
  if (e.key == "Enter") {
    searchBtn();
  }
};
// 重置搜索功能
const resetSearch = lodash.debounce(() => {
  searchInput.vendor = "";
  searchInput.ip = "";
  searchInput.statu = "";
  searchInput.agreement = "";
  searchInput.installationSite = "";
  searchInput.outputLink = "";
  searchInput.cameraCoding = "";
  searchInput.remark = "";
  searchInput.creater = "";
  searchInput.lastUpdater = "";
  searchInput.createTime = "";
  searchInput.lastUpdateTime = "";
  getList(1);
}, 300);
// 确定表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("submit!");
      if (dialongTitle.value == "新增摄像头IP") {
        let data = {
          ip: ruleForm.name,
          vendor: ruleForm.count,
          statu: ruleForm.region,
          unitType: ruleForm.date1,
          agreement: ruleForm.types,
          installationSite: ruleForm.date2,
          cameraCoding: ruleForm.resource,
          remark: ruleForm.desc,
          creater: ruleForm.username,
          createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        };
        vidiconsApi
          .addCamera(data)
          .then((res) => {
            // console.log(tableData.list.length);
            if (res.success) {
              if (tableData.list.length == 13) {
                currentPage.value = currentPage.value + 1;
              }
              ElMessage({
                type: "success",
                showClose: true,
                message: res.message,
                center: true,
              });
              getList(currentPage.value);
              ruleFormRef.value.resetFields();
              centerDialogVisible.value = false;
            } else {
              ElMessage({
                type: "warning",
                showClose: true,
                message: res.message,
                center: true,
              });
            }
          })
          .catch((err) => {
            // console.log(err);
            ElMessage({
              type: "error",
              showClose: true,
              message: "添加失败",
              center: true,
            });
          });
      } else {
        let statu = "";
        if (ruleForm.region == "在线") {
          statu = 1;
        } else if (ruleForm.region == "离线") {
          statu = 0;
        } else {
          statu = ruleForm.region;
        }
        let data = {
          id: ruleForm.id,
          ip: ruleForm.name,
          vendor: ruleForm.count,
          statu,
          unitType: ruleForm.date1,
          agreement: ruleForm.types,
          installationSite: ruleForm.date2,
          cameraCoding: ruleForm.resource,
          remark: ruleForm.desc,
          lastUpdater: ruleForm.username,
          ipPassword: ruleForm.pass,
          lastUpdateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        };

        vidiconsApi
          .updateCamera(data)
          .then((res) => {
            // console.log(res);
            if (res.success) {
              ElMessage({
                type: "success",
                showClose: true,
                message: "修改成功",
                center: true,
              });
              getList(currentPage.value);
              ruleFormRef.value.resetFields();
              centerDialogVisible.value = false;
            } else {
              ElMessage({
                type: "warning",
                showClose: true,
                message: res.message,
                center: true,
              });
            }
          })
          .catch((err) => {
            // console.log(err);
            ElMessage({
              type: "error",
              showClose: true,
              message: res.message,
              center: true,
            });
          });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 重置表单
const resetForm = (formEl) => {
  // console.log("重置表单");
  if (!formEl) return;
  formEl.resetFields();
};

//新增按钮
const addlist = () => {
  dialongTitle.value = "新增摄像头IP";
  ruleForm.name = "";
  ruleForm.count = "";
  ruleForm.region = "";
  ruleForm.date1 = "";
  ruleForm.types = "";
  ruleForm.date2 = "";
  ruleForm.resource = "";
  ruleForm.desc = "";
  ruleForm.username = "";
  ruleForm.id = "";
  ruleForm.pass = "";
  centerDialogVisible.value = true;
};
//修改按钮
const handleUp = (row) => {
  dialongTitle.value = "修改摄像头IP";
  centerDialogVisible.value = true;
  ruleForm.name = row.ip;
  ruleForm.count = row.vendor;
  ruleForm.region = row.statu;
  ruleForm.date1 = row.unitType;
  ruleForm.types = row.agreement;
  ruleForm.date2 = row.installationSite;
  ruleForm.resource = row.cameraCoding;
  ruleForm.desc = row.remark;
  ruleForm.username = row.lastUpdater;
  ruleForm.id = row.id;
  ruleForm.pass = row.ipPassword;
};

// 导入按钮
const importExcel = () => {
  importByExcelDialog.value = true;
};
// 上传文件
const changeUpload = (file, fileList) => {
  // fileList.value = [];
  console.log(file, fileList);
  if (file) {
    fileList.value = file;
  }
  active.value = 2;
};
// 移出文件前的回调
const beforeRemove = (file) => {
  // console.log(file);
  active.value = 1;
};

// 步骤条功能
const next = async () => {
  // console.log(fileList.value);
  let formData = new FormData();
  formData.append("file", fileList.value[0].raw);
  let res = await axios({
    method: "post",
    url: "/video/transcoding/camera/importByExcel",
    data: formData,
    headers: {
      admin_token: sessionStorage.getItem("admin_token"),
    },
  });
  // console.log(res);
  if (res.data.success) {
    setTimeout(() => {
      importByExcelDialog.value = false;
      fileList.value = "";
      active.value = 1;
    }, 1000);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导入成功",
      center: true,
    });
    active.value = 3;
    currentPage.value = 1;
    getList(1);
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 导出按钮
const downLoad = lodash.debounce(() => {
  let createTimeStart = "";
  let createTimeEnd = "";
  if (searchInput.createTime) {
    createTimeStart = searchInput.createTime[0];
    createTimeEnd = searchInput.createTime[1];
  }
  let lastUpdateTimeStart = "";
  let lastUpdateTimeEnd = "";
  if (searchInput.lastUpdateTime) {
    lastUpdateTimeStart = searchInput.lastUpdateTime[0];
    lastUpdateTimeEnd = searchInput.lastUpdateTime[1];
  }
  let data = {
    vendor: searchInput.vendor,
    ip: searchInput.ip,
    statu: searchInput.statu,
    agreement: searchInput.agreement,
    installationSite: searchInput.installationSite,
    outputLink: searchInput.outputLink,
    cameraCoding: searchInput.cameraCoding,
    remark: searchInput.remark,
    creater: searchInput.creater,
    lastUpdater: searchInput.lastUpdater,
    createTimeStart,
    createTimeEnd,
    lastUpdateTimeStart,
    lastUpdateTimeEnd,
  };
  vidiconsApi
    .download(data)
    .then((res) => {
      let name = "摄像机IP列表";
      var content = res;
      // var data = new Blob([content], { type: "application/octet-stream;charset=utf-8" });
      var data = new Blob([content], {
        type: "application/vnd.ms-excel;charset=utf-8",
      });
      var downloadUrl = window.URL.createObjectURL(data);
      var anchor = document.createElement("a");
      anchor.href = downloadUrl;
      anchor.download = name + ".xlsx";
      anchor.click();
      window.URL.revokeObjectURL(data);
      // console.log(res);
      ElMessage({
        type: "success",
        showClose: true,
        message: "导出成功",
        center: true,
      });
    })
    .catch((err) => {
      // console.log(err);
      ElMessage({
        type: "error",
        showClose: true,
        message: "导出失败",
        center: true,
      });
    });
}, 300);
// 关闭新增/修改页面
const editClose = (done) => {
  ruleFormRef.value.resetFields();
  centerDialogVisible.value = false;
  done();
  // console.log("关闭新增");
};
// 多选框功能
const handleSelectionChange = (val) => {
  // console.log(val);
  selectData.list = val;
};

// 删除这行的数据
const handleDel = (row) => {
  // console.log(row);
  ElMessageBox.confirm("此操作将永久删除所选的IP，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      vidiconsApi
        .delCamera([row.id])
        .then((res) => {
          if (tableData.list.length == 1 && currentPage.value != 1) {
            currentPage.value = currentPage.value - 1;
          }
          ElMessage({
            type: "success",
            showClose: true,
            message: "删除成功",
            center: true,
          });
          getList(currentPage.value);
        })
        .catch((err) => {
          // console.log(err);
          ElMessage({
            type: "warning",
            showClose: true,
            message: "删除失败",
            center: true,
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 删除全部按钮
const allDel = () => {
  ElMessageBox.confirm("此操作将永久删除所选IP，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let idIP = [];
      selectData.list.forEach((item) => {
        idIP.push(item.id);
      });
      // console.log(idIP);
      vidiconsApi
        .delCamera(idIP)
        .then((res) => {
          if (
            tableData.list.length - selectData.list.length == 0 &&
            currentPage.value != 1
          ) {
            currentPage.value = currentPage.value - 1;
          }
          ElMessage({
            type: "success",
            showClose: true,
            message: "删除成功",
            center: true,
          });
          getList(currentPage.value);
        })
        .catch((err) => {
          // console.log(err);
          ElMessage({
            type: "warning",
            showClose: true,
            message: "删除失败",
            center: true,
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 输出链接
const linkClick = async (row) => {
  // playUrl.value = "";

  linkDialogVisible.value = true;
  playIP.value = row.ip;
  let videoList = [
    {
      ip: playIP.value,
      nowLine: 2,
      vendor: row.vendor,
    },
  ];
  if (row.mpLink) {
    sureLink();
  } else {
    let res = await vidiconsApi.addStreamSource({ videoList });
    if (res.success) {
      ElMessage({
        type: "success",
        showClose: true,
        message: "获取链接成功",
        center: true,
      });
      sureLink();
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: "获取链接失败",
        center: true,
      });
    }
  }
};

// 切换输出链接
const sureLink = async (value) => {
  if (value) {
    radioFormat.value = value;
  }
  const videoList = {
    ip: playIP.value,
    type: radioFormat.value,
  };
  let response = await vidiconsApi.updateCameraLink(videoList);
  console.log(response);
  if (response.success) {
    playUrl.value = response.data;
    // player.value.pause();
  }
  getList(currentPage.value);
};
// 播放按钮
const palyVideo = async (row) => {
  if (row.vendor == "华为") {
    console.log(row);
    playIP.value = row.ip;
    hwVideoShow.value = true;
    playVendor.value = row.vendor; // 厂商
    playTitle.value = row.installationSite;
    if (row.outputLink) {
      videoDialogVisible.value = true;
      lineTitleShow.value = false;

      playUrl.value = row.flvLink;
      nextTick(() => {
        player.value = new WasmPlayer(null, `wasmPlayer`, callbackfun, {
          Height: true,
          openAudio: true,
          BigPlay: false,
          HideKbs: false,
        });
        player.value.play(playUrl.value, 1);
      });
    } else {
      ElMessage({
        type: "warning",
        showClose: true,
        message: "请通过输出链接获取链接播放",
        center: true,
      });
    }
  } else {
    console.log(row);
    playIP.value = row.ip;
    playVendor.value = row.vendor; // 厂商
    playTitle.value = row.installationSite;
    // lineTitle.value = "线路二"; // 显示播放线路
    if (row.nowLine) {
      lineTitle.value = lines.value[row.nowLine - 1]; // 显示播放线路
    } else {
      lineTitle.value = "线路二"; // 显示播放线路
    }
    if (row.outputLink) {
      videoDialogVisible.value = true;
      lineTitleShow.value = true;
      nextTick(() => {
        playerUrl.value = row.mpLink;
      });
    } else {
      ElMessage({
        type: "warning",
        showClose: true,
        message: "请通过输出链接获取链接播放",
        center: true,
      });
    }
  }
};
// 关闭播放页面
const handleVideoClose = async (done) => {
  // playUrl.value = "";
  let line = "";
  if (lineTitle.value == "线路一") {
    line = 1;
  } else if (lineTitle.value == "线路二") {
    line = 2;
  } else if (lineTitle.value == "线路三") {
    line = 3;
  }
  let keyList = {
    ip: playIP.value,
    line,
    // vendor: playVendor.value,
    // key: playKey.value,
  };
  if (playVendor.value == "华为") {
    player.value.destroy(); // 停止播放
    // player.value = "";
  }
  let res = await vidiconsApi.delAndUpdateLink(keyList);
  if (res.success) {
    // console.log(player.value);
    hwVideoShow.value = false;
    playerUrl.value = "";
    playUrl.value = "";
    videoDialogVisible.value = false;
    // lineTitle.value = "线路二";

    ElMessage({
      type: "success",
      showClose: true,
      message: "关流成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "关流失败",
      center: true,
    });
  }
  getList(currentPage.value);
  done();
};
const callbackfun = (e) => {
  console.log(e);
};
// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList(value);
};
// 展示线路
const lineIn = () => {
  lineShow.value = !lineShow.value;
};
// 点击线路切换按钮
const lineClick = async (e) => {
  // console.log(e.target.innerHTML);
  // 判断线路是否切换（比如一直点击同一个线路不会切换）
  if (lineTitle.value != e.target.innerHTML) {
    if (lineTitle.value == "线路一") {
      oldLine.value = 1;
    } else if (lineTitle.value == "线路二") {
      oldLine.value = 2;
    } else if (lineTitle.value == "线路三") {
      oldLine.value = 3;
    }
    let keyList = [
      {
        ip: playIP.value,
        line: oldLine.value,
      },
    ];
    let res = await vidiconsApi.delStreamSource({ keyList });
    if (res.success) {
      lineTitle.value = e.target.innerHTML;
      // console.log(res);
      playUrl.value = "";
      lineShow.value = false;
      let line = "";
      if (lineTitle.value == "线路一") {
        line = 1;
      } else if (lineTitle.value == "线路二") {
        line = 2;
      } else if (lineTitle.value == "线路三") {
        line = 3;
      }

      let videoList = [
        {
          ip: playIP.value,
          nowLine: line,
          vendor: playVendor.value,
        },
      ];
      let res = await vidiconsApi.addStreamSource({ videoList });
      console.log(res);
      if (res.success) {
        nextTick(() => {
          playerUrl.value = res.data[0].urlMp;
        });
        ElMessage({
          type: "success",
          showClose: true,
          message: `${lineTitle.value}切换成功`,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: `${lineTitle.value}切换失败`,
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: "关流失败",
        center: true,
      });
    }
  }
};

//鼠标移入移出路线item监听
const leaveLineItem = () => {
  setTimeout(() => {
    lineShow.value = false;
  }, 3000);
};
const mouseLineItem = () => {
  lineShow.value = true;
};

const message = (object) => {
  //message m3u8 加载失败时触发通知消息, 参数: { type: '', message: ''}
  console.log(object, "加载失败时触发通知消息");
};
const error = (object) => {
  //error 播放器出错回调, 参数: Error Object
  console.log(object, 11);
  // palyer.value.pause();
};
const ended = () => {
  //ended 播放结束, 参数: 无
  console.log("播放结束");
};
const timeupdate = (time) => {
  // 进度更新, 参数: 当前时间进度
  console.log(time, dayjs().format("YYYY-MM-DD HH:mm:ss"), "进度更新");
};
const pause = (time) => {
  // 暂停, 参数: 当前时间进度
  console.log(time, "暂停");
};
const play = (time) => {
  // 播放, 参数: 当前时间进度
  console.log(time, "播放");
};
const customButtons = (name) => {
  // 自定义按钮点击回调, 参数：名称
  console.log(name, "自定义按钮点击回调, 参数：名称");
  lineShow.value = !lineShow.value;
};
onBeforeMount(() => {
  getList(1);
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 90%;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .middle {
    width: 96%;
    margin: 0 auto;

    color: #000;
    border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .condition {
        display: flex;
        align-items: center;
        margin: 10px 30px 10px 0;
        span {
          margin: 0 10px 0 0;
        }
      }
    }
    .gongneng {
      margin: 10px 0;
    }
    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }
    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }
    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }
    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }
  .footer {
    width: 96%;
    height: 562px;
    margin: 20px auto 30px;
    .el-table--fit {
      height: 100%;
      :deep(.el-table__row) {
        height: 40px;
      }
      :deep(.el-table__row td) {
        padding: 0;
      }

      .el-button--primary {
        margin-left: 5px;
      }
      :deep(.el-table__body .even) {
        background-color: #fff;
      }
      :deep(.el-table__body .odd) {
        background-color: #f7fafe;
      }
    }

    // 输出链接弹窗样式
    :deep(.link .el-dialog__header) {
      text-align: left;
      font-size: 20px;
      font-weight: 600;
    }
    :deep(.link .el-dialog__body) {
      padding: 10px 20px;
      height: 100px;
      margin-bottom: 10px;
    }
    :deep(.link .el-dialog__footer) {
      text-align: left;
    }
    :deep(.link .el-dialog__footer .dialog-footer) {
      display: flex;
      justify-content: space-between;
    }
    .link {
      .linkcontent {
        text-align: left;
        height: 100px;
        border: 1px solid #ccc;
        p {
          margin: 5px 10px;
        }
      }
    }

    :deep(.playVideo .el-dialog__header) {
      text-align: left;
      font-size: 20px;
      font-weight: 600;
      background-color: #ccc;
      margin-right: 0;
      padding: 5px 10px;
    }

    :deep(.playVideo .el-dialog__header .el-dialog__headerbtn) {
      top: -4px;
    }

    :deep(.playVideo .el-dialog__body) {
      height: 600px;
      padding: 3px;
    }
    :deep(.playVideo .el-dialog__body .video-inner) {
      height: 600px;
    }
    :deep(.playVideo .line) {
      position: absolute;
      // background-color: #000;
      color: #fff;
      width: 50px;
      height: 42px;
      line-height: 42px;
      padding: 0 10px;
      z-index: 999;
      bottom: 3px;
      right: 54px;
      font-size: 14px;
      cursor: pointer;
    }
    :deep(.playVideo .lineItem) {
      position: absolute;
      bottom: 42px;
      right: 64px;
      // background-color: #000;
      color: #fff;
    }
    :deep(.playVideo .lineItem .item) {
      // background-color: #000;
      color: #fff;
      height: 27px;
      width: 50px;
      line-height: 27px;
      padding: 0 0 10px 0px;
      z-index: 999;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .el-pagination {
    // width: 1600px;
    width: 96%;
    margin: 0 auto 18px;
    justify-content: flex-end;
    :deep(.el-pagination__total) {
      color: #000;
    }
    :deep(.el-pagination__goto) {
      color: #000;
    }
    :deep(.el-pagination__classifier) {
      color: #000;
    }

    :deep(.el-pager li) {
      margin: 0 3px;
    }
    :deep(.btn-prev) {
      margin-right: 3px;
    }
    :deep(.btn-next) {
      margin-left: 3px;
    }
  }
}
.el-input {
  width: 192px;
}
</style>
