<template>
    <div>
        <a-card>
            <h3 style="font-weight: bold;">基本信息</h3>
            <a-form-model ref="ruleForm" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item ref="staffId" label="员工Id">
                            <a-input :disabled="true" style="width: 250px" v-model="form.staffId" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item ref="creatTime" label="创建时间">
                            <a-date-picker v-model="form.creatTime" format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="职工类型" ref="staffType" prop="staffType">
                            <a-select v-model="form.staffType" style="width: 250px;" placeholder="请选择">
                                <a-select-option v-for="(item,i) in provinceData" :key="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item ref="name" label="姓名" prop="name">
                            <a-input style="width: 250px;" v-model="form.name" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="部门" ref="department" prop="department">
                            <a-select v-model="form.department" style="width: 250px;" placeholder="请选择">
                                <a-select-option v-for="(item,i) in departData" :key="item.id">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-row>
                            <a-col :span="10">享受补贴：是</a-col>
                            <a-col :span="10"> 充值比例：80%</a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="10">是否自结：是</a-col>
                            <a-col :span="10"> 使用app：是</a-col>
                        </a-row>


                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item ref="idCard" label="身份证号码" prop="idCard">
                            <a-input style="width: 250px;" v-model="form.idCard" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="入职日期">
                            <a-date-picker v-model="form.entryTime" :disabled-date="disabledStartDate" show-time
                                format="YYYY-MM-DD HH:mm:ss" placeholder="Start" @openChange="handleStartOpenChange" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="离职日期">
                            <a-date-picker v-model="form.qurtTime" :disabled-date="disabledEndDate" show-time
                                format="YYYY-MM-DD HH:mm:ss" placeholder="End" :open="endOpen"
                                @openChange="handleEndOpenChange" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>

        <a-card>
            <h3 style="font-weight: bold;">账户信息</h3>
            <a-form-model>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="补贴账户余额(元)">
                            <a-input :disabled="true" style="width: 250px" v-model="form.subPrice" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="充值账户余额(元)">
                            <a-input :disabled="true" style="width: 250px" v-model="form.rechPrice" />
                        </a-form-model-item>
                    </a-col>

                </a-row>
            </a-form-model>
        </a-card>

        <a-card>
            <h3 style="font-weight: bold;">绑定卡信息</h3>
            <a-form-model>
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="卡号">
                            <a-input :disabled="true" style="width: 250px" v-model="form.cardNumber" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>
        <div style="float: right; margin:20px;">
            <a-button @click="$router.back(-1)">
                返回
            </a-button>
            <a-button type="primary" style="margin-left: 10px;" @click="onSubmit">
                保存
            </a-button>
        </div>

    </div>

</template>

<script>
    import '@/assets/less/TableExpand.less'
    import { httpAction } from '@/api/manage'
    import moment from "moment"
    // import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    export default {
        name: "",
        // mixins: [JeecgListMixin],
        components: {

        },
        created() {
            // if (this.$route.query.id) {
            this.getList()
            // }
        },

        data() {
            return {
                form: {
                    staffId: "",
                    creatTime: "",
                    staffType: "",
                    name: "",
                    department: "",
                    idCard: "",
                    entryTime: "",
                    qurtTime: "",
                    subPrice: "",
                    rechPrice: "",
                    cardNumber: "",
                },
                provinceData: [
                    { id: 1, name: "在职" },
                    { id: 2, name: "离职" }
                ],
                departData: [{ id: 1, name: "技术" },
                { id: 2, name: "产品" }],
                rules: {
                    staffType: [
                        { required: true, message: '请选择职工类型', trigger: 'change' },
                    ],
                    department: [
                        { required: true, message: '请选择部门', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    idCard: [
                        { required: true, message: '请输入身份证号码', trigger: 'blur' },
                    ],

                },
                endOpen: false,

                url: {
                    detail: "/staff/info",
                    add: "/staff/add"
                },
            }
        },
        computed: {

        },
        methods: {
            disabledStartDate(startValue) {
                const endValue = this.form.qurtTime;
                if (!startValue || !endValue) {
                    return false;
                }
                return startValue.valueOf() > endValue.valueOf();
            },
            disabledEndDate(endValue) {
                const startValue = this.form.entryTime;
                if (!endValue || !startValue) {
                    return false;
                }
                return startValue.valueOf() >= endValue.valueOf();
            },
            handleStartOpenChange(open) {
                if (!open) {
                    this.endOpen = true;
                }
            },
            handleEndOpenChange(open) {
                this.endOpen = open;
            },
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        console.log(this.form)
                        let httpurl = this.url.add
                        let method = 'post'
                        this.form.entryTime = moment(this.form.entryTime).format("YYYY-MM-DD HH:mm:ss")
                        this.form.creatTime = moment(this.form.entryTime).format("YYYY-MM-DD HH:mm:ss")
                        this.form.qurtTime = moment(this.form.entryTime).format("YYYY-MM-DD HH:mm:ss")
                        httpAction(httpurl, this.form, method).then((res) => {
                            if (res.success) {
                                this.$message.success(res.message);
                            } else {
                                this.$message.warning(res.message);
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getList() {
                let httpurl = this.url.detail
                let method = 'get'
                httpAction(httpurl, { id: this.$route.query.id }, method).then((res) => {
                    if (res.success) {
                        this.form = res.result
                        this.form.entryTime = moment(res.result.entryTime).format("YYYY-MM-DD HH:mm:ss")
                        this.form.creatTime = moment(res.result.creatTime).format("YYYY-MM-DD HH:mm:ss")
                        this.form.qurtTime = moment(res.result.qurtTime).format("YYYY-MM-DD HH:mm:ss")
                    } else {
                        this.$message.warning(res.message);
                    }
                })
            }

        }
    }
</script>
<style scoped>
    @import '~@assets/less/common.less';
</style>