<template>
  <ai-list class="addressBook">
    <template slot="title">
      <ai-title title="通讯录管理" isShowBottomBorder></ai-title>
    </template>
    <template #left>
      <div class="addressBook-left">
        <div class="addressBook-left__title">
          <h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']">
            组织架构</h2>
          <h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">标签</h2>
        </div>
        <div class="addressBook-left__list--title" v-if="tabIndex === 0">
          <el-input
              size="mini"
              placeholder="请输入部门名称"
              v-model="unitName"
              suffix-icon="iconfont iconSearch">
          </el-input>
        </div>
        <div class="addressBook-left__list--title" v-if="tabIndex === 1">
          <el-button size="mini" icon="iconfont iconAdd" @click="isShowTags = true">添加标签</el-button>
          <el-input
              class="addressBook-left__list--search"
              size="mini"
              style="width: 154px;"
              placeholder="请输入标签名称"
              v-model="tagName"
              suffix-icon="iconfont iconSearch">
          </el-input>
        </div>
        <div class="addressBook-left__list--wrapper">
          <div class="addressBook-left__list" v-show="tabIndex === 0">
            <el-tree
                :filter-node-method="filterNode"
                ref="tree"
                :props="defaultProps"
                node-key="id"
                :data="unitList"
                highlight-current
                @node-contextmenu="nodeContextmenu"
                :current-node-key="search.departmentId"
                :default-expanded-keys="defaultExpanded"
                :default-checked-keys="defaultChecked"
                @current-change="onTreeChange">
            </el-tree>
            <ul
                v-if="isShowMenu"
                class="el-dropdown-menu el-popper"
                :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
                x-placement="top-end">
              <li class="el-dropdown-menu__item" @click="handleTreeCommand('add', menuInfo.node)">添加子部门</li>
              <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
              <li class="el-dropdown-menu__item" @click="handleTreeCommand('remove', menuInfo.node)">删除</li>
              <li class="el-dropdown-menu__item" :class="[!menuInfo.node.i ? 'is-disabled' : '']"
                  @click="handleTreeCommand('top', menuInfo.node)">上移
              </li>
              <li
                  class="el-dropdown-menu__item"
                  :class="[(menuInfo.node.i === menuInfo.node.len - 1) || (!menuInfo.node.i && menuInfo.node.i !== 0) ? 'is-disabled' : '']"
                  @click="handleTreeCommand('bottom', menuInfo.node)">下移
              </li>
            </ul>
          </div>
          <div class="addressBook-left__list" v-show="tabIndex === 1">
            <div class="addressBook-left__tags">
              <div
                  @click="changeTag(index)"
                  class="addressBook-left__tags--item"
                  :class="[currIndex === index ? 'addressBook-left__tags--item-active' : '']"
                  v-for="(item, index) in tagsList" :key="index">
                <span>{{ item.tagname }}</span>
                <el-dropdown @command="e => handleCommand(e, item)">
                  <i class="iconfont iconmore"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="remove">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" v-if="tabIndex === 0" @click="toAdd('')">添加成员
          </el-button>
          <ai-import :instance="instance" :dict="dict" v-if="tabIndex === 0" type="wxcp/wxuser" name="通讯录管理"
                     :importParams="{departmentId:search.departmentId}"/>
          <el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading"
                     @click="syncMembers">同步数据
          </el-button>
          <ai-wechat-selecter refs="addTags" :instance="instance" v-model="users" @change="onChooseUser"
                              :disabled="currIndex < 0" v-if="tabIndex === 1">
            <el-button size="small" :disabled="currIndex < 0" type="primary" icon="iconfont iconAdd">添加成员</el-button>
          </ai-wechat-selecter>
        </template>
        <template slot="right">
          <el-input
              v-model="search.name"
              size="small"
              @keyup.enter.native="search.current = 1, getList()"
              placeholder="请输入成员姓名、手机号或标签名称"
              clearable
              @clear="search.current = 1, search.name = '', getList()"
              suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          v-loading="loading"
          style="margin-top: 6px;"
          :current.sync="search.current"
          :size.sync="search.size"
          @handleSelectionChange="handleSelectionChange"
          @getList="getList">
        <el-table-column slot="avatar" label="" align="right" width="100px">
          <template slot-scope="{ row }">
            <img class="table-avatar" :src="row.avatar || 'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'">
          </template>
        </el-table-column>
        <el-table-column slot="tags" label="标签" align="left">
          <template slot-scope="{ row }">
            <div class="table-tags" v-if="row.tagNames">
              <el-tag type="info" v-for="(item, index) in row.tagNames.split('、')" size="small" :key="index">{{
                  item
                }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toAdd(row.id)" v-show="tabIndex === 0">编辑</el-button>
              <el-button type="text" @click="remove(row.id)" v-show="tabIndex === 0">删除</el-button>
              <el-button type="text" @click="removeTags(row.id)" v-show="tabIndex === 1">移除</el-button>
            </div>
          </template>
        </el-table-column>
        <div slot="paginationBtns" class="addressBook-table__btns">
          <span style="margin-right: 8px;" @click="removeAll">{{ tabIndex === 0 ? '批量删除' : '批量移除' }}</span>
          <ai-wechat-selecter :instance="instance" v-model="department" isChooseUnit @change="onDepartment"
                              v-if="tabIndex === 0">
            <span>批量导出</span>
          </ai-wechat-selecter>
        </div>
      </ai-table>
      <ai-dialog
          :visible.sync="isShowTags"
          width="590px"
          :title="tagId ? '编辑标签' : '添加标签'"
          @close="onClose"
          @onConfirm="onFormConfirm">
        <el-form ref="tagForm" :model="tagForm" label-width="110px" label-position="right">
          <el-form-item label="标签名称" prop="tagname" :rules="[{ required: true, message: '请输入标签名称', trigger: 'blur' }]">
            <el-input size="small" placeholder="请输入标签名称" v-model="tagForm.tagname"></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
      <ai-dialog
          :visible.sync="isShowDepart"
          width="590px"
          :title="departId ? '修改名称' : '添加部门'"
          @close="onClose"
          @onConfirm="onDepartConfirm">
        <el-form ref="departForm" :model="departForm" label-width="110px" label-position="right">
          <el-form-item label="部门名称" prop="name" :rules="[{ required: true, message: '请输入部门名称', trigger: 'blur' }]">
            <el-input size="small" placeholder="请输入部门名称" v-model="departForm.name"></el-input>
          </el-form-item>
        </el-form>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'List',

  props: {
    instance: Function,
    dict: Object
  },

  data() {
    return {
      users: [],
      isShowMenu: false,
      department: [],
      btnLoading: false,
      menuInfo: {
        x: '',
        y: '',
        node: {}
      },
      search: {
        current: 1,
        size: 10,
        title: '',
        tagname: '',
        name: '',
        tagIds: '',
        departmentId: ''
      },
      tagForm: {
        tagname: ''
      },
      isShowDepart: false,
      departForm: {
        name: ''
      },
      loading: false,
      isShowTags: false,
      defaultChecked: [],
      defaultExpanded: [],
      tabIndex: 0,
      currIndex: -1,
      areaList: [],
      total: 0,
      colConfigs: [
        {type: 'selection', label: ''},
        {slot: 'avatar', label: ''},
        {prop: 'name', label: '姓名'},
        {prop: 'position', label: '职务'},
        {prop: 'departmentNames', label: '部门'},
        {prop: 'mobile', label: '手机号'},
        {slot: 'tags', label: '标签'},
        {prop: 'status', label: '账号状态', align: 'center', formart: v => v === 1 ? '已激活' : '未激活'}
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      unitName: '',
      rootId: '',
      unitList: [],
      tagsList: [],
      tagName: '',
      sourceTagList: [],
      tableData: [],
      tagId: '',
      departmentName: '',
      departId: '',
      ids: ''
    }
  },

  computed: {
    ...mapState(['user'])
  },

  watch: {
    unitName(val) {
      this.$refs.tree.filter(val)
    },

    tagName(val) {
      if (!val) {
        this.tagsList = this.sourceTagList
      }

      this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1)
    }
  },

  mounted() {
    this.getTree()
    this.getList()
    this.getTags()
    document.querySelector('html').addEventListener('click', this.bindEvent)

    this.$nextTick(() => {
    })
  },

  methods: {
    changeTag(index) {
      this.currIndex = index
      this.search.current = 1

      this.$nextTick(() => {
        this.getList()
      })
    },

    bindEvent() {
      this.isShowMenu = false
    },

    nodeContextmenu(e, node) {
      this.isShowMenu = true
      this.menuInfo = {
        x: e.x + 16,
        y: e.y + 6,
        node
      }
    },
    removeTags(id) {
      if (this.currIndex < 0) {
        return this.$message.error('请选择标签')
      }

      this.$confirm('确定移除该成员？').then(() => {
        this.instance.post(`/app/wxcp/wxtag/removeTag?userIds=${id}&tagId=${this.tagsList[this.currIndex].id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('移除成功!')
            this.search.current = 1

            this.getList()
          }
        })
      })
    },

    onDepartment(e) {
      if (!e.length) {
        return this.$message.error('请选择部门')
      }
      const ids = e.map(v => v.id).join(',')

      this.department = []
      this.instance.post(`/app/wxcp/wxuser/export?departmentId=${ids}`, null, {
        responseType: 'blob'
      }).then(res => {
        if (res?.type == "application/json") {
          let reader = new FileReader()
          reader.readAsText(res, "utf-8")
          reader.onload = e => {
            if (e.target.readyState === 2) {
              let ret = JSON.parse(e.target.result)
              if (ret?.code == 0) {
                this.$message.success(ret.msg)
              } else this.$message.error(ret.msg)
            }
          }
        } else {
          const link = document.createElement('a')
          let blob = new Blob([res], {type: res.type})
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.setAttribute('download', `${e[0].name}.xls`)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          this.$message.success('导出成功！')
        }
      })
    },

    onChooseUser(e) {
      if (!e.length) {
        return this.$message.error('请选择成员')
      }

      this.instance.post(`/app/wxcp/wxtag/markTag`, null, {
        params: {
          tagId: this.tagsList[this.currIndex].id,
          userIds: e.map(v => v.id).join(',')
        }
      }).then(res => {
        if (res.code == 0) {
          this.getList()
          this.users = []
          this.search.current = 1
          this.$refs.addTags.reset()
        } else {
          this.users = []
        }
      }).catch(() => {
        this.users = []
      })
    },

    handleTreeCommand(e, item) {
      this.isShowMenu = false

      if (e === 'add') {
        this.departForm.parentid = item.id
        this.departId = ''
        this.isShowDepart = true
      } else if (e === 'edit') {
        this.departForm = {
          ...item
        }

        this.departId = item.id
        this.isShowDepart = true
      } else if (e === 'top') {
        if (!item.i) {
          return false
        }

        this.moveDepart(item.id, 0)
      } else if (e === 'bottom') {
        if ((item.i === item.len - 1) || (!item.i && item.i !== 0)) {
          return false
        }

        this.moveDepart(item.id, 1)
      } else if (e === 'remove') {
        this.removeDepart(item.id, item.parentid)
      }
    },

    removeDepart(id, parentid) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => {
          if (res.code == 0) {
            this.defaultChecked = [parentid]
            this.$message.success('删除成功！')
            this.getTree()
          }
        })
      })
    },

    moveDepart(id, type) {
      this.instance.post(`/app/wxcp/wxdepartment/move?id=${id}&type=${type}`).then(res => {
        if (res.code == 0) {
          this.defaultChecked = [id]
          this.getTree()
          this.$message.success(type === 0 ? '上移成功' : '下移成功')
        }
      })
    },

    onDepartConfirm() {
      this.$refs.departForm.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/wxcp/wxdepartment/addOrUpdate`, {
            ...this.departForm,
            departId: this.departId
          }).then(res => {
            if (res.code == 0) {
              this.defaultChecked = [this.departForm.parentid]
              this.isShowDepart = false
              this.getTree()
              this.$message.success(this.departId ? '编辑成功' : '新增成功')
            }
          })
        }
      })
    },

    onFormConfirm() {
      this.$refs.tagForm.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/wxcp/wxtag/addOrUpdate`, {
            ...this.tagForm
          }).then(res => {
            if (res.code == 0) {
              this.isShowTags = false
              this.getTags()
              this.$message.success(this.tagId ? '编辑成功' : '新增成功')
            }
          })
        }
      })
    },

    handleCommand(e, item) {
      if (e === 'edit') {
        this.tagId = item.id
        this.tagForm = {
          ...item
        }

        this.isShowTags = true
      } else {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/wxcp/wxtag/delete?id=${item.id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getTags()
            }
          })
        })
      }
    },

    onClose() {
      this.tagId = ''
      this.tagForm.tagname = ''
      this.departForm.name = ''
      this.departId = ''
      this.departForm.nameEn = ''
      this.departForm.parentid = ''
      this.departForm.showIndex = ''
    },

    syncMembers() {
      if (!this.search.departmentId) {
        return this.$message.error('请选择部门')
      }

      this.btnLoading = true

      this.instance.post(`/app/wxcp/wxdepartment/syncDepart`).then(res => {
        if (res.code == 0) {
          this.instance.post(`/app/wxcp/wxdepartment/syncUser?departmentId=${this.search.departmentId}`, null, {
            timeout: 1000000
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('同步成功')
              this.getList()
              this.getTree()
            }

            this.btnLoading = false
          }).catch(() => {
            this.btnLoading = false
          })
        }

      }).catch(() => {
        this.btnLoading = false
      })
    },

    getTags() {
      this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
        if (res.code == 0) {
          this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : []
          this.tagsList = res.data
        }
      })
    },

    onSwitchChange(id) {
      this.instance.post(`/app/wxcp/wxuser/enable?id=${id}`).then(res => {
        if (res.code == 0) {
          this.getList()
        }
      })
    },

    onTreeChange(e) {
      this.departmentName = e.name
      this.search.departmentId = e.id || ''
      this.search.current = 1
      this.isShowMenu = false

      this.$nextTick(() => {
        this.getList()
      })
    },

    getList() {
      this.loading = true
      this.instance.post(`/app/wxcp/wxuser/list`, null, {
        params: {
          ...this.search,
          departmentId: this.tabIndex === 0 ? this.search.departmentId : '',
          tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '',
          listType: this.tabIndex
        }
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total

          this.$nextTick(() => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },

    removeAll() {
      if (!this.ids) return

      if (this.tabIndex === 1) {
        this.removeTags(this.ids)
      } else {
        this.remove(this.ids)
      }
    },

    handleSelectionChange(e) {
      this.ids = e.map(v => v.id).join(',')
    },

    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    changeTab(id, index) {
      this.currIndex = index
      this.search.areaId = id

      this.$nextTick(() => {
        this.getList()
      })
    },

    getTree() {
      this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => {
        if (res.code === 0) {
          let parent = res.data.map(v => {
            v.label = v.name
            v.children = []

            return v
          }).filter(e => !e.parentid)[0]
          this.defaultExpanded = [parent.id]
          this.defaultChecked = [parent.id]
          this.search.departmentId = parent.id
          this.departmentName = parent.name
          this.addChild(parent, res.data)
          this.unitList = [parent]

          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(parent.id)
          })
        }
      })
    },

    addChild(parent, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].parentid === parent.id) {
          list[i].i = parent.children.length
          parent.children.push(list[i])
        }
      }

      if (parent.children.length) {
        parent.children.forEach(v => {
          v.len = parent.children.length
        })
      }

      if (list.length > 0) {
        parent['children'].map(v => this.addChild(v, list))
      }
    },

    formatList(list) {
      var arr = []
      for (let item of list) {
        if (item.childrenUser && item.childrenUser.length) {
          delete item.childrenUser
        }

        if (item.childrenDept && item.childrenDept.length) {
          this.formatList(item.childrenDept)
        }

        arr.push(item)
      }

      return arr
    },

    remove(id) {
      this.$confirm('确定删除该数据？').then(() => {
        this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      })
    },

    toAdd(id) {
      this.$emit('change', {
        type: 'Add',
        params: {
          id: id || '',
          departmentId: this.search.departmentId || '',
          departmentName: this.departmentName || ''
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.addressBook {
  .addressBook-table__btns {
    display: flex;
    align-items: center;
  }


  .table-tags {
    .el-tag {
      margin-right: 8px;
      margin-bottom: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .import-wrapper {
    & > h2 {
      margin-bottom: 8px;
      font-size: 16px;
      color: #222222;
      font-weight: Bold;
    }

    .import-wrapper__tips {
      line-height: 1;
      margin-bottom: 24px;

      div {
        display: flex;
        margin-bottom: 8px;
        color: #222222;
        font-size: 14px;

        span {
          cursor: pointer;
          color: #2266FF;

          &:hover {
            opacity: 0.8;
            text-decoration: underline;
          }
        }
      }
    }

    .import-files {
      i {
        display: block;
        margin-top: 8px;
      }
    }

    i {
      color: #999999;
      font-size: 12px;
      font-style: normal;
    }
  }

  .tree-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .tree-name {
      padding-right: 30px;
    }

    i {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      padding-right: 8px;
      font-weight: normal;
      color: #fff;
    }
  }

  .el-tag {
    margin-right: 8px;
    border: 1px solid #D0D4DC;
    background: #F3F4F7;
    border-radius: 4px;
    font-size: 13px;
    color: #222222;

    &:last-child {
      margin-right: 0;
    }
  }

  .table-avatar {
    width: 40px;
    height: 40px;
    margin-top: 3px;
    border-radius: 2px;
    border: 1px solid #CCCCCC;
  }

  .el-button--mini, .el-button--mini.is-round {
    height: 28px;
    line-height: 28px;
    padding: 0;
    font-size: 12px;

    ::v-deep span {
      margin-left: 0;
    }
  }

  .addressBook-left__list--title {
    display: flex;
    align-items: center;
    margin: 8px 8px 0;

    .addressBook-left__list--search {
      flex: 1;

      ::v-deep input {
        width: 100%;
      }
    }

    .el-button {
      width: 84px;
      flex-shrink: 1;
      margin-right: 8px;
    }
  }

  .addressBook-left {
    width: 100%;
    height: auto;
    background: #FAFAFB;

    .addressBook-left__title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      background: #ffffff;

      h2 {
        flex: 1;
        height: 100%;
        line-height: 40px;
        color: #222;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid transparent;

        &.tab-active {
          color: #2266FF;
          border-bottom: 2px solid #2266FF;
        }
      }
    }

    // ::-webkit-scrollbar {
    //   width: 1px;
    // }

    .addressBook-left__list--wrapper {
      height: calc(100% - 68px);
      padding: 8px;
    }

    .addressBook-left__list {
      width: 100%;
      height: 100%;
      overflow: auto;

      ::v-deep .el-tree {
        width: fit-content;
        min-width: 100%;
      }

      ::v-deep .el-scrollbar__wrap {
        margin-bottom: 0 !important;
        overflow-x: hidden;

        .el-scrollbar__view {
          width: fit-content;
          min-width: 100%;
        }
      }

      .addressBook-left__tags--item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 8px 0 16px;
        cursor: pointer;
        color: #222222;

        &.addressBook-left__tags--item-active, &:hover {
          background: #E8EFFF;
          color: #2266FF;

          i, span {
            color: #2266FF;
          }
        }

        span {
          font-size: 14px;
        }

        i {
          cursor: pointer;
          color: #8e9ebf;
          font-size: 16px;
        }
      }

      span {
        color: #222222;
        font-size: 14px;
      }

      ::v-deep .el-tree {
        background: transparent;

        .el-tree-node__expand-icon.is-leaf {
          color: transparent !important;
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding: 4px;
        }

        .el-tree-node__content {
          height: 32px;
        }

        .el-tree__empty-text {
          color: #222;
          font-size: 14px;
        }

        .el-tree-node__children .el-tree-node__content {
          height: 32px;
        }

        .el-tree-node__content:hover {
          background: #E8EFFF;
          color: #222222;
          border-radius: 2px;
        }

        .is-current > .el-tree-node__content {
          &:hover {
            background: #2266FF;
            color: #fff;
          }

          background: #2266FF;

          span {
            color: #fff;
          }
        }
      }
    }
  }

  ::v-deep .ai-list__content--right {
    flex: 1;
    min-width: 0;
    margin-left: 1px;
    box-shadow: none;

    .ai-list__content--right-wrapper {
      width: 100%;
    }
  }

}
</style>
