<template>
  <div>
    <div class="app-container" v-if="!pageShow">
      <!-- 筛选start -->
      <div class="mb-20">所有台区</div>
      <div class="filter-container mb-10">
        <div>
          <div class="filter-item">
            台区：
            <el-input
              v-model="platformAreaName"
              placeholder="请输入台区名称"
              style="width: 240px"
            ></el-input>
          </div>

          <el-button
            type="primary"
            icon="el-icon-search"
            class="search-button"
            @click="platformList()"
          >
            搜索
          </el-button>

          <el-button icon="el-icon-plus" type="success" @click="addItem()">
            新增
          </el-button>
        </div>
      </div>
      <!-- 筛选end -->

      <!-- 表格start -->
      <el-table :data="tableData" border stripe :header-cell-style="headClass">
        <el-table-column
          fixed
          prop="platformAreaName"
          label="台区名称"
          width=""
        ></el-table-column>
        <el-table-column
          prop="platformAreaCode"
          label="台区编号"
          width=""
        ></el-table-column>
        <el-table-column
          prop="platformAreaAddress"
          label="台区地址"
          width=""
        ></el-table-column>
        <el-table-column prop="siteCount" label="点位数量" width="">
          <template #default="scope">
            <span
              @click="goSiteList(scope.row)"
              v-if="scope.row.siteCount"
              style="cursor: pointer; color: #0284e8"
            >
              {{ scope.row.siteCount }}
            </span>
            <span v-else>{{ scope.row.siteCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="挂载设备数量" width="350">
          <template #default="scope">
            <span>{{ scope.row.deviceCount ? deviceCount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <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>
      <!-- 表格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-->
    </div>

    <!-- 站点设备列表start -->
    <site-list
      v-else
      :pageShow="pageShow"
      :goSiteListParam="goSiteListParam"
      @func="getMsgFormSon"
    ></site-list>
    <!-- 站点设备列表end -->
  </div>
</template>

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

import DialogComponent from './dialogComponent'
import siteList from './siteList'

export default defineComponent({
  components: { DialogComponent, siteList },
  setup(props, context) {
    const total = ref(0)
    const pageSize = ref(10)
    const currentPage = ref(1)
    const siteCount = ref(0)
    const deviceCount = ref(0)
    const goSiteListParam = ref('')
    const platformAreaName = ref('')
    const pageShow = ref(false)
    const showDialog = 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 platformList() {
      api
        .platformList({
          size: pageSize.value,
          current: currentPage.value,
          platformAreaName: platformAreaName.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) => {
      api
        .platformAreaListOne({
          id: row.id,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            siteCount.value = requset.data[0].siteCount
            deviceCount.value = requset.data[0].deviceCount
          } else {
            ElMessage.error(requset.msg)
          }
        })

      tableItem.value = {
        id: row.id,
        platformAreaName: row.platformAreaName,
        platformAreaCode: row.platformAreaCode,
        platformAreaAddress: row.platformAreaAddress,
        siteCount: siteCount.value,
        deviceCount: deviceCount.value,
      }
      dialogTitle.value = '编辑'
      showDialog.value = true
    }
    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      platformList()
    }

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

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

    onMounted(() => {
      platformList()
    })

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }
    const handleSizeChange = (val) => {
      pageSize.value = val
      platformList()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      platformList()
    }
    return {
      tableData,
      platformAreaName,
      pageShow,
      dialogTitle,
      showDialog,
      props,
      context,
      tableItem,
      siteCount,
      deviceCount,
      goSiteListParam,
      total,
      pageSize,
      currentPage,

      platformList,
      goSiteList,
      getMsgFormSon,
      headClass,
      addItem,
      editRow,
      closeDialog,
      handleDelete,
      cancelEvent,
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>

