<template>
  <div :class="$style.person">
    <div :class="$style.groupTree">
      <sd-address-group-tree ref="grouptree" @treeSelected="treeSelected"></sd-address-group-tree>
    </div>
    <sd-data-table-ex
      ref="dataTable1"
      :class="$style.personList"
      data-url="api/framework/v1/address-manager/addresses/person-list"
      :columns="columns1"
      show-selection
      form-id="oaBaseAddress"
      :page-id="pageId"
      :actions="actions"
      :search-fields="['addrUser']"
      :filter-expressions="expressions1"
      @detailModalShow="onDetailModalShow"
      @recordSaved="onRecordSaved"
      @recordsDeleted="onRecordsDeleted"
    >
      <template v-slot:form="{ model }">
        <sd-form-item name="addrUser"> </sd-form-item>
        <sd-form-item name="addrPhone"> </sd-form-item>
        <sd-form-item name="addrTel"> </sd-form-item>
        <sd-form-item name="addrMail"> </sd-form-item>
        <sd-form-item name="addrGroup">
          <sd-select v-model="model.addrGroup" :options="addrGroupNameOpts"> </sd-select>
        </sd-form-item>
      </template>
    </sd-data-table-ex>

    <!-- 组设置 -->
    <a-modal
      :footer="null"
      :title="modalGroup.title"
      :visible="modalGroup.visible"
      :width="650"
      @cancel="handleCancel"
    >
      <sd-address-group-setting :addr-group-type="addrGroupType"></sd-address-group-setting>
    </a-modal>
  </div>
</template>

<script>
import download from '@/common/services/download'
import PageService from '@/common/services/page-service'
import storeMixin from '@/common/store-mixin'
import TableActionTypes from '@/common/services/table-action-types'
import components from './_import-components/sd-personal-address-list-import'

export default {
  name: 'SdPersonalAddressList',
  metaInfo: {
    title: '个人通讯录',
  },
  components,
  mixins: [storeMixin],
  data() {
    return {
      addrGroupType: '0', // 0为个人通讯录
      groupTreeId: '',
      addrGroupNameOpts: [],
      modalGroup: {
        title: '个人通讯录',
        visible: false,
      },
      columns1: [
        {
          title: '姓名',
          dataIndex: 'addrUser',
          sdClickable: true, // 列内容是否可点击
        },
        {
          title: '手机',
          dataIndex: 'addrPhone',
        },
        {
          title: '座机电话',
          dataIndex: 'addrTel',
        },
        {
          title: '邮箱',
          dataIndex: 'addrMail',
        },
        {
          title: '所属组',
          dataIndex: 'addrGroupName',
        },
      ],
      expressions1: [
        {
          dataType: 'int',
          name: 'addrGroupType',
          op: 'eq',
          intValue: 0, // 个人通讯录
        },
        {
          dataType: 'int',
          name: 'groupId',
          op: 'eq',
          longValue: 0,
        },
        {
          dataType: 'long',
          name: 'creatorId',
          op: 'eq',
          longValue: 0,
        },
      ],
      actions: [
        {
          label: '设置组',
          id: 'set',
          permission: null,
          callback: () => {
            this.modalGroup.visible = true
          },
        },
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create, // 主按钮，高亮色显示
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
        {
          label: '导出',
          id: 'export',
          permission: 'export',
          callback: (keys) => {
            const url = 'api/framework/v1/address-manager/addresses/export-person'
            const fname = '个人通讯录.xls'
            download(url, fname)
          },
        },
      ],
      pageId: 'base/address/oaBaseAddress',
    }
  },
  created() {
    this.expressions1[2].longValue = this.userInfo.id
  },
  methods: {
    handleCancel() {
      this.modalGroup.visible = false
    },
    // 显示组列表
    onDetailModalShow() {
      const params = {
        startPosition: 0,
        maxResults: -1,
        expressions: [
          {
            dataType: 'int',
            intValue: 0,
            name: 'addrGroupType',
            op: 'eq',
          },
          {
            dataType: 'long',
            name: 'creatorId',
            op: 'eq',
            longValue: this.userInfo.id,
          },
        ],
        formId: 'oaBaseAddrGroup',
        orderBy: 'creationTime asc',
        columns: 'addrGroupName',
      }
      PageService.getList(params).then((res) => {
        this.addrGroupNameOpts = res.data.data.map((val) => {
          return {
            id: val.id,
            name: val.addrGroupName,
          }
        })
      })
    },
    // 点击树加载列表
    treeSelected(info) {
      this.expressions1[1].longValue = info.node.dataRef.id
      this.$refs.dataTable1.refresh(true)
    },
    // 新建保存回调刷新树
    onRecordSaved() {
      this.$refs.grouptree.getGroupTree()
    },
    // 删除回调
    onRecordsDeleted() {
      this.$refs.grouptree.getGroupTree()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.person {
  display: flex;
  flex-direction: row;
  .group-tree {
    width: 20%;
    height: calc(100vh - 260px);
    margin-right: 10px;
    overflow: auto;
  }
  .person-list {
    width: 80%;
    :global(.ant-table) {
      height: calc(100vh - 290px);
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
