<template>
  <div>
    <el-dialog
      :visible.sync="stStbprpResFrom"
      width="40%"
      height="500px"
      :before-close="handleCloseIs"
       top="1.7vh"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-input
          clearable
          size="mini"
          placeholder="请输入测站名称"
          v-model="name"
          style="width:70%;margin-left:8px"
        ></el-input>
        <el-button size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
        <el-tab-pane :label="titleOne" name="form">
          <el-table
            :row-class-name="tableRowClassName"
            :row-style="selectedstyle"
            @row-click="clickTree"
            size="mini"
            style="width:100%"
            max-height="450"
            border
            :data="tableDataOne"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              min-width="120"
              fixed
              sortable
              prop="name"
              label="水库名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column min-width="140" prop="reCode" label="水库代码" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane :label="titleTwo" name="persons">
          <el-table
            :row-class-name="tableRowClassName"
            :row-style="selectedstyle"
            @row-click="clickTree"
            size="mini"
            :style="{width: '100%'}"
            border
            max-height="450"
            :data="tableDataTwo"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              min-width="120"
              fixed
              sortable
              prop="name"
              label="河流名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column min-width="140" prop="reCode" label="河流代码" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="titleTreen" name="active">
          <el-table
            :row-class-name="tableRowClassName"
            :row-style="selectedstyle"
            @row-click="clickTree"
            size="mini"
            :style="{width: '100%'}"
            border
            max-height="450"
            :data="tableDataTree"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              min-width="120"
              fixed
              sortable
              prop="name"
              label="堤防名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column min-width="140" prop="reCode" label="堤防代码" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="titleFour" name="station">
          <el-table
            :row-class-name="tableRowClassName"
            :row-style="selectedstyle"
            @row-click="clickTree"
            size="mini"
            :style="{width: '100%'}"
            border
            max-height="450"
            :data="tableDataFour"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              min-width="120"
              fixed
              sortable
              prop="name"
              label="水电站名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column min-width="140" prop="reCode" label="水电站代码" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">关 联</el-button>
        <el-button @click="handleCloseIs">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import syqStation from '@/api/stManager/syqStation.js'
import req from '@/request.js'
export default {
  name: 'syqStationFromdialog',
  props: {
    stStbprpResFrom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '',
      activeName: 'form',
      tableDataOne: [],
      tableDataTwo: [],
      tableDataTree: [],
      tableDataFour: [],
      titleTreen: '',
      titleTwo: '',
      titleOne: '',
      titleFour: '',
      data: '',
      getIndex: ''
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    clickTree(val) {
      this.getIndex = val.index
      console.log(val, '点击')
      this.data = val
    },
    goInfo() {
      this.$emit('func', this.data)
      this.$emit('closestStbprpResFrom')
    },
    handleCloseIs() {
      this.$emit('func', '')
      this.$emit('closestStbprpResFrom')
    },
    search() {
      if (this.activeName == 'form') {
        this.searchs(this.tableDataOne, 'from')
      }
      if (this.activeName == 'persons') {
        this.searchs(this.tableDataTwo, 'persons')
      }
      if (this.activeName == 'active') {
        this.searchs(this.tableDataTree, 'active')
      }
      if (this.activeName == 'station') {
        this.searchs(this.tableDataFour, 'station')
      }
    },
    searchs(arr, activeName) {
      let _search = this.name.toLowerCase()
      let newListData = [] // 用于存放搜索出来数据的新数组
      if (_search) {
        arr.filter(item => {
          if (item.name.toLowerCase().indexOf(_search) !== -1) {
            newListData.push(item)
          }
        })
      }
      if (this.activeName == 'form') {
        this.tableDataOne = newListData
      }
      if (this.activeName == 'persons') {
        this.tableDataTwo = newListData
      }
      if (this.activeName == 'active') {
        this.tableDataTree = newListData
      }
      if (this.activeName == 'station') {
        this.tableDataFour = newListData
      }
    },
    resetQuery() {
      this.getDataList()
    },

    selectedstyle({row, rowIndex}) {
      if (this.getIndex === rowIndex) {
        return {'background-color': '#caddd5'}
      }
      return ''
    },
    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex
    },
    handleClick() {
      this.getIndex = 'xxx' //切换 tab清除样式
    },
    getDataList() {
      syqStation.getList({}, res => {
        if (res.state) {
          this.titleFour = res.value[3].name
          this.titleTreen = res.value[2].name
          this.titleTwo = res.value[1].name
          this.titleOne = res.value[0].name
          this.tableDataOne = res.value[0].children
          this.tableDataTwo = res.value[1].children
          this.tableDataTree = res.value[2].children
          this.tableDataFour = res.value[3].children
        } else {
          this.$message(res.message)
        }
      })
    }

    //获取字典数据
    // getSysDict() {
    //   let portal = window.context.portal
    //   return new Promise((resolve, reject) => {
    //     req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
    //       (response) => {
    //         resolve(response.data)
    // this.sttps = response.data.czlx
    // this.params.sttp = this.sttps[0].value
    // this.appTypes = response.data.czyyfl
    // this.params.appType = this.appTypes[0].value
    // this.prgrs = response.data.gcdb;
    // this.prscs = response.data.gcgm;
    // this.basGrads = response.data.lyjb;
    // this.dtpls = response.data.szjm;
    // this.rsrs = response.data.skgn;
    // this.params.resType=this.resTypes[0].value;
    //       },
    //       (error) => {
    //         reject(error)
    //       }
    //     )
    //   })
    // },
  }
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 24px 0 5px 0;
  height: 7px !important;
  background: #88b4dd !important;
  .el-divider__text {
    font-size: 16px !important;
  }
}
.redBull {
  border: 1px solid red;
}
.v-modal {
  z-index: 11 !important;
}
.el-table {
  /deep/tbody tr:hover > td {
    cursor: pointer;
  }
}

</style>
