<template>
  <div>
    <el-dialog
      :visible.sync="StshowFormDias"
      width="85%"
      max-height="650px"
      :before-close="handleClose"
    >
      <div class="bbsl-common-page" style="display: flex" @click="commonPageClick">
        <div class="content-right">
          <div class="bbsl-table-content" style="height:100%;padding:0;margin:0">
			  <el-row :gutter="24">
			  	<el-col :span="10" class="left">
			  					<el-table
			  						:data="tableData.filter(data => !search || data.stnm.toLowerCase().includes(search.toLowerCase()))"
			  						@selection-change="handleSelectionChange" max-height="650px">
			  						<el-table-column type="selection" width="55">
			  						</el-table-column>
			  						<el-table-column label="待选择监测点" prop="stnm">
			  						</el-table-column>
			  						<el-table-column align="right">
			  							<template slot="header" slot-scope="scope">
			  								<el-input v-model="search" size="mini" clearable placeholder="输入关键字搜索" />
			  							</template>
			  						</el-table-column>
			  					</el-table>
			  				</el-col>
			  				<el-col :span="4" class="buttons">
			  					<el-button style="width: 70px;margin-top: 300px;"  @click="leftChang" type="primary"   >
			  						< </el-button>
			  							<el-button  style="width: 70px;"  @click="rightChang" type="primary" > > </el-button>
			  				</el-col>
			  				<el-col :span="10" class="right">
			  					<el-table ref="multipleTable"
			  						:data="tableData1.filter(data => !search1 || data.stnm.toLowerCase().includes(search1.toLowerCase()))"
			  						@selection-change="handleSelectionChange1" max-height="650px">
			  						<el-table-column type="selection" width="55">
			  						</el-table-column>
			  						<el-table-column label="已选择监测点" prop="stnm">
			  						</el-table-column>
			  						<el-table-column align="right">
			  							<template slot="header" slot-scope="scope">
			  								<el-input v-model="search1" size="mini" clearable placeholder="输入关键字搜索" />
			  							</template>
			  						</el-table-column>
			  					</el-table>
			  				</el-col>
			  </el-row>	
            <!-- <el-transfer
              filterable
              filter-placeholder="请输入测站名称"
              :titles="['待选择测站', '已选择测站']"
              style="width: 100%"
              :right-default-checked="relationList.Relation"
              v-model="relationList.Relation"
              @right-check-change="changeRight"
              @change="changeTable"
              :data="tableData"
              :props="{
                key: 'id',
                label: 'stnm',
                value: 'stcd',
              }"
            ></el-transfer> -->
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">关 联</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import videoManger from '@/api/stManager/czManager.js'
import req from '@/request.js'
import {TableMixin} from '@/mixins/tableMixin'
export default {
  name: 'videoManger',
  props: {
    StshowFormDias: {
      type: Boolean,
      default: false
    },
    relation: {
      type: String,
      default: ''
    },
    rowId: {
      type: String,
      default: ''
    }
  },
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      relationList: {
        reCode: null,
        stationList: [],
        Relation: [],
        reType: null
      },
      value1: [],
      veideoF: [],
      values: '',
      loading: false,
      query: {
        zoneCode: null
      },
      multipleSelection: [], // 复选框
      multipleSelection1: [], // 复选框
      queryParam: {
        pageBean: {
          pageSize: 10,
          page: 1
        },
        params: {
          zoneCode: null
        }
      },
      total: 0,
      pId: '',
      tableData: [],
      tableData1: [],
      videoTree: [],
      defaultProps: {
        value: 'code',
        label: 'name'
      },
      data: [],
      params: {
        id: '',
        rscd: '',
        rsnm: '',
        query: ''
      },
	  search:'',
	  search1:'',
	  
    }
  },
  created() {
    this.getRelation()
    this.getRelationList()
    this.relationList.reCode = this.relation
  },
  methods: {
    getRelationList() {
      this.relationList.reType = 3
      videoManger.getRelation(this.relationList, res => {
		  this.tableData1 = res.value
		  if(this.tableData1.length>0){
			  this.$nextTick(() => {
			        this.$refs.multipleTable.toggleAllSelection()
			       })
		  }
		   
        // let arr = []
        // for (let i = 0; i < res.value.length; i++) {
        //   arr.push(res.value[i].stcd)
        // }
        // this.relationList.Relation = arr
      })
    },
    getRelation() {
      videoManger.HyddetailRelation({}, res => {
        this.loading = true
        this.tableData = res.value
      })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    changeTable(val) {
      // this.params.query = this.value1.toString()
      for (let index = 0; index < val.length; index++) {
          let parma = {}
          for(let i = 0;i<this.tableData.length;i++){
            if (val[index]==this.tableData[i].stcd){
                parma.stcd = val[index]
                parma.stnm = this.tableData[i].stnm
                parma.sttp = this.tableData[i].sttp
                this.relationList.stationList.push(parma)
          }
          }
          
      }
      
    },
	handleSelectionChange(val) {
		this.multipleSelection = val
	},
	handleSelectionChange1(val) {
		this.multipleSelection1 = val
	},
	rightChang() {
		// 点击选择按钮
		this.tableData1 = this.tableData1.concat(this.multipleSelection)
		this.tableData = this.tableData.filter(item => !this.tableData1.some(citem => citem.id == item.id))
	},
	leftChang(){
		this.tableData=this.tableData.concat(this.multipleSelection1)
		this.tableData1 = this.tableData1.filter(item => !this.tableData.some(citem => citem.id == item.id))
	},
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    changeRight(val) {
      
    },
    // 保存
    goInfo() {
      // if (this.multipleSelection1.length === 0) {
      //   this.$message('请先选择关联监控点')
      // } else {
        this.relationList.reType = 3
		this.relationList.stationList=this.tableData1
        videoManger.relationAd(this.relationList, res => {
          if (res.state) {
            this.$notify({
              type: 'success',
              message: '关联测站成功',
              duration: 2000
            })
            this.$emit('closeStshowForm')
            this.$emit('refList')
          }
        })
      // }
    },
    handleClose() {
      this.params = {
        name: null, //树点击查询条件
        zoneCode: null
      }
      this.$emit('closeStshowForm')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tree-node__content {
  width: 100% !important;
  height: 40px !important;
  flex: 1;
  display: flex !important;
  // align-items: center !important;
  justify-content: space-around !important;
  font-size: 14px;
  // padding-right: 8px;
}
.el-transfer-panel {
  height: 100% !important;
  width: 100% !important;
}
.btn-content {
  display: flex;
}
.el-dialog__body {
  height: 650px !important;
  overflow: auto !important;
}
.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-card__body {
  width: 100% !important;
  height: 100% !important;
}
.custom-tree-node {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around !important;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 5px;
}
.el-card {
  width: 100% !important;
  height: 100% !important;
}
.el-main {
  width: 100% !important;
  height: 100% !important;
}
.fullheight {
  display: flex !important;
  width: 100% !important;
  height: 100%;
}
.content-left {
  width: 20% !important;
  border-right: 1px solid #ccc;
}
.content-right {
  width: 100% !important;
}
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
::-webkit-scrollbar {
  background: #fff !important;
}
.custom-tree-node {
  font-size: 12px;
}
.el-popover {
  min-width: 35px !important;
  padding: 5px 0 !important;
}
.line {
  display: block !important;
  height: 1px !important;
  background: #ccc !important;
}
.checkbox-group {
  height: 454px !important;
}
</style>
