<template>
  <a-card :class="$style.addressbookcard" :bordered="false">
    <a-tabs v-model="activeKey" type="line">
      <a-tab-pane :key="1" tab="单位通讯录">
        <div :class="$style['first-div']">
          <div :class="$style['second-div']">
            <div :class="$style['choose-box']">
              <a-checkbox @change="handleIsContainSubOrg">
                包含子部门
              </a-checkbox>
            </div>
            <sd-address-company-tree
              v-if="showCompanyTree"
              :default-selected-keys="['SD-CUR-GROUP']"
              @update:selectedKeys="handleTreeSelect"
              @changeRecord="changeRecord"
            />
          </div>
          <div :class="$style['third-div']">
            <sd-company-address-list
              :is-contain-sub-org="isContainSubOrg"
              :tree-id="treeId"
              :selected-node="selectedNode"
              @newGroup="newGroup"
              @editGroup="editGroup"
              @deleteGroup="deleteGroup"
            ></sd-company-address-list>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="个人通讯录">
        <sd-personal-address-list></sd-personal-address-list>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="公共通讯录">
        <sd-public-address-list></sd-public-address-list>
      </a-tab-pane>
    </a-tabs>
    <sd-detail-modal
      ref="groupDetail"
      :record-id="recordId"
      :page-id="pageId"
      @saved="groupDetailSaved"
      @closed="groupDetailClosed"
    >
      <template v-slot="{ model }">
        <template v-if="pageId === 'base/address/oaBaseAddressOrgUnit'">
          <!--是否在通讯录展示-->
          <sd-form-item name="isDispaly"></sd-form-item>
          <!--通讯录管理员-->
          <sd-form-item name="addressAdmin"></sd-form-item>
        </template>
        <template v-else>
          <!--公司编码-->
          <sd-form-item name="code"></sd-form-item>
          <!--公司名称-->
          <sd-form-item name="name"></sd-form-item>
          <!--上级机构名称-->
          <sd-form-item name="parentField" :input-props="{ defaultValue: parentObj }">
            <sd-tree-picker
              v-model="model.parentField"
              single
              :load-tree-data="loadTreeData"
              @change="fnTreePicker"
            >
            </sd-tree-picker>
          </sd-form-item>
          <!--描述-->
          <sd-form-item name="description"></sd-form-item>
        </template>
      </template>
    </sd-detail-modal>
  </a-card>
</template>

<script>
import { Modal, Message } from 'ant-design-vue'
import { getUserInfo } from '@/common/store-mixin'
import AddressbookService from '@/addressbook/addressbook-service'
import components from './_import-components/sd-addressbook-import'

export default {
  name: 'SdAddressbook',
  components,
  metaInfo: {
    title: '通讯录',
  },
  data() {
    return {
      treeId: '',
      pageId: 'base/address/oaBaseAddressUnit',
      selectedNode: null,
      recordId: null,
      isContainSubOrg: false,
      isChildren: '',
      activeKey: 1, // 选中页签
      parentObj: [],
      showCompanyTree: true,
    }
  },
  computed: {
    isNotSysOrg() {
      return this.pageId === 'base/address/oaBaseAddressUnit'
    },
  },
  methods: {
    loadTreeData(parentCatId) {
      const params = this.isNotSysOrg
        ? { nonSysId: this.$refs.groupDetail.getFieldValue('companyId') || 'null' }
        : {}
      if (parentCatId) {
        // 非根节点
        return AddressbookService.getChildNodes(parentCatId, params)
      } else {
        // 根节点
        return AddressbookService.getGroupTree({
          expandedKey: [getUserInfo().deptId + ''],
          ...params,
        }).then((res) => res.data)
      }
    },
    fnTreePicker(value) {
      // 树节点选择变更
      if (value.length > 0) {
        const currentData = [
          {
            id: value[0].id,
            name: value[0].text,
          },
        ]
        this.$refs.groupDetail.setFieldValue('parentField', currentData)
      } else {
        this.$refs.groupDetail.setFieldValue('parentField', [])
      }
    },
    changeRecord(node) {
      if (node) {
        this.selectedNode = node
      }
    },
    handleTreeSelect(groupCode) {
      if (groupCode.length > 0) {
        this.treeId = `${groupCode[0]}`
      }
    },
    handleIsContainSubOrg(e) {
      this.isContainSubOrg = e.target.checked
    },
    newGroup() {
      if (this.treeId) {
        this.recordId = null // 不传此参数就是新建
        this.pageId = 'base/address/oaBaseAddressUnit'
        this.parentObj = [{ id: this.selectedNode.id, name: this.selectedNode.text }]
        this.$refs.groupDetail.show()
      } else {
        Message.error('请先选择组织机构')
      }
    },
    editGroup() {
      if (this.treeId) {
        this.recordId = Number(this.selectedNode.props.rid)
        if (this.selectedNode.props.isCanDel === '0') {
          this.pageId = 'base/address/oaBaseAddressOrgUnit'
        } else {
          this.pageId = 'base/address/oaBaseAddressUnit'
        }
        this.$refs.groupDetail.show()
        this.parentObj = [{ id: this.selectedNode.id, name: this.selectedNode.text }]
      } else {
        Message.error('请先选择组织机构')
      }
    },
    deleteGroup() {
      const _this = this
      if (this.treeId) {
        Modal.confirm({
          title: '确认要删除改组织？',
          content: _this.selectedNode.text,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.recordId = Number(_this.selectedNode.props.rid)
            AddressbookService.delGroupById(_this.recordId).then((res) => {
              if (res.status === 200) {
                Message.success(res.data.message)
                _this.showCompanyTree = false
                _this.$nextTick(() => {
                  _this.showCompanyTree = true
                })
              } else {
                Message.error(res.data.message)
              }
            })
          },
        })
      } else {
        Message.error('请先选择组织机构')
      }
    },
    groupDetailSaved() {
      Message.success('保存成功')
      this.showCompanyTree = false
      this.$nextTick(() => {
        this.showCompanyTree = true
      })
    },
    groupDetailClosed() {
      this.parentObj = []
      this.$refs.groupDetail.resetFields()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.addressbookcard {
  height: 100%;
  :global(.ant-tabs) {
    height: 100%;
  }
  :global(.ant-card-body) {
    height: 100%;
  }
}
.choose-box {
  padding: $padding-sm;
  :global(.ant-checkbox-wrapper) {
    color: $primary-color;
  }
}
.second-div {
  float: left;
  width: 20%;
  height: calc(100vh - 260px);
  margin-right: 20px;
  overflow: auto;
}
.third-div {
  float: right;
  width: calc(80% - 20px);
}
</style>
