<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <!-- 搜索栏与表格区域 -->
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入申请人" v-model="searchForm.applier"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入岗位" v-model="searchForm.job"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-input
                                    placeholder="薪资范围"
                                    type="number"
                                    min="0"
                                    v-model.number="searchForm.startNum"
                                    class="pay"
                                ></el-input>
                                <span class="pay-sign">-</span>
                                <el-input
                                    placeholder="薪资范围"
                                    type="number"
                                    min="0"
                                    v-model="searchForm.endNum"
                                    class="pay"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                            <el-form-item>
                                <el-button type="primary" plain round @click="deleteData(ids, 'batch')"
                                    >批量删除</el-button
                                >
                            </el-form-item>
                        </el-col>-->
                    </el-row>
                </el-form>
            </div>
            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</span> 项
            </div>
            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column
                        prop="userResume.name"
                        label="姓名"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column prop="userResume.gender" label="性别">
                        <template slot-scope="scope">
                            <span v-if="scope.row.userResume.gender ==1">男</span>
                            <span v-if="scope.row.userResume.gender ==2">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="recruitmentInfoEntity.job" label="岗位"></el-table-column>
                    <el-table-column label="期望薪资">
                        <template slot-scope="scope">
                            <span>
                                {{
                                scope.row.userResume.salary | pricePipe(0, '￥', true)
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userResume.telephone" label="联系方式"></el-table-column>
                    <el-table-column prop="userResume.email" label="联系邮箱"></el-table-column>
                    <el-table-column
                        prop="userResume.ability"
                        label="个人技能"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="userResume.intro"
                        label="自我评价"
                        :show-overflow-tooltip="true"
                    ></el-table-column>

                    <!-- <el-table-column prop="edu_level" label="学历" :show-overflow-tooltip="true">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.userResume.eduLevel | educationPipe }}</template>
                    </el-table-column>-->
                    <!-- <el-table-column
                        prop="userResume.workingTime"
                        label="工作年限"
                        :show-overflow-tooltip="true"
                    ></el-table-column>-->
                    <!-- <el-table-column
                        prop="userResume.intro"
                        label="简介"
                        :show-overflow-tooltip="true"
                    ></el-table-column>-->
                    <el-table-column label="操作" min-width="220px;">
                        <template slot-scope="scope">
                            <!-- <el-button size="mini" type="primary" plain round @click="deleteData(scope.row.id)"
                                >删除</el-button
                            >-->
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showDetailsDialog(scope.row)"
                            >查看</el-button>
                            <!-- <el-button size="mini" type="primary" plain round>审核</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 详情弹层 -->
        <DetailsDialog @queryListData="queryListData" ref="details"></DetailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import DetailsDialog from './components/detailsDialog';
import { queryPage, removeData } from '@/apps/mobile/api/recruitment-application/index';
import educationStatus from '../model/education-status';

export default {
    components: {
        TitleBar,
        DetailsDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            ids: [],
            detailsDialogVisible: false,
            addEditDialogType: 'add',
            detailsDialogForm: {},
        };
    },
    methods: {
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        // 分页获取招聘信息
        queryListData() {
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPage(obj)
                .then(res => {
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        showDetailsDialog(data) {
            this.$refs.details.open(data);
        },
        /**
         * 删除功能
         * @param {String} type 授权操作类型:'batch'批量授权  'single'单个授权
         * @param {Number} id 当前需要删除的id或集合
         */
        // deleteData(id, type = 'single') {
        //     if (type === 'batch') {
        //         if (this.ids.length === 0) return this.$message.warning('请至少选中一项 !');
        //         // console.log(this.ids, "ids");

        //         this.delete(this.ids);
        //     } else {
        //         this.delete([id]);
        //     }
        // },
        // delete(id) {
        //     this.$confirm('确定要删除该数据吗?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning',
        //         closeOnClickModal: false,
        //     })
        //         .then(() => {
        //             removeData(id)
        //                 .then(() => {
        //                     this.$message.success('删除成功');
        //                     this.queryListData();
        //                 })
        //                 .catch(() => {});
        //         })
        //         .catch(() => {});
        // },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '' || this.searchForm[k] === null || this.searchForm[k] === undefined) {
                    delete this.searchForm[k];
                }
            }
            if (this.searchForm.endNum && !this.searchForm.startNum) {
                this.searchForm.startNum = 0;
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
    },
    mounted() {},
    filters: {
        educationStatus: eduLevel => {
            let str = '';
            if (eduLevel) {
                for (let i = 0; i < educationStatus.length; i++) {
                    if (educationStatus[i].id === eduLevel) {
                        str = educationStatus[i].name;
                        break;
                    }
                }
            }

            return str;
        },
    },
    created() {
        this.queryListData();
    },
};
</script>
<style scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
.pay {
    max-width: 45%;
}
.pay-sign {
    margin: 3px;
    margin-right: 8px;
}
</style>
