<template>
    <el-dialog :title="title" top="80px" :visible.sync="dialogVisible" @open="reset">
        <h3 style="color: #3F9EFF;">
            基本信息设置
        </h3>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入员工姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">&nbsp;</el-col>
                <el-col :span="10">
                    <el-form-item label="员工编号" prop="code">
                        <el-input v-model="form.code" placeholder="请输入员工编号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">&nbsp;</el-col>
                <el-col :span="10"> <el-form-item label="员工账号" prop="account">
                        <el-input v-model="form.account" placeholder="请输入员工账号，建议使用手机号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10"> <el-form-item label="登录密码">
                        <el-input type="password" v-model="form.password" placeholder="请输入登录密码，不填默认123456" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">&nbsp;</el-col>
                <el-col :span="10">
                    <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-col>
            </el-row>

            <el-row>
                <el-col :span="10">
                    <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-col>
                <el-col :span="4">&nbsp;</el-col>
                <el-col :span="10">
                    <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-col>
            </el-row>
            <h3 style="color: #3F9EFF;">
                员工权限设置
            </h3>
            <div v-for="item in form.permissions" :key="item.id">
                <h4 >{{ item.label }}</h4>
                <el-checkbox v-for="ele in item.children" :true-label="1" :style="{color: ele.isImportant==1?'#e66c6d':''}" :false-label="0" v-model="ele.hasPermission"
                    :key="ele.id" :label="ele.label"></el-checkbox>
            </div>
        </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, tbShopPermissionlist } from '@/api/shop.js'
export default {
    data() {
        return {
            dialogVisible: false,
            loading: false,
            form: {
                id: '',
                name: '',
                code: '',
                account: '',
                discountType: '',
                maxDiscountAmount: '',
                status: 1,
                isPc: 1,
                isManage: 1,
                roleId: '',
                phone: '',
                password: '',
                checkList: ['选中且禁用', '复选框 A']
            },
            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
                        if (this.form.id) {
                            this.form.staff_id = this.form.id
                        }
                        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()
                this.getList()
            }
        },
        // 获取员工信息
        async getList() {
            const res = await tbShopPermissionlist()
            this.$set(this.form, 'permissions', res)
        },
        // 通过id获取员工信息
        async tbPlussShopStaffDetail(id) {
            try {
                const res = await tbPlussShopStaffDetail(id)
                this.form = res
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>
<style>
el-dialog {
    padding-top: 6vh !important;
}
</style>