{extend name="public/base"/}
{block name="css"}
<style>
    .work-list {width:90%;margin:10px auto;padding:10px 20px;box-sizing:border-box;border: 1px solid #eee;border-radius:10px;box-shadow: 0 0 10px #ccc;}
    .work-list .work-header {border-bottom:1px solid #eee;padding-bottom:5px;}
    .work-list .work-content {border-bottom:1px solid #eee;padding-bottom:5px;}
    .work-list .work-content .content-item {margin-top:4px;font-size:14px;color:#666;display:flex;}
    .work-list .work-content .content-item .title {width:120px;}
    .work-list .work-content .content-item .num {color: var(--red);font-size:16px;}
    .work-tool {display:flex;align-items:center;justify-content:flex-end;padding-top:5px;}
    .work-tool .tool-btn {width:60px;height:25px;line-height:25px;border:1px solid var(--blue);text-align:center;margin-left:5px;border-radius:100px;font-size:14px;box-sizing:border-box;color:var(--blue);}
    .add {width:50px;height:50px;position:fixed;bottom:50px;right:20px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        right-text="修改密码"
        @click-right="toPassword"
>
    <template #title>
        <span class="text-white">工作登记记录</span>
    </template>
</van-nav-bar>

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onList"
    >
        <div class="work-list" v-for="item in list">
            <div class="work-header">{{item.month}}</div>
            <div class="work-content">
                <div class="content-item">
                    <div class="title">应挂钩人数</div>
                    <div class="num">{{item.should_num}}</div>
                </div>
                <div class="content-item">
                    <div class="title">本月新增人数</div>
                    <div class="num">{{item.new_num}}</div>
                </div>
                <div class="content-item">
                    <div class="title">未完成挂钩人数</div>
                    <div class="num">{{item.unfinished_num}}</div>
                </div>
            </div>
            <div class="work-tool">
                <div class="tool-btn" v-if="item.month == month" @click="toEdit(item.id)">编辑</div>
                <div class="tool-btn" v-if="!is_register" @click="toCopy(item.id)">复制</div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>
<img src="__MIMAGES__/talent_work_add.png" class="add" @click="toAdd" v-if="!is_register"/>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.is_register = Vue.ref({$is_register});
        base.month = Vue.ref("{$month}");

        base.toPassword = () => {
            location.href = "{:url('my/password')}";
        };

        base.toAdd = () => {
            location.href = "{:url('work/add')}";
        };

        base.toEdit = id => {
            location.href = "{:url('work/edit')}?id=" + id;
        };

        base.toCopy = id => {
            location.href = "{:url('work/copy')}?id=" + id;
        };

        //列表
        base.page = Vue.ref(1);
        base.loading = Vue.ref(false);
        base.finished = Vue.ref(false);
        base.refreshing = Vue.ref(false);
        base.list = Vue.reactive([]);
        base.onList = () => {
            let param = {};
            param.page = base.page.value;
            base.page.value++;

            postJson("{:url('index/listWork')}", param).then( ({data}) => {
                base.loading.value = false;
                if (base.refreshing.value) base.refreshing.value = false;
                if (data.length === 0) {
                    base.finished.value = true;
                } else {
                    base.list.push(...data);
                }
            });

        };
        base.onRefresh = () => {
            base.list = Vue.reactive([]);
            base.page.value = 1;
            base.loading.value = true;
            base.finished.value = false;

            base.onList();
        };

        return base;
    }
</script>
{/block}