<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
                clearable
                size="mini"
                placeholder="请输入河流名称"
                v-model="queryParam.params.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="河流类型">
              <el-select
                @change="changervType"
                size="mini"
                v-model="queryParam.params.rvType"
                clearable
                placeholder="请选择河流类型"
              >
                <el-option
                  v-for="item in rvTypes"
                  :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 label="河流级别">
              <el-select
                @change="changervGrad"
                size="mini"
                v-model="queryParam.params.rvGrad"
                clearable
                placeholder="请选择河流级别"
              >
                <el-option
                  v-for="item in rvGrads"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <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-button type="text" @click.stop="openMore"
                >更多
                <i
                  :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="bbsl-search-more" style="width: 250px" v-if="showMore">
          <el-row>
            <el-col :span="24">
              <el-form-item label="跨界类型">
                <el-select
                  @change="changecrOverType"
                  size="medium"
                  v-model="queryParam.params.crOverType"
                  clearable
                  placeholder="请选择跨界类型"
                >
                  <el-option
                    v-for="item in crOverTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </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"
        @row-dblclick="handleDbClick"
        ref="multipleSelection"
        v-loading="loading"
        border
        :data="tableData"
        style="width: 100%"
        :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="100"
          sortable
          prop="code"
          label="河流代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="120"
          sortable
          prop="name"
          label="河流名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="120"
          sortable
          prop="rvSystem"
          label="所属水系"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="120"
          sortable
          prop="rvGrad"
          label="河流级别"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="120"
          sortable
          prop="rvLen"
          label="河道长度(km2)"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          min-width="120"
          sortable
          prop="rvTypeName"
          label="河流类型"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <el-table-column
          min-width="120"
          sortable
          prop="crOverTypesName"
          label="跨界类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="100"
          sortable
          prop="bankName"
          label="水系分布"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="120"
          sortable
          prop="rvBasArea"
          label="河流流域面积"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
                {{ scope.row.rvBasArea === '' || !scope.row.rvBasArea ? '' : scope.row.rvBasArea + 'km2' }}
              </template> -->
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template #default="scope">
            <el-dropdown split-button @click="relationStation(scope.row)">
              关联测站
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  command="waterStation"
                  @click.native="relationUpdate(scope.row)"
                  >关联视频点位
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <!-- <template slot-scope="scope">
            <div>
              <el-button size="mini" @click="relationStation(scope.row)">关联测站</el-button>
            </div>
          </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>
    <!-- 关联测站弹框 -->
    <StresRelation
      v-if="StshowFormDias"
      @closeStshowForm="closeStshowForm"
      :StshowFormDias="StshowFormDias"
      @refList="getDateList"
      :relation="relation"
      :rowId="rowId"
    ></StresRelation>
    <!-- 关联监控点弹框 -->
    <rvMonitorRelation
      v-if="showFormDias"
      @closeFormDiaos="closeFormDiaos"
      :showFormDias="showFormDias"
      @refList="getDateList"
      :relation="relation"
      :rowId="rowId"
      :rvCode="rvCode"
    ></rvMonitorRelation>
  </div>
