import {
  serviceCategoryAdd,
  serviceCategoryUpdate,
  serviceCategoryDel,
  serviceCategoryDetail
} from '@/api/tradeInConfig.js'
import ImageUpload from '@/components/file-upload'
import { required } from '@/components/template/rules_verify.js'
export default {
  components: { ImageUpload },
  data() {
    return {
      formDialog: false,
      formData: {
        level: 0,
        name: '',
        parentId: 0,
        sortNum: 0,
        status: true,
        typeAttribute: '',
        typeOption: '',
        // type: '',
        // indexSort: 0,
        // imgUrl: []
      }
    }
  },
  computed: {
    formItems() {
      return [
        {
          isShow: !!~[2, 3].indexOf(this.formData.level),
          name: 'el-select',
          md: 24,
          formItemAttributes: {
            label: '上级名称',
            prop: 'parentId',
            rules: [...required]
          },
          options: this.list.map(item => ({ label: item.name, value: item.categoryId })),
          attributes: { disabled: true, clearable: true, filterable: true, placeholder: '请选择' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
          formItemAttributes: {
            label: "类型名称",
            prop: 'name',
            rules: [...required]
          }
        },
        // {
        //   md: 24,
        //   isShow: !!~[2].indexOf(this.formData.level),
        //   name: 'slot-component',
        //   formItemAttributes: {
        //     prop: 'imgUrl',
        //     label: '分类图片',
        //     rules: [...required]
        //   },
        //   render: (h, { props, onInput }) => {
        //     var { value } = props
        //     return <ImageUpload fileList={this.formData.imgUrl} limit={1} isEdit={true} />
        //   }
        // },
        {
          isShow: !!~[3].indexOf(this.formData.level),
          md: 24,
          name: 'el-radio',
          options: [
            { label: '单选', value: 'SIGIN' },
            { label: '多选', value: 'MANY' }
          ],
          attributes: { disabled: this.formData.id ? true : false },
          formItemAttributes: {
            label: '选项属性',
            prop: 'typeOption',
            rules: [...required]
          }
        },
        {
          isShow: !!~[3].indexOf(this.formData.level),
          md: 24,
          name: 'el-radio',
          options: [
            { label: '规格', value: 'SPEC' },
            // { label: '增减参考金额', value: 'DED' },
            { label: '其他', value: 'OTHER' }
          ],
          attributes: { disabled: this.formData.id ? true : false },
          formItemAttributes: {
            label: '属性类型',
            prop: 'typeAttribute',
            rules: [...required]
          }
        },
        {
          md: 24,
          name: 'el-radio',
          options: [
            { label: '有效', value: true },
            { label: '无效', value: false }
          ],
          attributes: {},
          formItemAttributes: {
            label: '状态',
            prop: 'status',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
          formItemAttributes: {
            label: '排序',
            prop: 'sortNum',
            rules: []
          }
        },
        // {
        //   isShow: !!~[2].indexOf(this.formData.level),
        //   name: 'el-input',
        //   md: 12,
        //   attributes: { disabled: false, placeholder: '请输入', maxlength: 11 },
        //   formItemAttributes: {
        //     label: '首页顺序',
        //     prop: 'indexSort',
        //     rules: []
        //   }
        // }
      ]
    }
  },
  methods: {
    // 添加一级
    addL1Class() {
      this.formData.level = 1
      this.formDialog = true
    },
    // 添加二三级
    addChClass(row) {
      this.formData.level = row.level + 1
      this.formData.parentId = row.categoryId
      this.formDialog = true
    },
    // 编辑
    editClass(row) {
      serviceCategoryDetail({ categoryId: row.categoryId }).then(res => {
        Object.assign(
          this.formData,
          { ...res.data },
          // {
          //   imgUrl: res.data.imgUrl ? res.data.imgUrl.split(',').map(u => ({ imgUrl: u })) : [],
          //   children: undefined
          // }
        )
        this.formDialog = true
      })
    },
    // 删除
    handleDelete(row) {
      serviceCategoryDel({ categoryId: row.categoryId }).then(res => {
        this.$message({
          type: 'success',
          message: `删除成功!`
        })
        this.getList()
      })
    },
    // 关闭窗口
    formCancel() {
      this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    // 确定保存
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ;[serviceCategoryAdd, serviceCategoryUpdate]
          [this.formData.id ? 1 : 0]({
            ...this.formData,
            // imgUrl: this.formData.imgUrl.map(item => item.imgUrl).join(','),
            // ...(() => {
            //   if (this.formData.level == 3) {
            //     return {
            //       categoryType: 'A'
            //     }
            //   } else {
            //     return {}
            //   }
            // })()
          })
            .then(res => {
              this.$message({
                type: 'success',
                message: `保存成功!`
              })
              this.formCancel()
              this.getList()
            })
        }
      })
    }
  }
}