<template>
  <el-dialog v-dialogDrag :title="this.$t('orderAuthor.oneClickGenerationPermission')" :visible.sync="dialogShow" width="500px" :before-close="handleClose">
    <div>
      <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="saveAs">{{ $t('map.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updataCommodityList } from '@/api/management/goods';

export default {
    name: 'Edit',
    data() {
        return {
            dialogShow: false,
            loading: false,
            formModel: {
                id: '',
                name: '',
                price: 0
                // remarks: ''
            }
        };
    },
    computed: {
        form() {
            return {
                labelWidth: '110px',
                items: [
                    { prop: 'name', label: this.$t('orderAuthor.commodityName') + ':', type: 'text', required: false },
                    { prop: 'price', label: this.$t('orderAuthor.price') + ':', type: 'number', required: false, min: 0.01, message: this.$t('global.yuan') }
                    // { prop: 'remarks', label: this.$t('orderAuthor.describtion') + ':', type: 'textarea', required: false }
                ]

            };
        },
        rules() {
            return {
                name: [
                    { required: true, message: this.$t('rules.goodsNameInput'), trigger: 'blur' }
                ],
                price: [
                    { required: true, message: this.$t('rules.totalPriceInput'), trigger: 'change' },
                    {
                        validator(rule, value, callback) {
                            if (Number(value) >= 0) {
                                if (String(value).split('.')[1] && String(value).split('.')[1].length > 2) {
                                    callback(new Error(this.$t('rules.totalPriceInputError1')));
                                } else {
                                    callback();
                                }
                            } else {
                                callback(new Error(this.$t('rules.totalPriceInputError2')));
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            };
        }
    },
    methods: {
        doShow(data) {
            this.dialogShow = true;
            this.formModel = {
                id: data.goods.id,
                name: data.name,
                price: data.price
                // remarks: data.remarks
            };
        },
        close() {
            this.formModel = {
                id: '',
                name: '',
                price: 0
                // remarks: ''
            };
            this.dialogShow = false;
            this.loading = false;
        },
        handleClose() {
            this.close();
        },
        buildModel() { // 构造基础数据
            return {
                id: this.formModel.id,
                name: this.formModel.name,
                price: this.formModel.price
                // remarks: this.formModel.remarks
            };
        },
        saveAs() {
            this.$refs.dataform.validateForm(() => {
                this.loading = true;
                updataCommodityList(this.buildModel()).then(response => {
                    this.$message.success(this.$t('tip.updateSuccessfully'));
                    this.$emit('reloadTable', this.buildModel());
                    this.handleClose();
                }).catch(() => {
                    this.$messageBox(this.$t('tip.updateFailed'));
                    this.handleClose();
                });
            });
        }
    }
};
</script>