</template>
<script>
import FormDialog from './components/rmForm-dialog.vue'
import StresRelation from './components/StresRelation.vue'
import rvMonitorRelation from './components/rvMonitorRelation.vue'
import rivers from '@/api/rivers.js'
import req from '@/request.js'
import {TableMixin} from '@/mixins/tableMixin'
export default {
  name: 'rvManager',
  components: {
    FormDialog,
    StresRelation,
    rvMonitorRelation
  },
  mixins: [TableMixin],
  data() {
    return {
      rowId: '',
      rvCode: '',
      relation: '', //关联参数
      reSets: [
        {
          name: '关联测站',
          value: 'relationStation',
          id: '1'
        },
        {
          name: '关联监控点',
          value: 'relationUpdate',
          id: '2'
        }
      ],
      StshowFormDias: false,
      showFormDias: false,
      loading: false,
      multipleSelection: [], // 复选框
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1
        },
        params: {
          code: null, //（河流代码 ）
          rvGrad: null, //（河流级别）
          name: null, //（河流名称）
          crOverType: null, //（跨界类型
          rvType: null //（河流类型）
        }
      },
      total: 0,
      title: '',
      showFormDia: false,
      tableData: [],
      pId: '',
      errMessage: '',
      errorFileUrl: '',
      rvBelong: [], //所属水系
      rvGrads: [], //河流级别
      rvTypes: [], //河流类型数组
      basAdNames: [], //行政区
      lookDetailDia: false, // 详情弹层
      codes: {codes: 'gkglbm'},
      crOverTypes: [], //跨界类型
      basGrads: [], //流域级别
      banks: [],
      setKesLabel: {
        value: 'code',
        label: 'name',
        children: 'children'
      }
    }
  },
  computed: {},
  created() {
    this.getSysDict()
    this.getDateList()
    // 行政区查询
    rivers.getbasAdName({}, res => {
      this.basAdNames = res.value
    })
  },
  methods: {
    relationUpdate(row) {
      //打开监控关联
      this.row = row
      this.rvCode = row.code
      this.relation = this.row.hystCode
      this.rowId = this.row.id
      this.showFormDias = true
    },
    relationStation(row) {
      //打开测站关联
      this.row = row
      this.relation = this.row.code
      this.rowId = this.row.id
      this.StshowFormDias = true
    },
    closeStshowForm() {
      //关闭测站关联
      this.StshowFormDias = false
      this.getDateList()
    },
    closeFormDiaos() {
      //关闭监控关联
      this.showFormDias = false
      this.getDateList()
    },
    openMore() {
      this.showMore = !this.showMore
    },
    changecrOverType(val) {
      if (val) {
        this.queryParam.params.crOverType = val
      } else {
        this.queryParam.params.crOverType = null
      }
    },
    changervGrad(val) {
      if (val) {
        this.queryParam.params.rvGrad = val
      } else {
        this.queryParam.params.rvGrad = null
      }
    },
    changervType(val) {
      if (val) {
        this.queryParam.params.rvType = val
      } else {
        this.queryParam.params.rvType = null
      }
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          response => {
            resolve(response.data)
            this.crOverTypes = response.data.kjlx
            this.rvGrads = response.data.hljb
            this.rvTypes = response.data.hllx
            this.banks = response.data.hlab
            this.rvBelong = response.data.sx
            this.getDateList()
          },
          error => {
            reject(error)
          }
        )
      })
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      rivers.ListGet(this.queryParam, res => {
        if (res.state) {
          this.total = res.value.total
          for (let a = 0; a < this.crOverTypes.length; a++) {
            for (let b = 0; b < res.value.rows.length; b++) {
              if (this.crOverTypes[a].value === res.value.rows[b].crOverType) {
                res.value.rows[b].crOverTypesName = this.crOverTypes[a].name
              } else {
                res.value.rows[b].crOverTypesName = ''
              }
            }
          }
          res.value.rows.forEach(ii => {
            this.crOverTypes.forEach(ee => {
              if (ee.value == ii.crOverType) {
                ii['crOverTypesName'] = ee.name
              }
            })
            this.banks.forEach(e => {
              if (e.value == ii.bank) {
                ii['bankName'] = e.name
              }
            })
            this.rvTypes.forEach(e => {
              if (e.value == ii.rvType) {
                ii['rvTypeName'] = e.name
              }
            })
            this.rvGrads.forEach(e => {
              if (e.value == ii.rvGrad) {
                ii['rvGrad'] = e.name
              }
            })
            this.rvBelong.forEach(e => {
              if (e.value == ii.rvSystem) {
                ii['rvSystem'] = e.name
              }
            })
          })
          // for (let i = 0; i < this.rvTypes.length; i++) {
          //   for (let j = 0; j < res.value.rows.length; j++) {
          //     if (this.rvTypes[i].value === res.value.rows[j].rvType) {
          //       res.value.rows[j].rvTypeName = this.rvTypes[i].name
          //     } else {
          //       res.value.rows[j].rvTypeName = ''
          //     }
          //   }
          // }
          // for (let c = 0; c < this.banks.length; c++) {
          //   for (let d = 0; d < res.value.rows.length; d++) {
          //     if (this.banks[c].value === res.value.rows[b].bank) {
          //       res.value.rows[b].bankName = this.banks[c].name
          //     } else {
          //       res.value.rows[b].bankName = ''
          //     }
          //   }
          // }
          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) {
      console.log(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(() => {
          rivers
            .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(() => {
          rivers
            .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.basArea=this.queryParam.basArea;
      //   if (this.queryParam.basArea) {
      //     this.queryParam.basArea = this.queryParam.basArea + 'km2'
      //   } else {
      //     this.queryParam.basArea = null
      //   }
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.onClickSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.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;
}

// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 6px;
//   height: 15px;
// }
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}

::-webkit-scrollbar {
  background: #fff !important;
}

//滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 6px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 6px;
}

.bbsl-pagination {
  bottom: 10px !important;
}
</style>
