<template>
  <div class="bbsl-common-page" @click="commonPageClick">
    <div class="content-left" style="background-color: #fff; margin-right: 9px">
      <el-card class="box-card">
        <div
          class="title"
          style="padding-left:10px;font-size:14px;heightL30px;line-height:30px;background:rgb(238 237 237);color:rgb(106 106 106);"
        >
          <i style="font-size: 16px; margin: 0 5px" class="el-icon-s-order"></i>
          <span style="font-size: 16px">组织目录&emsp;</span>
        </div>
        <!-- <div style="display: flex; padding: 5px 5px">
          <div style="flex: 1">
            <el-input
              clearable
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 100%"
            >
              <i
                style="font-size: 20px; margin-right: 5px"
                slot="prefix"
                class="el-input__icon el-icon-search"
              ></i>
            </el-input>
          </div>
          <div
            style="
              height: 30px;
              width: 10%;
              line-height: 30px;
              display: flex;
              flex-direction: row-reverse;
            "
          >
            <el-tooltip
              content="新增一级组织"
              placement="top"
              min-width="35"
              effect="light"
            >
              <i
                class="el-icon-circle-plus-outline"
                style="font-size: 23px; margin-left: 5px; line-height: 30px"
                @click="append(null, 'father')"
              ></i>
            </el-tooltip>
          </div>
        </div>-->
        <el-tree
          :highlight-current="true"
          :render-content="renderContent"
		   node-key="id"
          class="filter-tree ht-tree"
          :data="parentIds"
          :props="defaultProps"
		  default-expand-all
          :filter-node-method="filterNode"
          @node-click="changeNode"
          ref="tree"
        >
          <!-- <span class="custom-tree-node" slot-scope="{node, data}">
            <span>{{ node.label }}</span>
            <span>
              <el-popover placement="bottom" width="30" trigger="click">
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data, 'son')"
                  >
                    新增
                  </el-button>
                  <el-button
                    width="50%"
                    type="text"
                    size="mini"
                    @click="remove(data)"
                  >
                    删除
                  </el-button>
                </span>
                <i
                  slot="reference"
                  class="el-icon-circle-plus-outline"
                  style="font-size: 30px"
                ></i>
              </el-popover>
            </span>
          </span>-->
        </el-tree>
        <!-- <el-tree 
        :props="defaultProps"
          :data="parentIds"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{node, data}">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data,'son')">
                添加
              </el-button>
              <el-button
              v-if="node.parentId"
                type="text"
                size="mini"
                @click="() => remove(data)"
              >
                删除
              </el-button>
              <el-button
                style="width:100%;border:0;margin:0;color:#606266;"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="() => upDateinfo(data, '')"
              >
                修改
              </el-button>
            </span>
          </span>
        </el-tree>-->
      </el-card>
    </div>
    <div class="content-right">
      <div class="bbsl-table-search">
        <el-form v-model="queryParam" :inline="true">
          <el-form-item label="姓名：">
            <el-input
              clearable
              size="mini"
              placeholder="请输入姓名"
              v-model="queryParam.params.name"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="移动电话：">
            <el-input
              size="mini"
              clearable
              placeholder="请输入移动电话号"
              v-model="queryParam.params.mobilePhone"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="onClickSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bbsl-table-content" ref="contentPanel">
        <div class="bbsl-btn-content" ref="btnPanel">
          <!--              -->
          <el-button
            :disabled="addId ? false : true"
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="openFormDiao"
          >新增</el-button>
          <el-button
            :disabled="!multipleSelection.length"
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="deleteSelect"
          >删除</el-button>
        </div>
        <el-table
          stripe
          size="mini"
          :height="tableMaxHeight"
          @row-dblclick="handleDbClick"
          :style="{width: '100%'}"
          ref="multipleSelection"
          v-loading="loading"
          border
          :data="tableData"
          :row-key="getRowKey"
          @selection-change="handleSelectionChange"
          :header-cell-style="{'text-align': 'center'}"
          :cell-style="{'text-align': 'center'}"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column
            min-width="90"
            fixed
            sortable
            prop="name"
            label="姓名"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            min-width="120"
            sortable
            prop="orgName"
            label="负责人组织"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            min-width="140"
            sortable
            prop="mobilePhone"
            label="移动电话"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            min-width="120"
            sortable
            prop="position"
            label="职务"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column min-width="160" sortable prop="dept" label="单位" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column width="200" fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="infoUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
          </el-table-column>-->
        </el-table>
        <el-pagination
          ref="paginationPanel"
          align="right"
          class="bbsl-pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageBean.page"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="queryParam.pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <form-dialog
      :addId="addId"
      v-if="showFormDia"
      @closeFormDiao="closeFormDiao"
      @refList="getDateList"
      :showFormDia="showFormDia"
      :title="title"
      :pId="pId"
    ></form-dialog>
    <OrfForm
      v-if="showFormDias"
      :pId="pId"
      :showFormDias="showFormDias"
      @refList="getTreen"
      @closeFormDiaos="closeFormDiaos"
      :titles="titles"
    />
    <!-- 修改组织弹框 -->
    <upDateOrgFormdialog
      v-if="showFormDiaUp"
      :pId="pId"
      :showFormDiaUp="showFormDiaUp"
      @refList="getTreen"
      @closeFormDiaoUp="closeFormDiaoUp"
      :titleUp="titleUp"
    />
  </div>
