<template>
  <form-list ref="form" :items="formItems">
    <template #code="{ item }">
      <v-textarea
        outlined
        no-resize
        hide-details
        rows="5"
        v-model="item.value"
        :label="item.label"
      >
        <template #append>
          <v-btn class="ml-5" small color="primary" @click="handleCodeGenerate">代码生成</v-btn>
        </template>
      </v-textarea>
    </template>
    <template #tag="{ item }">
      <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
        <v-chip-group
          v-if="item.items.length"
          v-model="item.value"
          multiple
          column
          active-class="primary--text"
        >
          <v-chip v-for="tag in item.items" :key="tag.id" filter :value="tag">
            {{ tag.name_zh }}
          </v-chip>
        </v-chip-group>
        <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
      </div>
    </template>
    <v-overlay :value="overlay">
      <div class="d-flex flex-column align-center justify-center" style="width: 300px;">
        <div class="mb-3">生成操作代码中</div>
        <v-progress-linear
          color="primary"
          indeterminate
          rounded
          height="6"
        ></v-progress-linear>
      </div>
    </v-overlay>
  </form-list>
</template>

<script>
import FormList from '@/components/Form/list'
import {
  metadata
} from '@/utils/dataGovernance'
import { api } from '@/api/dataGovernance'
export default {
  name: 'data-standard-edit',
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  components: { FormList },
  data () {
    return {
      overlay: false,
      formItems: {
        options: [
          {
            type: 'text',
            key: 'name_zh',
            value: null,
            label: '名称 *',
            placeholder: '请输入名称',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入名称']
          },
          {
            type: 'autocomplete',
            key: 'category',
            value: null,
            label: '分类 *',
            placeholder: '请选择分类',
            outlined: true,
            dense: true,
            items: metadata,
            rules: [v => !!v || '请选择分类']
          },
          {
            type: 'text',
            key: 'scope',
            value: null,
            outlined: true,
            dense: true,
            label: '适用范围',
            placeholder: '请输入适用范围'
          },
          {
            // type: 'autocomplete',
            slotName: 'tag',
            key: 'tag',
            value: [],
            slotTitle: '请选择标签',
            slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px',
            // label: '请选择标签',
            // outlined: true,
            // returnObject: true,
            // multiple: true,
            // dense: true,
            // itemText: 'name_zh',
            // itemValue: 'id',
            items: []
          },
          {
            type: 'text',
            key: 'input',
            value: null,
            label: '输入参数 *',
            col: 6,
            outlined: true,
            dense: true,
            // items: [], // 输入元数据
            rules: [v => !!v || '请输入输入参数']
          },
          {
            type: 'text',
            key: 'output',
            value: null,
            label: '输出参数 *',
            col: 6,
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入输出参数']
          },
          {
            type: 'text',
            key: 'describe',
            value: null,
            label: '描述 *',
            placeholder: '请输入描述',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入描述']
          },
          {
            slotName: 'code',
            // type: 'textarea',
            key: 'code',
            value: null,
            label: '操作代码 *',
            // outlined: true,
            // dense: true,
            rules: [v => !!v || '请输入操作代码']
          },
          {
            type: 'ifRadio',
            key: 'status',
            value: true,
            label: '启用',
            width: 120,
            items: [{ label: '是', value: true }, { label: '否', value: false }]
          }
        ]
      }
    }
  },
  created () {
    this.init()
    if (!Object.keys(this.itemData).length) {
      return
    }
    this.formItems.options.forEach(item => {
      // if (item.key === 'tag') {
      //   item.value = this.itemData.tag.id
      //   return
      // }
      item.value = this.itemData[item.key]
    })
  },
  methods: {
    async init () {
      try {
        this.loading = true
        try {
          const { data } = await api.getLabelList({
            ...this.pageInfo,
            category_filter: 'DataOps'
          })
          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)
      }
    },
    async handleCodeGenerate () {
      const { input, output, describe } = this.formItems.options.reduce((acc, cur) => {
        acc[cur.key] = cur.value
        return acc
      }, {})
      if (!input) {
        this.$snackbar.error('输入参数不能为空')
        return
      }
      if (!output) {
        this.$snackbar.error('输出参数不能为空')
        return
      }
      if (!describe) {
        this.$snackbar.error('请输入描述')
        return
      }
      this.overlay = true
      try {
        const { data } = await api.dataStandardCodeGenerate({ input, output, describe })
        this.formItems.options.find(e => e.key === 'code').value = data
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.overlay = false
      }
    },
    async getValue () {
      if (!this.$refs.form.validate()) {
        return
      }
      if (!this.formItems.options.find(e => e.key === 'code').value) {
        await this.handleCodeGenerate()
      }
      return this.formItems.options.reduce((res, item) => {
        // if (item.key === 'tag' && item.value) {
        //   res.tag = {
        //     id: item.value,
        //     name_zh: item.items.find(e => e.id === item.value)?.name_zh ?? null
        //   }
        //   return res
        // }
        res[item.key] = item.value
        return res
      }, {})
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
