<template>
    <div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
            <div class="layout-content-wrap p-16">
                <div class="border-radius-4 flex-row justify-content-between">
                    <div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework1">
                        <div class="flex-column f14 color-fff line-height-30 p-16">
                            <a>待调解案件/件</a>
                            <a class="f32">{{statisticsObj.caseWait }}</a>
                            <a>金额  ￥{{statisticsObj.caseWaitAmount}}</a>
                        </div>
                        <div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
                        <img src="../../assets/image/workbench/Vector.png" width="30" height="30" alt="">
                    </div>
                    <div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework2">
                        <div class="flex-column f14 color-fff line-height-30 p-16">
                            <a>暂存案件/件</a>
                            <a class="f32">{{statisticsObj.caseStaging}}</a>
                            <a>金额  ￥{{statisticsObj.caseStagingAmount}}</a>
                        </div>
                        <div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
                        <img src="../../assets/image/workbench/Subtract.png" width="30" height="30" alt="">
                    </div>
                    <div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework3">
                        <div class="flex-column f14 color-fff line-height-30 p-16">
                            <a>今日调解失败数/件</a>
                            <a class="f32">{{statisticsObj.mediateFalse}}</a>
                            <a>金额  ￥{{statisticsObj.mediateFalseAmount}}</a>
                        </div>
                        <div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
                        <img src="../../assets/image/workbench/Subtract1.png" width="30" height="30" alt="">
                    </div>
                    <div class="width100 flex-row justify-content-between border-radius-4 casework4">
                        <div class="flex-column f14 color-fff line-height-30 p-16">
                            <a>今日调解成功数/件</a>
                            <a class="f32">{{statisticsObj.mediateSuccess}}</a>
                            <a>金额  ￥{{statisticsObj.mediateSuccessAmount}}</a>
                        </div>
                        <div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
                        <img src="../../assets/image/workbench/Subtract2.png" width="30" height="30" alt="">
                    </div>
                </div>
                <div class="border-radius-4 flex-row justify-content-between mt-16">
                    <div class="width30 p-16 flex-column mr-16 border-radius-4 border-solid-lighter-1 listwork1">
                        <div class="mt-8 mb-16 f22">快速入口</div>
                        <div class="flex-column f14 p-24 color-fff border-radius-8 line-height-40 fastcase1 cursor-pointer" @click="casejump()">
                            <a class="f24">案件列表</a>
                            <a>案件快速跟踪处理</a>
                        </div>
                        <div class="flex-column mt-16 f14 p-24 color-fff border-radius-8 line-height-40 fastcase2 cursor-pointer" @click="performanceDetail()">
                            <a class="f24">个人业绩入口</a>
                            <a>快速查看个人业绩信息</a>
                        </div>
                    </div>
                    <div class="width70 p-16 border-radius-4 border-solid-lighter-1 listwork2">
                        <div class="mt-8 mb-16 f22">最近调解案件</div>
                        <div>
                            <el-table :data="tableData" >
                                <el-table-column
                                    v-for="(item, i) in tableHead"
                                    :key="i"
                                    :prop="item.prop"
                                    :label="item.label"
                                    :show-overflow-tooltip="item.showOverflowTooltip"
                                    :width="item.width"
                                    :sortable="item.sortable"
                                    :formatter="item.formatter"
                                ></el-table-column>
                                <el-table-column  label="操作" width="90">
                                    <template slot-scope="scope">
                                        <div class="flex-row align-items-center">
                                            <div class="f14 color-1960F4 cursor-pointer mr-8" @click="handleDetail(scope)">查看详情</div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="border-radius-4 flex-row justify-content-between mt-16">
                    <div class="width70 flex-column p-16 mr-16 border-radius-4 border-solid-lighter-1 seniority1">
                        <div class="flex-row justify-content-between">
                            <a class="f22">调解案件数量统计</a>
                            <el-radio-group v-model="radio1" size="small">
                                <el-radio-button label="本年" ></el-radio-button>
                                <el-radio-button label="当月"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <span id="total_recycling_chart" class="mt-24"></span>
                    </div>
                    <div class="width30 flex-column p-16 border-radius-4 border-solid-lighter-1 seniority2">
                        <div class="flex-row justify-content-between">
                            <a class="f22">本月业绩排行 TOP10</a>
                            <el-radio-group v-model="radioRanking" size="small">
                                <el-radio-button label="总案件" ></el-radio-button>
                                <el-radio-button label="成功案件"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <span id="total_performance_chart" class="mt-24"></span>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <!-- 编辑 -->
        <editCaseDrawer v-if="editCaseDrawer" :editCaseDrawer.sync="editCaseDrawer"/>
        <mediatorPerformanceDetail v-if="detailDrawer" :detailDrawer.sync="detailDrawer"/>
    </div>
    
