<template>
    <div class="app-container">
        <el-form :inline="true" ref="query" :model="query" size="mini">
            <el-form-item :label="queryTitle" prop="uuid">
                <el-select v-model="query.uuid" filterable :placeholder="queryPlaceHolder">
                    <el-option v-for="(item, index) in queryList" :key="index" :label="item.name" :value="item.uuid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="onReset('query')">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="onAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="isLoading" element-loading-text="Loading" :data="tableData" size="mini" border stripe fit highlight-current-row>
            <el-table-column prop="name" label="姓名" align="center" min-width="120" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="gender_text" label="性别" align="center" width="80" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="birthday" label="出生日期" align="center" width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="phone" label="电话" align="center" min-width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="address" label="地址" align="center" min-width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="id_validity" label="身份证有效期" align="center" width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="contract_validity" label="合同有效期" align="center" width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="job_title_validity" label="职称有效期" align="center" width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column prop="pract_cert_validity" label="证书有效期" align="center" width="100" :show-overflow-tooltip="false"></el-table-column>
            <el-table-column label="操作" align="center" width="160" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-wrapper">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="query.pagenum" background small :page-size="query.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
        </div>
        <formdialog ref="formdialog" :title="dialogTitle" :visible="dialogVisible" @close="dialogVisible=false" @confirm="submitForm"></formdialog>
    </div>
</template>

<script>
import request from "@/utils/request"
import { mapTrim } from '@/utils/index'
import { deleteAnnex } from '@/api/index'
import formdialog from './components/personDialog'

export default {
    name: "InnerPersonQualification",
    components: {
        formdialog,
    },
    data() {
        return {
            queryTitle: "查询条件",
            queryPlaceHolder: "输入查询字段",
            total: 0,
            tableData: [],
            isLoading: false,
            queryList: [],
            query: {
                uuid: null,
                pagesize: 15,
                pagenum: 1
            },
            dialogTitle: "",
            dialogVisible: false,
            urlPrefix: "/api/v1/evm_store/qualification/person",
        }
    },
    filters: {
        getAnnexType(annex) {
            if (annex === 'idcard') return '[身份证]'
            else if (annex === 'education') return '[学历]'
            else if (annex === 'jobtitle') return '[职称]'
            else if (annex === 'certificate') return '[证书]'
            else return ''
        },
        getAnnexURL(path) {
            return path.replace("localhost", window.location.hostname)
        }
    },
    methods: {
        addItem(params) {
            return request({
                url: this.urlPrefix + `/add`,
                method: "post",
                data: params,
            });
        },
        fetchQueryList() {
            this.getItemList({ "scope_type": "list", "type": 2 }).then(res => {
                this.queryList = res.data
            }).catch(err => {
                console.log(err.message)
            })
        },
        getItemList(params) {
            return request({
                url: this.urlPrefix + `/list`,
                method: "post",
                data: params,
            });
        },
        updateItem(id, params) {
            return request({
                url: `${this.urlPrefix}/update/${id}`,
                method: "post",
                data: params,
            });
        },
        deleteItem(id) {
            return request({
                url: `${this.urlPrefix}/delete/${id}`,
                method: "post",
            });
        },
        fetchData(params) {
            this.isLoading = true
            this.getItemList(Object.assign(params, { "type": 2 })).then(res => {
                if (res.code == 200) {
                    this.total = res.count
                    this.tableData = res.data.map(item => {
                        item.gender_text = item.gender ? "男" : "女"
                        return item
                    })
                }
            }).catch(err => {
                // this.$message.error(err.message)
                console.log(err.message)
            }).finally(() => {
                this.isLoading = false
            })
        },
        handleSizeChange(e) {
            this.query.pagesize = e
            this.fetchData(mapTrim(this.query))
        },
        handleCurrentChange(e) {
            this.query.pagenum = e
            this.fetchData(mapTrim(this.query))
        },
        handleEdit(index, row) {
            this.dialogTitle = "编辑"
            this.dialogVisible = true
            this.$refs["formdialog"].update(row)
        },
        handleDelete(index, row) {
            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') this.deleteItem(row.uuid).then(res => {
                        console.log(res)
                        this.total -= 1
                        this.$delete(this.tableData, index)
                        this.$message({ type: 'success', message: `成功删除第${ index + 1 }行` })
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                }
            })
        },
        submitForm(formdata) {
            if (this.dialogTitle === "添加") {
                this.addItem(Object.assign(mapTrim(formdata), { "type": 2 })).then(res => {
                    console.log(res)
                    this.$message({ type: 'success',  message: '添加成功' })
                    this.fetchData(mapTrim(this.query))
                }).catch(err => {
                    this.$message.error(err.message)
                })
            } else if (this.dialogTitle === "编辑") {
                this.updateItem(formdata.uuid, mapTrim(formdata)).then(res => {
                    console.log(res)
                    this.$message({ type: 'success', message: '更新成功' })
                    this.fetchData(mapTrim(this.query))
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }
        },
        onTagClose(index, row) { // 删除附件
            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') deleteAnnex(row.annex[index].uuid).then(res => {
                        console.log(res)
                        this.$delete(row.annex, index)
                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                }
            })
        },
        onAdd() {
            this.dialogTitle = "添加"
            this.dialogVisible = true
        },
        onQuery() {
            this.query.pagenum = 1
            this.query.pagesize = 15
            this.fetchData(mapTrim(this.query))
        },
        onReset(formName) {
            this.query.pagenum = 1
            this.query.pagesize = 15
            this.$refs[formName].resetFields()
            this.fetchData(mapTrim(this.query))
        }
    },
    mounted() {},
    created() {
        this.fetchData(mapTrim(this.query))
        this.fetchQueryList()
    }
}
</script>

<style lang="less" scoped>
.app-container {
    & > div.page-wrapper {
        margin: 10px 0px;
    }
}
</style>