<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.value" :label="items.label" :value="items.value"/>
                </el-select>

                <el-button type="primary" size="small" @click="impXls">导出Excel</el-button>
            </div>
            <div style="height:20px;"></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="itemId" label="申请编号" align="center"></el-table-column>
                    <el-table-column prop="tit" label="工单标题"></el-table-column>
                    <el-table-column prop="status" label="状态"  align="center">
                        <template slot-scope="scope">
                            {{parserStatus(scope.row.status)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="publish" label="是否上线"  align="center">
                        <template slot-scope="scope">
                            {{parserPublish(scope.row.publish)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createLoginName" label="申请人"  align="center"></el-table-column>
                    <el-table-column prop="createTime" label="申请时间"  align="center"></el-table-column>
                    <el-table-column prop="updateTime" label="完成时间"  align="center"> </el-table-column>

                    <el-table-column label="操作" width="120px" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="view(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>
        </div>

        <itemDlg v-if="selWoNo" :dialogVisible="dialogVisible" :itemId="selItemId" :woNo="selWoNo" :taskName="selTaskName" @closeWin="closeWin"></itemDlg>

    </fullscreen>
</template>
<script>
    import itemDlg from "./itemDlg.vue";
    export default {
        components: {itemDlg},
        data() {
            return {
                advstatus:"1",
                advopt:[
                    {"value":"1","label":"归档"},
                    {"value":"0","label":"审批中"},
                    {"value":"2","label":"结束"},
                ],
                params:{
                    status:"1",
                },
                tableData:[],
                total:1,
                loading:false,
                fullscreen:false,
                //
                dialogVisible:false,
                selTaskName:"",
                selWoNo:"",
                selItemId:""
            }
        },
        methods: {
            loadData(params,pageNo){
                this.$http({
                    url: "/market/mbh/page",
                    method: "post",
                    headers: {"Content-Type": "application/json",
                    page: '{"pageNo":"' +pageNo + '","pageSize":"10"}'},
                    data: params
                }).then((res) => {
                    this.tableData = res.data.data
                    this.total = res.data.totalRecord
                    
                });
            },
            advchange(val){
                this.advstatus = val;
                this.params.status = val;
                this.loadData(this.params,1)
            },
            // 分页
            currchange(v) {
                this.loadData(this.params, v);
            },
            dialogCheck(v){

            },
            view(v){
                this.selWoNo = v.woNo;
                this.selItemId = v.itemId;
                this.dialogVisible = true;
            },
            closeWin(){
                this.selWoNo="";
                this.selItemId="";
                this.dialogVisible = false;
            },
            parserStatus(v){
                if(v==="1"){
                    return "归档";
                }else if(v==="0"){
                    return "审核中";
                }else if(v==="2"){
                    return "结束";
                }
            },
            parserPublish(v){
                if(v==="0"){
                    return "未上线";
                }else if(v==="1"){
                    return "上线";
                }
            },
            impXls(){
                let iData = "";
                this.$http({
                    url: "/market/mbh/page",
                    method: "post",
                    headers: {"Content-Type": "application/json",
                    page: '{"pageNo":"' +1 + '","pageSize":"'+this.total+'"}'},
                    data: this.params
                }).then((res) => {
                    iData = res.data.data
                    var that = this;
                    require.ensure([], () => {
                        const { export_json_to_excel } = require("@/pages/main/vendor/Export2Excel");
                        const tHeader = [
                            "序号","工单标题","需求类型","投放位置","开始时间","结束时间",
                            "投放区域","投放定向","素材名称","素材时长","素材类型",
                            "拨测要求","是否发布","状态","创建人","创建时间"     
                        ];

                        const filterVal = [
                            "idx","tit", "mbhxqlx","mbhtfwz", "mbhkssj","mbhjssj", 
                            "mbhtfqy","mbhtfdx", "mbhscmc","mbhscsc","mbhsclx",
                            "mbhbcyq", "publish","status","createLoginName","createTime"
                        ];

                        let list = iData;
                        const data = that.formatJson(filterVal, list);
                        export_json_to_excel(tHeader, data, `魔百和大屏广告自有业务承载申请表`,false); // 导出的表格名称，根据需要自己命名
                    });
                });
            },

            formatJson(filterVal, jsonData) {
                let tmpValue = "";
                return jsonData.map((v,i) => filterVal.map((j) => {
                    tmpValue = v[j];
                    if(j==="idx"){
                        tmpValue = i+1
                    }else if(j==="mbhbcyq"){
                        tmpValue = this.parserBc(tmpValue)
                    }else if(j==="mbhtfdx"){
                        tmpValue = this.parserTFDX(tmpValue)
                    }else if(j==="mbhtfwz"){
                        tmpValue = this.parserWz(tmpValue)
                    }else if(j==="publish"){
                        tmpValue = this.parserPublish(tmpValue)
                    }else if(j==="status"){
                        tmpValue = this.parserStatus(tmpValue)
                    }
                    if(undefined==tmpValue){
                        tmpValue="" 
                    }
                    return tmpValue
                }));
            },

        parserBc(v){
            return this.pp(v)        
        },
        parserWz(v){
            return this.pp(v)        
        },
        parserTFDX(v){
            return this.pp(v)
        },
        pp(v){
            if(v!==undefined){
                v = v.replace("[","").replace("]","").replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","")
                v = v.replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","").replace("\"","")
            }
            return v;
        },
        },


        mounted() {
            this.loadData(this.params,1);
        },
        created() {
            
        }
        
    }
</script>
<style scoped lang="scss">
     
</style>
