<template>
    <view class="check-container">
        <view class="check-top">
            <u-search placeholder="搜索身份证" v-model="searchVal" @change="serchlist" :showAction="false"></u-search>
        </view>
        <view class="check-content">
            <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
                <uni-tr>
                    <uni-th width="104" align="center">姓名</uni-th>
                    <uni-th align="center">身份证</uni-th>
                    <uni-th align="center">手机号</uni-th>
                    <uni-th width="204" align="center">设置</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td align="center">{{ item.name }}</uni-td>
                    <uni-td align="center">{{ item.idNumber }}</uni-td>
                    <uni-td align="center">{{ item.telphone }}</uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <button class="uni-button" size="mini" type="primary" @click="confirm(item)">添加日志</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box">
                <uni-pagination :page-size="pageSize" :current="pageCurrent" :total="total" @change="pageChange" />
            </view>

            <!-- popup -->
            <custom-popup :visible="modalShow" :content-h="100" @onClose="modalShow = false;serveInfo = {}">
                <view class="s-header">
                    <view class="heade-lf" @click="modalShow = false;serveInfo = {}">取消</view>
                    <view class="heade-ri" @click="confimPopup">确认</view>
                </view>
                <view class="s-content">
                    <u--form labelPosition="left" :model="serveInfo" :fromData="serveInfo" :rules="rules" ref="uForm">
                        <u-form-item labelWidth="80" label="服务时间" prop="createTime" borderBottom
                            @click="showTime = true; hideKeyboard()" ref="item1">
                            <u--input v-model="serveInfo.createTime" disabledColor="#ffffff" placeholder="请选择服务时间"
                                border="none"></u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
                        </u-form-item>
                        <u-form-item labelWidth="70" label="服务主题" prop="serveTheme" borderBottom ref="item1">
                            <u--input v-model="serveInfo.serveTheme" placeholder="请输入服务主题"></u--input>
                        </u-form-item>
                        <u-form-item labelWidth="70" label="服务内容" prop="serveContent" borderBottom ref="item1">
                            <u--textarea v-model="serveInfo.serveContent" placeholder="请输入服务内容"></u--textarea>
                        </u-form-item>
                        <u-form-item labelWidth="70" label="服务备注" prop="bak1" borderBottom ref="item1">
                            <u--textarea v-model="serveInfo.bak1" placeholder="请输入服务备注"></u--textarea>
                        </u-form-item>
                    </u--form>
                </view>
            </custom-popup>
            <u-datetime-picker :show="showTime" :value="birthday" mode="date" closeOnClickOverlay @confirm="timeConfirm"
                @cancel="timeClose" @close="timeClose"></u-datetime-picker>
        </view>
    </view>
</template>

</view>
</view>
</template>