</template>
<script>
import {mapState} from 'vuex'
import orgPerson from '@/api/orgPerson.js'
import FormDialog from './components/personForm-dialog.vue'
import OrfForm from './components/orgForm-dialog.vue'
import upDateOrgFormdialog from './components/updateOrgForm-dialog'
import req from '@/request.js'
import {TableMixin} from '@/mixins/tableMixin'
export default {
  name: 'headOrgManager',
  components: {
    FormDialog,
    OrfForm,
    upDateOrgFormdialog //修改组织弹框
  },
  mixins: [TableMixin],
  data() {
    return {
      loading: false,
      multipleSelection: [], // 复选框
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1
        },
        params: {
          orgId: null,
          mobilePhone: null, //移动电话
          name: null //组织名称
        }
      },
      total: 0,
      title: '',
      titles: '',
      titleUp: '',
      showFormDia: false,
      showFormDias: false,
      showFormDiaUp: false, //修改组织
      tableData: [],
      pId: '',
      addId: '',
      basAdNames: [], //行政区
      parentIds: [], //组织树
      defaultProps: {
        value: 'id',
        label: 'name'
      },
      data: [],
      filterText: '',
	  trees:false
    }
  },
  watch: {
    filterText(val) {
		console.log(val);
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDateList()
    // 行政区查询
    orgPerson.getbasAdName({}, res => {
      this.basAdNames = res.value
    })
    this.getTreen()
	
  },
  methods: {
    // 组织树查询
    getTreen() {
		orgPerson.getPerson({}, res => {
		  this.parentIds = res.value
		  if(this.trees){
		  	this.$nextTick(()=>{
		  	        this.$refs.tree.setCurrentKey(JSON.parse(sessionStorage.getItem("streeId")))
		  	   })
		  }
		})
     
    },
    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>
            <el-popover placement="bottom" width="55" trigger="hover">
              <el-button
                style="width:100%;border:0;margin:0;color:#606266;"
                size="mini"
                type="text"
                icon="el-icon-plus"
                on-click={() => this.append(data, 'son')}
              >
                新增
              </el-button>
              <el-button
                v-show={data.parentId}
                style="width:100%;border:0;margin:0;color:#606266;"
                size="mini"
                type="text"
                icon="el-icon-edit"
                on-click={() => this.upDateinfo(data, '')}
              >
                修改
              </el-button>
              <el-button
                v-show={data.parentId}
                style="width:100%;border:0;margin:0;color:#606266;"
                size="mini"
                icon="el-icon-delete"
                type="text"
                on-click={() => this.remove(data)}
              >
                删除
              </el-button>
              <i
                slot="reference"
                class="el-icon-more-outline"
                style="font-size: 15px;"
              ></i>
            </el-popover>
          </span>
        </span>
      )
    },
    remove(data) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
          orgPerson
            .removeS(data.id, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                this.queryParam.pageBean.page = 1
                this.getDateList()
                this.getTreen()
                this.$set(this.parentIds, this.parentIds, this.parentIds)
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
            })
        })
        .catch(() => {})
    },
    upDateinfo(data, type) {
      this.titleUp = '修改'
      this.showFormDiaUp = true
      this.pId = data.id
    },
    append(data, type) {
      if (type != 'father') {
        this.titles = '新增组织'
        this.showFormDias = true
        this.pId = data.id
        if (data.parentId) {
        }
      } else {
        this.titles = '新增一级组织'
        this.showFormDias = true
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      orgPerson.ListGet(this.queryParam, res => {
        if (res.state) {
          this.tableData = res.value.rows
          this.total = res.value.total
          this.loading = false
        }
      })
    },
    openFormDiao() {
      if (this.addId) {
        this.title = '新增'
        this.showFormDia = true
      } else {
      }
    },
    changeNode(val) {
		  sessionStorage.setItem("streeId", JSON.stringify(val.id));
		  this.trees=true
      this.addId = val.id
      this.queryParam.params.orgId = val.id
      this.queryParam.params.name = null
      this.queryParam.params.mobilePhone = null
      this.getDateList()
    },
    closeFormDiao() {
      this.showFormDia = false
      this.getDateList()
      this.getTreen()
    },
    closeFormDiaos() {
      this.showFormDias = false
      this.getDateList()
      this.getTreen()
    },
    // 修改组织
    closeFormDiaoUp() {
      this.showFormDiaUp = false
      this.getDateList()
      this.getTreen()
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    // // 修改
    handleUpdate(row) {
      this.title = '修改'
      this.pId = row.id
      this.showFormDia = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    // // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    // // // 批量删除
    deleteSelect() {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          orgPerson
            .remove(this.multipleSelection, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                // this.multipleSelection = [];
                this.$refs.multipleSelection.clearSelection()
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => {})
    },
    // /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      })
        .then(() => {
          orgPerson
            .remove(row.id, res => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000
                  // offset: 80
                })
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch(res => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80
              })
              this.getDateList()
            })
        })
        .catch(() => {})
    },
    handleSelect(val) {
      console.log(val)
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.onClickSearch()
    }
  }
}
</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;
}
.btn-content {
  display: flex;
}
.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: 8px;
}
.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: 80% !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;
}
.bbsl-pagination {
  bottom: 10px !important;
}
.ht-tree{
	height: 85vh;
}
/deep/ .custom-tree-node span{
	font-size: 13px !important;
}
</style>
