<template>
    <el-dialog title="添加支付方式" :visible.sync="dialogVisible" :show-close="false" @close="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
            <el-form-item label="支付类型" prop="payType">
                <el-select v-model="form.payType" placeholder="请选择支付类型" @change="typeChange">
                    <el-option :label="item.lable" :value="item.key" v-for="item in payTypes"
                        :key="item.key"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付方式" prop="payName" v-if="form.payType == 'virtual'">
                <el-input v-model="form.payName" placeholder="请输入自定义支付方式"></el-input>
            </el-form-item>
            <!-- <el-form-item label="图标" prop="icon">
                <uploadImg ref="uploadImg" :limit="9" @success="e => form.icon = e[0]" />
            </el-form-item> -->
            <el-form-item label="是否虚拟">
                <el-radio-group v-model="form.isIdeal">
                    <el-radio :label="1">虚拟</el-radio>
                    <el-radio :label="0">非虚拟</el-radio>
                </el-radio-group>
                <div class="tips">虚拟：微信、支付宝支付等。 非虚拟：现金</div>
            </el-form-item>
            <el-form-item label="开钱箱权限">
                <el-switch v-model="form.isOpenCashDrawer" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="是否生效">
                <el-switch v-model="form.isDisplay" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="form.sorts" controls-position="right" :min="0"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitHandle" :loading="formLoading">
                <span v-if="!formLoading">保存</span>
                <span v-else>保存中...</span>
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import uploadImg from '@/components/uploadImg'
import { tbShopPayType } from '@/api/setting'
import payTypes from '../payTypes'

export default ({
    components: { uploadImg },
    data() {
        const validateIcon = (rule, value, callback) => {
            if (!this.form.icon) {
                callback(new Error('请上传图标'))
            } else {
                callback()
            }
        }
        return {
            payTypes,
            dialogVisible: false,
            formLoading: false,
            resetForm: '',
            form: {
                id: '',
                icon: '',
                shopId: localStorage.getItem('shopId'),
                payType: '',
                payName: '',
                isIdeal: 1,
                isOpenCashDrawer: 1,
                isDisplay: 1,
                sorts: 0
            },
            rules: {
                payType: [
                    {
                        required: true,
                        message: ' ',
                        triiger: 'blur'
                    }
                ],
                payName: [
                    {
                        required: true,
                        message: ' ',
                        triiger: 'blur'
                    }
                ],
                icon: [
                    {
                        required: true,
                        validator: validateIcon,
                        triiger: 'change'
                    }
                ]
            }
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
    },
    methods: {
        typeChange(e) {
            this.form.icon = payTypes.find(item => item.key == e).icon
            if (e == 'virtual') {
                this.form.payName = ''
            } else {
                this.form.payName = payTypes.find(item => item.key == e).lable
            }
        },
        // 保存
        submitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.formLoading = true
                        await tbShopPayType(this.form, this.form.id ? 'put' : 'post')
                        this.$emit('success')
                        this.formLoading = false
                        this.$notify({
                            title: '成功',
                            message: `${this.form.pid ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                        this.close()
                    } catch (error) {
                        this.formLoading = false
                        console.log(error)
                    }
                }
            })
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
            // this.$refs.uploadImg.fileList = []
        },
        show(obj) {
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form.id = obj.id
                this.form.icon = obj.icon
                this.form.payType = obj.payType
                this.form.payName = obj.payName
                this.form.isIdeal = obj.isIdeal
                this.form.isOpenCashDrawer = obj.isOpenCashDrawer
                this.form.isDisplay = obj.isDisplay
                this.form.sorts = obj.sorts

                // if (obj.icon) {
                //     setTimeout(() => {
                //         this.$refs.uploadImg.fileList = [{
                //             url: obj.icon
                //         }]
                //     }, 100);
                // }
            }
        }
    }
})
</script>