<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.rsnm">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工程规模">
              <el-select @change="changeResType" size="mini" v-model="queryParam.params.prsc" clearable
                placeholder="请选择工程规模">
                <el-option v-for="item in gcgm" :key="item.id" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="行政区划">
              <el-cascader size="mini" filterable :show-all-levels="false" :options="basAdNames"
                v-model="queryParam.params.addvcd" :props="{ value: 'code', label: 'name', children: 'children' }"
                @change="onhouChange" placeholder="请选择所属行政区划" clearable></el-cascader>
            </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: 350px" v-if="showMore">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="水库类型">
                <el-select @change="changeResType" size="mini" v-model="queryParam.params.resType" clearable
                  placeholder="请选择水库类型">
                  <el-option v-for="item in resTypes" :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>
        <el-button type="warning" size="mini" icon="el-icon-s-check" :disabled="!multipleSelection.length"
          @click="registerRes">注册水库</el-button>
      </div>
      <el-table stripe size="mini" :height="tableMaxHeight" @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="40" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
        <el-table-column min-width="150" fixed sortable prop="rscd" label="水库代码" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="120" fixed sortable prop="rsnm" label="水库名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="130" sortable prop="vltw" label="所在位置" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="100" sortable prop="waterSource" label="水源地" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="120" sortable prop="rsfn" label="水库功能" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="100" sortable prop="prsc" label="工程规模" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="100" sortable prop="prst" label="工程状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="100" sortable prop="damGrad" label="大坝级别" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="125" sortable prop="damTypeMat" label="大坝材料类型" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column min-width="100" sortable prop="resType" label="水库类型" show-overflow-tooltip>
				</el-table-column> -->
        <!-- <el-table-column min-width="100" sortable prop="alias" label="曾用名" show-overflow-tooltip>
				</el-table-column> -->
        <el-table-column min-width="100" sortable prop="cpyr" label="建成年月" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="130" sortable prop="nrstlv" label="正常蓄水位(m)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="130" sortable prop="token" label="是否注册" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{ color: scope.row.token === 1 || scope.row.token === '1' ? '#09ef09' : 'red' }"
              v-if="scope.row.token === 1 || scope.row.token === '1'">已注册</span>
            <span v-if="scope.row.token === 0 || scope.row.token === '0'">未注册</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="180">
          <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-item command="waterStation" @click.native="relationLift(scope.row)">关联工情测点
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>

          <!-- <template slot-scope="scope">
            <div>

              <el-select
                @change="changeReSet(scope.row)"
                size="mini"
                clearable
                icon="el-icon-paperclip"
                v-model="scope.row.reset"
                placeholder="关联测站"
              >
                <el-option
                  v-for="item in reSets"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </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" :rscd='rscd'></form-dialog>
    <!-- 关联监控点弹框 -->
    <resRelation v-if="showFormDias" @closeFormDiaos="closeFormDiaos" :showFormDias="showFormDias"
      @refList="getDateList" :relation="relation" :rowId="rowId" :rscd="rscd"></resRelation>
    <!-- 关联测站弹框 -->
    <StresRelation v-if="StshowFormDias" @closeStshowForm="closeStshowForm" :StshowFormDias="StshowFormDias"
      @refList="getDateList" :relation="relation" :rowId="rowId" :rscd='rscd'></StresRelation>
    <LiftRelation v-if="LiftShow" @LiftRelations="LiftRelations" :LiftShow="LiftShow" @refList="getDateList"
      :rowId="rowId" :rscd='rscd'></LiftRelation>
  </div>
</template>
<script>
import FormDialog from './components/resForm-dialog.vue'
import reservoirManager from '@/api/reservoirManagement/reservoirManager.js'
import resRelation from './components/resRelation.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import StresRelation from './components/StresRelation.vue'
import LiftRelation from './components/LiftRelation.vue'

