<template>
    <div>
        <fullscreen :fullscreen.sync="fullscreen" class="container structure-l" style="margin: 0;width: calc(75% - 15px);">
            <div class="container-box">
                <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
                <div class="search">
                    <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                </div>
                <div class="tabbox">
                    <el-table height="calc(100% - 40px)" class="com-table" :data="tableData" tooltip-effect="dark" size="small"
                        border v-loading="loading">
                        <el-table-column prop="violationCateName" label="类别" width="100">
                        </el-table-column>
                        <el-table-column prop="provinceName" label="省份">
                        </el-table-column>
                        <el-table-column width="100" prop="recordRegionName" label="违规地市">
                        </el-table-column>
                        <el-table-column prop="operatorName" label="运营商">
                        </el-table-column>
                        <el-table-column prop="violationItemName" label="违规项目">
                        </el-table-column>
                        <el-table-column width="120" label="违规内容">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="light" :content="scope.row.violationContent" placement="bottom">
                                    <span class="tab-long" v-show="scope.row.violationContent.length>7">{{scope.row.violationContent}}</span>
                                </el-tooltip>
                                <span v-show="scope.row.violationContent.length<=7">{{scope.row.violationContent}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tariffName" label="资费名称">
                        </el-table-column>
                        <el-table-column width="120" label="资费内容">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="light" :content="scope.row.taffiffContent" placement="bottom">
                                    <span class="tab-long" v-show="scope.row.taffiffContent.length>7">{{scope.row.taffiffContent}}</span>
                                </el-tooltip>
                                <span v-show="scope.row.taffiffContent.length<=7">{{scope.row.taffiffContent}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="monthFee" sortable width="100" label="月费(元)">
                        </el-table-column>
                        <el-table-column prop="preFee" width="110" sortable label="预存款(元)">
                        </el-table-column>
                        <el-table-column prop="remFee" width="100" label="酬金">
                        </el-table-column>
                        <el-table-column prop="saleChnl" label="渠道">
                        </el-table-column>
                        <el-table-column prop="saleScope" label="范围">
                        </el-table-column>
                        <el-table-column prop="monthSale" label="月销量">
                        </el-table-column>
                        <el-table-column prop="opTime" label="上报时间" width="140">
                        </el-table-column>
                        <el-table-column prop="opName" label="上报人">
                        </el-table-column>
                        <el-table-column prop="contactPhone" width="100" label="联系电话">
                        </el-table-column>
                        <el-table-column label="审核状态">
                            <template slot-scope="scope" class="tab-btn">
                                <span :class="scope.row.sts*1===2?'pass':scope.row.sts*1===1?'nopass':''">{{scope.row.stsDesc}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="fixFlagDesc" label="是否已解决" width="100">
                        </el-table-column>
                        <el-table-column prop="groupFlagDesc" label="是否反馈总部" width="100">
                        </el-table-column>
                        <el-table-column prop="wwFlagDesc" label="是否返回竞合" width="100">
                        </el-table-column>
                        <el-table-column prop="admFlagDesc" label="是否反馈总局" width="100">
                        </el-table-column>

                        <el-table-column label="操作" width="100" align="center" fixed="right">
                            <template slot-scope="scope" class="tab-btn">
                                <el-button  size="mini" type="danger" @click="checkInfo(scope.row.id)">审核</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                        :total="total">
                    </el-pagination>
                </div>

            </div>
        </fullscreen>

        <competeRight></competeRight>
    </div>
</template>
<script>
    import competeRight from "../../../components/competeRight";
    import mySearch from "../../../components/search";
    import toolList from "../../../components/toolList";

    export default {
        components: {
            competeRight,
            mySearch,
            toolList
        },
        data() {
            return {
                tooltit: '竞争对手信息审核',
                fullscreen: false,
                total: 0,
                pageSize: 1,
                totalcheck: 0,
                competitor: {
                    type: {
                        value: '',
                        options: []
                    },
                    operators: {
                        value: '',
                        options: []
                    },
                    startime: null,
                    endtime: null,
                    input: '',
                },
                tableData: [],
                outList: [],
                searchList: [{
                        type: 'sel',
                        tit: '类别',
                        value: '',
                        width: '19%',
                        options: [],
                    },
                    {
                        type: 'sel',
                        tit: '运营商',
                        value: '',
                        width: '19%',
                        options: [],
                    },
                    {
                        type: 'date',
                        tit: '开始时间',
                        value: '',
                        width: '19%',
                    },
                    {
                        type: 'date',
                        tit: '结束时间',
                        value: '',
                        width: '19%',
                    },
                    {
                        type: 'input',
                        tit: '请输入违规内容',
                        value: '',
                        width: '19%',
                    },
                ],
                params: {},
                btnctrlStatus: true,
                loading:false
            }
        },
        methods: {
            //查询处理
            searchInfo(v) {
                this.params = {};
                v[0] ? this.params.violationCate = v[0] : '';
                v[1] ? this.params.operatorCode = v[1] : '';
                v[2] ? this.params.opTimeFrom = v[2] : '';
                v[3] ? this.params.opTimeTo = v[3] : '';
                v[4] ? this.params.violationContent = v[4] : '';
                this.getList(this.params, this.pageSize);
            },
            //获取列表
            getList(v, n) {
                let _this = this;
                this.loading = true;
                this.tableData = [];
                this.$http({
                    url: "/market/swcompetitor/queryPage",
                    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;
                    for (let i = 0; i < this.tableData.length; i++) {
                        _this.tableData[i].preFee = _this.tableData[i].preFee * 1;
                        _this.tableData[i].monthFee = _this.tableData[i].monthFee * 1;
                    }
                    this.loading = false;
                });
            },
            //获取字典
            getListwglb() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'wglb'
                    },
                }).then((res) => {
                    this.searchList[0].options = res.data;
                });
            },
            //获取字典
            getListsf() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'yys'
                    },
                }).then((res) => {
                    this.searchList[1].options = res.data;
                });
            },
            // 分页
            currchange(v) {
                this.pageSize = v;
                this.getList(this.params, this.pageSize);
            },
            //详情页
            checkInfo(v) {
                this.$router.push({
                    path: "/competitorInfo",
                    query: {
                        id: v,
                        type: 2
                    }
                });
                this.setabList("竞争对手信息详情", "/competitorInfo?id=" + v + "&type=2");
            },
            setabList(n, p) {
                let params = {
                    children: "",
                    name: n,
                    rountPath: p,
                    target: "_self",
                };
                for (let i = 0; i < this.$store.state.tabList.length; i++) {
                    if (this.$store.state.tabList[i].name === params.name) {
                        this.$store.state.tabList[i] = params;
                    }
                }
                let set = new Set([...this.$store.state.tabList, params]);
                set.add(params);
                this.$store.commit("setDefaultActive", params.rountPath);
                this.$store.commit("setTabList", Array.from(set));
            },
            //功能栏
            iconCli(v) {
                if (v === 1) {
                    this.getList(this.params, this.pageSize);
                }
                if (v === 2) {
                    this.fullscreen = !this.fullscreen
                }
            },
            ctrlbtn() {
				let menus = JSON.parse(window.sessionStorage.menus);
                for (let i = 0; i < menus.length; i++) {
                    if (menus[i].children.length > 0) {
                        this.ctrlbtn(menus[i].children);
                    } else {
                        if (menus[i].rountPath === this.$route.path && menus[i].systemflag === '1') {
                            this.btnctrlStatus = false;
                            return
                        }
                    }
                }
            },
            getUser() {
                let menus = JSON.parse(window.sessionStorage.menus);
                this.ctrlbtn(menus);
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.infolist = {
                    opNo: '',
                    regionName: '',
                    regionCode: '',
                    deptName: '',
                    deptCode: '',
                    opName: '',
                    contactPhone: '',
                };
                this.infolist.opNo = this.userInfo.loginNo;
                // this.infolist.regionName = '';
                // this.infolist.regionCode = '';
                // this.infolist.deptName = '';
                // this.infolist.deptCode = '';
                this.infolist.opName = this.userInfo.loginName;
                this.infolist.contactPhone = this.userInfo.phoneNo;
            }
        },
        mounted() {

        },
        created() {
            this.getList(this.params, this.pageSize);
            this.getListwglb();
            this.getListsf();
            this.getUser();
        }
    }
</script>
<style scoped lang="scss">
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .tabbox {

        /*float: left;*/
        /*max-width: 900px;*/
        .pass {
            color: #e4393c;
        }

        .nopass {
            color: #00B83F;
        }
    }

    .tab-long {
        height: 22px;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 1;
        /* 控制最多显示几行 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }

    .titbox {
        div {
            float: right;
            margin-top: 10px;

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

    .checknum {
        font-size: 13px;
        margin-top: 10px;
        color: #B2B2B2;

        .c-188ACF {
            color: #188ACF;
        }
    }

    .titbtn-box {
        text-align: right;
    }

    .com-table {
        margin-top: 20px;
    }

    .cell {
        i {
            padding: 0 5px;
            display: inline-block;
            cursor: pointer;
        }
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }
</style>
