<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-form
      ref="form"
      label-width="100px"
      :model="form"
      :rules="rules"
      size="medium"
    >
      <el-form-item
        :label="__('商品分类父编号')"
        label-width="110px"
        prop="category_parent_id"
      >
        <el-input
          v-model="form.category_parent_id"
          clearable
          :disabled="true"
          :placeholder="__('请选择商品分类父编号')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item
        :label="__('商品分类名称')"
        label-width="110px"
        prop="category_name"
      >
        <el-input
          v-model="form.category_name"
          clearable
          :placeholder="__('请输入商品分类名称')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item
        :label="__('分类图片')"
        label-width="110px"
        prop="category_image"
      >
        <upload
          height="100px"
          :image="form.category_image"
          width="100px"
          @upImage="
            (image) => {
              form.category_image = image
            }
          "
        />
      </el-form-item>
      <el-form-item :label="__('商品类型')" label-width="110px" prop="type_id">
        <el-select
          v-model="form.type_id"
          clearable
          :disabled="form.type_id_disable"
          :placeholder="__('请选择商品类型')"
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in type_idOptions"
            :key="index"
            :disabled="item.disabled"
            :label="item.type_name"
            :value="item.type_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="__('允许虚拟商品')"
        label-width="110px"
        prop="category_virtual_enable"
      >
        <el-radio-group v-model="form.category_virtual_enable" size="medium">
          <el-radio
            v-for="(item, index) in category_virtual_enableOptions"
            :key="index"
            :disabled="item.disabled"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="__('分佣比例')"
        label-width="110px"
        prop="category_commission_rate"
      >
        <el-input
          v-model="form.category_commission_rate"
          clearable
          :placeholder="__('请输入分佣比例')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item
        :label="__('移动分类模版')"
        label-width="110px"
        prop="page_id"
      >
        <el-select
          v-model="form.page_id"
          clearable
          :placeholder="__('请选择模版')"
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="item in templateOptions"
            :key="item.page_id"
            :label="item.page_name"
            :value="item.page_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="__('排序')"
        label-width="110px"
        prop="category_order"
      >
        <el-input
          v-model.number="form.category_order"
          clearable
          :placeholder="__('请输入排序')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/base/product/category'
  import { getListS } from '@/api/base/product/type'
  import { translateTitle as __ } from '@/utils/i18n'
  import Upload from '@/components/upload'
  import {getList as getTemplates} from "@/api/page/base";

  export default {
    name: 'CategoryManagementEdit',
    components: { Upload },
    data() {
      return {
        form: {
          category_image: '',
          category_virtual_enable: 0,
          type_id_disable: false,
        },
        rules: {
          category_parent_id: [],
          category_name: [
            {
              required: true,
              message: this.__('请输入商品分类名称'),
              trigger: 'blur',
            },
          ],
          category_virtual_enable: [
            {
              required: true,
              message: this.__('是否允许虚拟商品不能为空'),
              trigger: 'change',
            },
          ],
          page_id: [],
        },
        category_parent_idOptions: [
          {
            label: this.__('选项一'),
            value: 1,
          },
          {
            label: this.__('选项二'),
            value: 2,
          },
        ],
        type_idOptions: [],
        category_virtual_enableOptions: [
          {
            label: this.__('是'),
            value: 1,
          },
          {
            label: this.__('否'),
            value: 0,
          },
        ],
        title: '',
        dialogFormVisible: false,
        templateOptions:[],
      }
    },
    created() {
      this.initType()
      this.getTemplateList()
    },
    methods: {
      __,
      showEdit(row, category_parent_id) {
        if (category_parent_id === 0 || category_parent_id) {
          this.title = this.__('新增')
          this.form.category_parent_id = category_parent_id
        } else {
          this.title = this.__('编辑')
          this.formAssign(row)
        }
        this.dialogFormVisible = true
      },
      formAssign(row) {
        this.form = {
          category_parent_id: row.category_parent_id,
          type_id: row.type_id,
          type_id_disable: false,
          category_name: row.category_name,
          category_image: row.category_image,
          category_virtual_enable: row.category_virtual_enable,
          category_commission_rate: row.category_commission_rate,
          category_order: row.category_order,
          page_id: row.page_id,
          category_id: row.category_id,
        }
      },
      close() {
        this.form = {
          category_image: '',
          category_virtual_enable: 0,
        }
        this.$refs['form'].resetFields()
        this.form.category_id = null
        this.dialogFormVisible = false
      },
      async initType() {
        const { data } = await getListS()
        this.type_idOptions = data
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (!this.form.type_id_disable) {
              this.$baseConfirm(
                this.__('商品类型添加后不可修改，确认新增吗？'),
                null,
                async () => {
                  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 {
              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
          }
        })
      },
      async getTemplateList() {
        let param = {
          pageNum: 1,
          pageSize: 9999,
          page_type: 3,
        }
        const { data } = await getTemplates(param)
        if (data) {
          this.templateOptions = data.items
        } else {
          this.templateOptions = []
        }
      },
    },
  }
</script>
