<template>
  <div class="camerasMg">
    <el-row class="topBar">
      <el-col>
        <el-form :inline="true" :model="searchData">
          <el-form-item label>
            <el-input v-model="searchData.fullName" placeholder="请输名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFun()">
              <i class="el-icon-search"></i> 搜索
            </el-button>
            <el-button type="primary" @click="resetFun()">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button plain type="primary" @click="addFun()">
              <i class="el-icon-plus"></i> 新增
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      :data="tableData.pageData"
      stripe
      border
      style="width:100%;"
      :loading="false"
    >
      <el-table-column width="50" type="index" label="序号"></el-table-column>
      <el-table-column prop="fullName" label="名称"></el-table-column>
      <el-table-column prop="resourceNo" label="资源编号"></el-table-column>
      <el-table-column prop="legendCode" label="图例代码"></el-table-column>
      <!-- <el-table-column label="设备类型">
        <template slot-scope="scope">
          <font>{{scope.row.deviceType == 1 ? '枪机' : '球机'}}</font>
        </template>
      </el-table-column>-->
      <el-table-column prop="address" label="安装地址"></el-table-column>
      <el-table-column prop="unitName" label="所属单位"></el-table-column>
      <el-table-column label="经纬度">
        <template slot-scope="scope">
          <font
            v-if="scope.row.longitude != null"
          >{{'[' + scope.row.longitude + ',' + scope.row.latitude + ']'}}</font>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <font v-if="scope.row.status == 0" style="color:green">正常</font>
          <font v-if="scope.row.status == 1">离线</font>
          <font v-if="scope.row.status == 2" style="color:red">报警</font>
        </template>
      </el-table-column>
      <el-table-column prop="contacts" label="联系人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="editFun(scope.row)" size="small">编辑</el-button>
          <el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="PAGE.page"
      :page-size="PAGE.size"
    ></el-pagination>
    <GasMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :title="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData"
      :key="zjKey"
    ></GasMgEdit>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import GasMgEdit from "./GasMgEdit.vue";
import METHOD from "@/utils/methods";
@Component({
  components: { GasMgEdit }
})
export default class Gas extends Vue {
  @Provide() signId: String = "";
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { deviceName: "" };
  @Provide() loading: Boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;
  getTableData(param:any = {}) {
    let that = this;
    METHOD.getListData(this, this.signId, Object.assign(this.PAGE, param ), function(res: any) {
      if( res ) that.tableData = res;
    });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData(this.searchData);
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = {};
    this.getTableData();
  }
  addFun() {
    this.zjKey++;
    this.dialogVisible = true;
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this as any;
    METHOD.delteListData(that, row.id, function() {
      that.getTableData();
    });
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    //关闭窗口
    this.dialogVisible = false;
    this.formData = {};
  }
  created() {
    this.signId = this.$route.matched[1].meta.listId;
    this.getTableData();
  }
}
</script>
