<template>
  <div>
    <m-form ref="form" :items="formItems" v-model="formValues">
    </m-form>
  </div>
</template>

<script>
import MForm from '@/components/MForm'
import {
  metadata,
  frequency,
  sensitivity
} from '@/utils/dataGovernance'
import {
  getDatasourceList
} from '@/api/dataOrigin'
import { api } from '@/api/dataGovernance'
export default {
  name: 'edit-base',
  props: {
    names: {
      type: Object,
      default: () => ({})
    },
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  components: { MForm },
  data () {
    return {
      formValues: {
        name: '数据资源_' + new Date().getTime(),
        en_name: null,
        category: '应用类',
        organization: this.$store.getters.userInfo.username,
        leader: this.$store.getters.userInfo.username,
        frequency: '日',
        data_sensitivity: '低',
        chooseStorage: true,
        storage_location: '/',
        tag: null,
        describe: null,
        status: true
      },
      pageInfo: {
        size: 999,
        current: 1
      },
      loading: false,
      labelItems: [],
      dataSourceItems: []
    }
  },
  computed: {
    formItems () {
      return [
        {
          type: 'text',
          key: 'name',
          label: '请输入名称 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入名称']
        },
        {
          type: 'text',
          key: 'en_name',
          label: '请输入英文名称 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入名称']
        },
        {
          type: 'autocomplete',
          key: 'category',
          label: '请选择分类 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请选择分类'],
          items: metadata
        },
        {
          type: 'text',
          key: 'organization',
          label: '请输入所属机构 *',
          // col: 6,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入所属机构']
        },
        {
          type: 'text',
          key: 'leader',
          label: '请输入负责人 *',
          outlined: true,
          dense: true,
          rules: [v => !!v || '请输入负责人']
        },
        {
          type: 'autocomplete',
          key: 'frequency',
          label: '请选择更新频率 *',
          noAttach: true,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请选择更新频率'],
          items: frequency
        },
        {
          type: 'autocomplete',
          key: 'data_sensitivity',
          label: '请选择数据敏感度 *',
          noAttach: true,
          outlined: true,
          dense: true,
          rules: [v => !!v || '请选择数据敏感度'],
          items: sensitivity
        },
        {
          type: 'ifRadio',
          key: 'chooseStorage',
          label: '使用数据源',
          width: 120,
          items: [{ label: '是', value: true }, { label: '否', value: false }]
        },
        {
          type: 'text',
          key: 'storage_location',
          hide: this.formValues.chooseStorage,
          outlined: true,
          dense: true,
          label: '请输入存储位置 *',
          rules: [v => !!v || '请输入存储位置']
        },
        {
          type: 'autocomplete',
          key: 'data_source',
          label: '请选择数据源',
          hide: !this.formValues.chooseStorage,
          noAttach: true,
          outlined: true,
          dense: true,
          items: this.dataSourceItems
        },
        {
          type: 'autocomplete',
          key: 'tag',
          label: '请选择标签',
          noAttach: true,
          outlined: true,
          dense: true,
          itemText: 'name',
          itemValue: 'id',
          items: this.labelItems
        },
        {
          type: 'text',
          key: 'describe',
          outlined: true,
          dense: true,
          label: '请输入描述'
        },
        // {
        //   type: 'ifRadio',
        //   key: 'addLine',
        //   value: true,
        //   label: '添加生产线',
        //   width: 120,
        //   items: [{ label: '是', value: true }, { label: '否', value: false }]
        // },
        {
          type: 'ifRadio',
          key: 'status',
          label: '启用',
          width: 120,
          items: [{ label: '是', value: true }, { label: '否', value: 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()
    if (!Object.keys(this.itemData).length) {
      return
    }
    // const objItems = ['parentId', 'tag']
    Object.keys(this.formValues).forEach(key => {
      if (key === 'tag') {
        this.formValues[key] = this.itemData[key]?.id || null
        return
      }
      if (Object.prototype.hasOwnProperty.call(this.itemData, key)) {
        this.formValues[key] = this.itemData[key]
        // if (objItems.includes(key) && this.itemData[key]) {
        //   this.formValues[key] = this.itemData[key]?.id
        //   if (Object.prototype.hasOwnProperty.call(item, 'search')) {
        //     item.search = this.itemData[item.key]?.name
        //   }
        //   return
        // }
        // item.value = this.itemData[item.key]
      }
    })
    // this.formItems.options.forEach(item => {
    //   if (Object.prototype.hasOwnProperty.call(this.itemData, item.key)) {
    //     if (objItems.includes(item.key) && this.itemData[item.key]) {
    //       item.value = this.itemData[item.key]?.id
    //       if (Object.prototype.hasOwnProperty.call(item, 'search')) {
    //         item.search = this.itemData[item.key]?.name
    //       }
    //       return
    //     }
    //     item.value = this.itemData[item.key]
    //   }
    // })
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.dataLabelList({
            ...this.pageInfo
          })
          this.labelItems = data.records
          const { data: dataSource } = await getDatasourceList({
            ...this.pageInfo
          })
          this.dataSourceItems = dataSource.data_source
        } 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.formValues

      // return this.formItems.reduce((res, item) => {
      //   if (item.hide) {
      //     return res
      //   }
      //   res[item.key] = item.value
      //   return res
      // }, {})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
