<template>
  <div>
    <div class="info-header">
      <p class="info-title info-title-line">基础信息</p>
    </div>
    <el-divider class="mini-divider-table" />
    <el-form
      ref="form"
      class="standard-form"
      :model="localFormState"
      :rules="rules"
      size="mini"
      label-width="100px"
    >
      <el-form-item label="玩具名称" prop="kindergartenToyName">
        <el-input v-model="localFormState.kindergartenToyName" clearable placeholder="请输入玩具名称" />
      </el-form-item>
      <el-form-item label="玩具品牌">
        <select-toy-brand v-model="localFormState.kindergartenToyBrandId" />
      </el-form-item>
      <el-form-item label="封面图" prop="kindergartenFileId">
        <upload-toy-img :file-list.sync="fileList" :form-state.sync="formState" />
      </el-form-item>
      <slot />
    </el-form>
  </div>
</template>
<script>
import SelectToyBrand from '@/components/Select/SelectToyBrand.vue'
import options from '@/utils/dict/options'
import { fetchFileUrl } from '@/utils'
import UploadToyImg from '@/components/Upload/UploadToyImg.vue'
const toyReleaseClassOptions = options.toyReleaseClass

const initCategoryItem = () => {
  return {
    key: Math.random(),
    putAreaCode: null, // 放置区域
    putAreaName: null, // 放置区域
    toyCategoryCode: null, // 玩具大类
    toyCategoryName: null, // 玩具大类
    detailCategoryCode: null, // 细分种类
    detailCategoryName: null, // 细分种类
    developmentGoalsCode: null, // 发展目标
    developmentGoalsName: null // 发展目标
  }
}

export default {
  name: 'EditBasic',
  components: {
    UploadToyImg,
    SelectToyBrand
  },
  props: {
    formState: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      toyReleaseClassOptions,
      fileList: [],
      loading: false,
      rules: {
        kindergartenToyName: [
          { required: true, message: '玩具名称不能为空', trigger: 'blur' },
          { max: 16, message: '玩具名称长度不能超过16位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    localFormState() {
      return this.formState
    }
  },
  watch: {
    formState: {
      handler(val) {
        if (val.fileId) {
          fetchFileUrl(val.fileId, val.kindergartenToyCoverUrl).then(data => {
            this.fileList = data
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleAddCategory(cate) {
      if (this.localFormState.toyCateList.length < 3) this.localFormState.toyCateList.push(initCategoryItem())
    },
    handleRemoveCategory(option) {
      this.localFormState.toyCateList = this.localFormState.toyCateList.filter(item => item.key !== option.key)
    },
    onSubmit() {
      return new Promise(resolve => {
        this.$refs.form.validate(valid => {
          let values = null
          if (valid) {
            const form = JSON.parse(JSON.stringify(this.localFormState))
            values = Object.assign({}, form)
          }
          resolve({
            valid,
            values
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.category-flex {
  display: flex;
  align-items: center;
}
.category-wrapper {
  width: calc(100% - 86px);
}
.category-options {
  width: 86px;
  text-align: center;
}
</style>
