<template>
  <div>
    <a-modal v-model="visible" title="列表配置" :width="900" destroy-on-close>
      <sd-data-table-ex
        ref="dataTable"
        form-id="weAppFormList"
        :page-id="computedPageId"
        :columns="columns"
        :show-selection="!readOnly"
        :actions="readOnly ? [] : actions"
        :filter-expressions="expressions"
        :search-fields="['name']"
      >
        <template v-slot:form>
          <sd-form-item name="name" />
          <sd-form-item name="listDesc" />
          <sd-form-item name="sortNumber" />
          <sd-form-item name="appModuleId" hidden :input-props="{ defaultValue: form.id }" />
          <sd-form-item name="appId" hidden :input-props="{ defaultValue: form.appId }" />
        </template>
        <!-- 操作 -->
        <template slot="operate" slot-scope="text, record">
          <a-button type="link" size="small" @click="listDesign(record)">
            {{ readOnly ? '列表查看' : '列表设计' }}
          </a-button>
        </template>
      </sd-data-table-ex>

      <a-button slot="footer" @click="() => (visible = false)">退出</a-button>
    </a-modal>

    <!-- 列表配置 -->
    <sd-business-list-config ref="listConfig" :read-only="readOnly" />
  </div>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import TableColumnTypes from '@/common/services/table-column-types'
import components from './_import-components/sd-form-list-config-import'

export default {
  name: 'SdFormListConfig',
  components,
  props: {
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      form: {},
      columns: [
        {
          title: '列表名称',
          dataIndex: 'name',
          sdClickable: true,
        },
        {
          title: '列表描述',
          dataIndex: 'listDesc',
        },
        {
          title: '排序号',
          dataIndex: 'sortNumber',
          defaultSortOrder: 'ascend',
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.dateTime,
        },
        {
          title: '操作',
          dataIndex: 'id',
          defaultSortOrder: 'ascend',
          scopedSlots: { customRender: 'operate' },
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete,
        },
      ],
    }
  },
  computed: {
    expressions() {
      return [
        {
          dataType: 'str',
          name: 'appModuleId',
          op: 'eq',
          stringValue: this.form.id,
        },
      ]
    },
    computedPageId() {
      return `app/appformlist/weAppFormList${this.readOnly ? '?mode=VIEW' : ''}`
    },
  },
  methods: {
    show(form) {
      this.form = form
      this.visible = true
    },
    listDesign(record) {
      this.$refs.listConfig.show({
        id: this.form.id,
        formListId: record.id,
        isFlow: this.form.isFlow,
        isOnline: this.form.isOnline,
      })
    },
  },
}
</script>

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