<template>
    <PageHeader :title="title">
        <template #action>
            <Button v-if="elements.indexOf('6-1') != -1" type="primary" @click="aduitorShow = true">配置审核人员</Button>
        </template>
        <template #content>
            <Space>
                <Input v-model="searchinfo.project" placeholder="请输入项目名" clearable style="width: 260px" />
                <Input v-model="searchinfo.story" placeholder="请输入迭代名" clearable style="width: 260px" />
                <Input v-model="searchinfo.audit_remark" placeholder="请输入备注" clearable style="width: 260px" />
                <Button type="primary" @click="getreport()">搜索</Button>
            </Space>
        </template>
    </PageHeader>
    <div style="margin-top: 8px">
        <Table :columns="columns" :data="reports">
            <template #audit_status="{ row }">
                <Strong :style="getcolor(row.audit_status)">{{
        row.audit_status == 0 ? '待审核' : row.audit_status == 1 ? '通过' : '驳回' }}</Strong>
            </template>
            <template #report_status="{ row }">
                <Strong>{{ row.report_status == 0 ? '未发送' : '已发送' }}</Strong>
            </template>
            <template #see="{ row }">
                <a @click="goreport(3, row.id)">查看
                </a>
            </template>
            <template v-if="elements.indexOf('6-2') != -1" #audit="{ row }">
                <Button v-if="!row.audit_status" type="info" ghost
                    @click="this.choiceportid = row.id; this.aduitShow = true">审核</Button>
            </template>
        </Table>
        <Page :total="totals" :page-size="searchinfo.page_size" v-model="searchinfo.page_num" @on-change="getreport()"
            show-total style="margin-top: 20px;" />
    </div>
    <Space wrap>
        <Modal v-model="aduitShow">
            <template #header>
                <p style="color:#2d8cf0;text-align:center">
                    <span>审核</span>
                </p>
            </template>
            <div style="text-align:center">
                <Input v-model="remark" type="textarea" :rows="4" placeholder="备注" />
            </div>
            <template #footer>
                <div style="text-align: center;">
                    <Button type="success" :loading="loading" @click="aduit(choiceportid, 1)">通过</Button>
                    <Button type="error" :loading="loading" @click="aduit(choiceportid, 2)">驳回</Button>
                </div>
            </template>
        </Modal>
        <Modal title="配置审核人员" v-model="aduitorShow" class-name="vertical-center-modal" @on-cancel="closeShow()">
            <Select filterable v-model="choiceaduitor" multiple style="width:260px;margin-bottom: 15px"
                placeholder="审核人员">
                <Option v-for="item in alluser" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <template #footer>
                <Button @click="closeShow()">取消</Button>
                <Button type="primary" @click="setaduitor()">确认</Button>
            </template>
        </Modal>
    </Space>

</template>

<script>

export default {
    props: ['isCollapsed',],
    data() {
        return {
            page_id: 23,
            title: "报告审核",
            aduitShow: false,
            aduitorShow: false,
            searchinfo: {
                page_size: 10,
                page_num: 1,
                project: null,
                story: null,
                audit_remark: null
            },
            choiceportid: null,
            loading: false,
            remark: null,
            totals: 0,
            alluser: [],
            choiceaduitor: [],
            reports: [],
            columns: [
                {
                    title: '项目',
                    key: 'project',
                    align: 'center'
                },
                {
                    title: '迭代',
                    key: 'story',
                    align: 'center'
                }, {
                    title: '提交时间',
                    key: 'create_time',
                    align: 'center'
                }, {
                    title: '提交人',
                    key: 'create_user_name',
                    align: 'center'
                }, {
                    title: '备注',
                    key: 'audit_remark',
                    align: 'center'
                },
                {
                    title: '审核状态',
                    slot: 'audit_status',
                    align: 'center'
                },
                {
                    title: '审核人',
                    key: 'audit_user_name',
                    align: 'center'
                },
                {
                    title: '发送状态',
                    slot: 'report_status',
                    align: 'center'
                }
                , {
                    title: '查看',
                    slot: 'see',
                    align: 'center'
                }
            ],
            elements: []
        }
    },
    methods: {
        getreport() {
            this.$request("get", "/tool/testport/reportauditlist", this.searchinfo, this, (data) => { this.reports = data.data.rows; this.totals = data.data.total })
        },
        closeShow() {
            this.aduitorShow = false
        },
        getaduitor() {
            this.$request("get", "/tool/testport/getauditors", null, this, (data) => { this.choiceaduitor = data.data })
        },
        getalluser() {
            this.$request("get", "/user/user_list?page_size=100&page_num=1", null, this, (data) => { this.alluser = data.data.rows })
        },
        setaduitor() {
            this.$request("post", "/tool/testport/setauditor", { ids: this.choiceaduitor }, this, () => { this.aduitorShow = false })
        },
        aduit(id, status) {
            this.loading = true
            this.$request("post", "/tool/testport/audit", { id, audit_status: status, audit_remark: this.remark }, this, () => { this.getreport(); this.loading = false; this.choiceportid = null; this.aduitShow = false; this.remark = null })
        },
        getcolor(status) {
            return "color:" + (status == 0 ? "#5cadff" : status == 1 ? "#19be6b" : "#ff9900")
        },
        goreport(pagestatus, id) {
            localStorage.setItem('pagestatus', pagestatus)
            localStorage.setItem('reportid', id ? id : 0)
            const a = this.$router.resolve({
                name: 'report'
            })
            window.open(a.href, '_blank')
        }
    },
    watch: {
        elements(value) {
            if (value.indexOf('6-2') != -1 && this.columns.findIndex(each => { return each.title == '审核' }) == -1) {
                this.columns.push({
                    title: '操作',
                    slot: 'audit',
                    align: 'center'
                }
                )
            } else {
                const index = this.columns.findIndex(ele => { return ele.title == '审核' })
                index != -1 && this.columns.splice(index, 1)
            }
        },
        aduitorShow(value) {
            if (value) {
                if (this.alluser) this.getalluser()
                this.getaduitor()
            }
        }
    },
    created() {
        this.$getElements(this.page_id, this, (data) => this.elements = data.data);
        this.getalluser();
        this.getreport();

    }
};
</script>

<style>
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vertical-center-modal .ivu-modal {
    top: 0;
}
</style>