<template>
  <div class="bbsl-common-page" @click="commonPageClick">
    <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-input size="mini" clearable placeholder="请输入测点名称" v-model="queryParam.params.stnm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关联测站">
              <el-cascader size="mini" filterable style="width: 100%" :show-all-levels="false" :checkStrictly="false"
                @change="changeregion" :options="stcds"
                :props="{ value: 'rscd', label: 'rsnm', emitPath: true, children: 'children' }" v-model="cascaderName"
                clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预警等级">
              <el-select @change="changeCode" size="mini" v-model="queryParam.params.gradeCode" clearable
                placeholder="请选择预警等级">
                <el-option v-for="item in gradeCodes" :key="item.id" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <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">
        <el-button size="mini" icon="el-icon-plus" type="primary" @click="openFormDiao">新增</el-button>
        <el-button :disabled="!multipleSelection.length" size="mini" icon="el-icon-delete" type="danger"
          @click="deleteSelect">删除</el-button>
      </div>
      <el-table stripe size="mini" :height="tableMaxHeight - 50" @row-dblclick="handleDbClick"
        :style="{ width: '100%' }" ref="multipleSelection" v-loading="loading" border :data="tableData"
        :row-key="getRowKey" @selection-change="handleSelectionChange" :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column min-width="130" sortable prop="stnm" label="关联测点" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="130" sortable prop="gradeName" label="预警等级" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="140" sortable prop="yrdsThr" label="东方向形变值" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="140" sortable prop="xrdsThr" label="北方向形变值" show-overflow-tooltip></el-table-column>
        <el-table-column min-width="150" sortable prop="zrdsThr" label="垂直方向形变值" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="150" sortable prop="isNoteMsg" label="是否短信预警" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.isNoteMsg === '0' || scope.row.isNoteMsg === 0 ? '否' : '是'
          }}</template>
        </el-table-column>
      </el-table>
      <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>
    </div>
    <form-dialog v-if="showFormDia" @closeFormDiao="closeFormDiao" @refList="getDateList" :showFormDia="showFormDia"
      :title="title" :pId="pId"></form-dialog>
  </div>
</template>
<script>
import FormDialog from './alertComponents/disPForm-dialog.vue'
import alertConfigur from '@/api/stManager/alertConfigur.js'
import portal from '@/api/portal.js'
import req from '@/request.js'
import { TableMixin } from '@/mixins/tableMixin'
export default {
  name: 'disPlacement',
  components: {
    FormDialog
  },
  mixins: [TableMixin],
  data() {
    return {
      loading: false,
      multipleSelection: [], // 复选框
      stcds: [],
      gradeCodes: [],
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1
        },
        params: {
          stcd: null,
          gradeCode: null,
          sttp: null
        }
      },
      paramst: {},
      sttp: null,
      total: 0,
      title: '',
      showFormDia: false,
      tableData: [],
      pId: '',
      cascaderName: ''
    }
  },
  created() {
    this.getDateList()
    this.getList()
    this.getSysDict()
  },
  methods: {
    changeregion(val) {
      if (val) {
        this.queryParam.params.rscd = val[0] || ''
        this.queryParam.params.stcd = val[1] || ''
      } else {
        this.queryParam.params.stcd = null
        this.queryParam.params.rscd = null
      }
    },
    getList() {
      portal.getgqList(1, res => {
        this.stcds = res.value
        let str = JSON.stringify(res.value).replace(/mpnm/g, 'rsnm')
        str = str.replace(/mpcd/g, 'rscd')
        this.stcds = JSON.parse(str)
        this.stcds.forEach(m => {
          if (m.children == undefined) {
            m.disabled = true;
          }
        })
        // this.stcds.map(i => {
        //   i.label = i.rsnm
        //   i.value = i.rscd
        //   if (i.children) {
        //     i.children = JSON.parse(JSON.stringify(i.children).replace(/mpid/g, 'value'))
        //     i.children = JSON.parse(JSON.stringify(i.children).replace(/mpnm/g, 'label'))
        //   }
        // })

      })
    },
    changeCode(val) {
      if (val) {
        this.queryParam.params.gradeCode = val
      } else {
        this.queryParam.params.gradeCode = ''
      }
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      alertConfigur.ListGet(this.queryParam, res => {
        this.total = res.value.total
        this.tableData = res.value.rows
        this.loading = false
      })
    },

    openFormDiao() {
      this.title = '新增'
      this.showFormDia = true
    },
    closeFormDiao() {
      this.showFormDia = false
      this.getDateList()
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    // // 修改
    handleUpdate(row) {
      this.title = '修改'
      this.pId = row.id
      this.showFormDia = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    // // 批量删除
    deleteSelect() {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          alertConfigur
            .remove(this.multipleSelection, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                // this.multipleSelection = [];
                this.$refs.multipleSelection.clearSelection()
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => { })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          alertConfigur
            .remove(row.id, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => { })
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.cascaderName = ''
      this.queryParam.params = {}
      this.onClickSearch()
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          response => {
            resolve(response.data)
            this.gradeCodes = response.data.yjdj
          },
          error => {
            reject(error)
          }
        )
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bbsl-pagination {
  position: absolute !important;
  right: 10px !important;
  bottom: 3.6875vw !important;
}

.btn-content {
  display: flex;
}

.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}

.el-select-dropdown__item {
  color: #9a9a9a !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}

.btn-content :first-child {
  margin: 0 0 0 0 !important;
}

.el-switch__label--left {
  position: relative;
  left: 45px;
  color: #fff;
  z-index: -1111;
}

.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}

.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}

.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}

::-webkit-scrollbar {
  background: #fff !important;
}
</style>