</template>
<script>
    import api from "@/services/caseManagement";
    import workApi from "@/services/workbenchApi";
    export default {
        components: {
            editCaseDrawer: () => import('../mediation-management/components/editCaseDrawer'),//编辑
            mediatorPerformanceDetail: () => import('../statistical-analysis/components/mediatorPerformanceDetail.vue'),
        },
        data() {
            return {
                identifier:this.$store.state.userinfo.identifier,
                detailDrawer:null,
                editCaseDrawer:null,//编辑
                mediateStatusData:[],
                caseStatusData:[],
                financialProductsTypeOptions:[],
                statisticsObj:{},
                rankingList:[],
                lineChartList:[],
                radio1: '本年',
                radioRanking: '总案件',
                activeName: 'mediatorPerformance',
                tableHead: [
                    {
                        prop: "caseName",
                        label: "案件名称",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "caseNo",
                        label: "案件编号",
                        showOverflowTooltip: true,
                        formatter:this.formatTable,
                    },
                    {
                        prop: "productTypeId",
                        label: "金融产品类型",
                        showOverflowTooltip: true,
                        formatter: this.formatProductType,
                    },
                    {
                        prop: "moneyAmount",
                        label: "案件金额",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "mediateTime",
                        label: "调解时间",
                        showOverflowTooltip: true,
                        formatter: this.formatTable,
                    },
                    {
                        prop: "caseStatus",
                        label: "调解状态",
                        showOverflowTooltip: true,
                        formatter: this.formatMediateStatusEnum,
                    },
                    {
                        prop: "resultStatus",
                        label: "案件状态",
                        showOverflowTooltip: true,
                        formatter: this.formatResultStatusEnum,
                    },
                ],
                tableData: [],
            };
        },
        watch: {
            radioRanking:{
                handler() {
                    this.total_performance_chart()
                }
            },
            radio1:{
                handler() {
                    this.total_recycling_chart()
                }
            }
        },
        computed:{
            // 获取抽屉drawer的内容高度
            contentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-66
                
            }  
        },
        methods: {
            // 详情
            handleDetail(scope){
                this.editCaseDrawer={
                    title:'案件详情',
                    data:scope.row
                }
            },
            // 获取金融产品类型
            getDict(){
                let data = {
                    type:'financial'
                }
                api.getDict(data).then(res => {
                    if (!res.code) {
                        this.financialProductsTypeOptions = res;
                    }
                })
            },
            // 获取案件状态枚举-调解状态
            getMediateStatusEnum(){
                api.getMediateStatusEnum({}).then(res => {
                    if (!res.code) {
                        this.mediateStatusData = res;
                    }
                })
            },
            // 获取调解中案件状态枚举
            getCaseStatusEnum(){
                api.getCaseStatusEnum({}).then(res => {
                    if (!res.code) {
                        this.caseStatusData = res;
                    }
                })
            },
            // 案件状态
            formatMediateStatusEnum(row, column, cellValue, index){
                // console.log('row',row)
                let className = `status-btn case-status${row.caseStatus}`
                let obj = this.mediateStatusData.find((item) => {
                    return item.code == row.caseStatus
                })
                return row.caseStatus != null ? <div class={className}>{obj.desc}</div> : '-'
            },
            formatResultStatusEnum(row, column, cellValue, index){
                // console.log('row',row)
                let className = `status-btn result-status${row.resultStatus}`
                let obj = this.caseStatusData.find((item) => {
                    return item.code == row.resultStatus
                })
                return row.resultStatus != null ? <div class={className}>{obj.desc}</div> : '-'
                
            },
            formatProductType(row, column, cellValue, index){
                let obj = this.financialProductsTypeOptions.find((item) => {
                    return item.code == row.productTypeId
                })
                return row.productTypeId != null ? <div>{obj?obj.codeName:'-'}</div> : '-'
            },
            topStatistics(){
                workApi.topStatistics({}).then(res => {
                    if (!res.code) {
                        this.statisticsObj = res;
                    }
                })
            },
            recentStatistics(){
                workApi.recentStatistics({}).then(res => {
                    if (!res.code) {
                        this.tableData = res;
                    }
                })
            },
            async total_recycling_chart(){
                let type = 1;
                if(this.radio1 != '本年'){type=2}
                workApi.lineChartStatistics({type:type}).then(res => {
                    if (!res.code) {
                        this.lineChartList=res
                        this.radiolineChartChanage()
                    }
                })
                
            },
            radiolineChartChanage()
            {
                var option = {
                    title: {
                        text: '调解案件数量统计',
                        show: false
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                                {
                                    name: 'Email',
                                    type: 'line',
                                    // stack: 'Total',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: [120, 132, 101, 134, 90, 230, 210]
                                }
                        ]
                    };
                if(this.radio1 == '本年')
                {
                    let legendData=[]
                    let seriesData=[]
                    this.lineChartList.forEach(item => {
                        if(item.key == 'monthList')
                        {
                            item.value.forEach(item => {
                                legendData.push(item.name)
                                seriesData.push({
                                                    name: item.name,
                                                    type: 'line',
                                                    stack: item.name,
                                                    areaStyle: {},
                                                    emphasis: {
                                                        focus: 'series'
                                                    },
                                                    data: item.line
                                                })
                            })
                        }
                    });
                    option.legend.data = legendData
                    option.xAxis[0].data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    option.series = seriesData
                }
                else
                {
                    let legendData=[]
                    let seriesData=[]
                    let thisDayNum=this.$util.mGetDate();
                    this.lineChartList.forEach(item => {
                        if(item.key == 'dayList')
                        {
                            item.value.forEach(item => {
                                legendData.push(item.name)
                                seriesData.push({
                                                    name: item.name,
                                                    type: 'line',
                                                    stack: item.name,
                                                    areaStyle: {},
                                                    emphasis: {
                                                        focus: 'series'
                                                    },
                                                    data: item.line
                                                })
                            })
                        }
                    });
                    let xAxisData=['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号'
                    , '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号'
                    , '27号', '28号']
                    if(thisDayNum > 28)
                    {
                        for(let i=29; i <= thisDayNum;i++)
                        {
                            xAxisData.push(i+'号')
                        }
                    }
                    option.legend.data = legendData
                    option.xAxis[0].data = xAxisData
                    option.series = seriesData
                    console.log(option,'seriesData')
                }

                var myChart = this.$echarts.init(document.getElementById('total_recycling_chart'));
                myChart.setOption(option);

            },
            async total_performance_chart(){
                let type = 1;
                if(this.radioRanking != '总案件'){type=2}
                workApi.rankingStatistics({type:type}).then(res => {
                    if (!res.code) {
                        this.rankingList=res
                        this.radioRankingChanage()
                    }
                })
            },
            radioRankingChanage()
            {
                var option = {
                    title: {
                        text: '本月业绩排行',
                        show:false
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        },
                        formatter: '{b} : {c}(件)'
                    },
                    legend: {show:false},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '1%',
                        top:'0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        show:false
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            // name: '2011',
                            color:'#12BCF1',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        }
                    ]
                };
                if(this.radioRanking == '总案件')
                {
                    let yAxisData=[]
                    let seriesData=[]
                    this.rankingList.forEach(item => {
                        if(item.key == 'allList')
                        {
                            let valnum=item.value.length-1;
                            item.value.forEach((item1,index) => {
                                yAxisData.push(item.value[valnum-index].userName)
                                seriesData.push(item.value[valnum-index].count)
                            })
                        }
                    });
                    option.yAxis.data = yAxisData
                    option.series[0].data = seriesData
                }
                else
                {
                    let yAxisData=[]
                    let seriesData=[]
                    this.rankingList.forEach(item => {
                        if(item.key == 'successList')
                        {
                            let valnum=item.value.length-1;
                            item.value.forEach((item1,index) => {
                                yAxisData.push(item.value[valnum-index].userName)
                                seriesData.push(item.value[valnum-index].count)
                            })
                        }
                    });
                    option.yAxis.data = yAxisData
                    option.series[0].data = seriesData
                }
                var myChart = this.$echarts.init(document.getElementById('total_performance_chart'));
                myChart.setOption(option);

            },
            performanceDetail()
            {
                if(this.identifier=='manager')
                {
                    let jumpurl = '/statistical-analysis';
                    this.$store.commit('setRoutes',jumpurl)
                    this.$router.push(jumpurl)
                }
                else
                {
                    let userData = this.$store.state.userinfo
                    this.detailDrawer = {title:'个人业绩',data:{row:{mediatorId:userData.id,mediatorName:userData.realName}}}
                }
            },
            casejump(){
                let jumpurl = ''
                if(this.identifier=='manager')
                {
                    jumpurl = '/case-management';
                }
                else
                {
                    let resources = JSON.parse(sessionStorage.getItem('userInfo')).resources
                    this.menuTree = resources[0].children
                    if(JSON.stringify( this.menuTree).indexOf('mediation-management')>-1)
                    {
                        jumpurl = '/mediation-management';
                    }
                }
                if(jumpurl == '')
                {
                    this.$message.warning('未赋予访问权限！')
                }
                else
                {
                    this.$store.commit('setRoutes',jumpurl)
                    this.$router.push(jumpurl)
                }
            }
        },
         mounted(){
            this.getDict()
            this.getCaseStatusEnum()
            this.getMediateStatusEnum()
            this.topStatistics()
            this.recentStatistics()
            this.total_recycling_chart()
            this.total_performance_chart()
         }
    };
