<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form
      ref="form"
      label-width="120px"
      :model="form"
      :rules="rules"
      size="medium"
    >
      <el-form-item :label="__('分类父名称')" prop="store_category_parent_id">
        <el-input
          v-model="form.store_category_parent_id"
          :placeholder="__('请输入分类父名称')"
          readonly
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item :label="__('店铺分类名称')" prop="store_category_name">
        <el-input
          v-model="form.store_category_name"
          clearable
          :placeholder="__('请输入店铺分类名称')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="分账比例" prop="store_category_name">
        <el-input
          v-model="form.split_ratio"
          clearable
          placeholder="请输入分账比例"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item :label="__('分类图片')" prop="category_image" required>
        <upload
          height="100px"
          :image="form.category_image"
          width="100px"
          @upImage="
            (image) => {
              form.category_image = image
            }
          "
        />
      </el-form-item>
      <el-form-item :label="__('保证金数额')" prop="store_category_deposit">
        <el-input
          v-model.number="form.store_category_deposit"
          clearable
          :placeholder="__('请输入保证金数额')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item :label="__('排序')" prop="store_category_order">
        <el-input
          v-model.number="form.store_category_order"
          clearable
          :placeholder="__('请输入排序')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="" prop="category_is_enable" required>
        <el-switch
          v-model="form.category_is_enable"
          :active-text="__('显示')"
          :active-value="1"
          :inactive-text="__('不显示')"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { translateTitle as __ } from '@/utils/i18n'
import { doEdit } from '@/api/base/store/category'
import Upload from '@/components/upload'

export default {
  name: 'BaseStoreCategoryEdit',
  components: { Upload },
  data() {
    return {
      form: {
        category_image: '',
        category_is_enable: true,
      },
      rules: {
        store_category_parent_id: [
          {
            required: true,
            message: this.__('请输入分类父名称'),
            trigger: 'blur',
          },
        ],
        store_category_name: [
          {
            required: true,
            message: this.__('请输入店铺名称'),
            trigger: 'blur',
          },
        ],
        store_category_deposit: [
          {
            required: true,
            message: this.__('请输入保证金数额'),
            trigger: 'blur',
          },
        ],
        category_image: [
          {
            required: true,
            message: this.__('请选择上传图片'),
            trigger: 'blur',
          },
        ],
        store_category_order: [
          {
            required: true,
            message: this.__('请输入排序'),
            trigger: 'blur',
          },
        ],
      },
      title: '',
      dialogFormVisible: false,
    }
  },
  created() {},
  methods: {
    __,
    showEdit(row, store_category_parent_id) {
      if (store_category_parent_id === 0 || store_category_parent_id) {
        this.title = this.__('添加')
        this.form.store_category_parent_id = store_category_parent_id
      } else {
        this.title = this.__('编辑')
        const obj = Object.assign({}, row)
        this.form = {
          store_category_id: obj.store_category_id,
          store_category_parent_id: obj.store_category_parent_id,
          category_is_enable: obj.category_is_enable,
          store_category_order: obj.store_category_order,
          store_category_deposit: obj.store_category_deposit,
          store_category_name: obj.store_category_name,
          category_image: obj.category_image,
          split_ratio: obj.split_ratio,
        }
      }
      this.dialogFormVisible = true
    },
    close() {
      this.form = {
        category_image: '',
        category_is_enable: true,
      }
      this.$refs['form'].resetFields()
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const { msg, status } = await doEdit(this.form)
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          this.$emit('fetch-data')
          this.close()
        } else {
          return false
        }
      })
    },
  },
}
</script>
