<template>
  <el-container class="fullheight" style="border: 1px solid #eee">
    <el-aside
      :width="isShowAside ? '200px' : '0px'"
      style="
        border-right: 1px solid #eee;
        transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
      "
    >
      <div class="tree-header flex">
        <el-input placeholder="请输入" v-model="filterText" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div
          :class="
            isIeExplorer
              ? 'tree-button-group is-ie-explorer flex'
              : 'tree-button-group flex'
          "
        >
          <i
            :class="{'icon-zhankai': !isExpand, 'icon-shouqi': isExpand}"
            :title="isExpand ? '收起' : '展开'"
            @click="handleExpandCollapse"
          />
          <i
            class="icon-sync"
            :class="{'icon-spin': loading}"
            title="刷新"
            @click="refresh"
          />
        </div>
      </div>
      <el-tree
        :data="treeData"
        :props="props"
        :load="loadNode"
        :filter-node-method="filterNode"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        node-key="id"
        @node-click="handleNodeClick"
        accordion
        ref="tree"
        highlight-current
        style="background: #fafafa"
      >
        <span class="custom-tree-node" slot-scope="{node, data}">
          <span>
            <i class="el-icon-s-order icon" style="padding-right: 4px"></i>
            {{ node.label }}
          </span>
          <el-dropdown @command="handleCommand" v-if="node.label != '分组管理'">
            <div class="el-dropdown-link">
              <i class="icon-more" title="更多操作" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-plus"
                :command="{node: node, data, action: 'add'}"
              >
                添加分组
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-edit"
                :command="{node: node, data, action: 'edit'}"
              >
                编辑分组
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-delete"
                :command="{node: node, data, action: 'delete'}"
                divided
              >
                删除分组
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-tree>
      <el-dialog
        class="addDialog"
        :title="title"
        :visible.sync="dialogVisible2"
        width="600px"
        top="8vh"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          data-vv-scope="form"
          status-icon
          :model="treeForm"
          :rules="treeRules"
          label-width="100px"
        >
          <el-form-item label="会场名" prop="name">
            <el-input
              v-model="treeForm.name"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="排序号" prop="sequence">
            <el-input
              v-model="treeForm.sequence"
              type="number"
              placeholder="请输入排序号"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </el-aside>
    <el-container style="background-color: #fff">
      <div class="shrink" @click="handleHideMenu">
        <i
          :class="isShowAside ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
        ></i>
      </div>
      <div style="width: 100%; height: 100%">
        <at-table
          @load="loadData"
          :data="data"
          :page-result="pageResult"
          ref="AtTable"
          :dialogTitle="dialogTitle"
          :dialogVisible="dialogVisible"
          :dialogWidth="'600px'"
          :default-sorter="[{direction: 'ASC', property: 'sequence'}]"
          @select-all="handleSelect"
          @select="handleSelect"
          @handleDialogCancel="handleDialogCancel"
          @handleDialogClose="handleDialogClose"
          @handleDialogSubmit="handleDialogSubmit"
          @row-dblclick="handleRowDBClick"
        >
          <template v-slot:searchInput>
            <el-form
              ref="searchForm"
              :model="searchForm"
              label-width="80px"
              class="search-top"
              @submit.native.prevent
            >
              <el-input
                v-model="searchForm.name"
                placeholder="请输入会场名称"
                clearable
                @keyup.enter.native="handleSearch"
                @input="handleSearch"
              ></el-input>
              <el-input
                v-model="searchForm.uri"
                placeholder="请输入会场标识"
                clearable
                @keyup.enter.native="handleSearch"
                @input="handleSearch"
              ></el-input>
              <el-button
                size="small"
                @click="handleSearch"
                type="primary"
                class="el-icon-search search-btn"
                >查询</el-button
              >
              <el-button
                size="small"
                @click="handleReset"
                type="primary"
                plain
                class="el-icon-refresh"
                >重置</el-button
              >
            </el-form>
          </template>
          <template v-slot:operationBtn>
            <el-button
              size="small"
              type="primary"
              @click="handleAdd"
              icon="el-icon-plus"
            >
              添加
            </el-button>
            <ht-delete-button :url="deleteUrl" :htTable="$refs.AtTable">
              删除
            </ht-delete-button>
            <el-button size="small" type="primary" icon="el-icon-refresh">
              同步会场
            </el-button>
          </template>
          <template>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="会场名称"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                <el-link type="primary" @click="handleRowDBClick(row)">
                  {{ row.name }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="alias"
              label="会场别名"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                {{ row.alias || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uri"
              label="会场标识"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="会场类型"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="ipAddress"
              label="会场IP地址"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                {{ row.ipAddress || '-' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="sequence"
              label="排序号"
              align="center"
              min-width="100"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </template>
          <!-- 弹框 -->
          <template v-slot:dialogContent>
            <el-form
              ref="ruleForm"
              data-vv-scope="form"
              :model="form"
              :rules="rules"
              label-width="100px"
              v-if="dialogVisible"
            >
              <el-row>
                <el-form-item label="会场名称" prop="name">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入会场名称"
                    clearable
                    @input="changeAlias"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="别名" prop="alias">
                  <el-input
                    v-model="form.alias"
                    placeholder="请输入别名"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="所属分组" prop="groupId">
                  <el-select
                    v-model="form.groupId"
                    placeholder="请选择所属分组"
                    clearable
                  >
                    <el-option
                      v-for="item in treeData[0].children"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="会场标识" prop="uri">
                  <el-input
                    v-model="form.uri"
                    placeholder="请输入会场标识"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="会场类型" prop="type">
                  <el-input
                    v-model="form.type"
                    placeholder="请输入会场类型"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="速率" prop="rate">
                  <el-input
                    v-model="form.rate"
                    placeholder="请输入速率(kbit/s、Mbit/s)"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="密码" prop="regPassword">
                  <el-input
                    v-model="form.regPassword"
                    placeholder="请输入H.323、SIP协议会场注册SC的密码"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="用户名" prop="regUser">
                  <el-input
                    v-model="form.regUser"
                    placeholder="请输入H.323、SIP协议会场注册SC的用户名"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="会场IP地址" prop="ipAddress">
                  <el-input
                    v-model="form.ipAddress"
                    placeholder="请输入会场IP地址"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="会场型号" prop="model">
                  <el-input
                    v-model="form.model"
                    placeholder="请输入会场型号"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </template>
        </at-table>
      </div>
    </el-container>
  </el-container>
</template>
<script>
import req from '@/request.js'
export default {
  name: 'VenueManagement',
  data() {
    return {
      title: '',
      treeForm: {},
      dialogVisible2: false, //添加树型节点
      typeKey: '',
      filterText: '', //树型搜索内容
      isIeExplorer: false, //
      isExpand: false,
      loading: false,
      props: {
        label: 'name',
        code: 'code',
        id: 'id',
        children: 'children',
        pcode: 'pcode',
        isLeaf: 'leaf', // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
      },
      treeData: [{name: '分组管理', code: 'root', id: '1', children: []}],
      defaultCheckedKeys: [], //默认选中节点
      defaultExpandedKeys: ['1'], //默认展开节点
      node: '',
      resolve: '',
      //表单验证
      treeRules: {
        pName: {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
        name: {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
      },

      projectObj: [], //获取的所有项目数组
      searchForm: {
        name: '',
        uri: '',
      }, //顶部搜索参数
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      form: {},
      dialogVisible: false, //表格
      dialogTitle: '添加',
      //表单验证
      rules: {
        name: {
          required: true,
          message: '请输入会场名称',
          trigger: 'blur',
        },
        alias: {
          required: true,
          message: '请输入会场别名',
          trigger: 'blur',
        },
        uri: {
          required: true,
          message: '请输入会场标识',
          trigger: 'blur',
        },
        type: {
          required: true,
          message: '请输入会场类型',
          trigger: 'blur',
        },
        rate: {
          required: true,
          message: '请输入速率',
          trigger: 'blur',
        },
        groupId: {
          required: true,
          message: '请选择会场分组',
          trigger: 'change',
        },
        // regPassword: {
        //   required: true,
        //   message: '请输入H.323、SIP协议会场注册SC的密码',
        //   trigger: 'blur',
        // },
        // regUser: {
        //   required: true,
        //   message: '请输入H.323、SIP协议会场注册SC的用户名',
        //   trigger: 'blur',
        // },
      },
      typeId: '',
      isShowAside: true, //左侧菜单默认显示
    }
  },
  computed: {
    deleteUrl: function () {
      return window.context.xqhk + '/bizSiteParamEx/v1/'
    },
  },

  mounted() {
    this.getTreeData()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    handleReset() {
      this.searchForm.name = ''
      this.searchForm.alias = ''
      this.$refs['searchForm'].resetFields()
      this.pageResult = {
        page: 1,
        pageSize: 20,
        total: 0,
      }
      this.$nextTick(() => {
        this.$refs.AtTable.load()
      })
    },
    //导入后重新加载数据
    load() {
      this.$refs.AtTable.load()
    },
    //查询
    handleSearch() {
      this.pageResult = {
        page: 1,
        pageSize: 20,
        total: 0,
      }
      this.$nextTick(() => {
        this.$refs.AtTable.load()
      })
    },
    afterSaveData() {
      setTimeout(() => {
        this.dialogVisible = false
        this.$refs.AtTable.load()
      }, 500)
    },
    handleAdd() {
      this.form = {
        name: '',
        alias: '',
      }
      this.dialogTitle = '添加'
      this.dialogVisible = true
      // if (this.form.typeInfo && this.form.typeInfo.id) {
      //   this.dialogTitle = '添加'
      //   this.dialogVisible = true
      // } else {
      //   this.$message('请选择一条子节点')
      // }
    },
    handleRowDBClick(data) {
      this.dialogTitle = '修改'
      this.dialogVisible = true
      this.form = data
    },

    handleSelect(selection) {},
    //取消
    handleDialogCancel() {
      this.dialogVisible = false
    },
    //关闭窗口
    handleDialogClose(val) {
      this.dialogVisible = false
    },
    //提交保存
    handleDialogSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http
            .post('${xqhk}/bizSiteParamEx/v1/', this.form)
            .then((res) => {
              if (res.status == 200) {
                setTimeout(() => {
                  this.$message.success('操作成功')
                  this.afterSaveData()
                }, 500)
              } else {
                this.$message.error(res.data.message)
              }
              this.loading = false
            })
        } else {
          this.$message({
            message: '*号必填项,不能为空!',
            type: 'warning',
          })
          return false
        }
      })
    },

    loadData(param, cb) {
      let query = []
      let search = {
        uri: this.searchForm.uri,
        name: this.searchForm.name,
      }
      for (let i in search) {
        if (search[i]) {
          query.push({
            group: 'advance',
            operation: 'LIKE',
            property: i,
            relation: 'AND',
            value: search[i],
          })
        }
      }
      if (param.querys && param.querys.length) {
        param.querys.push(...query)
      } else {
        param.querys = query
      }

      this.$http
        .post('${xqhk}/bizSiteParamEx/v1/query', 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(() => {
          if (cb) {
            cb()
          }
        })
    },
    handleClose() {
      this.dialogVisible2 = false
    },
    //初始节点
    getTreeData() {
      let params = {
        pageBean: {
          pageSize: -1,
        },
      }
      this.$http
        .post('${xqhk}/bizMeetingPlaceName/v1/getJson', params)
        .then((res) => {
          let resp = res.data.value
          this.treeData[0].children = resp
        })
    },
    //点击节点
    handleNodeClick(data) {
      this.searchForm = {
        name: '',
        uri: '',
      }
      this.form = {}
      if (data.name != '分组管理') {
        this.searchForm.name = data.name
      }
      //根组件查询全部节点数据
      this.$refs.AtTable.load()
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.props.label].indexOf(value) !== -1
    },
    loadNode(node, resolve) {},
    // 树状菜单的全部展开和收起
    handleExpandCollapse() {
      let elTree = this.$refs.tree
      for (var i = 0; i < elTree.store._getAllNodes().length; i++) {
        elTree.store._getAllNodes()[i].expanded = this.isExpand
      }
      this.isExpand = !this.isExpand
    },
    //树状刷新
    refresh() {
      this.loading = true
      this.$emit('refresh', () => {
        this.loading = false
        this.filterText = ''
        this.getTreeData()
      })
      setTimeout(() => {
        this.loading = false
        this.filterText = ''
      }, 2000)
    },
    closeBefore() {
      setTimeout(() => {
        this.dialogVisible2 = false
        this.getTreeData()
      }, 500)
    },
    //确定添加节点
    handleConfirm() {
      if (this.title == '添加') {
        this.$http
          .post('${xqhk}/bizMeetingPlaceName/v1/', this.treeForm)
          .then((res) => {
            if (res.data.state) {
              this.$message.success('添加成功')
              this.closeBefore()
            } else {
              this.$message.error('添加失败')
              this.dialogVisible2 = false
            }
          })
      } else {
        this.$http
          .put('${xqhk}/bizMeetingPlaceName/v1/', this.treeForm)
          .then((res) => {
            if (res.data.state) {
              this.$message.success('修改成功')
              this.closeBefore()
            } else {
              this.$message.error('修改失败')
              this.dialogVisible2 = false
            }
          })
      }
    },
    //树状更多下拉操作
    handleCommand(command) {
      let node = command.node
      let data = command.data
      let action = command.action
      switch (action) {
        case 'add':
          this.dialogVisible2 = true
          this.title = '添加'
          this.treeForm = {
            pName: data.name,
            pcode: data.code,
            code: '',
            name: '',
            hasChildren: 0,
            children: [],
          }
          break
        case 'edit':
          this.dialogVisible2 = true
          this.title = '编辑'
          if (data.pcode == 'root') {
            this.treeForm = {pName: '分组管理', ...data}
          } else {
            this.treeForm = {pName: data.name, ...data}
          }
          break
        case 'delete':
          this.del(data)
          break
        default:
          break
      }
    },
    del(data) {
      this.$confirm('是否继续删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          req
            .remove(
              window.context.xqhk + '/bizMeetingPlaceName/v1/?ids=' + data.id
            )
            .then((res) => {
              if (res.data.state) {
                this.$message.success('删除成功')
                this.closeBefore()
              } else {
                this.$message.error('删除失败')
                this.dialogVisible2 = false
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //隐藏目录
    handleHideMenu() {
      this.isShowAside = !this.isShowAside
    },
    //返回一个boolean类型，是否显示列表按钮
    getMethodauth(elAuth) {
      let allMethod = window.sessionStorage.allMethod
      let methodAuth = window.sessionStorage.methodAuth
      let allMethodArray = allMethod && allMethod.split(',')
      let methodAuthArray = methodAuth && methodAuth.split(',')
      // 无权限则隐藏按钮
      if (
        methodAuthArray &&
        methodAuthArray.includes(elAuth) &&
        allMethodArray &&
        allMethodArray.includes(elAuth)
      ) {
        return true
      } else {
        return false
      }
    },
    changeAlias(val) {
      if (this.dialogTitle != '修改') {
        this.form.alias = val
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: rgba(0, 0, 0, 0.5);
}
div.tree-header {
  min-height: 30px;
  /deep/ .el-input--small .el-input__inner {
    border: none;
  }
}
div.tree-header >>> .el-input__inner {
  border-width: 0;
  padding-right: 0;
}
div.tree-button-group i {
  cursor: pointer;
  display: inline;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}
div.tree-button-group i:hover {
  color: lightcoral;
}
.tree-button-group {
  margin-left: 10px;
}
.is-ie-explorer {
  margin-right: 25px;
}
.flex {
  display: flex;
}
>>> .el-dropdown {
  display: none;
}
>>> .el-header {
  border-bottom: 1px solid #ccc;
  button {
    float: right;
    margin-left: 5px;
  }
}

>>> .el-tree-node__content:hover .el-dropdown {
  display: inline-block;
}

>>> .navbar-collapse {
  position: relative;
  top: -60%;
  cursor: pointer;
  width: 20px;
}

>>> .navbar-collapse.navbar-collapse-right {
  top: 40%;
}

>>> .navbar-collapse:hover {
  transform: scale(1) translateY(2px);
}

>>> .navbar-collapse:hover .navbar-collapse-arrow {
  color: #333333;
}

>>> .navbar-collapse-arrow {
  position: relative;
  top: 38%;
  right: 15px;
  font-size: 18px;
  color: #a8a8a8;
}

>>> .navbar-collapse-bg {
  transition: all 0.12s ease;
  height: 50px;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 12px solid #ebebeb;
  border-top: 8px solid transparent;
  opacity: 0.9;
}
.el-aside-footer {
  position: absolute;
  bottom: 18px;
}

.custom-tree-node {
  width: calc(100% - 40px);
  // flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.icon-more {
  font-size: 12px;
  color: #909399;
}
.custom-tree-node .icon-more {
  visibility: hidden;
  font-weight: bold;
}

.custom-tree-node:hover .icon-more {
  visibility: visible;
}
.addDialog /deep/ .el-dialog__body {
  padding-left: 80px;
  padding-right: 80px;
}
.shrink {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  border-bottom: 8px solid transparent;
  border-right: none;
  border-left: 12px solid #ebebeb;
  border-top: 8px solid transparent;
  opacity: 0.9;
  cursor: pointer;
  i {
    position: absolute;
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
  }
  &:hover {
    color: #21aeff;
  }
}
</style>
