<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.prevent="fnResetPagination"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字查询" prop="KEYWORDS">
              <el-input
                v-model="searchForm.KEYWORDS"
                placeholder="请输入关键字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPagination">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        :data="list"
        v-model:pagination="pagination"
        @get-data="fnGetData"
      >
        <el-table-column label="序号" width="70">
          <template v-slot="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="GBS_NUM" label="视频设备编号" />
        <el-table-column prop="VIDEONAME" label="视频名称" />
        <el-table-column label="操作" width="250">
          <template v-slot="{ row }">
            <el-button type="primary" text link @click="fnDeleteVideo(row)">
              删除
            </el-button>
            <el-button
              link
              type="primary"
              @click="fnPreviewVideo(row.VIDEOURL)"
            >
              播放
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button type="primary" @click="fnAdd"> 新增 </el-button>
        </template>
      </layout-table>
    </layout-card>
    <add
      v-model:visible="data.addDialog.Visible"
      :check-no="data.addDialog.checkNo"
      @get-data="fnResetPagination"
    />
    <video-view
      v-model:visible="data.videoDialog.visible"
      :src="data.videoDialog.src"
    />
  </div>
</template>

<script setup>
import { serialNumber } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import {
  getEightWorkVideoManagerList,
  setEightWorkVideoManagerDelete,
} from "@/request/eightwork_videomanager";
import { reactive } from "vue";
import Add from "./components/add.vue";
import { useRoute } from "vue-router";
import { ElMessageBox } from "element-plus";
import VideoView from "./components/video.vue";

const route = useRoute();
const { CHECK_NO } = route.query;
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getEightWorkVideoManagerList, {
    otherParams: { CHECK_NO },
  });
const data = reactive({
  addDialog: {
    Visible: false,
    checkNo: "",
  },
  videoDialog: {
    visible: false,
    src: "",
  },
});
const fnAdd = () => {
  data.addDialog.Visible = true;
  data.addDialog.checkNo = CHECK_NO;
};
const fnDeleteVideo = async (row) => {
  if (row) {
    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
    await setEightWorkVideoManagerDelete({
      EIGHTWORKVIDEOMANAGER_ID: row.EIGHTWORKVIDEOMANAGER_ID,
    });
    fnResetPagination();
  }
};
const fnPreviewVideo = (VIDEOURL) => {
  data.videoDialog.visible = true;
  data.videoDialog.src = VIDEOURL;
};
</script>

<style scoped></style>