<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" @open="reset">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="员工姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入员工姓名" />
            </el-form-item>
            <el-form-item label="员工编号" prop="code">
                <el-input v-model="form.code" placeholder="请输入员工编号" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="员工账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入员工账号，建议使用手机号" />
            </el-form-item>
            <el-form-item label="登录密码">
                <el-input type="password" v-model="form.password" placeholder="请输入登录密码，不填默认123456" />
            </el-form-item>
            <el-form-item label="优惠类型">
                <el-radio-group v-model="form.discountType" @change="form.maxDiscountAmount = 0">
                    <el-radio-button label="1">折扣</el-radio-button>
                    <el-radio-button label="0">金额</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="最大优惠金额" v-if="form.discountType == 0">
                <el-input-number v-model="form.maxDiscountAmount" controls-position="right" :min="0" :max="100000"
                    :step="0.1" style="width: 200px;"></el-input-number>
            </el-form-item>
            <el-form-item label="最低优惠折扣" v-if="form.discountType == 1">
                <el-input-number v-model="form.maxDiscountAmount" controls-position="right" :min="0" :max="0.99"
                    :step="0.1" style="width: 200px;"></el-input-number>
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
                <el-select v-model="form.roleId" placeholder="请选择角色">
                    <el-option :label="item.name" :value="item.id" v-for="item in roles" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="允许登录PC桌面端">
                <el-switch v-model="form.isPc" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="允许登录管理端">
                <el-switch v-model="form.isManage" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { tbPlussShopStaff, rolesGet, tbPlussShopStaffDetail } from '@/api/shop.js'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            form: {
                id: '',
                name: '',
                code: '',
                account: '',
                discountType: '1',
                maxDiscountAmount: '',
                status: 1,
                isPc: 1,
                isManage: 1,
                roleId: '',
                phone: '',
                password: ''
            },
            resetForm: '',
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                account: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                maxDiscountAmount: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                roleId: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            },
            roles: []
        }
    },
    computed: {
        title() {
            return this.form.id ? '编辑员工' : '添加员工'
        }
    },
    mounted() {
        this.resetForm = { ...this.form }
        this.rolesGet()
    },
    methods: {
        // 添加或编辑员工
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        await tbPlussShopStaff(this.form)
                        this.loading = false
                        this.$emit('success')
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.title}成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        this.loading = false
                        console.log(error);
                    }
                }
            })
        },
        // 获取角色列表
        async rolesGet() {
            try {
                const { content } = await rolesGet()
                this.roles = content
            } catch (error) {
                console.log(error);
            }
        },
        reset() {
            this.form = { ...this.resetForm }
        },
        close() {
            this.dialogVisible = false
        },
        show(row) {
            this.dialogVisible = true
            if (row && row.id) {
                // this.form = { ...row }
                this.tbPlussShopStaffDetail(row.id)
            } else {
                this.reset()
            }
        },
        // 通过id获取员工信息
        async tbPlussShopStaffDetail(id) {
            try {
                const res = await tbPlussShopStaffDetail(id)
                this.form = res
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>