<template>
    <div class="flex leftcontainer ai-c" :class="roleInfo.visible?'boxshow':'boxhide'">
        <div class="flex chartcontainer jc-sb column max-h">
            <div class="flex commonbox chartbox1 ai-c column">
                <div class="flex title fz-16 fc-w ai-c">各区县合作社分布</div>
                <div class="charts" id="chartbox1"></div>
            </div>
            <div class="flex commonbox chartbox2 ai-c column">
                <div class="flex title fz-16 fc-w ai-c">农作物产量对比</div>
                <div class="charts" id="chartbox2"></div>
            </div>
            <div class="flex commonbox chartbox3 ai-c column">
                <div class="flex title fz-16 fc-w ai-c">各区县合作社产量对比</div>
                <div class="charts" id="chartbox3"></div>
            </div>
        </div>
        <div class="btnbox cursor" @click="roleInfo.visible = !roleInfo.visible">
            <img v-if="roleInfo.visible" class="max-w max-h" src="/public/images/hide1.png" />
            <img v-else class="max-w max-h" src="/public/images/show1.png" />
        </div>
    </div>
    <div class="flex inputcontainer column" :class="roleInfo.visible?'inpshow':'inphide'">
        <div>
            <el-input v-model="roleInfo.inputValue" size="large" style="width: 300px" placeholder="请输入合作社名称" />
            <el-button type="primary" size="large" :icon="Search" @click="searchClick">搜索</el-button>
        </div>
        <!-- <div>
            <el-select
                v-model="roleInfo.areaValue"
                placeholder="请选择地区"
                size="large"
                clearable
                style="width: 368px;margin-top:20px;"
                >
                <el-option
                    v-for="item in roleInfo.areaOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
                </el-select>
        </div> -->
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
  import { postMethodCommon, getMethodCommon } from "../../../api/common";
  export default defineComponent({
    components: {
       
    },
    props: ["id"],
    setup(props, context) { 
      const data = reactive({
        roleInfo:{
            inputValue: '',
            areaValue: '',
            visible: true,
            areaOptions:[
                { label: '市总平台' , value: '市总平台' },
                { label: '兰山区' , value: '兰山区' },
                { label: '罗庄区' , value: '罗庄区' },
                { label: '河东区' , value: '河东区' },
                { label: '郯城县' , value: '郯城县' },
                { label: '兰陵县' , value: '兰陵县' },
                { label: '莒南县' , value: '莒南县' },
                { label: '沂水县' , value: '沂水县' },
                { label: '蒙阴县' , value: '蒙阴县' },
                { label: '平邑县' , value: '平邑县' },
                { label: '费县' , value: '费县' },
                { label: '沂南县' , value: '沂南县' },
                { label: '临沭县' , value: '临沭县' },
                { label: '高新区' , value: '高新区' },
                { label: '沂河新区' , value: '沂河新区' }
            ],
            chartsData1:[],
            chartsData2:[],
            chartsData3:[],
        }
        
      });
      watch(
        () => props.id,
        (newVal, oldVal) => {
            data.roleInfo.visible = false;
        }
        );
      onMounted(() => {
        methods.getChartsData1()
        methods.getChartsData2()
        methods.getChartsData3()
      });
      const methods = {
        searchClick(){
            context.emit('search', data.roleInfo.inputValue)
        },
        //获取地区
        getChartsData1(){
            let param = {
                id: "572650bd-97d3-4108-bcd7-b108b43fd351",
                mid: "59fbd261-2b63-4066-a7b0-0e0f8ffa90e6",
                paginationInputDto: {
                    page: 1,
                    rows: 100
                }
            }
            data.roleInfo.chartsData1 = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                if(rel){
                    rel.forEach(item =>{
                        data.roleInfo.chartsData1.push({
                            name: item._input_5f09000cc553451b9d6b637dd2864c79,
                            value: item._input_6edc6765489f46068d970deaadbbe569,
                        })
                    })
                }
                methods.renderCharts1()
            })
        },
        getChartsData2(){
            let param = {
                id: "c12cfe3a-f023-4e9a-97bc-dfdcca1e2ad9",
                mid: "479e7c2b-d3d0-4ec9-ae09-24dbfcaf19df",
                paginationInputDto: {
                    page: 1,
                    rows: 100
                }
            }
            data.roleInfo.chartsData2 = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                if(rel){
                    rel.forEach(item =>{
                        data.roleInfo.chartsData2.push({
                            name: item._input_b88727e55e0846349c34d9cc1b3d7d97,
                            value: item._input_8b0fb023cc86448c89c601ad74fe1cf6,
                        })
                    })
                }
                methods.renderCharts2()
            })
        },
        getChartsData3(){
            let param = {
                id: "da85703b-e871-4401-a95e-77cb60eacf8c",
                mid: "b629e509-20a6-4f5f-9580-4f4e3fa824d4",
                paginationInputDto: {
                    page: 1,
                    rows: 100
                }
            }
            data.roleInfo.chartsData3 = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items;
                let maxValue;
                if(rel){
                    rel.forEach(item =>{
                        data.roleInfo.chartsData3.push({
                            name: item._input_ab5aa1b3cbc1477db2d0dc991c27433e,
                            value: item._input_58ac59ff1c274f82beae1b2103e7d22d,
                        })
                    })
                    let newArr = [];
                    let res = data.roleInfo.chartsData3.map(function(val, idx, self) {
                        newArr.push(val.value); 
                    })
                    newArr.sort(function(a, b) {
                        return a-b;
                    })
                    maxValue = newArr[newArr.length - 1]
                }
                methods.renderCharts3(maxValue)
            })
        },
        renderCharts1(){
            let chartBox = echarts.init(
                document.getElementById("chartbox1")
            );
            let dataList = data.roleInfo.chartsData1
            let xDatas = []
            dataList.forEach(item =>{
                xDatas.push(item.name)
            })

            let option = {
                color:["#73D85A","#EDB01E","#161BF6","#12CEFF","#68CC1C","#0CED6C","#F5600E","#DD2124","#EA860C"],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c}",
                },
                toolbox: {
                    show: false,
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                     show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitArea: {
                        show: false,
                    },
                    data: xDatas,
                    axisLabel: {
                        show: true,
                        // interval: 1,
                        rotate: 40,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        },
                    },
                    axisPointer: {
                        show: true,
                        type: "shadow",
                    },
                },
                yAxis: {
                    type: "value",
                    name: "个",
                    nameLocation: "end",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                        align: "left",
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(142, 227, 255, 0.1)",
                            type: "solid",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        },
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ["rgba(255,255,255,.03)", "transparent"],
                        },
                    },
                },
                series: [
                    {
                    name: "各区县合作社分布",
                    type: "bar",
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            label: {
                                textStyle: {
                                    //数值样式
                                    color: "#fff",
                                    fontSize: 12,
                                },
                                formatter: "{b}\n\n{c}%",
                            },
                            barBorderRadius: [15,15,0,0],
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#01FFD2'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(28,31,33,0.27)'
                                    }
                                ]
                            )
                        }
                    },
                    
                    data: dataList,
                    },
                ],
            };

            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
            chartBox.resize();
            });
        }, 
        renderCharts2(){
            let chartBox = echarts.init(
                document.getElementById("chartbox2")
            );
            let dataList = data.roleInfo.chartsData2
            let option = {
                color:["#C518FF","#24E3D0","#09B3FF","#0E29C2","#6829DB","#D1339B","#F58F34","#F4D715","#F5600E","#DD2124","#EA860C","#68CC1C"],
                // color:["#EDB01E","#73D85A","#161BF6","#12CEFF","#68CC1C","#0CED6C","#F5600E","#DD2124","#EA860C"],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {d}%",
                },
                toolbox: {
                    show: false,
                },
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    right: '8%',
                    itemWidth: 9,
                    itemHeight: 9,             
                    textStyle: {
                        color: '#fff',
                        fontSize: '14px'
                    },
                },
                series: [
                    {
                    name: "农作物产量对比",
                    type: "pie",
                    radius: [55, 70],
                    center: ["40%", "50%"],
                    minAngle: 2,
                    itemStyle: {
                        normal: {
                        label: {
                            // position: 'inside',
                            textStyle: {
                                //数值样式
                                color: "#fff",
                                fontSize: 12,
                            },
                            formatter: "{b} \n{c}",
                        },
                        },
                    },
                    data: dataList,
                    },
                ],
            };

            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
            chartBox.resize();
            });
        }, 
        renderCharts3(maxValue){
            let chartBox = echarts.init(
                document.getElementById("chartbox3")
            );
            let dataList = data.roleInfo.chartsData3
            let indicatorArr = []
            let seriesData = []
            dataList.forEach(item =>{
                indicatorArr.push({
                    name: item.name,
                    max: Number(maxValue) + 10
                })
                seriesData.push(Number(item.value))
            })

            let option = {
                tooltip: {
                    //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
                    // confine: true,
                    // enterable: true, //鼠标是否可以移动到tooltip区域内
                },
                radar: {
                    name: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    shape: 'polygon',
                    center: ['50%', '50%'],
                    radius: '70%',
                    startAngle: 120,
                    scale: true,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, .8)',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: 'rgba(255, 255, 255, .8)', // 设置网格的颜色
                        },
                    },
                    indicator: indicatorArr,
                    splitArea: {
                        show: false,
                    },
                },
                grid: {
                    position: 'center',
                },
                polar: {
                    center: ['50%', '50%'], // 默认全局居中
                    radius: '0%',
                    
                },
                angleAxis: {
                    min: 0,
                    interval: 5,
                    clockwise: false,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                radiusAxis: {
                    min: 0,
                    interval: 20,
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '各县区合作社产量对比',
                        type: 'radar',
                        symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                        symbolSize: 5, // 拐点的大小
                        itemStyle: {
                            normal: {
                                color: '#05D5FF',
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: '#05D5FF',
                                opacity: 0.5,
                            },
                        },
                        lineStyle: {
                            width: 2,
                            color: '#05D5FF',
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: (params) => {
                                    return params.value;
                                },
                                color: '#fff',
                            },
                        },
                        data: [
                            {
                                value: seriesData,
                            },
                        ],
                    },
                ],
                };

            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
            chartBox.resize();
            });
        } 
      };
      return {
        ...data,
        ...methods,
      };
    },
  });
  </script>
  <style scoped>
    .leftcontainer{
        width: 470px;
        height: calc(100% - 80px);
        position: fixed;
        top: 80px;
        left: 0;
        z-index: 9;   
    }
    .chartcontainer{
        width: 440px;  
        background: linear-gradient( 90deg, rgba(6,35,67,0.34) 0%, rgba(3,15,32,0.8) 100%);
    }
    .commonbox{
        width: 100%;
        padding: 15px 0;
    }
    .chartbox1{
        height: calc(31% - 30px);
    }
    .chartbox2{
        height: calc(32% - 30px);
    }
    .chartbox3{
        height: calc(34% - 30px);
    }
    .btnbox{
        width: 30px;
        height: 74px;
    }
    .boxshow{
        animation: animalShow 1s 1;
        -webkit-animation: animalShow 1s 1;
        left:0;
    }
    .boxhide{
        animation: animalHide 1s 1;
        -webkit-animation: animalHide 1s 1;
        left:-440px;
    }
    @keyframes animalShow
    {
        from {left:-440px;}
        to {left:0;}
    }

    @-webkit-keyframes animalHide
    {
        from {left:0;}
        to {left:-440px;}
    }
    .commonbox .title{
        width: 430px;
        height: 37px;
        background: url("/public/images/title.png") no-repeat center;
        background-size: 100% 100%;
        text-indent: 20px;
    }
    .commonbox .charts{
        width: 430px;
        height: calc(100% - 47px);
        margin-top: 10px;
        background: rgba(35,47,58,0.3);
    }
    .inputcontainer{
        width: 380px;
        position: fixed;
        top: 140px;
        z-index: 9;
    }
    .inpshow{
        animation: animalShow1 1s 1;
        -webkit-animation: animalShow1 1s 1;
        left: 490px;
    }
    .inphide{
        animation: animalHide1 1s 1;
        -webkit-animation: animalHide1 1s 1;
        left: 50px;
    }
    @keyframes animalShow1
    {
        from {left: 50px;}
        to {left: 490px;}
    }

    @-webkit-keyframes animalHide1
    {
        from {left: 490px;}
        to {left: 50px;}
    }
    ::v-deep .el-input__wrapper{
        background: linear-gradient( 90deg, #131C2D 0%, #111B2C 100%);
    }
    ::v-deep .el-input__inner {
        background: linear-gradient( 90deg, #131C2D 0%, #111B2C 100%);
        color: #fff;
        border-radius: 0px;
        text-align: left;
        margin-top: 1px;
        border-color: #409eff;
        border-right: 0px;
        border: none;
        box-shadow: none;
      }
  </style>
  