<template>
  <div class="global">
    <div class="mainContainer">
      <div class="top">预警管理</div>
      <div class="container">
        <div class="header">
          <el-button type="success" @click="addEarlyWarningManagement">添加</el-button>
        </div>
        <el-table  border  stripe  :data="tableList"  highlight-current-row  style="width:100%">
          <el-table-column  type="index"  align="center"  label="序号"  width="50px"/>
          <el-table-column prop="warnName" label="预警名称" align="center" />
          <el-table-column prop="inspectCycle" label="检查周期" align="center">
            <template slot-scope="scope">
              {{getInspectCycle(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column prop="warningTime" label="预警时间" align="center">
            <template slot-scope="scope">
              {{getWarningTime(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column prop="warnTargetType" label="人员类型" align="center">
            <template slot-scope="scope">
              {{getWarnTargetType(scope.row)}}
            </template>
          </el-table-column>
          <el-table-column prop="warnTargetNames" label="检查人员" align="center">
          </el-table-column>
          <el-table-column prop="warnStatus" label="启用" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.warnStatus"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  @change="warnStatusChange(scope.row)"
                />
              </template>
            </el-table-column>
          <el-table-column  prop="operation"  label="操作"  align="center"  width="200px"  fixed="right">
            <template slot-scope="scope">
              <el-button  size="mini"  @click="handleEdit(scope.row)">修改</el-button>
              <el-button  size="mini"  @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            class="right"
            :current-page.sync="listQuery.page"
            :page-size="listQuery.limit"
            :page-sizes="[10,20,30,40]"
            :total="total"
            @size-change="sizeChange"
            @current-change="pageChange"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getList,deleteFun,enableWarn,stopWarn,getAllRole } from '@/api/system/earlyWarningManagement'
export default {
  data() {
    return {
      // 列表数据
      tableList: [],
      // 分页
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      },
      roleList:[]
    }
  },
  created() {
    this.getRoleList()
    this.getList()
  },
  methods: {
    getList() {
      let data = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      getList(data).then((res) => {
          if (res.code == 200) {
            this.tableList = res.data.records
            this.listQuery.limit = res.data.size
            this.total = res.data.total
          }
      }).catch((err) => {
          console.log(err)
        })
    },
    sizeChange(v) {
      this.listQuery.limit = v;
      this.getList();
    },
    pageChange(v) {
      this.listQuery.page = v;
      this.getList();
    },
    // 新增
    addEarlyWarningManagement() {
      this.$router.push({ name: 'addEarlyWarningManagement',query: { state: 'add' }})
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({ name: 'addEarlyWarningManagement',query: { state: 'edit',id: row.id }})
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定删除该项记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          deleteFun(row.id).then((res) => {
            if (res.code == 200) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        })
    },
    warnStatusChange(row) {
      let title = '停止'
      if(row.warnStatus){
        title = '启用'
        enableWarn(row.id).then((res) => {
          if (res.code == 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: `${title}成功!`
            })
          }
        }).catch(() => {
          this.getList()
          this.$message({
            type: 'info',
            message: `${title}失败!`
          })
        })
      }else if(!row.warnStatus){
        title = '停止' 
        stopWarn(row.id).then((res) => {
          if (res.code == 200) {
            this.getList()
            this.$message({
              type: 'success',
              message: `${title}成功!`
            })
          }
        }).catch(() => {
          this.getList()
          this.$message({
            type: 'info',
            message: `${title}失败!`
          })
        })
      }     
      
    },
    getRoleList() {
      getAllRole().then(res => {
        this.roleList = res.data
      })
    },
    getWarnTargetType(row) {
      let warnTargetType = row.warnTargetType
      let warnTargetTypeName = ''
      this.roleList.forEach(itemRole => {
        if(warnTargetType == itemRole.roleCode){
          warnTargetTypeName = itemRole.roleName
        }
      })
      return warnTargetTypeName
    },
    getInspectCycle(row) {
      switch (row.inspectCycle) {
          case '1_day':
              return '日';
              break;
          case '1_week':
              return '周';
              break;
          case '1_month':
              return '月';
              break;
          case '1_season':
              return '季';
              break;
      } 
    },
    getWarningTime(row) {
      switch (row.warningTime) {
          case '3_day':
              return '到期前3天';
              break;
          case '2_day':
              return '到期前2天';
              break;
          case '1_day':
              return '到期前1天';
              break;
          case '10_hour':
              return '到期前10小时';
              break;
      } 
    },

  }
}
</script>
<style lang="scss" scoped>
.top {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.container {
  padding: 10px;
  .header {
    height: 50px;
    line-height: 50px;
    text-align: right;
    margin-bottom: 20px;
  }
}
.pagination-container {
  margin-top:10px;
  margin-right:20px;
  text-align: right;
}
</style>