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

        <el-button type="primary" icon="el-icon-search" class="search-button">
          搜索
        </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"
      :cell-style="cellStyle"
    >
      <el-table-column
        fixed
        prop="stationName"
        label="台区名称"
        width=""
      ></el-table-column>
      <el-table-column
        prop="stationCode"
        label="台区编号"
        width=""
      ></el-table-column>
      <el-table-column
        prop="stationAddress"
        label="台区地址"
        width=""
      ></el-table-column>
      <el-table-column prop="pointNum" label="点位数量" width="">
        <template #default="scope">
          <span @click="goSiteList">{{ scope.row.pointNum }}</span>
          <!-- <router-link style="margin-right:15px;" :to="{ path:'siteList',query:{id:scope.row.stationName}}">
              {{ scope.row.pointNum }}
            </router-link> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceNum"
        label="挂载设备数量"
        width="350"
      ></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-button
            @click="handleDelete(scope.$index, scope.row)"
            type="text"
            size="small"
            class="delete-text"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->

    <!--弹框组件开始-----------------------start-->
    <dialog-component
      :dialogTitle="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->
  </div>
  <site-list v-else :pageShow="pageShow" @func="getMsgFormSon"></site-list>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import DialogComponent from './dialogComponent'
import siteList from './siteList'

export default defineComponent({
  components: { DialogComponent, siteList },
  setup(props, context) {
    const input = ref('请输入台区名称')
    const pageShow = ref(true)
    const showDialog = ref(false)
    const tableData = ref([
      {
        stationName: '台区1',
        stationCode: 'tq02',
        stationAddress: '青浦区徐泾镇',
        pointNum: '8',
        deviceNum: '10',
      },
      {
        stationName: '台区1',
        stationCode: 'tq02',
        stationAddress: '青浦区徐泾镇',
        pointNum: '8',
        deviceNum: '10',
      },
      {
        stationName: '台区1',
        stationCode: 'tq02',
        stationAddress: '青浦区徐泾镇',
        pointNum: '8',
        deviceNum: '10',
      },
      {
        stationName: '台区1',
        stationCode: 'tq02',
        stationAddress: '青浦区徐泾镇',
        pointNum: '8',
        deviceNum: '10',
      },
    ])

    const goSiteList = () => {
      pageShow.value = !pageShow.value
    }
    const getMsgFormSon = () => {
      pageShow.value = !pageShow.value
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }

    //自定义列样式
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      if (columnIndex === 3) {
        return `color:#0284E8;cursor:pointer`
      } else {
        return ''
      }
    }

    const tableItem = reactive([])
    const dialogTitle = ref('')
    // 添加操作

 
    const addItem = () => {
      tableItem.value = {
        id: '',
        stationName: '',
        stationCode: '',
        stationAddress: '',
        siteList: [],
        done: '',
        guaZai: '',
      }

      dialogTitle.value = '新增'
      showDialog.value = true
    }
    // 编辑操作
    const editRow = (row) => {
      console.log(row)
      tableItem.value = row
      dialogTitle.value = '编辑'
      showDialog.value = true
    }
    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
    }

    //删除操作
    const handleDelete = (index, row) => {
      console.log(index, row)
      alert(index)
    }

    return {
      tableData,
      input,
      pageShow,
      dialogTitle,
      showDialog,
      props,
      context,
      tableItem,

      goSiteList,
      getMsgFormSon,
      headClass,
      cellStyle,
      addItem,
      editRow,
      closeDialog,
      handleDelete,
    }
  },
})
</script>

