<template>
  <div>
    <form-list ref="form" :items="formItems">
      <template #childrenId="{ item }">
        <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
      </template>
    </form-list>
  </div>
</template>

<script>

import FormList from '@/components/Form/list'
// import { combinationTagsPage } from '@/api/dataBook'
import {
  metadata,
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
import { api } from '@/api/dataGovernance'
import SearchNodes from '../../components/searchNodes.vue'
export default {
  name: 'edit-base',
  props: {
    // hideEnName: {
    //   type: Boolean,
    //   default: false
    // },
    itemData: {
      type: Object,
      default: () => ({})
    },
    names: {
      type: Object,
      default: () => ({})
    }
  },
  components: { FormList, SearchNodes },
  data () {
    return {
      formItems: {
        options: [
          {
            type: 'text',
            key: 'name',
            value: '数据模型_' + new Date().getTime(),
            label: '请输入名称 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入名称']
          },
          // {
          //   type: 'text',
          //   hide: this.hideEnName,
          //   key: 'en_name',
          //   value: null,
          //   label: '请输入英文名称 *',
          //   outlined: true,
          //   dense: true,
          //   rules: [v => !!v || '请输入英文名称']
          // },
          {
            type: 'autocomplete',
            key: 'category',
            value: '应用类',
            label: '请选择分类 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请选择分类'],
            items: metadata
          },
          {
            type: 'text',
            key: 'organization',
            value: this.$store.getters.userInfo.username,
            label: '请输入所属机构 *',
            // col: 6,
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入所属机构']
          },
          {
            type: 'text',
            key: 'leader',
            value: this.$store.getters.userInfo.username,
            label: '请输入负责人 *',
            // col: 6,
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入负责人']
          },
          {
            key: 'childrenId',
            slotName: 'childrenId',
            search: null,
            options: {
              label: '请选择数据来源',
              attach: true
            },
            value: []
          },
          // {
          //   type: 'number',
          //   key: 'level',
          //   value: 1,
          //   label: '模型层级',
          //   outlined: true,
          //   dense: true,
          //   rules: [v => (/^\d+$/.test(v) && parseInt(v, 10) > 0) || '请填写正确的模型层级']
          // },
          {
            type: 'autocomplete',
            key: 'frequency',
            value: '日',
            label: '请选择更新频率 *',
            // col: 6,
            outlined: true,
            dense: true,
            rules: [v => !!v || '请选择更新频率'],
            items: frequency
          },
          {
            type: 'autocomplete',
            key: 'data_sensitivity',
            value: '低',
            label: '请选择数据敏感度 *',
            // col: 6,
            outlined: true,
            dense: true,
            rules: [v => !!v || '请选择数据敏感度'],
            items: sensitivity
          },
          {
            type: 'autocomplete',
            key: 'tag',
            value: null,
            label: '请选择标签',
            outlined: true,
            dense: true,
            itemText: 'name',
            itemValue: 'id',
            items: []
          },
          {
            type: 'text',
            key: 'describe',
            value: null,
            outlined: true,
            dense: true,
            label: '请输入描述'
          },
          {
            type: 'ifRadio',
            key: 'status',
            value: true,
            label: '启用',
            width: 120,
            items: [{ label: '是', value: true }, { label: '否', value: false }]
          }
        ]
      },
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0,
      loading: false
    }
  },
  watch: {
    names: {
      handler (val) {
        this.formItems.options.forEach(e => {
          if (e.key === 'name' || e.key === 'en_name') {
            e.value = val[e.key] ? val[e.key] : e.value
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.init()
    const val = this.itemData.data_model
    if (!val || !Object.keys(val).length) {
      return
    }
    this.formItems.options.forEach(item => {
      if (!Object.prototype.hasOwnProperty.call(val, item.key)) {
        return
      }
      if (item.key === 'childrenId') {
        if (val.childrenId.length === 1 && val.childrenId[0].id === null) {
          return
        }
        item.value = val.childrenId.map(e => {
          return {
            value: e.id,
            text: e.name
          }
        })
        return
      }
      if (item.key === 'tag') {
        item.value = val.tag?.id ?? null
        return
      }
      item.value = val[item.key]
    })
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.dataLabelList({
            ...this.pageInfo
          })
          this.formItems.options.find(e => e.key === 'tag').items = data.records
          this.total = data.total
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.loading = false
        }
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      return this.formItems.options.reduce((res, item) => {
        if (item.hide) {
          return res
        }
        if (item.key === 'childrenId') {
          res.childrenId = item.value.map(e => e.value)
          return res
        }
        res[item.key] = item.value
        return res
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
