<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
            <div class="search">
                <el-select v-model="advstatus" @change="advchange">
                    <el-option v-for="items in advopt" :key="items.id" :label="items.name" :value="items.id">
                    </el-option>
                </el-select>
            </div>
            <div class="tabbox">
                <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                    tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="taskId" label="任务编码">
                    </el-table-column>
                    <el-table-column prop="taskName" label="任务名称">
                    </el-table-column>
                    <el-table-column prop="opNo" label="审批人">
                    </el-table-column>
                    <el-table-column prop="opName" label="审批人姓名">
                    </el-table-column>
                    <el-table-column prop="opTime" label="审批时间">
                    </el-table-column>
                    <el-table-column prop="stsDesc" label="状态">
                    </el-table-column>
                    <el-table-column label="操作" width="120px" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="dialogCheck(scope.row,1)">查看</el-button>
                            <el-button size="mini" v-if="advstatus == '0'" type="danger"
                                @click="dialogCheck(scope.row,2)">审核</el-button>
                            <el-button size="mini" v-if="advstatus == '2'" type="danger"
                                @click="export2Excel(scope.row)">导出</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pageBox" @current-change="currchange" layout="total, prev, pager, next" background
                    :total="total">
                </el-pagination>
            </div>
            <el-dialog title="工单审核" :visible.sync="dialogStatus" width="70%" :destroy-on-close="true"
                :modal-append-to-body="false" :close-on-click-modal="false">
                <div>
                    <audit v-if="typestatsu === 2" @closeEdio="closeEdio" :componentInfo="componentInfo"
                        :componentStatus="componentStatus" :changeinfo="changeinfo"></audit>
                </div>
            </el-dialog>
        </div>
    </fullscreen>
</template>
<script>
    import toolList from "../../../../components/toolList.vue";
    import audit from "./audit.vue"

    export default {
        components: {
            toolList,
            audit
        },
        data() {
            return {
                tooltit: '魔百和审批流程列表',
                fullscreen: false,
                total: 0,
                pageSize: 1,
                tableData: [{}],
                dialogStatus: false,
                userInfo: {},
                params: {},
                typestatsu: 1,
                componentInfo: {},
                componentStatus: false,
                loading: false,
                changeinfo: false,
                advstatus: '',
                advopt: [{
                    id: '0',
                    name: '待办',
                }, {
                    id: '1',
                    name: '已办',
                }, {
                    id: '2',
                    name: '已归档',
                }, ],
                btnctrlStatus: false,
                advtype: '',
                dgid:'',
                excelList:[],
                exportData: '',
            }
        },
        methods: {
            //获取列表
            getList(v, n) {
                this.pageSize = n;
                this.tableData = [];
                this.loading = true;
                v.procName = "魔百和大屏广告自有业务承载审批流程";
                if (this.advstatus == 0) {
                    //待办工单列表查询
                    this.$http({
                        url: "/bpm/api/queryToDoTaskList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                            "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                        },
                        data: v,
                    }).then((res) => {
                        this.tableData = res.data.data;
                        this.total = res.data.totalRecord;
                        this.loading = false;
                    });
                } else if (this.advstatus == 1) {
                    //已办工单列表查询
                    this.$http({
                        url: "/bpm/api/queryDoneTaskList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                            "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                        },
                        data: v,
                    }).then((res) => {
                        this.tableData = res.data.data;
                        this.total = res.data.totalRecord;
                        this.loading = false;
                    });
                } else {
                    //已归档工单列表查询
                    this.$http({
                        url: "/market/mbAudit/queryFinishWoList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                            "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                        },
                        data: v,
                    }).then((res) => {
                        this.tableData = res.data.data;
                        this.total = res.data.totalRecord;
                        this.loading = false;
                    });
                }
            },
            // 分页
            currchange(v) {
                this.pageSize = v;
                this.getList(this.params, this.pageSize);
            },
            advchange(){
                this.getList(this.params, this.pageSize);
            },
            //处理申请
            dialogCheck(n, v) {
                if (v == 1) {
                    this.changeinfo = false;
                } else {
                    this.changeinfo = true;
                }
                this.typestatsu = 2;
                this.dialogStatus = true;
                let params = {
                    woNo: n.woNo,
                    taskId: n.taskId
                }
                this.componentInfo = params;
                this.componentStatus = true;
            },
            closeEdio() {
                this.getList(this.params, this.pageSize);
                this.dialogStatus = false;
                this.componentStatus = false;
            },
            //功能栏
            iconCli(v) {
                if (v === 1) {
                    this.getList(this.params, this.pageSize);
                }
                if (v === 2) {
                    this.fullscreen = !this.fullscreen
                }
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            export2Excel(n) {
              let params = {};
              params.woNo = n.woNo;
              this.$http({
                url: "/market/mbAudit/queryExportParamVal",
                method: "post",
                headers: {
                  "Content-Type": "application/json",
                },
                data: params,
              }).then((res) => {
                this.exportData = res.data;
                //excel表格数据组装
                this.excelList.push({ name: '需求类型', value: this.exportData.mbhxqlx });
                this.excelList.push({ name: '投放位置', value: this.exportData.mbhtfwz });
                this.excelList.push({ name: '开始时间', value: new Date(this.exportData.mbhkssj).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') });
                this.excelList.push({ name: '结束时间', value: new Date(this.exportData.mbhjssj).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') });
                this.excelList.push({ name: '投放区域', value: this.exportData.mbhtfqy });
                this.excelList.push({ name: '投放定向（提供附件必须一致）', value: this.exportData.mbhtfdx });
                this.excelList.push({ name: '素材名称', value: this.exportData.mbhscmc });
                this.excelList.push({ name: '素材时长（提供附件必须一致）', value: this.exportData.mbhscsc });
                this.excelList.push({ name: '素材类型（提供附件必须一致）', value: this.exportData.mbhsclx });
                this.excelList.push({ name: '播测要求（基地）', value: this.exportData.mbhbcyq });

                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../../../vendor/Export2Excel');
                    const tHeader = ['工单标题', this.exportData.tit,];
                    const filterVal = ['name', 'value', ];
                    const list = this.excelList;
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, '魔百和大屏广告自有业务承载审批流程工单');
                })
              });
            }
        },
        mounted() {
            this.advstatus = this.$route.query.type;
            this.getList({}, 1);
        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .approval {
        .roval-box {
            padding: 0 20px;
            margin-top: 20px;
            margin-bottom: 10px;

            .el-input {
                width: calc(100% - 200px);
                display: inline-block;
            }

            span {
                display: inline-block;
                width: 80px;
                font-size: 14px;
                margin-right: 20px;

                .el-input {
                    width: 100%;
                    display: inline-block;
                }
            }
        }
    }

    .onetab {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .titbox {
        div {
            float: right;

            i {
                font-size: 22px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }

    .tabbox {
        margin-top: 15px;
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }

    .info-line {
        width: 100%;
        display: block;
        padding-left: 20px;

        div {
            width: 50%;
            display: inline-block;
        }

        span {
            width: 80px;
            display: inline-block;
            text-align: left;

            i {
                color: red;
                display: inline-block;
                padding-right: 5px;
            }
        }

        .el-select,
        .el-input {
            width: calc(100% - 100px);
        }
    }

    .online {
        width: 100%;

        .el-select {
            width: calc(100% - 100px);
        }

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
    }
</style>
