<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="checknum">
                    <span>全部({{total}}) | 已选</span>
                    <span class="c-188ACF">({{totalcheck}})</span>
                </div>
                <div class="titbtn-box">
                    <el-button size="medium" type="success" icon="el-icon-s-order" @click="outExe">汇总Excel报表</el-button>
                    <el-button size="medium" type="primary" icon="el-icon-plus" @click="addinfo">新建</el-button>
                </div>
                <div class="search">
                    <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                </div>
                <div class="tabbox">
                    <el-table height="calc(100% - 100px)" @select="checkNum" @select-all="checkNum" class="com-table"
                        ref="multipleTable" :data="tableData" tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <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 label="上报时间" width="140">
                            <template slot-scope="scope" class="tab-btn">
                                <span>{{scope.row.opTime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="opName" label="上报人">
                            <template slot-scope="scope">
								  <span>{{$desensitization(scope.row.opName,1)}}</span>
                            </template>
                        </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="120" align="center" fixed="right">
                            <template slot-scope="scope" class="tab-btn">
                                <el-dropdown @command="outlineinfo">
                                    <i class="el-icon-download"></i>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="scope"><i class="el-icon-picture"></i>对外导出图片</el-dropdown-item>
                                        <el-dropdown-item :command="scope.row"><i class="el-icon-folder-opened"></i>对内导出word</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-tooltip class="item" effect="light" content="详情" placement="bottom-end">
                                    <i class="el-icon-view" @click="checkInfo(scope.row.id)"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="light" content="删除" placement="bottom-end">
                                    <i class="el-icon-delete" @click="delLine(scope.row)"></i>
                                </el-tooltip>
                                <el-tooltip class="item" effect="light" content="修改" placement="bottom-end">
                                    <i class="el-icon-edit" @click="changeInfo(scope.row)" v-if="scope.row.sts!==1"></i>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            <myMessage :messTit='messTit' @closeMessage="closeMessage" :centerDialogVisible="centerDialogVisible" v-if="centerDialogVisible"></myMessage>
            <myMessage :messTit='messTit' @closeMessage="closeMessagedel" :centerDialogVisible="centerDialogVisibledel" v-if="centerDialogVisibledel"></myMessage>
        </fullscreen>
        <competeRight></competeRight>
    </div>
</template>
<script>
    import competeRight from "../../../components/competeRight";
    import mySearch from "../../../components/search";
    import toolList from "../../../components/toolList.vue";
    import myMessage from "../../../components/myMessage.vue";

    export default {
        components: {
            competeRight,
            mySearch,
            toolList,
            myMessage
        },
        data() {
            return {
                tooltit: '竞争对手信息管理',
                fullscreen: false,
                total: 0,
                totalcheck: 0,
                pageSize: 1,
                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: {},
                centerDialogVisible: false,
                centerDialogVisibledel: false,
                messTit:'',
                delid:'',
                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.pageSize = n;
                this.loading = true;
                this.tableData = [];
                this.totalcheck = 0;
                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;
                        if(_this.tableData[i].contactPhone){
                            _this.tableData[i].contactPhone = _this.tableData[i].contactPhone.split("");
                            _this.tableData[i].contactPhone[3] = "*";
                            _this.tableData[i].contactPhone[4] = "*";
                            _this.tableData[i].contactPhone[5] = "*";
                            _this.tableData[i].contactPhone[6] = "*";
                            let phone = '';
                            for (let j = 0; j < _this.tableData[i].contactPhone.length; j++) {
                                phone += _this.tableData[i].contactPhone[j]
                            }
                            _this.tableData[i].contactPhone = phone;
                        }
                    }
                    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);
            },
            closeMessagedel(v){
                let _this = this;
                this.centerDialogVisibledel = false;
                if(v === 1){
                    this.$http({
                        url: "/market/swcompetitor/del",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            id: this.delid
                        },
                    }).then((res) => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        } else {
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            _this.getList(this.params, this.pageSize);
                        }
                    });
                }
            },
            //删除
            delLine(v) {
                this.delid=v.id;
                this.centerDialogVisibledel = true;
                this.messTit = '即将删除此条数据, 是否删除?';
            },
            //跳添加页
            addinfo() {
                this.$router.push("/addCompetitor");
                this.setabList("新增竞争对手信息", "/addCompetitor");
            },
            //详情页
            checkInfo(v) {
                this.$router.push({
                    path: "/competitorInfo",
                    query: {
                        id: v,
                        type: 1
                    }
                });
                this.setabList("竞争对手信息详情", "/competitorInfo?id=" + v + "&type=1");
            },
            changeInfo(v) {
                this.$router.push({
                    path: "/changeCompet",
                    query: {
                        id: v.id,
                    }
                });
                this.setabList("竞争对手信息修改", "/changeCompet?id=" + v.id);
            },
            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
                }
            },
            //列表选择
            checkNum(v) {
                this.totalcheck = v.length;
                this.outList = v;
            },
            //导出
            outlineinfo(v) {
                if (v.row) {
                    let data = {
                        provinceName: v.row.provinceName,
                        operatorName: v.row.operatorName,
                        violationCateName: v.row.violationCateName,
                        violationItemName: v.row.violationItemName,
                        violationItem: v.row.violationItemName,
                        monthFee: v.row.monthFee,
                        tariffName: v.row.tariffName,
                        taffiffContent: v.row.taffiffContent,
                        remFee: v.row.remFee,
                        preFee: v.row.preFee,
                        saleScope: v.row.saleScope,
                        saleChnl: v.row.saleChnl,
                        monthSale: v.row.monthSale,
                        violationContent: v.row.violationContent,
                        recordRegionName: v.row.recordRegionName,
                    }
                    this.$http({
                        url: "/market/cwcompetitor/writeImg",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        responseType: "blob",
                        data: data,
                    }).then((response) => {
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {
                                type: 'application/vnd.ms-excel'
                            })
                            window.navigator.msSaveOrOpenBlob(blob,
                                new Date().getTime() + '.png')
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            var blob = new Blob([response.data])
                            var downloadElement = document.createElement('a')
                            var href = window.URL.createObjectURL(blob)
                            downloadElement.href = href
                            downloadElement.download = new Date().getTime() + '.png'
                            document.body.appendChild(downloadElement)
                            downloadElement.click()
                            document.body.removeChild(downloadElement)
                            window.URL.revokeObjectURL(href)
                        }
                    });
                } else {
                    let data = {
                        provinceName: v.provinceName,
                        operatorName: v.operatorName,
                        violationCateName: v.violationCateName,
                        violationItemName: v.violationItemName,
                        violationItem: v.violationItemName,
                        monthFee: v.monthFee,
                        tariffName: v.tariffName,
                        taffiffContent: v.taffiffContent,
                        remFee: v.remFee,
                        preFee: v.preFee,
                        saleScope: v.saleScope,
                        saleChnl: v.saleChnl,
                        monthSale: v.monthSale,
                        violationContent: v.violationContent,
                        recordRegionName: v.recordRegionName,
						id: v.id,
                    }
                    this.$http({
                        url: "/market/cwcompetitor/write2Doc",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        responseType: "blob",
                        data: data,
                    }).then((response) => {
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {
                                type: 'application/vnd.ms-excel'
                            })
                            window.navigator.msSaveOrOpenBlob(blob,
                                new Date().getTime() + '.docx')
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            var blob = new Blob([response.data])
                            var downloadElement = document.createElement('a')
                            var href = window.URL.createObjectURL(blob)
                            downloadElement.href = href
                            downloadElement.download = new Date().getTime() + '.docx'
                            document.body.appendChild(downloadElement)
                            downloadElement.click()
                            document.body.removeChild(downloadElement)
                            window.URL.revokeObjectURL(href)
                        }
                    });
                }
            },
            //导出表格---------------------------------------------------------------------------------------------------
            closeMessage(v){
                this.centerDialogVisible = false;
                if(v === 1){
                    this.export2Excel();
                }
            },
            outExe() {
                if (this.outList.length > 0) {
                    this.centerDialogVisible = true;
                    this.messTit = '此操作将导出excel文件, 是否继续?';
                }
            },
            export2Excel() {
                var that = this;
                require.ensure([], () => {
                    const {
                        export_json_to_excel
                    } = require('../vendor/Export2Excel');
                    const tHeader = ['违规类别', '省份', '运营商', '违规项目', '月费', '资费名称', '资费内容', '酬金', '销售范围', '销售渠道',
                        '月销量',
                        '违规内容', '违规地市'
                    ]; // 导出的表头名
                    const filterVal = ['violationCateName', 'provinceName', 'operatorName', 'violationItemName',
                        'monthFee', 'tariffName', 'taffiffContent', 'remFee', 'saleScope', 'saleChnl',
                        'monthSale', 'violationContent', 'recordRegionName'
                    ]; // 导出的表头字段名
                    const list = that.outList;
                    const data = that.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, `竞争对手excel`); // 导出的表格名称，根据需要自己命名
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
        },
        mounted() {

        },
        created() {
            this.getList(this.params, this.pageSize);
            this.getListwglb();
            this.getListsf();
        }
    }
</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;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
    }

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

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

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

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

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

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