<template>
    <div class="enterpriseprofit-all">
        <div class="enterpriseprofit-haed">
            <el-date-picker style="width:300px" v-model="dates" @change="dateschange" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            <div class="enterpriseprofit-haed-btn">
                <el-select style="width:150px" v-model="value" filterable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="CorporateProfitExcelDownload" type="primary">导出</el-button>
            </div>
        </div>
        <div class="enterpriseprofit-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="rowIndex"
                label="序号"
                width="50">
                </el-table-column>
                <el-table-column
                prop="clientName"
                label="单位"
                >
                </el-table-column>
                <el-table-column
                prop="teamName"
                label="团组名称"
                >
                <template slot-scope="scope">
                    <el-popover
                    placement="top"
                    width="300"
                    trigger="hover">
                        {{scope.row.feeCountTipsLabel}}
                        <span style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;cursor: pointer;color: #48a2ff;" slot="reference">{{scope.row.teamName}}</span>
                    </el-popover>
                </template>
                </el-table-column>
                <el-table-column
                prop="visitDate"
                :formatter="filteryear"
                label="出访时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="collectionTotal"
                label="收款"
                width="180">
                    <template slot-scope="scope">
                        <span style="color: #409eff;">{{ townum(scope.row.collectionTotal) }}</span>  (CNY)
                    </template>
                </el-table-column>
                <el-table-column
                prop="costTotal"
                label="产生费用"
                width="180">
                    <template slot-scope="scope">
                        <span style="color: red;">{{ townum(scope.row.costTotal) }}</span>  (CNY)
                    </template>
                </el-table-column>
                <el-table-column
                prop="profitTotal"
                label="利润"
                width="180">
                    <template slot-scope="scope">
                        <span style="color:#67c23a;">{{ townum(scope.row.profitTotal) }}</span>  (CNY)
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-html="enterpriseprofitlabel" class="enterpriseprofit-table-label">
            
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                        }
                    },]
            },
            options:[
                {
                    value: 1,
                    label: '月报表'
                },
                {
                    value: 2,
                    label: '季度报表'
                },
                {
                    value: 3,
                    label: '年报表'
                },
                {
                    value: 4,
                    label: '导出'
                },
                {
                    value: 5,
                    label: '生成'
                },
            ],
            dates:"",
            value:1,
            tableData:[],
            token:"",
            userId:"",
            pageId:61,
            enterpriseprofitlabel:'',
        }
    },
    methods:{
        //保留两位小数
        townum(val){
            return Number(val).toFixed(4)
        },
        //时间
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //时间切换
        dateschange(val){
            console.log(this.disposeTime(this.dates[0]));
            this.CorporateProfitItem(this.disposeTime(this.dates[0]),this.disposeTime(this.dates[1]))
        },
        //获取表格
        CorporateProfitItem(beginDt,endDt) {
            let tableDatas={}
            var url = "/api/Statistics/CorporateProfitItem"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    beginDt:beginDt,
                    endDt: endDt,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    tableDatas=res.data.data;
                    that.tableData=tableDatas.items;
                    that.enterpriseprofitlabel=tableDatas.label;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取数据源失败！");
            });
        },
        //导出
        CorporateProfitExcelDownload() {
            var url = "/api/Statistics/CorporateProfitExcelDownload"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    excelType:that.value,
                    beginDt:that.disposeTime(that.dates[0]),
                    endDt: that.disposeTime(that.dates[1]),
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    window.open(res.data.data)
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                    });
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("导出失败！");
            });
        },
    },
    mounted(){
        this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
    }
}
</script>
<style>
.enterpriseprofit-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.enterpriseprofit-haed{
    display: flex;
    justify-content: space-between;
}
.enterpriseprofit-table{
    margin-top: 15px;
    margin-bottom: 10px;
}
</style>