<template>
    <div style="padding: 10px">
        <div style="background: #fff; border-radius: 8px; padding: 20px;">
            <div class="query-c">
                <h1>预警来源</h1>
                <!-- Example single danger button -->
                <div style="margin-top:2vh" class="row_dsp out_box_t">
                    <div style="margin-top:2vh" class="col_dsp">
                        <h1>{{date}}</h1>
                        <div class="row_dsp">
                            <div class="interval_t">
                                <img v-bind:src="picUrl"/>
                            </div>
                            <div class="interval_t word_center_t">
                                <span>
                                    60%
                                </span>
                                <br>
                                <span>
                                    疑似真菌
                                </span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top:2vh">
                        <div ref="chart" id="chart-user" style="width:600px; height:300px"></div>
                    </div>
                </div>
                <!-- <Input search placeholder="请输入查询内容" style="width: auto" /> -->
            </div>
        </div>
        <div style="background: #fff; border-radius: 8px; padding: 20px;">
            <div class="query-c">
                <h1>农事指导</h1>
                <!-- Example single danger button -->
                <div class="interval_t word_center_t out_box_t" style="margin-top:2vh">
                    <span>{{guideContent}}</span>
                </div>
                <!-- <Input search placeholder="请输入查询内容" style="width: auto" /> -->
            </div>
            <br>
        </div>
    </div>
</template>

<script>

export default {
    name: 'bhfxDetail',
    data() {
        return {
            date: '12月23日',
            picUrl: require('../assets/imgs/user.jpg'),
            guideContent: '农事建议：针对本次识别结果，物候期为{生长期}，注意浇灌巡园',
        }
    },
    mounted() {
        this.getEchartData()
    },
    methods: {
        getEchartData() {
            const chart = this.$refs.chart
            if (chart) {
                const myChart = this.$echarts.init(chart)
                const option = {
                    title: {
                        text: '感染趋势',
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['2018', '2019', '2020'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['9.17', '9.18', '9.19', '9.20', '9.21', '9.22', '9.23'],
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '2018',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210],
                        },
                        {
                            name: '2019',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310],
                        },
                        {
                            name: '2020',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410],
                        },
                    ],
                }
                myChart.setOption(option)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
    },
}
</script>

<style scoped>
.btn_t{
    background: none;
}
.arrow-down {
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  height: 5px;
  width: 5px;
  transform: translate(1px, -1px) rotate(-45deg);
  -webkit-transform: translate(1px, -1px) rotate(-45deg);
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  display: inline-block;
  -moz-transform: translate(1px, -1px) rotate(-45deg);
  -ms-transform: translate(1px, -1px) rotate(-45deg);
  -o-transform: translate(1px, -1px) rotate(-45deg);
}
.row_dsp{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.content_top{
    width:30vh;
}
.col_dsp{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction:column;
}
.interval_t{
    padding: 1vw;
}
.word_center_t{
     text-align:center;
}
.out_box_t{
    border:solid 1px rgb(157, 151, 151);
    border-radius:1vw;
}
</style>