<script>
    import {
        getTalentsList,
        saveMainserveuserlog
    } from '@/api/admin.js'
    import {
        mapGetters
    } from 'vuex'
    import dic from '../../common/dic'
    import {
        debounce,
    } from '@/untils/tools.js'
    import {
        dateFormat
    } from '@/untils/format.js'
    import {
        cloneDeep,
    } from 'lodash';
    const validateForm = {
        createTime: '请输入服务时间',
        serveTheme: '请输入服务主题',
        serveContent: '请输入服务内容',
    }
    const formData = {
        createTime: '',
        serveTheme: '',
        serveContent: '',
    }
    const rules = {
        'createTime': {
            type: 'string',
            required: true,
            message: '请输入服务时间',
            trigger: ['blur', 'change']
        },
        'serveTheme': {
            type: 'string',
            required: true,
            message: '请输入服务主题',
            trigger: ['blur', 'change']
        },
        'serveContent': {
            type: 'string',
            required: true,
            message: '请输入服务内容',
            trigger: ['blur', 'change']
        }
    }
    export default {
        data() {
            return {
                eduArr: dic.eduArr,
                searchVal: '',
                tableData: [],
                pageSize: 10,
                pageCurrent: 0,
                total: 0,
                loading: false,
                modalShow: false,
                selectItem: null,
                showTime: false,
                serveInfo: Object.assign({}, formData),
                birthday: Number(new Date()),
                rules: rules,
            }
        },
        computed: {
            ...mapGetters(['userInfo'])
        },
        onLoad() {
            this.getData('refresh')
        },
        methods: {
            timeConfirm(e) {
                this.showTime = false
                this.serveInfo.createTime = dateFormat(e.value, 'yyyy-MM-dd')
            },
            timeClose() {
                this.showTime = false
            },
            hideKeyboard() {
                uni.hideKeyboard()
            },
            async confimPopup() {
                this.$refs.uForm.validate().then(async (res) => {
                    uni.showLoading({
                        title: '请求中'
                    })
                    const copy = cloneDeep(this.serveInfo)
                    let params = {
                        ...copy,
                        createTime: copy.createTime + ' 00:00:00',
                        // serveId: this.selectItem.serveId,
                        // serveUserId: this.selectItem.serveUserId,
                        talentsId: this.selectItem.id,
                        idNumber: this.selectItem.idNumber,
                        toName: this.selectItem.name,
                        fromName: this.userInfo.real_name
                    }
                    let resData = await saveMainserveuserlog(params)
                    uni.hideLoading()
                    if (resData.data.code === 200) {
                        this.$api.msg('添加日志成功')
                        this.modalShow = false
                        this.getData('update')
                    }
                }).catch((errors) => {
                    console.log(errors)
                    if (/[\u4e00-\u9fff]/.test(errors.message)) {
                        this.$api.msg(errors.message)
                    } else {
                        this.$api.msg('请输入信息')
                    }
                })


            },
            confirm(user) {
                this.modalShow = true
                this.selectItem = user
            },
            serchlist: debounce(function(val) {
                this.getData('refresh')
            }, 600),
            pageChange({
                type,
                current
            }) {
                switch (type) {
                    case 'next':
                        this.getData()
                        break;
                    case 'prev':
                        this.getData('prev')
                        break;
                }

            },
            async getData(type = 'next') {
                this.loading = true
                let params = {
                    current: this.pageCurrent,
                    pageSize: this.pageSize
                }
                switch (type) {
                    case 'next':
                        params.current += 1
                        break;
                    case 'prev':
                        params.current -= 1
                        break;
                    case 'refresh':
                        params.current = 1
                        params.pageSize = 10
                        break;
                }
                if (this.searchVal) {
                    params.idNumber = this.searchVal
                }
                let resData = await getTalentsList(params)
                this.loading = false
                if (resData.data.code === 200) {
                    const {
                        current,
                        records,
                        total,
                        size
                    } = resData.data.data
                    this.tableData = records
                    this.pageCurrent = current
                    this.pageSize = size
                    this.total = total
                }
            },
        }
    }
</script>

<style scoped>
    .check-container {
        padding: 12px;
    }

    .top-type {
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #666666;
        font-size: 14px;
        margin-top: 10px;
    }

    .blue {
        color: blue;
    }

    .check-top {
        margin-bottom: 24rpx;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 12px;
        z-index: 9;
        background-color: #ffffff;
    }

    .check-content {
        margin-top: 54px;
    }

    .uni-pagination-box {
        margin-top: 14px;
    }

    .uni-group {
        display: flex;
        align-items: center;
    }

    .s-header {
        display: flex;
        justify-content: space-between;
        text-align: center;
        font-size: 13px;
        padding: 10px 14px 0 14px;

        .heade-lf {
            line-height: 24px;
            width: 38px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #666666;
            color: #666666;
        }

        .heade-ri {
            line-height: 24px;
            width: 38px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #1b66ff;
            background-color: #1b66ff;
            color: #FFFFFF;
        }
    }

    .s-content {
        padding: 12px;
    }
</style>