<template>
  <div class="bbsl-common-page">
    <!--查询-->
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="测站名称">
              <el-cascader
                filterable
                size="mini"
                v-model="queryParam.params.stcd"
                :props="{value: 'stcd', label: 'name', children: 'children'}"
                :options="stnms"
                :show-all-levels="false"
                placeholder="请选择测站名称"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预警等级">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="queryParam.params.warnGrade"
                clearable
                placeholder="请选择预警等级"
              >
                <el-option
                  v-for="item in yjdjs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警时间">
              <el-date-picker
                @change="changeDate"
                v-model="sendDate"
                size="mini"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="onClickSearch"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--表单-->
    <div class="bbsl-table-content" ref="contentPanel">
      <div class="bbsl-btn-content" ref="btnPanel"></div>
      <el-table
        stripe
        size="mini"
        :height="tableMaxHeight"
        :style="{width: '100%',height: '95%'}"
        v-loading="loading"
        border
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :cell-style="{'text-align': 'center'}"
      >
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column
          min-width="100"
          sortable
          prop="stnm"
          label="测站名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          sortable
          min-width="100"
          prop="warnGrade"
          label="预警等级"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="180"
          sortable
          prop="sendDate"
          label="预警时间"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          min-width="130"
          sortable
          prop="isNoteMsg"
          label="是否发送短信"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.isNoteMsg === 1 || scope.row.isNoteMsg === '1'"
              >是</span
            >
            <span
              v-if="scope.row.isNoteMsg === 0 || scope.row.isNoteMsg === '0'"
              >否</span
            >
          </template>
        </el-table-column>
        <el-table-column
          min-width="100"
          sortable
          prop="alertStatus"
          label="预警状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.alertStatus == 1 || scope.row.alertStatus == '1'"
              >未关闭</span
            >
            <span
              v-if="scope.row.alertStatus === 2 || scope.row.alertStatus === '2'"
              >已关闭</span
            >
          </template>
        </el-table-column>
        <el-table-column
          min-width="120"
          sortable
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            
            
            <el-dropdown
              split-button
               @click="openPolice(scope.row)"
              @command="closeAlartStatus(scope.row)"
            >
              报警详情
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="closeAlartStatus" v-if="scope.row.alertStatus=='1'"
                  >关闭预警</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
	  <el-footer>
		  <el-pagination
		    ref="paginationPanel"
		    align="right"
		    class="bbsl-pagination"
		    background
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :current-page="queryParam.pageBean.page"
		    :page-sizes="[20, 30, 40, 50]"
		    :page-size="queryParam.pageBean.pageSize"
		    layout="total, sizes, prev, pager, next, jumper"
		    :total="total"
		  ></el-pagination>
	  </el-footer>
      
      <latestWarnInfo
        v-if="showFormDia"
        @closeFormDiao="closeFormDiao"
        @refList="getDateList"
        :showFormDia="showFormDia"
        :types="types"
      ></latestWarnInfo>
    </div>
  </div>
</template>

<script>
import latestWarn from '@/api/warningRelease/latestWarn'
import {TableMixin} from '@/mixins/tableMixin'
import latestWarnInfo from './components/latestWarnInfo.vue'
import req from '@/request.js'
export default {
  mixins: [TableMixin],
  components: {
    latestWarnInfo,
  },
  data() {
    return {
      queryParam: {
        params: {
          stcd: null, //测站代码
          warnGrade: null, //预警等级
          startTime: null,
          endTime: null,
        },
        pageBean: {
          pageSize: 20,
          page: 1,
        },
      },
      stnms: [], //测站名称
      yjdjs: [], //预警等级
      tableData: [], //展示的数据嘛
      sendDate: '', //预警时间
      total: 0, //总数据
      multipleSelection: [], // 删除复选框
      title: '',
      showFormDia: false,
      pId: '',
      types: '',
    }
  },
  created() {
    this.getSysDict() //获取字典数据
    this.getDateList() //获取数据
    //获取测站下拉列表
    latestWarn.getTree({}, (response) => {
      this.stnms = response.value
      this.stnms.forEach((item) => {
        if (item.children) {
          item.children = JSON.parse(
            JSON.stringify(item.children).replace(/stnm/g, 'name')
          )
        }
      })
    })
  },
  methods: {
    closeAlartStatus(val){
		 this.$confirm('此操作将关闭该测站, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					latestWarn.updateStatus(val.id, (response) => {
						if(response.state){
							this.$message.success('关闭成功')
							this.getDateList()
						}else{
							this.$message.error(res.message)
						}
					})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
      
      
      
    },
    openPolice(val) {
      if (val) {
        latestWarn.warniInfo(val.id, (res) => {
          this.types = res.value;
          this.showFormDia = true;
          // switch(res.value.warnType){
          //    case '1':
          // }
        })
      }
    },
    closeFormDiao() {
      this.showFormDia = false;
      this.getDateList()
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            this.yjdjs = response.data.yjdj
            this.getDateList()
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    changeDate(val) {
      if (val) {
        this.queryParam.params.startTime = val[0]
        this.queryParam.params.endTime = val[1]
      } else {
        this.queryParam.params.startTime = ''
        this.queryParam.params.endTime = ''
      }
    },
    //获取数据
    getDateList() {
      this.loading = true
      this.tableData = []
      if (!this.queryParam.params.stcd) {
        this.queryParam.params.stcd = null
      }
      latestWarn.getListTable(this.queryParam, (res) => {
        if (res.state) {
          if (res.value.rows) {
            res.value.rows.forEach((item) => {
              item['warnGrade'].trim()
              this.yjdjs.forEach((ii) => {
                if (ii.value == item['warnGrade'].trim()) {
                  item['warnGrade'] = ii.name
                }
              })
            })
          }

          this.tableData = res.value.rows
          this.$set(this.tableData, this.tableData)
          this.total = res.value.total
          this.loading = false
        } else {
          this.$message(res.message)
        }
      })
    },
    handleChange(children) {
      this.queryParam.params.stcd = children[1]
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.sendDate = ''
      this.onClickSearch()
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
  },
}
</script>

<style>
.el-input--small .el-input__inner {
  height: 28px;
}
.bbsl-pagination {
  bottom: 10px !important;
}
</style>