<template>
  <sd-form ref="form" :init-values="form">
    <template v-slot="{ model }">
      <sd-form-item name="keyId">
        <sd-tree-picker
          v-model="model.keyId"
          :load-tree-data="loadTreeData"
          single
          option-value="id"
          option-label="text"
        />
      </sd-form-item>
      <sd-form-item name="id" :label="'\u2003ID\u2003'">
        <a-input v-if="!model.props" :value="model.id | idFilter" disabled></a-input>
        <a-input v-else v-model="model.id"></a-input>
      </sd-form-item>
      <sd-form-item name="name" />
      <sd-form-item name="index" />
      <div v-if="!classify" class="form_sd-form_common">
        <sd-form-item v-for="(item, index) in 8" :key="index" :name="'param' + index" />
      </div>
    </template>
  </sd-form>
</template>

<script>
import SysparamsService from './sysparams-service'
import components from './_import-components/sd-sysparams-form-import'

export default {
  name: 'SdSysparamsForm',
  metaInfo: {
    title: 'SdSysparamsForm',
  },
  components,
  filters: {
    idFilter(value) {
      if (value) return value.slice(1)
      return value
    },
  },
  props: {
    classify: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: [
        {
          name: 'keyId',
          caption: '上级字典项',
          dataType: 'string',
          required: true,
        },
        {
          name: 'id',
          caption: 'ID',
          dataType: 'strng',
          required: true,
        },
        {
          name: 'name',
          caption: '显示名称',
          dataType: 'strng',
          required: true,
        },
        {
          name: 'index',
          caption: '序号',
          dataType: 'number',
          required: true,
        },
        {
          name: 'param0',
          caption: '配置参数0',
          dataType: 'string',
        },
        {
          name: 'param1',
          caption: '配置参数1',
          dataType: 'string',
        },
        {
          name: 'param2',
          caption: '配置参数2',
          dataType: 'string',
        },
        {
          name: 'param3',
          caption: '配置参数3',

          dataType: 'string',
        },
        {
          name: 'param4',
          caption: '配置参数4',
          dataType: 'string',
        },
        {
          name: 'param5',
          caption: '配置参数5',
          dataType: 'string',
        },
        {
          name: 'param6',
          caption: '配置参数6',
          dataType: 'string',
        },
        {
          name: 'param7',
          caption: '配置参数7',
          dataType: 'string',
        },
        {
          name: 'props',
          dataType: 'string',
        },
      ],
    }
  },
  methods: {
    loadTreeData() {
      return SysparamsService.getTreeData().then((res) => {
        if (res.data.length) {
          res.data.forEach((item) => {
            item.isLeaf = item.leaf
          })
          return res.data
        }
      })
    },
    getFieldsValue() {
      return this.$refs.form.getFieldsValue()
    },
    setFieldsValue(values) {
      return this.$refs.form.setFieldsValue(values)
    },
    validateFields() {
      return this.$refs.form.validateFields()
    },
  },
}
</script>

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