<template>
    <div class="chart-list">
        <div class="chart-item">
            <chart-box name="疑似病虫">
                <bar-chart class="bar-chart" styleName="styleName1" :xData="['蚜虫','条锈病','赤霉病']" :yData="[3,2,2]"></bar-chart>
                <div class="box-bg tips">
                    <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
                </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="日常防治">
              <bar-chart class="bar-chart" styleName="styleName3" :xData="['已防治','未防治']" :yData="preventionYData.slice(1,)"></bar-chart>
              <div class="box-bg tips">
                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
              </div>
            </chart-box>
        </div>
        <div class="chart-item">
            <chart-box name="异常防治">
              <bar-chart class="bar-chart" styleName="styleName3" :xData="['无需防治','已防治','未防治']" :yData="preventionYData"></bar-chart>
              <div class="box-bg tips">
                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
              </div>
            </chart-box>
        </div>
    </div>
</template>

<script setup>
import chartBox from "@/components/chartBox.vue";
import eventBus from "@/api/eventBus";
import barChart from "@/components/charts/barChart.vue";
import {onMounted, onUnmounted, ref} from "vue"

//疑似病虫
const diseaseXData = ref([])
const diseaseYData = ref([])
const diseaseText = ref('')

//日常防治
const preventionXData = ref([])
const preventionYData = ref([
    {
        value:2,
        color:['#59B558','#2D4C2C']
    },
    {
        value:2,
        color:['#CE7E43','#CE7E43']
    },
    {
        value:2,
        color:['#DAB767','#3D3523']
    }
])

const preventionText = ref('')

const getList = (farmId) =>{

  VE_API.farm.getFarmReport({farmId,type:'病虫风险'}).then(res =>{
    if(res.data['疑似病虫']){
      const {list ,text} = res.data['疑似病虫']
      diseaseXData.value = list.map(item =>item.name)
      diseaseYData.value = list.map(item =>item.value)
      diseaseText.value = text
    }
    if(res.data['日常防治']){
      const {list ,text} = res.data['日常防治']
      preventionXData.value = ['一级','二级','三级']
      preventionYData.value = preventionXData.value.map((item,index) => {
        let color = ['#59B558','#2D4C2C']
        if(index === 1){
          color = ['#CE7E43','#CE7E43']
        }else if(index === 2){
          color = ['#DAB767','#3D3523']
        }
        return {
          color,
          value:index?2:1,
        }
      })
      preventionText.value = text
    }
  })
}

function changeAreaId({farmId}){
  getList(farmId)
}

onMounted(() =>{
//   getList(sessionStorage.getItem('farmId'))
  eventBus.on("area:id", changeAreaId);
})

onUnmounted(()=>{
  eventBus.off("area:id", changeAreaId);
})
</script>

<style lang="scss" scoped>
.chart-list {
    width: calc(100% - 54px - 10px);
    height: 100%;
    overflow: auto;
    padding: 8px 8px 0 0;
    box-sizing: border-box;
    .chart-item {
        width: 100%;
        height: calc((100% - 273px) / 2);
        box-sizing: border-box;
        .import{
          font-size: 12px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          padding: 5px 13px;
          cursor: pointer;
        }
        .bar-chart{
          width: 100%;
          height: calc(100% - 77px - 30px);
        }
        .box-bg {
            margin-top: 16px;
            border-radius: 2px 2px 0 0;
            font-size: 12px;
            padding: 6px;
            line-height: 1.5;
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            overflow-y: auto;
            background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);
            .text {
                position: relative;
                color: #fff;
            }
        }
    }
    .chart-item + .chart-item{
        margin-top: 8px;
    }

}
</style>
