<template>
    <view class="ant-layout page">
		<page-header></page-header>
        <head-title title="人员维护">
            <template #rightBtn>
                <view class="ant-btn" @click="add">新增</view>
            </template>
        </head-title>
        <view class="ant-layout-content content">
            <table class="ant-table">
                <thead class="ant-table-thead">
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>科室</th>
                        <th>工号</th>
                        <th>卡号</th>
                    </tr>

                </thead>
                <tbody class="ant-table-tbody">
                    <tr v-for="(item, index) in list" :key="index">
                        <td>{{ index + 1 }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.type }}</td>
                        <td>{{ item.number }}</td>
                        <td>{{ item.ic }}</td>
                    </tr>
                </tbody>
            </table>         
        </view>
        <view class="ant-layout-footer footer">
            <view class="pagenation">
                <uni-row style="margin: 0;">
                    <uni-col :span="8" style="text-align: left;">
                        <view class="ant-btn" @click="pre">上一页</view>
                    </uni-col>
                    <uni-col :span="8" style="line-height: 48px;">
                        第{{ page }}页/共 {{ totalPage }} 页
                    </uni-col>
                    <uni-col :span="8" style="text-align: right;">
                        <view class="ant-btn" @click="next">下一页</view>
                    </uni-col>
                </uni-row>
            </view>            
        </view>
        <notice ref="notice"/>
        <uni-popup ref="popup" :mask-click="false">
            <view class="pop-content">
                <uni-row>
                    <uni-col :span="8">
                        <view class="ant-input-group">
                            <view class="ant-form-item-label">*姓名：</view>
                        </view>
                    </uni-col>
                    <uni-col :span="16"> 
                        <input class="ant-input" v-model="form.name"/>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col :span="8">
                        <view class="ant-input-group">
                            <view class="ant-form-item-label">*卡号：</view>
                        </view>
                    </uni-col>
                    <uni-col :span="16"> 
                        <input class="ant-input" v-model="form.ic"/>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col :span="8">
                        <view class="ant-input-group">
                            <view class="ant-form-item-label">工号：</view>
                        </view>
                    </uni-col>
                    <uni-col :span="16"> 
                        <input class="ant-input" v-model="form.number"/>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col :span="8">
                        <view class="ant-input-group">
                            <view class="ant-form-item-label">科室：</view>
                        </view>
                    </uni-col>
                    <uni-col :span="16"> 
                        <input class="ant-input" v-model="form.type"/>
                    </uni-col>
                </uni-row>
                <uni-row>
                    <uni-col> 
                        <view class="form-btn">
                            <view class="ant-btn" @click="submit">保存</view>                    
                            <view class="ant-btn" style="margin-left: 20px;" @click="close">取消</view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>

        </uni-popup>
    </view>  
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import HeadTitle from '@/components/HeadTitle.vue'
import Notice from '@/components/Notice.vue';
import * as db from '@/db/sqlite.js'
export default {
    components: {
        PageHeader,Notice,HeadTitle
    },
    data() {
        return {
            list: [
                {
                    ic: '11111111111111',
                    name: '张三',
                    type: '清洗科',
                    number: '1111111111',
                }
            ],
            page: 1,
            totalPage: 0,
            form: {
                name: '',
                ic: '',
                number: '',
                type: ''
            }
        }
    },
    onLoad() {
        this.getList()
     },
    methods: {

        add() {
            this.$refs.popup.open()
            this.form = {
                name: '',
                ic: '',
                number: '',
                type: ''
            }
            uni.$on('ic', (val) => { this.form.ic = val })
        },
        close() {
            this.$refs.popup.close()
            uni.$off('ic')
        },
        async submit() {
            if (this.form.name == '' || this.form.ic == '') {
                return false
            }
            let tableName = 'user'
            let isTable = await db.isTable(tableName)
            if (!isTable) {
                await db.addUserTable()
            }
            try {
                await db.addTabItem(tableName, { ...this.form })
                this.$refs.popup.close()
                uni.showToast({
                    title: '保存成功',
                    icon: 'none'
                })
                this.getList()
            } catch (error) {
                uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                })
            }

        },
        getList() {
            db.getDataList('user', this.page, 15, '', '').then(res => { 
                this.list = res.list
                this.totalPage = res.totalPage
            })
        },
        // 上一页
        pre() {
            if (this.page > 1) {
                this.page--
                this.getList()
            } 
        },
        // 下一页
        next() {
            if (this.page < this.totalPage) {
                this.page++
                this.getList()
            }
        },
    },

}
</script>

<style scoped>
.page{
	background: transparent;
    height: 100%;
}
.content{
    color: #747A8D;
	flex: 1;
    height: 100%;
    padding: 20px;
}

.footer{
    background: transparent;
    padding: 20px;
}
.pagenation{
    height: 50px;
    color: #747A8D;
    font-size: 16px;
    letter-spacing: 2px;
}
.pagenation .ant-btn{
    width: 143px;
    height: 50px;
    border-radius: 50px;
    box-shadow: none;
    font-size: 24px;
    font-weight: 500;
    background: #2F3242;
    color: #fff;
    border-color: #2F3242;
    line-height: 40px;
}

.pop-content{
    padding: 30px;
    padding-top: 50px;
    width: 500px;
    min-height: 400px;
    border-radius: 15px;
    background: #777D90;
}
.pop-content .uni-row{
    margin-bottom: 16px;
}
.ant-form-item-label{
    color: #fff;
    font-size: 18px;
    line-height: 40px;
}
.ant-input{
    height: 40px;
    font-size: 18px;
}
.form-text{
    color: #747A8D;
    line-height: 40px;
    text-align: left;
    font-size: 18px;
}

.ant-btn{
    line-height: 38px;
    background: #2F3242;
    border-color: #2F3242;
    height: 46px;
    width: 128px;
    border-radius: 50px;
    color: #fff;
    font-size: 16px;
}
.form-btn{
    margin-top: 30px;
}
</style>