<template>
    <div class="app-container home">
      <TabTitle :text="nowText" />
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-scrollbar :height="globalScreenHeight+'px'">
            <el-card class="right-list">
            <template v-slot:header>
              <el-form :model="queryParams" ref="queryRef" :inline="true" >
                <el-form-item label="摄像头" prop="algorithmName">
                  <el-select v-model="queryParams.deptName" placeholder="请选择摄像头" clearable style="width: 200px">
                      <el-option
                        v-for="dict in deviceList"
                        :key="dict.id"
                        :label="dict.deviceName"
                        :value="dict.id"
                      />
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间" >
                  <el-date-picker
                    v-model="dateRange"
                    value-format="YYYY-MM-DD"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="算法场景" prop="applicationScenarios">
                  <el-select v-model="queryParams.applicationScenarios" placeholder="请选择算法场景" clearable style="width: 200px">
                            <el-option 
                            v-for="disc in algorithm_scen"
                            :key="disc.value"
                            :label="disc.label"
                             :value="disc.value"
                            />
                          </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            </template>
            <el-row :gutter="10" class="mb8" style="justify-content: flex-start;">
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                     :class="isActive=='4'?'active':''"
                     @click="changeDivision(12,4)"
                  >四分屏</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                    :class="isActive=='6'?'active':''"
                    @click="changeDivision(8,6)"
                  >六分屏</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                  type="primary"
                  plain
                  :class="isActive=='12'?'active':''"
                  @click="changeDivision(6,12)"
                  >十二分屏</el-button>
               </el-col>
            </el-row>
            <div class="alg-list" >
              <el-row :gutter="10">
                <el-col :span="division"  v-for="item in algList" :key="item.name">
                  <el-card  class="alg-item" shadow="hover" >
                    <template v-slot:default >
                      <div style="width: 100%;overflow: hidden;">
                        <ImagePreview style="width: 100%;" :src="item.alarmImg"/>
                      </div>
                      <h2 :style="{color:item.alarmLevelColor}">{{ item.alarmType }}</h2>
                      <p style="color: #999999;font-size: 12px;">
                        {{ parseTime(item.alarmTime) }}
                      </p>
                      <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
                        <el-button link type="primary" icon="Edit" @click.stop="handleDetials(item)" >详情</el-button>
                        <!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
                        <el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->
                      </div>
                    </template>
                  </el-card>
                </el-col>
              </el-row>
       
            </div>
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
                :layout="'total, prev, pager, next, jumper'"
            />
            </el-card>
          </el-scrollbar>
        </el-col>
      </el-row>
      <alarmDetial ref="alarmDetialRef"/>
    </div>
</template>
  
<script setup name="Index">
  import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
  import { listDevice, } from "@/api/yunshou/device";
  const { proxy } = getCurrentInstance();
  const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
  import alarmDetial from './components/form.vue'
  import { ArrowDown } from '@element-plus/icons-vue'
  import { Search } from '@element-plus/icons-vue'
  const globalScreenHeight = inject('globalScreenHeight');
  const router = useRouter();
  const alarmDetialRef = ref(null)
  const nowText=ref('告警管理')
  const ids = ref([]);
  const total = ref(0);
  const division = ref(6);
  const isActive = ref('12');
  const deviceList = ref([]);
  const algList = ref([]);
  const data = reactive({
    form: {},
    queryParams: {
      postCode: undefined,
      searchValue: '',
      status: undefined,
      pageSize: 12,
      pageNum: 1,
    },
    rules: {
      postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
      postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
      postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
    }
  });
  const { queryParams, form, rules } = toRefs(data);

  function changeDivision(val,pageSize){
    division.value=val
    queryParams.value.pageSize=pageSize
    isActive.value=pageSize
    getList()
  }
  
 function getDeviceList() {
   listDevice().then(response => {
     deviceList.value = response.rows;
   });
 }
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }
  
  /** 查询算法列表 */
  function getList() {
    listAlarm(queryParams.value).then(response => {
      algList.value = response.rows
      total.value = response.total;
    });
  }
  function handeAdd(row){
    algorithmDownRef.value.handleAdd()
  }
  function handDetails(id){
    router.push("/algorithmList/details/info/" + '123');
  }
  function handleSetSize(row) {
    console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
    // reset();
    // const postId = row.postId || ids.value;
    // getPost(postId).then(response => {
    //   form.value = response.data;
    //   open.value = true;
    //   title.value = "修改岗位";
    // });
  }
  function handleDetials(row) {
    alarmDetialRef.value.handleUpdate(row)
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    const id = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除算法名称为"' + row.algorithmName + '"的数据项？').then(function() {
      return deleteAlg(id);
    }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  }
  getList();
  getDeviceList();
  </script>
  
  <style scoped lang="scss">
   .active{
    background-color: #409EFF;
    color: #fff;
   }
   .search-input{
    display: flex;
    width: 400px;
    margin-right: 10px;
   }
   .add-but{
    position: absolute;
    display: flex;
    top: 30px;
    right: 30px;
   }
   .left-list{
    min-height: 700px;
   }
   .right-list{
    min-height: 700px;
    .alg-list{
      display: grid;
      // grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      .alg-item{
        width: 100%;
        margin-top: 10px;
        min-height: 350px;
        cursor: pointer;
        position: relative;
      }
    }
   }
   .cleartitle{
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
  }
  </style>
  
  