<template>
  <section>
    <common>
      <template #main>
        <div>
          <el-card shadow="hover" style="border-radius: 16px">
            <el-row>
              <el-col :span="10">
                <map-comp style="height: 300px; width: 100%; border: 0" @change-map="changeMap"></map-comp>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="13">
                <div class="location">
                  耿马县·{{ currentPosition
                  }}<img :src="getAssetsFile('images/smartFarm/location.png')" height="20" style="margin-left: 8px" alt="" />
                </div>
                <div style="display: flex; justify-content: space-around">
                  <el-card v-for="(item, index) in weatherData" :key="index" :body-style="{ padding: 0 }" shadow="always" class="weatherCards">
                    <div>{{ item.time }}</div>
                    <div><img :src="getAssetsFile('images/smartFarm/' + item.weather + '.png')" alt="" height="50" /></div>
                    <div>{{ item.temp }}℃</div>
                  </el-card>
                </div>
                <div class="details">
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">温度</div>
                      <div class="rightValue">
                        {{ currentData.temp }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">PM2.5</div>
                      <div class="rightValue">{{ currentData.PM2 }}μg/m³</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">作物虫害</div>
                      <div class="rightValue">
                        {{ currentData.bugs === 0 ? '无' : '有' }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤温度</div>
                      <div class="rightValue">{{ currentData.dustTemp }}℃</div>
                    </div>
                  </div>
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">湿度</div>
                      <div class="rightValue">{{ currentData.wet }}%</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">PM10</div>
                      <div class="rightValue">{{ currentData.temp }}μg/m³</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">作物病害</div>
                      <div class="rightValue">
                        {{ currentData.sick === 0 ? '无' : '有' }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤湿度</div>
                      <div class="rightValue">{{ currentData.dustWet }}%</div>
                    </div>
                  </div>
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">风向</div>
                      <div class="rightValue">
                        {{ currentData.wind }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">光照度</div>
                      <div class="rightValue">{{ currentData.light }}Lux</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">风速</div>
                      <div class="rightValue">{{ currentData.temp }}m/s</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤酸碱度</div>
                      <div class="rightValue">
                        {{ currentData.PH }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
            <div style="display: flex; padding: 20px">
              <div style="width: 30%">
                <div style="font-size: 18px; font-weight: bold; text-align: left">土壤数据</div>
                <div style="display: flex">
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/光照传感器.png')" alt="" />
                      光照
                    </div>
                    <div class="values">{{ dustData.light }}</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/排风.png')" alt="" />
                      排风
                    </div>
                    <div class="values">{{ dustData.wind }}</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/蒸腾.png')" alt="" />
                      蒸腾
                    </div>
                    <div class="values">{{ dustData.evapotranspiration }}</div>
                  </div>
                </div>
                <div style="display: flex">
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/土壤湿度.png')" alt="" />
                      湿度
                    </div>
                    <div class="values">{{ dustData.wet.min }}</div>
                    <div class="values">{{ dustData.wet.max }}</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/土壤温度.png')" alt="" />
                      温度
                    </div>
                    <div class="values">{{ dustData.temp.min }}</div>
                    <div class="values">{{ dustData.temp.max }}</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/空气.png')" alt="" />
                      空气
                    </div>
                    <div class="values">{{ dustData.air.dirt }}</div>
                    <div class="values">{{ dustData.air.wet }}</div>
                  </div>
                </div>
                <div class="report">
                  <div><img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" /></div>
                  <div class="warning">
                    <div>温度</div>
                    <div>36℃</div>
                  </div>
                  <div class="warning">
                    <div>超高</div>
                    <div>4℃</div>
                  </div>
                </div>
              </div>
              <div style="width: 35%">
                <map-simple style="height: 320px; width: 100%" @change-map2="changeMap2"></map-simple>
              </div>
              <div style="width: 35%">
                <div style="margin-top: 70px; display: flex; text-align: left">
                  <el-col :span="12">
                    <el-row class="dataTitle">泵压管控mpa</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">输入</span>
                        <span class="values">{{ dustData.pressure.input }}</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">末端</span>
                        <span class="values">{{ dustData.pressure.end }}</span>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="dataTitle">灌溉流量m²/h</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">灌溉</span>
                        <span class="values">{{ dustData.flow.output }}</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">回液</span>
                        <span class="values">{{ dustData.flow.input }}</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </div>
                <div style="display: flex; text-align: left">
                  <el-col :span="12">
                    <el-row class="dataTitle">水肥监测</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">PH</span>
                        <span class="values">{{ dustData.fertilization.ph }}</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">输入</span>
                        <span class="values">{{ dustData.fertilization.output }}</span>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">&nbsp;</el-col>
                </div>
                <el-row class="dataTitle">灌溉流量m²/h</el-row>
                <charts-flow style="height: 150px; width: 100%"></charts-flow>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
            <div style="display: flex; padding: 20px">
              <div style="width: 50%">
                <div style="font-size: 18px; font-weight: bold; text-align: left">产能预测</div>
                <div style="display: flex; justify-content: flex-start; margin: 20px 0">
                  <div class="plansBlock" style="background-color: #25bf82">
                    <div style="">预计生产</div>
                    <div style="font-weight: 900">300吨</div>
                  </div>
                  <div class="plansBlock" style="background-color: #ffbe4d; margin-left: 5%">
                    <div>预计产值</div>
                    <div style="font-weight: 900">1500万元</div>
                  </div>
                </div>
                <div class="coins">
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">水质综合评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #3685fe"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/fall.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">病虫害管控评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #25bf82"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">环境综合评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #ffd500"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                </div>

                <div class="vars">
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">种植面积</div>
                    <div style="color: #25bf82; font-weight: 900">500亩</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">水质监测</div>
                    <div style="color: #25bf82; font-weight: 900">1266次</div>
                  </div>
                </div>
                <div class="vars">
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">病虫害监测</div>
                    <div style="color: #25bf82; font-weight: 900">367次</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">环境监测</div>
                    <div style="color: #25bf82; font-weight: 900">1547次</div>
                  </div>
                </div>
              </div>
              <div style="width: 50%">
                <img style="width: 100%" :src="getAssetsFile('images/smartFarm/locationPic.png')" alt="" />
              </div>
            </div>
          </el-card>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref } from 'vue';
import Common from './components/common.vue';
import MapComp from '@/views/smartFarm/components/mapComp.vue';
import { getAssetsFile } from '@/utils/index.js';
import MapSimple from '@/views/smartFarm/components/mapSimple.vue';
import ChartsFlow from '@/views/smartFarm/components/charts-flow.vue';
import Mock from 'mockjs';

/* --------------- data --------------- */
// #region
const weatherData = ref([
  {
    weather: 'sunny',
    time: '15:00',
    temp: '18',
  },
  {
    weather: 'sunnyToCloudy',
    time: '16:00',
    temp: '19',
  },
  {
    weather: 'thunderRain',
    time: '17:00',
    temp: '19',
  },
  {
    weather: 'rainy',
    time: '18:00',
    temp: '18',
  },
  {
    weather: 'rainy',
    time: '19:00',
    temp: '15',
  },
  {
    weather: 'windy',
    time: '20:00',
    temp: '13',
  },
]);

const dustData = ref({
  light: '2000Lux', // 光照强度
  wind: '15m³/h', // 排风量
  evapotranspiration: '2000Lux', // 蒸腾
  wet: {
    min: '26%',
    max: '34%',
  },
  temp: {
    min: '32℃',
    max: '28℃',
  },
  air: {
    dirt: '300ppm',
    wet: '34%',
  },
  pressure: {
    input: '11',
    end: 2,
  },
  flow: {
    temp: '53',
    input: '125',
  },
  fertilization: {
    ph: 8,
    output: '18',
  },
});

// 定义合法的天气状态流转规则
const weatherStates = [
  {
    type: 'sunny',
    next: ['sunny', 'sunnyToCloudy'], // 晴天只能转晴天或晴转多云
    tempEffect: +0, // 温度影响
  },
  {
    type: 'sunnyToCloudy',
    next: ['thunderRain', 'rainy'], // 晴转多云后可能转雷雨或直接下雨
    tempEffect: +1,
  },
  {
    type: 'thunderRain',
    next: ['rainy', 'windy'], // 雷雨后继续下雨或转大风
    tempEffect: -2,
  },
  {
    type: 'rainy',
    next: ['rainy', 'windy'], // 雨天可能持续或转大风
    tempEffect: -3,
  },
  {
    type: 'windy',
    next: ['sunny'], // 大风后转晴天
    tempEffect: -4,
  },
];

const currentPosition = ref('孟定镇');

const currentData = ref({
  temp: 18, // 当前温度
  PM2: 80, // 空气质量 μg/m³
  bugs: 0, // 虫害
  dustTemp: 15, // 土壤温度 ℃
  wet: 56, // 湿度 %
  PM10: 120, // 空气质量 μg/m³
  sick: 0, // 病害
  dustWet: 64, // 土壤湿度%
  wind: '东南风', // 风向
  light: 500, // 光照Lux
  windSpeed: 1.5, // 风速 m/s
  PH: 6.5, // 土壤酸碱度
});
// 基础环境数据模板

// #endregion

/* --------------- methods --------------- */
// #region
const changeMap = (params) => {
  currentPosition.value = params.message;
  const newWeatherData = generateSmartWeather(15, 6, 18);
  weatherData.value = newWeatherData;
  currentData.value = generateFarmData(18);
};

const changeMap2 = (params) => {
  console.log(params.message);
  dustData.value = Mock.mock({
    // 光照强度 (500-3000 Lux)
    light: '@natural(500, 3000)' + 'Lux',

    // 排风量 (5-30 m³/h)
    wind: '@natural(5, 30)' + 'm³/h',

    // 蒸腾量 (1-10 mm/day)
    evapotranspiration: '@natural(1, 10)' + 'mm/day',

    // 湿度范围 (min:20-40%, max比min高5-15%)
    wet: {
      min: '@natural(20, 40)' + '%',
      max: function () {
        return parseInt(this.min) + Mock.mock('@natural(5, 15)') + '%';
      },
    },

    // 温度范围 (min:15-25℃, max比min高5-15℃)
    temp: {
      min: '@natural(15, 25)' + '℃',
      max: function () {
        return parseInt(this.min) + Mock.mock('@natural(5, 15)') + '℃';
      },
    },

    // 空气质量
    air: {
      // 颗粒物浓度 (100-800 ppm)
      dirt: '@natural(100, 800)' + 'ppm',
      wet: '@natural(30, 60)%', // 先独立生成
    },

    // 压力参数
    pressure: {
      // 输入压力 (5-15 MPa)
      input: '@natural(5, 15)',
      // 末端压力衰减 (1-5)
      end: '@natural(1, 5)',
    },

    // 流量参数
    flow: {
      // 流体温度 (30-60 m²/h)
      temp: '@natural(30, 60)',
      // 输入流量 (50-200 m²/h)
      input: '@natural(50, 200)',
    },

    // 施肥参数
    fertilization: {
      // pH值 (5.0-8.5)
      ph: '@float(5, 8.5, 1, 1)',
      // 输出流量 (10-50 m²/h)
      output: '@natural(10, 50)',
    },
  });
};
// 生成智能天气数据
function generateSmartWeather(startTime, hours, baseTemp = 18) {
  let currentWeather = 'sunny';
  const result = [];

  for (let i = 0; i < hours; i++) {
    // 1. 获取当前天气状态对象
    const state = weatherStates.find((s) => s.type === currentWeather);

    // 2. 计算时间 (15:00 格式)
    const time = `${startTime + i}:00`.padStart(5, '0');

    // 3. 计算温度（基于基础温度+天气影响+随机波动）
    const temp = baseTemp + state.tempEffect + Math.floor(Math.random() * 2);

    // 4. 记录数据
    result.push({
      weather: currentWeather,
      time,
      temp: Math.max(temp, -5), // 确保不低于-5度
    });

    // 5. 智能切换下一个天气状态
    currentWeather = state.next[Math.floor(Math.random() * state.next.length)];
  }

  return result;
}

const generateFarmData = (baseTemp = 18) => {
  // 1. 先生成核心天气数据（基于之前方案）
  const weather = Mock.mock({
    weather: '@pick(["sunny", "sunnyToCloudy", "thunderRain", "rainy", "windy"])',
    wind: '@pick(["东南风", "西南风", "东北风", "西北风"])',
    windSpeed: '@float(0.5, 5, 1, 1)',
  });

  // 2. 根据天气计算衍生数据
  const weatherImpact = {
    sunny: { temp: +0, light: +200, wet: -10 },
    sunnyToCloudy: { temp: +1, light: -100, wet: +5 },
    thunderRain: { temp: -2, light: -300, wet: +20 },
    rainy: { temp: -3, light: -400, wet: +25 },
    windy: { temp: -4, light: +50, wet: -15 },
  }[weather.weather];

  // 3. 生成完整数据集（带科学关联）
  return {
    temp: Mock.Random.float(baseTemp + weatherImpact.temp - 1, baseTemp + weatherImpact.temp + 1, 1, 1),
    PM2: Mock.Random.integer(weather.weather === 'windy' ? 30 : 60, weather.weather === 'rainy' ? 90 : 120),
    PM10: Mock.Random.integer(80, 150),
    bugs: Mock.Random.integer(0, weather.wet > 70 ? 5 : 2), // 高湿度虫害增加
    dustTemp: Mock.Random.float(baseTemp - 3, baseTemp + 1, 1, 1),
    wet: Mock.Random.integer(50 + weatherImpact.wet, 70 + weatherImpact.wet),
    sick: Mock.Random.integer(0, weather.weather === 'thunderRain' ? 3 : 1), // 雷雨易引发病害
    dustWet: Mock.Random.integer(60, weather.weather === 'rainy' ? 85 : 75),
    wind: weather.wind,
    light: Mock.Random.integer(Math.max(200, 500 + weatherImpact.light), Math.min(1200, 800 + weatherImpact.light)),
    windSpeed: weather.windSpeed,
    PH: Mock.Random.float(6.0, 7.5, 1, 1),
  };
};
// #endregion
</script>

<style lang="scss" scoped>
.vars {
  width: 95%;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.shu {
  width: 4px;
  height: 30px;
  border-radius: 2px;
}
.coins {
  display: flex;
  width: 95%;
  height: 60px;
  justify-content: space-between;
}
.plansBlock {
  height: 90px;
  width: 45%;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 16px;
}
.values {
  color: #25bf82;
  font-size: 15px;
  margin-left: 5px;
}
.dataTitle {
  margin: 4px 0;
  color: #999999;
}
.warning {
  div {
    margin: 4px 0;
  }
}
.report {
  height: 70px;
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to left, #ffc9d4 0%, #ffffff 100% /* 底部稍深青色 */);
  img {
    height: 40px;
  }
}
.dustData {
  width: 33%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15px;
  margin: 20px 0;
  .values {
    color: #25bf82;
  }
  img {
    height: 20px;
    margin-right: 5px;
  }
}
.details {
  display: flex;
  justify-content: space-around;
  .details-block {
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .detail {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    .leftTitle {
      font-size: 15px;
      color: #999999;
    }
    .rightValue {
      font-size: 15px;
      color: #25bf82;
    }
  }
}
.location {
  padding: 20px 0;
  text-align: right;
  font-size: 15px;
  color: #000000;
}
.weatherCards {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 15px;
  color: #999999;
  text-align: center;
  height: 120px;
  width: 70px;
  background: linear-gradient(to left bottom, #cfffec 0%, /* 顶部浅青色 */ #fbfefd 70%, /* 中间渐变色 */ #ffffff 100% /* 底部稍深青色 */);
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 150, 136, 0.15);
}
</style>
