<template>
  <div>
    <el-dialog
      :visible.sync="showFormDias"
      width="85%"
      max-height="650px"
      :before-close="handleClose"
    >
      <div class="bbsl-common-page" style="display: flex" @click="commonPageClick">
        <div class="content-left" style="background-color: #fff; margin-right: 9px">
          <el-card class="box-card">
            <div style="display: flex; padding: 5px 5px">
              <div style="flex: 1">
                <el-select
                  style="width: 100%"
                  @change="changeVedeoF"
                  v-model="query.zoneCode"
                  clearable
                  placeholder="请选择监控点"
                >
                  <el-option
                    v-for="item in veideoF"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <el-tree
              style="height: 400px; overflow: auto"
              :highlight-current="true"
              :render-content="renderContent"
              class="filter-tree"
              :data="videoTree"
              :props="defaultProps"
              :filter-node-method="filterNode"
              @node-click="changeNode"
              ref="tree"
            ></el-tree>
          </el-card>
        </div>
        <div class="content-right">
          <div class="bbsl-table-content" style="height:100%;padding:0;margin:0">
            <el-transfer
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              filterable
              filter-placeholder="请输入监控点名称"
              :titles="['待选择监控点', '已选择监控点']"
              style="width: 100%"
              :right-default-checked="relationList.videoVoList"
              v-model="relationList.videoVoList"
              @right-check-change="changeRight"
              @change="changeTable"
              :data="tableData"
              :props="{
                key: 'id',
                label: 'name',
                value: 'zoneCode',
              }"
            ></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/videoManger.js'
import req from '@/request.js'
import {TableMixin} from '@/mixins/tableMixin'
export default {
  name: 'videoManger',
  props: {
    showFormDias: {
      type: Boolean,
      default: false
    },
    relation: {
      type: String,
      default: ''
    },
    rowId: {
      type: String,
      default: ''
    }
  },
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      value1: [],
      veideoF: [],
      values: '',
      loading: false,
      query: {
        zoneCode: null
      },
      multipleSelection: [], // 复选框
      relationList: {
        rscd: null,
        videoVoList: []
      },
      queryParam: {
        pageBean: {
          pageSize: 10,
          page: 1
        },
        params: {
          zoneCode: null
        }
      },
      total: 0,
      pId: '',
      tableData: [],
      videoTree: [],
      defaultProps: {
        value: 'code',
        label: 'name'
      },
      data: [],
      params: {
        id: '',
        rscd: '',
        rsnm: '',
        query: '',
        videoVoList: [
          {
            pkVal: '',
            resCode: '',
            resId: ''
          }
        ]
      }
    }
  },
  created() {
    this.getTreen()
    this.getRelation()
  },
  methods: {
    getRelation() {
      videoManger.detailRelation(this.rowId, res => {
        this.relationList.videoVoList = res.value.videoVoList
        this.relationList.rscd = res.value.rscd
        console.log(res)
      })
    },
    changeVedeoF(val) {
      if (val) {
        this.query.zoneCode = val
        videoManger.getVideoTree(this.query, res => {
          this.videoTree = res.value
        })
        this.getDateList()
      } else {
        this.videoTree = []
        this.$set(this.videoTree, this.videoTree, res.value)
        this.getDateList()
      }
    },
    // 组织树查询
    getTreen() {
      videoManger.getVideoF({}, res => {
        this.veideoF = res.value
        this.query.zoneCode = this.veideoF[0].code
        videoManger.getVideoTree(this.query, res => {
          this.videoTree = res.value
          // console.log(this.videoTree,666)
          this.queryParam.params.zoneCode = this.videoTree[0].code
          this.getDateList()
        })
      })
    },
    renderContent(h, {node, data, store}) {
      return (
        <span
          class="custom-tree-node"
          on-mouseover={() => {
            this.show = true
          }}
          on-mouseout={() => {
            this.show = false
          }}
        >
          <span>{node.label}</span>
        </span>
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      videoManger.getListPage(this.queryParam, res => {
        if (res.state) {
          this.tableData = res.value
          this.total = res.value.total
          this.loading = false
        }
      })
    },
    changeNode(val) {
      if (val) {
        this.queryParam.params.zoneCode = val.code
        this.getDateList()
      }
    },
    changeTable(val) {
      // this.params.query = this.value1.toString()
    },
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    changeRight(val) {
      console.log(val);
      
      // this.params.query = val.toString()
      // val.forEach(e => {
      //   this.relationList.videoVoList.forEach(i=>{
      //      i.code=e;
      //   })
      // });
      this.relationList.videoVoList = val
    },
    // 保存
    goInfo() {
      // if (this.relationList.videoVoList.length === 0) {
      //   this.$message('请先选择关联监控点')
      // } else {
        videoManger.relationAd(this.relationList, res => {
          if (res.state) {
            this.$notify({
              type: 'success',
              message: '关联成功',
              duration: 2000
            })
            this.$emit('closeFormDiaos')
            this.$emit('refList')
          }
        })
      // }
    },
    handleClose() {
      this.params = {
        name: null, //树点击查询条件
        zoneCode: null
      }
      this.$emit('closeFormDiaos')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tree {
  border: 0 !important;
}
.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;
  height: 650px;
  border-right: 1px solid #ccc;
}
.content-right {
  width: 80% !important;
  height: 650px;
}
.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;
}
/deep/.el-transfer__buttons{
	line-height: 200px !important;
}
</style>
