<template>
  <div>
    <sd-data-table-ex
      ref="dataTable"
      form-id="iamChooseConfig"
      page-id="core/chooseconfig/iamChooseConfig"
      :columns="columns"
      :actions="actions"
      show-selection
      :search-fields="['tableId']"
    >
      <template v-slot:form="{ model }">
        <!-- 选择器类型 -->
        <sd-form-item name="chooseType" />
        <!-- 数据库表名 -->
        <sd-form-item :hidden="model.chooseType === '复杂列表选择'" name="tableId">
          <sd-select v-model="model.tableId" :options="tableOptions" @change="setField" />
        </sd-form-item>
        <!-- id列名 -->
        <sd-form-item :hidden="model.chooseType !== '树形选择'" name="idColumnId">
          <sd-select v-model="model.idColumnId" :options="idColumnOptions" @focus="initField" />
        </sd-form-item>
        <!-- 名称列名 -->
        <sd-form-item :hidden="model.chooseType !== '树形选择'" name="nameColumnId">
          <sd-select v-model="model.nameColumnId" :options="nameColumnOptions" @focus="initField" />
        </sd-form-item>
        <!-- 父id列名 -->
        <sd-form-item :hidden="model.chooseType !== '树形选择'" name="parentColumnId">
          <sd-select
            v-model="model.parentColumnId"
            :options="parentColumnOptions"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 排序列名 -->
        <sd-form-item :hidden="model.chooseType === '复杂列表选择'" name="orderColumnId">
          <sd-select
            v-model="model.orderColumnId"
            :options="orderColumnOptions"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 其他列名 -->
        <sd-form-item :hidden="model.chooseType === '复杂列表选择'" name="otherColumnId">
          <sd-select
            v-model="model.otherColumnId"
            :options="otherColumnOptions"
            mode="multiple"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 显示列名 -->
        <sd-form-item :hidden="model.chooseType !== '列表选择'" name="showColumnId">
          <sd-select
            v-model="model.showColumnId"
            :options="showColumnOptions"
            mode="multiple"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 查询列名 -->
        <sd-form-item :hidden="model.chooseType !== '列表选择'" name="queryColumnId">
          <sd-select
            v-model="model.queryColumnId"
            :options="queryColumnOptions"
            mode="multiple"
            @focus="initField"
          />
        </sd-form-item>
        <!-- 页面ID -->
        <sd-form-item :hidden="model.chooseType !== '列表选择'" name="pageId">
          <sd-tree-picker v-model="model.pageId" single :load-tree-data="loadTreeData">
          </sd-tree-picker>
        </sd-form-item>
        <!-- 查询条件 -->
        <sd-form-item name="expressions">
          <a-textarea v-model="model.expressions" :rows="4" />
          <div :hidden="model.chooseType !== '树形选择'"
            >示例：[{"dataType":"str","name":"PARENT_ID","op":"eq","stringValue":117},{"dataType":"str","name":"USER_MOUND","op":"eq","stringValue":"02"}]</div
          >
          <div :hidden="model.chooseType === '树形选择'"
            >示例：[{"dataType":"str","name":"parentId","op":"eq","stringValue":117},{"dataType":"str","name":"userMound","op":"eq","stringValue":"02"}]</div
          >
        </sd-form-item>
        <!-- 显示列配置 -->
        <sd-form-item :hidden="model.chooseType !== '复杂列表选择'" 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.chooseType !== '复杂列表选择'" name="serviceName" />
        <!-- 查询方法名称 -->
        <sd-form-item :hidden="model.chooseType !== '复杂列表选择'" name="queryMethodName" />
        <!-- 扩展文本字段
      <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-chooseconfig-import'

export default {
  name: 'IamAuditChooseconfig',
  metaInfo: {
    title: '通用选择组件配置',
  },
  components,
  data() {
    return {
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '选择器类型',
          dataIndex: 'chooseType',
        },
        {
          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: [],
      idColumnOptions: [],
      nameColumnOptions: [],
      parentColumnOptions: [],
      orderColumnOptions: [],
      otherColumnOptions: [],
      showColumnOptions: [],
      queryColumnOptions: [],
    }
  },
  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.idColumnOptions = res.data
            this.nameColumnOptions = res.data
            this.parentColumnOptions = res.data
            this.orderColumnOptions = res.data
            this.otherColumnOptions = res.data
            this.showColumnOptions = res.data
            this.queryColumnOptions = 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.idColumnOptions.length === 0) {
          this.setField(obj)
        }
      }
    },
  },
}
</script>

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