<template>
  <div>
    <el-card class="no-bottom">
      <div class="search-container">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          inline
        >
          <el-form-item
            label=""
            prop="name"
          >
            <el-input v-model="searchForm.name" clearable placeholder="模型名称">
              <el-button slot="append" icon="el-icon-search" @click="listModel(1)" />
            </el-input>
          </el-form-item>
        </el-form>
        <div class="buttons-group">
          <el-button type="primary" icon="el-icon-plus" @click="addRow">增加模型</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column
          prop="name"
          label="模型名称"
          width="300px"
        >
          <template slot-scope="props">
            <el-button type="text" @click="checkDetails(props.row)">{{ props.row.name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          label="操作"
          width="140px"
          align="center"
        >
          <template slot-scope="props">
            <el-button type="text" @click="showRulesView(props.row)">告警规则</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="margin-top-20 margin-bottom-20 text-align-right"
        :current-page="pageForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <esv-dialog
      :title="add ? '新增模型' : '编辑模型'"
      :visible.sync="dialogVisible"
      width="100%"
      top="0"
    >
      <add-or-update
        v-if="dialogVisible"
        :id="currentRowId"
        :add="add"
        @cancel="dialogVisible = false"
        @confirm="onConfirm"
      />
    </esv-dialog>

    <esv-dialog
      title="模型详情"
      :visible.sync="detailDialogVisible"
      width="100%"
      top="0"
    >
      <Details
        v-if="detailDialogVisible"
        :id="currentRowId"
        @cancel="detailDialogVisible = false"
        @toEdit="editItemFromDetail()"
        @delete="onDelete()"
      />
    </esv-dialog>
    <esv-dialog
      title="告警规则"
      :visible.sync="rulesDialogVisible"
      width="60%"
      top="0"
    >
      <Rules
        v-if="rulesDialogVisible"
        :id="currentRowId"
        :add="add"
        @cancel="rulesDialogVisible = false"
        @confirm="onRulesConfirm"
      />
    </esv-dialog>
  </div>
</template>

<script>
import Details from '@/views/data-management/model-management/detail'
import AddOrUpdate from '@/views/data-management/model-management/AddOrUpdate'
import Rules from '@/views/data-management/model-management/rules'
import { listModel } from '@/api/data-management/model-management'
export default {
  name: 'ObjectModel',
  components: {
    Details,
    AddOrUpdate,
    Rules
  },
  props: {},
  data() {
    return {
      searchForm: {
        name: null
      },
      add: true,
      dialogVisible: false,
      detailDialogVisible: false,
      rulesDialogVisible: false,
      tableData: [
      ],
      addForm: {
        input: null,
        status: null
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      currentRowId: null
    }
  },
  created() {
    this.listModel(1)
  },
  mounted() {},
  methods: {
    listModel(pageNum) {
      const {
        name
      } = this.searchForm
      const params = {
        name,
        pageNum,
        pageSize: this.pageForm.pageSize
      }
      listModel(params)
        .then(res => {
          const { data } = res
          this.tableData = data.records
          this.pageForm.total = data.total
          this.pageNum = data.pageNum
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error('查询遇到问题')
        })
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    addRow() {
      this.add = true
      this.dialogVisible = true
    },
    editItem(row) {
      this.add = false
      this.currentRowId = row.id
      this.dialogVisible = true
    },
    editItemFromDetail() {
      this.detailDialogVisible = false
      this.add = false
      this.dialogVisible = true
    },
    checkDetails(row) {
      this.currentRowId = row.id
      this.detailDialogVisible = true
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.listModel(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.listModel(val)
    },
    onConfirm() {
      this.dialogVisible = false
      this.listModel(this.pageForm.pageNum)
    },
    onRulesConfirm() {
      this.rulesDialogVisible = false
    },
    onDelete() {
      this.detailDialogVisible = false
      this.listModel(this.pageForm.pageNum)
    },
    showRulesView(row) {
      this.rulesDialogVisible = true
      this.currentRowId = row.id
      this.add = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container{
  display: flex;
  justify-content: space-between;
}

</style>
