<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          设备类别
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-input v-model="conditions.keywords" style="width: 200px;" class="filter-item" prefix-icon="el-icon-search" placeholder="请输入内容" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <el-row class="content-body">
      <el-table v-loading="listLoading" :data="dataList" fit style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="80" />

        <el-table-column label="类别名称" align="center" width="250">
          <template v-slot="{row}">
            <span>{{ row.equipCatTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column label="说明">
          <template v-slot="{row}">
            <span>{{ row.equipCatDesc }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template v-slot="{row}">
            <el-button size="mini" @click="handleEdit(row)">修改</el-button>
            <el-button v-if="row.isFixed !== 1" size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="false" class="pagination-container">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>

    <sensor-cat ref="sensor-cat" @formSuccess="getData" />
  </div>
</template>

<script>
import SensorCat from './sensorCat'
import { getSensorCat, deleteSensorCatById } from '@/api/goaf/sensorCatApi'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination,
    SensorCat
  },

  data() {
    return {
      dataList: null,
      listLoading: true,
      total: 0,
      conditions: {
        page: 1,
        limit: 10,
        keywords: ''
      }
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    getData() {
      this.listLoading = true
      getSensorCat(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data } = resp
        if (code === 0) {
          // this.total = total
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    // 查询
    handleFilter() {
      this.conditions.page = 1
      this.getData()
    },

    // 添加
    handleAdd() {
      this.$refs['sensor-cat'].showAddModel()
    },

    // 修改
    handleEdit(data) {
      this.$refs['sensor-cat'].showEditModel(JSON.parse(JSON.stringify(data)))
    },

    // 删除
    handleDelete(data) {
      const { sensorTypeId } = data
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSensorCatById(sensorTypeId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.$message.success(msg)
            this.getData()
          } else {
            this.$message.error(msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>
