<template>
  <div>
    <el-card>
      <div>
        服务名称:
        <el-select v-model="queryModuleInfo.serviceName" placeholder="请选择服务名称" filterable clearable>
          <el-option v-for="item in serviceList" :key="item.name" :label="item.name" :value="item.name"></el-option>
        </el-select>
        <el-input v-model="queryModuleInfo.taskName" clearable placeholder="请输入监控名称" style="width: 500px;">
        </el-input>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
        <el-button type="primary" style="margin-left:10px" icon="el-icon-circle-plus" @click="addSqlMonitor"
          v-permission="('monitor:sql:add')">新增</el-button>
      </div>
      <el-table :data="sqlMonitorList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="监控名称" prop="taskName" width="180px"></el-table-column>
        <el-table-column label="执行策略" prop="taskCron" width="180px">
          <template slot-scope="scope">
            <p v-if="scope.row.taskCron==='0 */1 * * * ?'">每1分钟执行一次</p>
            <p v-if="scope.row.taskCron==='0 */5 * * * ?'">每5分钟执行一次</p>
            <p v-if="scope.row.taskCron==='0 0 * * * ?'">每小时执行一次</p>
            <p v-if="scope.row.taskCron==='0 0 10 * * ?'">每天10点执行一次</p>
            <p v-if="scope.row.taskCron==='0 0 10 ? * 2'">每周一上午10点执行一次</p>
          </template>
        </el-table-column>
        <el-table-column label="sql" width="80px">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="sql" width="50" trigger="hover" :content="scope.row.sql">
              <div slot="reference" style="color:#409EFF">SQL</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="服务名称" prop="serviceName" width="150px"></el-table-column>
        <el-table-column label="数据源" prop="dsName" width="80px"></el-table-column>
        <el-table-column label="负责人" prop="owner" width="80px"></el-table-column>
        <el-table-column label="当前状态" width="80px">
          <template slot-scope="scope">
            <!-- <p v-if="scope.row.status===1">启用</p>
            <p v-if="scope.row.status===0">禁用</p> -->
            <el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
            <el-tag type="info" v-if="scope.row.status===0">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="openEditMonitorDialog(scope.row)"
              v-permission="('monitor:sql:edit')">编辑</el-button>

            <el-button type="info" icon="el-icon-error" @click="enableDislog(scope.row)"
              v-permission="('monitor:sql:enable')" v-if="scope.row.status===1">禁用</el-button>

            <el-button type="success" icon="el-icon-success" @click="unenableDialog(scope.row)"
              v-permission="('monitor:sql:enable')" v-if="scope.row.status===0">启用</el-button>

            <el-button type="danger" icon="el-icon-delete" @click="delSqlMonitor(scope.row)"
              v-permission="('monitor:sql:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
        layout="total, prev, pager, next" :total="totalNum">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import {
  getSqlMonitorList,
  delSqlMonitor,
  isEnableSqlMonitor
} from '@/api/sqlMonitor'
import { getGitProjectList } from '@/api/jira'
export default {
  data() {
    return {
      queryModuleInfo: {
        serviceName: '',
        taskName: '',
        pageNum: 1,
        pageSize: 10
      },
      totalNum: 0,
      sqlMonitorList: [],
      serviceList: []
    }
  },
  created() {
    this.getSqlMonitorList()
    this.getServiceList()
    // 接收参数
    this.$bus.$on('refresh', () => {
      this.getSqlMonitorList()
    })
  },
  methods: {
    // 获取sql监控列表
    getSqlMonitorList() {
      getSqlMonitorList(this.queryModuleInfo).then((resp) => {
        this.sqlMonitorList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 查询按钮
    queryData() {
      this.getSqlMonitorList()
    },
    // 添加按钮
    addSqlMonitor() {
      this.$router.push({
        path: `/monitor/addSqlMonitor`
      })
      this.$nextTick(function () {
        // DOM 现在更新了
        var row = 'add'
        this.$bus.$emit('data', row)
      })
    },
    // 编辑按钮
    openEditMonitorDialog(row) {
      this.$router.push({
        path: `/monitor/addSqlMonitor`,
        query: {
          id: row.id
        }
      })
    },
    // 获取服务列表
    getServiceList() {
      getGitProjectList().then((resp) => {
        this.serviceList = resp.data.data
      })
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除sql监控
    delSqlMonitor(row) {
      this.openMessage('您确定要删除吗？', '删除', () => {
        delSqlMonitor(row)
          .then((resp) => {
            if (resp.data.businessCode === '0000') {
              this.$message.success('删除成功！')
              this.getSqlMonitorList()
            } else {
              this.$message.error(resp.data.msg)
            }
          })
          .catch((error) => {
            this.$message({ type: 'error', message: error })
          })
      })
    },
    // 禁用按钮
    enableDislog(row) {
      var formData = new FormData()
      formData.set('taskId', row.id)
      formData.set('status', 0)
      this.openMessage('是否需要禁用？', '确定', () => {
        isEnableSqlMonitor(formData).then((resp) => {
          if (resp.data.businessCode === '0000') {
            this.getSqlMonitorList()
            return this.$message.success(resp.data.msg)
          } else {
            return this.$message.error(resp.data.msg)
          }
        })
      })
    },
    // 启用按钮
    unenableDialog(row) {
      this.openMessage('是否需要启用？', '确定', () => {
        var formData = new FormData()
        formData.set('taskId', row.id)
        formData.set('status', 1)
        isEnableSqlMonitor(formData).then((resp) => {
          if (resp.data.businessCode === '0000') {
            this.getSqlMonitorList()
            return this.$message.success(resp.data.msg)
          } else {
            return this.$message.error(resp.data.msg)
          }
        })
      })
    },

    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getSqlMonitorList()
    },
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getSqlMonitorList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-select {
  margin-right: 20px;
}
</style>