import req from '@/request.js'
import { TableMixin } from '@/mixins/tableMixin'
export default {
  name: 'reservoirManager',
  components: {
    FormDialog,
    resRelation,
    StresRelation,
    LiftRelation
  },
  mixins: [TableMixin],
  data() {
    return {
      relation: '', //关联参数
      reSets: [
        {
          name: '关联测站',
          value: 'relationStation',
          id: '1'
        },
        {
          name: '关联监控点',
          value: 'relationUpdate',
          id: '2'
        }
      ],
      waterSources: [
        {
          name: '非水源',
          value: '0'
        },
        {
          name: '饮用水源',
          value: '1'
        },
        {
          name: '备用水源',
          value: '2'
        }
      ], //水源地
      prsts: [
        {
          name: '在建',
          value: '1'
        },
        {
          name: '已建',
          value: '2'
        },
        {
          name: '其他',
          value: '9'
        }
      ], //工程状态
      rowId: '',
      showMore: false,
      prscs: [],
      rsrs: [{}], //水库功能
      resTypes: [], //水库类型
      damGrads: [], //大坝级别
      damTypeMats: [], //大坝材料类型
      loading: false,
      multipleSelection: [], // 复选框
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1
        },
        params: {
          rsnm: null, //水库名称
          resType: null, //水库类型
          addvcd: null //行政区
        }
      },
      damGrad: null, // 大坝级别
      damTypeMat: null, //大坝材料类型
      total: 0,
      title: '',
      showFormDia: false,
      showFormDias: false,
      StshowFormDias: false,
      tableData: [],
      pId: '',
      rscd: '',
      errMessage: '',
      errorFileUrl: '',
      basAdNames: [], //行政区
      lookDetailDia: false, // 详情弹层
      codes: {
        codes: 'gkglbm'
      },
      crOverTypes: [], //跨界类型
      basGrads: [], //流域级别
      Station: '',
      reset: '',
      row: {},
      arr: [],
      LiftShow: false
    }
  },
  created() {
    this.gcgm = dictUtils.getDictItemsFromCache('gcgm')
    this.getDateList()
    this.getSysDict()
    // 行政区查询
    reservoirManager.getbasAdName({}, res => {
      this.basAdNames = res.value
    })
  },
  methods: {
    relationUpdate(row) {
      //打开监控关联
      this.row = row
      this.relation = this.row.hystCode
      this.rowId = this.row.id
      this.showFormDias = true
    },
    relationLift(row) {
      console.log(row);
      this.row = row
      // this.relation = this.row.hystCode
      this.rowId = this.row.id
      this.rscd = this.row.rscd
      this.LiftShow = true
      console.log(this.LiftShow);
    },
    relationStation(row) {
      //打开测站关联
      this.row = row
      this.relation = this.row.hystCode
      this.rowId = this.row.id
      this.rscd = this.row.rscd
      this.StshowFormDias = true
    },
    closeFormDiaos() {
      //关闭监控关联
      this.showFormDias = false
      this.getDateList()
    },
    LiftRelations() {
      //关闭监控关联
      this.LiftShow = false
      this.getDateList()
    },
    closeStshowForm() {
      //关闭测站关联
      this.StshowFormDias = false
      this.getDateList()
    },
    openMore() {
      this.showMore = !this.showMore
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          response => {
            resolve(response.data)
            this.resTypes = response.data.sklx
            this.prscs = response.data.gcgm //工程规模
            this.rsrs = response.data.skgn //水库功能
            this.damGrads = response.data.dbjb //大坝级别
            this.damTypeMats = response.data.dbcl //大坝材料类型
            this.getDateList()
          },
          error => {
            reject(error)
          }
        )
      })
    },
    changeResType(val) {
      if (val) {
        this.queryParam.params.resType = val
      } else {
        this.queryParam.params.resType = null
      }
    },
    onhouChange(val) {
      if (val) {
        this.queryParam.params.addvcd = val.pop()
      } else {
        this.queryParam.params.addvcd = null
      }
    },
    RemoveValByIndex(arr, index) {
      arr.splice(index, 1)
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      reservoirManager.ListGet(this.queryParam, res => {
        this.tableData = res.value.rows
        this.total = res.value.total
        this.loading = false
        this.resTypes.forEach(e => {
          this.tableData.forEach(i => {
            if (i.resType === e.value) {
              i.resType = e.name
            }
          })
        })
        this.waterSources.forEach(e => {
          this.tableData.forEach(i => {
            if (i.waterSource === e.value) {
              i.waterSource = e.name
            }
          })
        })
        this.prscs.forEach(e => {
          this.tableData.forEach(i => {
            if (i.prsc === e.value) {
              i.prsc = e.name
            }
          })
        })
        this.prsts.forEach(e => {
          this.tableData.forEach(i => {
            if (i.prst === e.value) {
              i.prst = e.name
            }
          })
        })
        this.damGrads.forEach(e => {
          this.tableData.forEach(i => {
            if (i.damGrad === e.value) {
              i.damGrad = e.name
            }
          })
        })
        this.damTypeMats.forEach(e => {
          this.tableData.forEach(i => {
            if (i.damTypeMat === e.value) {
              i.damTypeMat = e.name
            }
          })
        })
        this.tableData.forEach((e) => {
          e.rsfn = this.handleName(e.rsfn)
          if (e.token != undefined) {
            e.token = 1
          } else {
            e['token'] = 0
          }
        })

        this.$set(this.tableData)
      })
    },
    handleName(row, column) {
      let name = ""
      let rsfn = row.split(',')
      this.rsrs.forEach((e) => {
        if (rsfn.includes(e.value)) {
          name += e.name + ','
        }
      })
      return name.substring(0, name.lastIndexOf(','))
    },
    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.rscd = row.rscd
      this.showFormDia = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    // 注册水库
    registerRes() {
      this.$confirm('确定注册选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          reservoirManager
            .register(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(() => { })

    },
    // // 批量删除
    deleteSelect() {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          reservoirManager
            .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(() => {
          reservoirManager
            .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.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;
}

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