<template>
  <div class="fullheight">
    <el-page-header @back="goBack" content="关联机组" style="margin:10px">
    </el-page-header>
    <div style="width:100%;height:calc(100% - 34px);">
      <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :quick-search-props="quickSearchProps"
        :default-sorter="[{direction: 'ASC', property: 'sn_'}]"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            @click="showDialog()"
            icon="el-icon-plus"
            type="primary"
            >添加</el-button
          >
          <ht-delete-button
            url="${cssc}/biz/model/modelInfo/v1/modelFan/deleteModelFans/"
            :htTable="$refs.htTable"
            >删除</ht-delete-button
          >
        </template>
        <template>
          <ht-table-column
            prop="fanCode"
            label="机组编码"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="lineCode"
            label="机组线路"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="fanName"
            label="机组名称"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="fanType"
            label="机组类型"
            :sortable="true"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
        </template>
      </ht-table>
    </div>
    <common-dialog
      width="1000px"
      title="添加机组线路"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <div style="width:100%;height:500px">
        <el-container style="height:100%">
          <el-aside width="180px">
            <div class="card">
              <div class="card_title">
                <span>机组线路</span>
              </div>
              <el-tree
                highlight-current
                :data="crewTypeList"
                :props="defaultProps"
                @node-click="handleLineClick"
              >
                <span class="custom-tree-node" slot-scope="{node}">
                  <span>
                    <i class="el-icon-menu tree-icon"></i>{{ node.label }}
                  </span>
                </span>
              </el-tree>
            </div>
          </el-aside>
          <el-container>
            <div class="container" style="height:500px">
              <div class="container_main" style="height:99.5%">
                <div class="container_title">机组列表</div>
                <div style="height:calc(100% - 46px);">
                  <ht-table
                    @load="loadDataList"
                    :data="data2"
                    :pageResult="pageResult2"
                    @select="onTableSelect"
                    @select-all="handleSelectChange"
                    selection="true"
                    quick-search-props="fanCode,fanName,fanType"
                    :default-sorter="[{ direction: 'ASC', property: 'fanCode' }]"
                    :show-export="false"
                    :show-custom-column="false"
                    ref="htTable2"
                  >
                    <template>
                      <ht-table-column
                        prop="fanCode"
                        label="机组编码"
                        :sortable="true"
                        :show-overflow-tooltip="true"
                      ></ht-table-column>
                      <ht-table-column
                        prop="fanName"
                        label="机组名称"
                        :sortable="true"
                        :show-overflow-tooltip="true"
                      ></ht-table-column>
                      <ht-table-column
                        prop="fanType"
                        label="机组类型"
                        :sortable="true"
                        :show-overflow-tooltip="true"
                      ></ht-table-column>
                    </template>
                  </ht-table>
                </div>
              </div>
            </div>
          </el-container>
          <el-aside width="70px" class="right-aside">
            <div class="button-group">
              <el-button size="mini" @click="removeSelect">删除</el-button>
              <el-button size="mini" @click="clearAllSelect">清空</el-button>
            </div>
          </el-aside>
          <el-aside width="170px" class="select-aside">
            <div class="container_title">已选择</div>
            <div class="select-tree-div">
              <el-tree
                ref="selectTree"
                node-key="fanName"
                :props="selectProps"
                :data="selectList"
                show-checkbox
                check-on-click-node
              ></el-tree>
            </div>
          </el-aside>
        </el-container>
      </div>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
  </div>
