<template>
  <div>
    <sd-data-table-ex
      ref="dataTable2"
      data-url="api/framework/v1/address-manager/addresses/list"
      :columns="columns2"
      show-selection
      form-id="oaBaseAddress"
      page-id="base/address/oaBaseAddress"
      :actions="actions"
      :search-fields="['addrUser']"
      :filter-expressions="expressions2"
      @detailModalShow="onDetailModalShow"
    >
      <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">
          <template v-slot:read-and-edit="{ editable }">
            <sd-select
              v-model="model.addrGroup"
              :options="addrGroupNameOpts"
              :read-only="!editable"
            >
            </sd-select>
          </template>
        </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 TableActionTypes from '@/common/services/table-action-types'
import components from './_import-components/sd-public-address-list-import'

export default {
  name: 'SdPublicAddressList',
  metaInfo: {
    title: '公共通讯录',
  },
  components,
  data() {
    return {
      addrGroupType: '1',
      addrGroupNameOpts: [],
      modalGroup: {
        title: '公共通讯录',
        visible: false,
      },
      columns2: [
        {
          title: '所属组',
          dataIndex: 'addrGroupName',
        },
        {
          title: '姓名',
          dataIndex: 'addrUser',
          sdClickable: true, // 列内容是否可点击
        },
        {
          title: '手机',
          dataIndex: 'addrPhone',
        },
        {
          title: '座机电话',
          dataIndex: 'addrTel',
        },
        {
          title: '邮箱',
          dataIndex: 'addrMail',
        },
      ],
      expressions2: [
        {
          dataType: 'int',
          name: 'addrGroupType',
          op: 'eq',
          intValue: 1, // 公共通讯录
        },
      ],
      actions: [
        {
          label: '设置组',
          id: 'set',
          permission: 'oaPublicAddress-set',
          callback: () => {
            this.modalGroup.visible = true
          },
        },
        {
          label: '新建',
          id: 'new',
          permission: 'oaPublicAddress-create',
          type: TableActionTypes.primary,
          callback: () => {
            this.$refs.dataTable2.showDetailModal()
          },
        },
        {
          label: '删除',
          id: 'delete',
          permission: 'oaPublicAddress-delete',
          type: TableActionTypes.batch,
          callback: (keys) => {
            this.$refs.dataTable2.deleteRows(keys)
          },
        },
        {
          label: '导出',
          id: 'export',
          permission: 'oaPublicAddress-export',
          callback: (keys) => {
            const url = 'api/framework/v1/address-manager/addresses/export-common'
            const fname = '公共通讯录.xls'
            download(url, fname)
          },
        },
      ],
    }
  },
  created() {},
  methods: {
    handleCancel() {
      this.modalGroup.visible = false
    },
    onDetailModalShow() {
      // 当表单打开时，才获取组列表
      const params = {
        startPosition: 0,
        maxResults: -1,
        expressions: [
          {
            dataType: 'int',
            intValue: 1,
            name: 'addrGroupType',
            op: 'eq',
          },
        ],
        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,
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
