<template>
    <div class="main-content">
       <div class="area-form">
           <el-form :inline="true" size="default">
               <el-form-item label="员工名">
                   <el-input clearable v-model="form.name" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="部门">
                   <el-input clearable v-model="form.department" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" @click="confirm">查 询</el-button>
                   <el-button @click="reset">重 置</el-button>
               </el-form-item>
           </el-form>
       </div>
       <el-button size="default" type="primary" @click="download">导出excel</el-button>
       <div class="area-table">
           <el-table :data="tableData.data" size="default" border :header-cell-style="{background: '#EEE'}">
               <el-table-column prop="name" label="员工" width="240"></el-table-column>
               <el-table-column prop="departmentList" label="部门" width="480">
                   <template #default="scope">
                       <el-tag style="margin-right: 8px" v-for="(item,index) in scope.row.departmentList" :key="index">
                           {{item.departmentName}}
                        </el-tag>
                   </template>
               </el-table-column>
               <el-table-column prop="points" label="积分"></el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="240">
                   <template #default="scope">
                       <el-link type="primary" @click="pointDetail(scope.row.id)">积分明细</el-link>
                        <el-link type="primary" style="margin-left: 8px" @click="changePoint(scope.row.id)">修改积分</el-link>
                   </template>
               </el-table-column>
           </el-table>
           <el-pagination
                v-model:currentPage="pagination.current"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            />
       </div>
       <el-dialog v-model="editVisible"  width="30%" title="修改积分">
           <el-form label-width="100px">
               <el-form-item style="width:65%" size="default" label="修改类型">
                   <el-radio-group  v-model="setForm.settlementMethod">
                        <el-radio :label="1">增加积分</el-radio>
                        <el-radio :label="2">扣除积分</el-radio>
                    </el-radio-group>
               </el-form-item>
               <el-form-item style="width:65%" size="default" label="积分">
                    <el-input-number controls-position="right" v-model="setForm.points"></el-input-number>
               </el-form-item>
               <el-form-item style="width:80%" size="default" label="备注">
                    <el-input type="textarea" :rows="4" v-model="setForm.remarks" placeholder="请输入备注"></el-input>
               </el-form-item>
           </el-form>
           <template #footer>
               <el-button @click="editClose">取消</el-button>
               <el-button @click="editComfirm" type="primary">确定</el-button>
           </template>
       </el-dialog>
       <el-drawer v-model="detailVisible" title="积分明细">
            <el-table :data="detailData" size="default">
                <el-table-column prop="createDate" width="200" label="日期"></el-table-column>
                <el-table-column prop="settlementMethodDSC" label="明细">
                    <template #default="scope">
                       {{scope.row.settlementMethodDSC}}{{scope.row.points}}
                   </template>
                </el-table-column>
                <el-table-column prop="typeDSC" label="类型"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
            </el-table>
            <template #footer>
                <el-button type="primary" @click="detailVisible = false" size="default">确定</el-button>
            </template>
       </el-drawer>
    </div>
</template>

<script>
import {defineComponent, reactive, ref, watch, getCurrentInstance} from 'vue'
import {statusFormatter} from './config.js'
export default defineComponent({
    name: 'v-questList',
    setup() {
        const form = reactive({
            name: undefined,
            department: undefined,
        });
        const setForm = reactive({
            userId: undefined,
            settlementMethod: 1,
            points: 0,
            remarks: undefined,
        })
        const tableData = reactive({
            data: [],
        });
        const detailData = ref([]);
        const detailVisible = ref(false);
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        })
        const editVisible = ref(false);
        const { proxy } = getCurrentInstance();
        return {
            form,proxy,setForm,
            tableData,pagination,editVisible,
            detailData,detailVisible,
            statusFormatter
        }
    },
    mounted() {
        this.getData()
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getData() {
            let obj = Object.assign(this.form,{pageNum: this.pagination.current,pageSize: this.pagination.pageSize})
            this.proxy.$post("/user/list", obj).then(res => {
                if(res.code == 200) {
                    const data = res.data
                    this.tableData.data = data.records;
                    this.pagination.total = data.total
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        confirm() {
            this.getData()
        },
        reset() {
            this.form.name = undefined;
            this.form.department = undefined;
            this.getData();
        },
        changePoint(value) {
            this.setForm.userId = value;
            this.editVisible = true;
        },
        editClose() {
            this.setForm.settlementMethod = 1;
            this.setForm.points = 0;
            this.setForm.remarks = undefined;
            this.editVisible = false;
        },
        editComfirm() {
            this.proxy.$post("/user/pointsTran", this.setForm).then(res => {
                if(res.code == 200) {
                    this.$message.success('修改成功');
                    this.editClose();
                    this.getData();
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        download() {
            this.proxy.$download("/user/excel", this.form, '员工积分列表.xlsx').then(res => {
                
            }).catch(() => {});
        },
        //积分明细
        pointDetail(value) {
            this.proxy.$post("/user/pointsRecords", {userId: value}).then(res => {
                if(res.code == 200) {
                    this.detailData = res.data.records;
                    this.detailVisible = true;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        }
    }
})
</script>

<style lang="less" scoped>
.area-table {
    margin-top: 16px
}
</style>