<template>
  <div>
    <div class="titleBox">
      <div class="title">巡逻方案</div>
      <div class="btnBox">
        <el-button type="primary" @click="add">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>
        <el-button typeof="danger" @click="delBatch">
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="所属部门">
          <MOSTY.Department
            width="200px"
            clearable
            filterable
            v-model="queryParams.ssbmdm"
          />
        </el-form-item>
        <el-form-item label="方案名称">
          <el-input
            style="width: 200px"
            clearable
            placeholder="请填写方案类型"
            v-model="queryParams.famc"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="方案类型">
          <el-select
            style="width: 200px"
            v-model="queryParams.falx"
            clearable
            placeholder="请选择方案类型"
          >
            <el-option
              v-for="dict in D_BZ_FALX"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分屏数">
          <el-select
            style="width: 200px"
            clearable
            v-model="queryParams.fps"
            placeholder="请选择分屏数"
          >
            <el-option
              v-for="dict in D_BZ_FPS"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡逻时间">
          <el-time-picker
            style="width: 500px"
            v-model="time"
            is-range
            clearable
            range-separator=" 至 "
            format="HH:mm"
            value-format="HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table
        :data="tableData"
        border
        row-key="id"
        style="width: 100%"
        :key="keyCount"
        :height="tableHeight"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.3)"
        element-loading-text="数据加载中。。"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column
          prop="famc"
          show-overflow-tooltip
          align="center"
          label="方案名称"
        />
        <el-table-column
          prop="kssj"
          show-overflow-tooltip
          align="center"
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop="jssj"
          show-overflow-tooltip
          align="center"
          label="结束时间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="100"
          align="center"
          label="方案类型"
        >
          <template #default="{ row }">
            <dict-tag :options="D_BZ_FALX" :value="row.falx" :tag="false" />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="分屏数">
          <template #default="{ row }">
            <dict-tag :options="D_BZ_FPS" :value="row.fps" :tag="false" />
          </template>
        </el-table-column>
        <el-table-column
          prop="jgsj"
          show-overflow-tooltip
          align="center"
          label="间隔时间"
        >
        </el-table-column>
        <el-table-column
          prop="cjrxm"
          show-overflow-tooltip
          align="center"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          prop="ssbm"
          show-overflow-tooltip
          align="center"
          label="所属部门"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="280px"
        >
          <template #default="{ row }">
            <el-button type="success" @click="pzsxt(row.id)">感知源</el-button>
            <el-button type="warning" @click="update(row)" size="small"
              >修改</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              icon-color="red"
              title="确定要删除当前信息?"
              @confirm="delItem([row.id])"
            >
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button @click="playVideo(row.id)" type="primary" size="small"
              >播放</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="isShow" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button v-if="showType !== 'show'" type="primary" @click="submit"
            >保存</el-button
          >
          <el-button @click="close">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-form-item prop="famc" label="方案名称">
          <el-input v-model="form.famc" placeholder="请输入方案名称" />
        </el-form-item>
        <el-form-item prop="falx" label="方案类型">
          <el-select style="width: 100%" v-model="form.falx" placeholder="请选择方案类型">
            <el-option
              v-for="dict in D_BZ_FALX"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡逻时间" style="width: 48%" prop="time1">
          <el-time-picker
            style="width: 100%"
            v-model="form.time1"
            is-range
            clearable
            range-separator=" 至 "
            format="HH:mm"
            value-format="HH:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item prop="fps" label="分屏数">
          <el-select style="width: 100%" v-model="form.fps" placeholder="请选择分屏数">
            <el-option
              v-for="dict in D_BZ_FPS"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="jgsj" label="间隔时间(分钟)">
          <el-input v-model="form.jgsj" placeholder="请输入间隔时间(分钟)" />
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input
            prop="bz"
            v-model="form.bz"
            type="textarea"
            show-word-limit
            placeholder="请输入方案名称"
          />
        </el-form-item>
      </el-form>
    </div>
    <sxtpz
      v-if="pzIsShow"
      :pzIsShow="pzIsShow"
      @getIsShow="getIsShow"
      :faid="faid"
    ></sxtpz>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import sxtpz from "../sxtpz/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import {
  getDataList,
  addFa,
  editFa,
  getInfo,
  deleteBatchs,
  getSpInfo
} from "@/api/videoPatrol/index.js";
// 播放的路径
const NPShref = router.resolve({
  //使用resolve
  name: "ninePointScreen", //这里是跳转页面的name
  path: "/ninePointScreen"
});
const pzIsShow = ref(false);
const { proxy } = getCurrentInstance();
const { D_BZ_FALX, D_BZ_FPS } = proxy.$dict("D_BZ_FALX", "D_BZ_FPS");
const searchBox = ref(null); // 搜索盒子
const showType = ref("add");
const tableData = ref([]);
const loading = ref(false);
const tableHeight = ref(); // 表格高度
const time = ref([]); // 时间
const time1 = ref([]); // 时间
const keyCount = ref(0); //tabel组件刷新值
const title = ref("新增方案");
const elform = ref(null);
const total = ref(0);
const faid = ref("");
const isShow = ref(false); //弹窗
const deleteRows = ref([]); //弹窗
function getIsShow(data) {
  pzIsShow.value = data;
}
//搜索数据
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});
// 批量删除
function delBatch() {
  proxy
    .$confirm("确认删除当前选中数据？", "警告", {
      type: "warning"
    })
    .then((_) => {
      let ids = deleteRows.value.map((item) => {
        return item.id;
      });
      delItem(ids);
    })
    .catch((_) => {
      proxy.$message.info("已取消");
    });
}
//表单数据
const form = ref({});
//表单验证
const rules = reactive({
  famc: [{ required: true, message: "请填写方案名称" }],
  falx: [{ required: true, message: "请选择方案类型" }],
  fps: [{ required: true, message: "请选择分屏数" }],
  jgsj: [{ required: true, message: "请输入间隔时间" }],
  time1:[{required:true,message:'请选择巡逻时间段'}]
});
// 多选
const handleSelectionChange = (val) => {
  deleteRows.value = val;
};
// 查看详情
function showInfo(row) {
  getInfo(row.id).then((res) => {
    form.value = res;
    if (res.kssj && res.jssj) {
      time1.value = [res.kssj, res.jssj];
    } else {
      time1.value = [];
    }
    title.value = "方案查看";
    isShow.value = true;
    showType.value = "show";
  });
}
// 播放
function playVideo(id) {
  getSpInfo(id).then((res) => {
    if (!res.sxtzList || res.sxtzList.length == 0) {
      proxy.$message.error("未配置摄像头，无法播放，请先配置摄像头");
    } else {
      sessionStorage.removeItem('videdoList')
      sessionStorage.setItem("XLFAVIDEO", JSON.stringify(res));
      window.open(NPShref.href, "_blank");
    }
  });
}
//搜索
function handleFilter() {
  queryParams.value.pageNum = 1;
  getListData();
}
// 配置查看摄像头
function pzsxt(id) {
  pzIsShow.value = true;
  faid.value = id;
}
//重置
function reset() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  };
  time.value = [];
  getListData();
}
//新增
function add() {
  title.value = "新增方案";
  showType.value = "add";
  isShow.value = true;
}
//修改
function update(row) {
  getInfo(row.id).then((res) => {
    form.value = res;
    if (res.kssj && res.jssj) {
      form.value.time1 = [res.kssj, res.jssj];
    } else {
      form.value.time1 = [];
    }
    title.value = "修改方案";
    isShow.value = true;
    showType.value = "edit";
  });
}
//注销
function delItem(ids) {
  deleteBatchs(ids).then(() => {
    proxy.$message({ type: "success", message: "删除成功", grouping: true });
    getListData();
  });
}
//获取列表数据
function getListData() {
  loading.value = true;
  if (time.value.length === 2) {
    queryParams.value.kssj = time.value[0];
    queryParams.value.jssj = time.value[1];
  }
  getDataList(queryParams.value).then((res) => {
    tableData.value = res.records;
    total.value = res.total;
    loading.value = false;
  }).catch(()=>{
    loading.value = false;
  });
}
//关闭弹窗
function close() {
  isShow.value = false;
}
//提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      const data = {
        falx:form.value.falx,
        famc:form.value.famc,
        fps:form.value.fps,
        jgsj:form.value.jgsj,
        kssj:form.value.time1[0],
        jssj:form.value.time1[1]
      }
      proxy.$confirm("确定当前操作？").then((_) => {
        if (!form.value.id) {
          addFa(data).then(() => {
            proxy.$message({ type: "success", message: "保存成功" });
            isShow.value = false;
            getListData();
          });
        } else {
          data.id = form.value.id
          editFa(data).then(() => {
            proxy.$message({ type: "success", message: "修改成功" });
            isShow.value = false;
            getListData();
          });
        }
      });
    }
  });
}
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  queryParams.value.pageSize = currentSize;
  queryParams.value.pageNum = 1;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  queryParams.value.pageNum = currentPage;
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
 tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
};
onMounted(() => {
  getListData();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
</style>