</template>
<script>
import utils from '@/hotent-ui-util.js'
export default {
  name: 'relevance',
  data() {
    return {
      quickSearchProps: [
        {prop: 'f.fan_code_', label: '机组编码'},
        {prop: 'f.line_code_', label: '机组线路'},
        {prop: 'f.fan_name_', label: '机组名称'},
        {prop: 'f.fan_type_', label: '机组类型'}
      ],
      defaultProps: {
        children: 'children',
        label: 'lineCode'
      },
      crewTypeList: [],
      //第二个tree树选择后显示后的机组名称
      selectProps: {
        label: 'fanName'
      },
      //第二个tree树选择的机组名称数组
      selectList: [],
      //弹框
      dialogVisible: false,

      data: [],
      data2: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      pageResult2: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      saveMethod: 'POST',
      lineCode: '',
      modelCode: '',
      modelId: ''
    }
  },

  methods: {
    save() {
      if (this.selectList && this.selectList.length) {
        let list = []
        this.selectList.forEach(item => {
          let i = {}
          i.fanCode = item.fanCode
          i.fanId = item.id
          i.modelCode = this.modelCode
          i.modelId = this.modelId
          list.push(i)
        })
        this.$http
          .post('${cssc}/biz/model/modelInfo/v1/modelFan/saveModelFans', list)
          .then(res => {
            if (res.status == 200) {
              setTimeout(() => {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.beforeCloseDialog()
                this.$refs.htTable.load()
              }, 500)
            }
          })
      } else {
        this.$message.warning('请至少选择一条机组')
        return
        // this.dialogVisible = false
      }
    },

    //全选
    handleSelectChange(rows) {
      this.selectList = utils.deepClone(rows)
    },
    //单选
    onTableSelect(rows, row) {
      // true就是选中，0或者false是取消选中
      let selected = rows.length && rows.indexOf(row) !== -1
      if (!selected) {
        return
      } else {
        this.selectList.push(row)
      }
    },
    loadDataList(param, cb) {
      //加载机组列表
      let lineQuery = [
        {
          group: 'filter',
          operation: 'EQUAL',
          property: 'lineCode',
          relation: 'AND',
          value: this.lineCode
        }
      ]
      if (this.lineCode) {
        if (param.querys && param.querys.length) {
          param.querys.push(...lineQuery)
        } else {
          param.querys = lineQuery
        }
      }
      this.$http
        .post('${cssc}/biz/base/fanInfo/v1/query', param)
        .then(
          res => {
            let response = res.data
            this.data2 = response.rows
            this.pageResult2 = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
      // cb()
    },
    //点击tree节点时触发事件
    handleLineClick(data) {
      this.lineCode = data.lineCode
      this.$refs.htTable2.load()
    },

    //清空
    clearAllSelect() {
      this.selectList = []
      // this.$refs.htTable2.$refs.htTable.clearSelection()
    },
    // 在弹框中的已选数据中删除勾选的项
    removeSelect() {
      let ary = this.$refs.selectTree.getCheckedNodes()
      ary.forEach(item => {
        this.selectList.remove(item)
      })
    },
    treeList() {
      //加载tree路线
      this.$http.post('${cssc}/biz/base/wfLine/v1/query').then(
        resp => {
          this.crewTypeList = resp.data.rows
        },
        error => {
          reject(error)
        }
      )
    },
    showDialog() {
      this.dialogVisible = true
      this.treeList()
    },
    loadData(param, cb) {
      // debugger
      this.modelCode = this.$route.params.code
      this.modelId = this.$route.params.id
      let modelQuery = [
        {
          group: 'filter',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'modelId',
          relation: 'AND',
          value: this.modelId
        }
      ]

      if (param.sorter[0].property == 'lineCode') {
        param.sorter[0].property = 'f.line_code_'
      } else if (param.sorter[0].property == 'fanName') {
        param.sorter[0].property = 'f.fan_name_'
      } else {
        param.sorter[0].property = 'f.fan_type_'
      }

      if (param.querys && param.querys.length) {
        param.querys.push(...modelQuery)
      } else {
        param.querys = modelQuery
      }

      this.$http
        .post(
          '${cssc}/biz/model/modelInfo/v1/modelFan/sliceQueryFanByModel',
          param
        )
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows

            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    beforeCloseDialog() {
      this.dialogVisible = false
      this.selectList = []
      this.$refs.htTable2.load()
    },

    // 返回上一页
    goBack() {
      this.$router.push({name: 'ModelInfoManager'})
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
  padding: 10px 20px;
}
/deep/ .el-page-header__content {
  font-size: 16px;
}
.container {
  width: 100%;
  height: 700px;
  padding-bottom: 2px;
}

.container_main {
  width: 100%;
  height: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #eee;
}
.container_title {
  margin-bottom: 10px;
}
.card_title,
.container_title {
  border-bottom: 1px solid #eee;
  height: 35px;
  line-height: 35px;
  background-color: #f5f7fa;
  font-size: 14px;
  font-weight: bold;
  padding-left: 20px;
}
.card_title {
  margin-bottom: 10px;
}
.card_title > span {
  font-size: 14px;
  font-weight: bold;
}
.card {
  width: 170px;
  height: 99.6%;
  border: 1px solid #eee;
  border-radius: 5px;
}
.el-input__inner[aria-invalid='true'] {
  border-color: #f56c6c;
}

.el-select__tags {
  background: #fff;
  margin-left: 1px;
}

.org-tree {
  height: 440px;
  margin-top: 10px;
}

.org-table {
  width: 100%;
}

.right-aside {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.select-aside {
  border: 1px solid #eee;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select-header {
  border-bottom: 1px solid #eee;
  height: 52px !important;
}

.select-header > span {
  padding: 10px 0;
  line-height: 53px;
}

.select-tree-div {
  height: calc(100% - 46px);
  overflow-y: auto;
}

>>> .el-main {
  padding: 0 10px !important;
}

>>> .el-footer {
  padding: 20px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.button-group {
  width: 55px;
  height: 170px;
  margin: 0px auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.button-group > button {
  display: block;
  margin: 8px 0;
}

>>> span.el-radio__label {
  display: none;
}
.collect-tree-content {
  height: calc(100% - 50px);
}
.editScroll {
  height: 100% !important;
  overflow-x: hidden;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.tree-icon {
  margin-right: 10px;
  color: #409eff;
}
/deep/ .el-divider {
  background: transparent;
}
</style>
