<template>
  <div class="siteManage-main watchDog">
    <!-- 筛选start -->
    <div class="filter-container mb-20">
     <div class="left">
        <div>
          <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
          <el-button icon="el-icon-plus" type="success" @click="addItem()">
            新增
          </el-button>
        </div>
      </div>

      <div class="right">
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <!-- 筛选end -->

    <!-- 表格start -->
    <el-table :data="tableData" border stripe :header-cell-style="headClass">
      <el-table-column prop="status" align="center" label="状态" width="50">
        <template #default="scope">
          <el-avatar
            class="status"
            :style="
              scope.row.status == 0
                ? 'background-color:red'
                : 'background-color:#04F21C'
            "
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="monitorDeviceName"
        label="名称"
        align="center"
        width="200px"
      ></el-table-column>
      <el-table-column
        prop="monitorDeviceCode"
        label="编号"
        align="center"
        width=""
      ></el-table-column>
      <!-- <el-table-column
        prop="loopMeterAddress"
        label="回路表计地址"
        align="center"
        width=""
      ></el-table-column> -->
      <el-table-column
        prop="ratedVoltage"
        label="额定电压"
        align="center"
        width=""
      ></el-table-column>
      <el-table-column
        prop="ratedCurrent"
        label="额定电流"
        align="center"
        width=""
      ></el-table-column>
      <el-table-column
        prop="currentLoadRate"
        label="电流负载率门限"
        align="center"
        width="150"
      ></el-table-column>
      <!-- <el-table-column
        prop="qualityAnalysis"
        label="电能质量分析"
        align="center"
        width=""
      ></el-table-column> -->
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除?"
              @confirm="handleDelete(scope.row)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button type="text" size="small" class="delete-text">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="视频画面" width="100">
        <template #default="scope">
          <a @click="checkVideo(scope.row)">查看</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      ></el-pagination>
    </div>
    <!-- 分页end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->

    <!--视频弹框组件开始-----------------------start-->
    <check-video
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog2"
    ></check-video>
    <!--视频弹框组件结束-----------------------end-->
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import * as api from '@/api/siteManage/watchDog.js'
import { ElMessage } from 'element-plus'

import DialogComponent from './dialogComponent'
import checkVideo from './checkVideo'

export default defineComponent({
  components: { DialogComponent, checkVideo },
  setup(props, { emit }) {
    const total = ref(0)
    const pageSize = ref(15)
    const currentPage = ref(1)
    const goSiteListParam = ref('')
    const platformAreaName = ref('')
    const pageShow = ref(false)

    const showDialog = ref(false)
    const showDialog2 = ref(false)
    const tableData = ref([])

    function goSiteList(params) {
      goSiteListParam.value = params.id
      pageShow.value = !pageShow.value
    }
    const getMsgFormSon = () => {
      pageShow.value = !pageShow.value
    }

    const tableItem = reactive([])
    const dialogTitle = ref('')

    //监控设备列表
    function deviceNewsList() {
      api
        .deviceNewsList({
          siteId: 1,
          size: pageSize.value,
          current: currentPage.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            tableData.value = requset.data.records
            total.value = requset.data.total
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 添加操作
    // const addItem = () => {
    //   tableItem.value = {
    //     platformAreaName: '',
    //     platformAreaCode: '',
    //     platformAreaAddress: '',
    //   }
    //   dialogTitle.value = '新增'
    //   showDialog.value = true
    // }




    // 编辑操作
    const editRow = (row) => {
      tableItem.value = {
        id: row.id,
        monitorDeviceCode: row.monitorDeviceCode,
        monitorDeviceName: row.monitorDeviceName,
        loopMeterAddress: row.loopMeterAddress,
        ratedVoltage: row.ratedVoltage,
        ratedCurrent: row.ratedCurrent,
        currentLoadRate: row.currentLoadRate,
        siteId: row.siteId,
        variableListId: row.variableListId,
        qualityAnalysis: row.qualityAnalysis === '是' ? true : false,
      }
      dialogTitle.value = '编辑'
      showDialog.value = true
    }



    // 查看视频
    const checkVideo=()=> {
      alert(1)
      tableItem.value = {
        id: '',
        stationName: '',
        watchName: '',
        watchCode: '',
        siteList: [],
        done: '',
        guaZai: '',
        checked: true,
        resource: '',
      }
      dialogTitle.value = '查看视频'
      showDialog2.value = true
    }


    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false,
      showDialog2.value = false
      deviceNewsList()
    }

    //删除 是否删除  ---- 是
    const handleDelete = (row) => {
      api.deviceNewsDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          deviceNewsList()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }

    onMounted(() => {
      deviceNewsList()
    })

    function goVariableList() {
      emit('func')
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    const handleSizeChange = (val) => {
      pageSize.value = val
      deviceNewsList()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      deviceNewsList()
    }
    return {
      tableData,
      showDialog,
      showDialog2,

      platformAreaName,
      pageShow,
      dialogTitle,

      props,
      tableItem,
      goSiteListParam,

      total,
      pageSize,
      currentPage,

      goVariableList,

      deviceNewsList,
      goSiteList,
      getMsgFormSon,
      headClass,
      // addItem,

      checkVideo,
      editRow,
      closeDialog,
      handleDelete,
      cancelEvent,
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>
