<template>
  <div>
    <sd-data-table-ex
      ref="dataTable"
      form-id="iamExcelExportConfig"
      page-id="core/excelexportconfig/iamExcelExportConfig"
      :columns="columns"
      :actions="actions"
      show-selection
      :search-fields="['tableId']"
    >
      <template v-slot:form="{ model }">
        <!-- 导出类型 -->
        <sd-form-item name="exportType" />
        <!-- 数据库表名 -->
        <sd-form-item :hidden="model.exportType === '多表数据'" name="tableId">
          <sd-select v-model="model.tableId" :options="tableOptions" @change="setField" />
        </sd-form-item>
        <!-- 显示列名 -->
        <sd-form-item :hidden="model.exportType === '多表数据'" name="showColumnId">
          <sd-select
            v-model="model.showColumnId"
            :options="showColumnOptions"
            mode="multiple"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 排序列名 -->
        <sd-form-item :hidden="model.exportType === '多表数据'" name="orderColumnId">
          <sd-select
            v-model="model.orderColumnId"
            :options="orderColumnOptions"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 查询条件
        <sd-form-item name="expressions" :colspan="3">
          <a-textarea v-model="model.expressions" />
        </sd-form-item>
         -->
        <!-- 页面ID -->
        <sd-form-item :hidden="model.exportType === '多表数据'" name="pageId">
          <sd-tree-picker v-model="model.pageId" single :load-tree-data="loadTreeData">
          </sd-tree-picker>
        </sd-form-item>
        <!-- 导出列配置 -->
        <sd-form-item :hidden="model.exportType !== '多表数据'" name="columnTitle">
          <a-textarea v-model="model.columnTitle" :rows="4" />
          <div>示例：[{"name":"TITLE","title":"标题"},{"name":"TIME","title":"日期"}]</div>
        </sd-form-item>
        <!-- 服务名称 -->
        <sd-form-item :hidden="model.exportType !== '多表数据'" name="serviceName" />
        <!-- 查询方法名称 -->
        <sd-form-item :hidden="model.exportType !== '多表数据'" name="queryMethodName" />
        <!-- Excel名称 -->
        <sd-form-item name="excelTitle" />
        <!-- 工作表名称 -->
        <sd-form-item name="sheetTitle" />
        <!-- 扩展文本字段
          <sd-form-item name="reservestring1" />

          <sd-form-item name="reservestring2" />

          <sd-form-item name="reservestring3" />

          <sd-form-item name="reservestring4" />

          <sd-form-item name="reservestring5" />
           -->
        <!-- 扩展数字字段
          <sd-form-item name="reservelong1" />

          <sd-form-item name="reservelong2" />

          <sd-form-item name="reservelong3" />

          <sd-form-item name="reservelong4" />

          <sd-form-item name="reservelong5" />
           -->
      </template>
      <span slot="AppointmentTime" slot-scope="appointmentTime">
        {{ appointmentTime | sdDateFormat('YYYY-MM-DD HH:mm') }}
      </span>
    </sd-data-table-ex>
  </div>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import TreeconfigService from '../treeconfig/treeconfig-service'
import components from './_import-components/iam-audit-excelexportconfig-import'

export default {
  name: 'IamAuditExcelexportconfig',
  metaInfo: {
    title: 'Excel导出组件配置',
  },
  components,
  data() {
    return {
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '导出类型',
          dataIndex: 'exportType',
        },
        {
          title: '数据库表名',
          dataIndex: 'tableId',
          sdClickable: true,
          customRender: (text, record, index) => {
            if (text !== null && text !== '') {
              var arr = JSON.parse(text)
              return arr[0].name
            } else {
              return ''
            }
          },
        },
        {
          title: '服务名称',
          dataIndex: 'serviceName',
          sdClickable: true,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.oa.create, // 新建按钮，不需要回调，自动处理
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.oa.delete, // 删除按钮，不需要回调，会自动处理
        },
      ],
      tableOptions: [],
      showColumnOptions: [],
      orderColumnOptions: [],
    }
  },
  created() {
    TreeconfigService.findIamEntity().then((res) => {
      if (res.data) {
        this.tableOptions = res.data
      }
    })
  },
  methods: {
    setField(item) {
      if (item.length > 0) {
        var entityName = item[0].id
        TreeconfigService.findIamEntityAttr(entityName).then((res) => {
          if (res.data) {
            this.showColumnOptions = res.data
            this.orderColumnOptions = res.data
          }
        })
      }
    },
    loadTreeData(id) {
      if (id) {
        return TreeconfigService.findIamPageChildren({ parentId: id }).then((res) => {
          return this.mapCategoryItems(res.data)
        })
      } else {
        return TreeconfigService.findIamPageChildren().then((res) => {
          const treeNode = res.data
          return this.mapCategoryItems(treeNode)
        })
      }
    },
    mapCategoryItems(items) {
      return (items || []).map((item) => {
        const result = {
          id: item.id,
          name: item.text,
          checkable: item.leaf,
          isLeaf: item.leaf,
        }
        return result
      })
    },
    initField(item) {
      var obj = this.$refs.dataTable.getDetailModal().getFieldValue('tableId')
      if (obj !== undefined) {
        if (this.showColumnOptions.length === 0) {
          this.setField(obj)
        }
      }
    },
  },
}
</script>

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