</script>
<style scoped lang="scss">
.casework1{
background: linear-gradient(101.33deg, #12BCF1 0.46%, #099AEA 100%);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
height: 128px;
position: relative;
}
.casework2{
background: linear-gradient(101.33deg, #43A3FA 0.46%, #3B73F5 100%);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
position: relative;
}
.casework3{
background: linear-gradient(101.33deg, #9B7DFF 0.46%, #6B5AFA 100%);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
position: relative;
}
.casework4{
background: linear-gradient(101.33deg, #0FBEAF 0.46%, #079D87 100%);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
position: relative;
}
.caseworkicon1{background: linear-gradient(165.96deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0.1;width: 80px;
}
.casework1 img,.casework2 img,.casework3 img,.casework4 img{position: absolute;right:25px;top:45px}
.listwork1{height: 381px;
.fastcase1
{
height: 138px;
background:url(../../assets/image/workbench/fast_case1.png) no-repeat,linear-gradient(102.52deg, #3CA0FA 0.5%, #2F6AF5 143.58%);
background-size: 100% 100%;
}
.fastcase2
{
height: 138px;
background:url(../../assets/image/workbench/fast_case2.png) no-repeat,linear-gradient(101.33deg, #12BCF1 0.46%, #099AEA 100%);
background-size: 100% 100%;
}
}
.seniority1{height: 427px;}
#total_recycling_chart{height: 420px;display: inline-block;width: 100%;}
#total_performance_chart{height: 335px;display: inline-block;width: 100%;}
</style>