<template>
  <div>
    <Bg></Bg>
    <Header></Header>
    <div class="container2">
      <div class="mainDiv">
        <div class="top">
          <div class="left-box chart">
            <Pie></Pie>
          </div>
          <div class="right-box chart">
            <div class="box-title">
              <img
                class="img"
                src="@/assets/img/detailsPage/arrow.png"
                alt=""
              />
              <span>气象预警</span>
            </div>
            <DoubleLine></DoubleLine>
          </div>
        </div>
        <div class="bottom">
          <div class="left-box">
            <div class="box-title">
              <img
                class="img"
                src="@/assets/img/detailsPage/arrow.png"
                alt=""
              />
              <span>物候期预警</span>
            </div>
            <div class="box-cont pd-auto">
              <div class="tabs">
                <div
                  :class="['tabs-item', { active: active === index }]"
                  @click="handleActive(index)"
                  v-for="(item, index) in tabsArr"
                  :key="index"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="list">
                <div
                  class="list-item"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <div class="name">
                    <img src="@/assets/img/detailsPage/list_icon.png" alt="" />
                    <div>{{ item.name }}</div>
                  </div>
                  <div class="border">
                    <div
                      :class="[
                        'item-block',
                        { 'item-active': listAct === ele.id },
                        { 'item-block-3': ele.level == 3 },
                      ]"
                      @click="handleListAct(ele.id)"
                      v-for="(ele, idx) in item.arr"
                      :key="idx + 1"
                    >
                      {{ ele.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="box-title">
              <img src="@/assets/img/detailsPage/arrow.png" alt="" />
              荔枝-<span class="name">干旱预警</span>
            </div>
            <div class="box-cont flex">
              <Line class="cahrt"></Line>
              <div class="forewarning">
                <div class="title">干旱预警</div>
                <div class="text">
                  7月15日与7月16日干旱情况较为严重，干旱风险为3级，若您未能及时浇水，请及时关注果树生长情况，适时补水。昨天和今天干旱风险
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Bg from "../../Bg";
import Title from "../../components/title";
import Header from "@/views/components/Header.vue";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import Pie from "./charts/pie.vue";
import Line from "./charts/line.vue";
import DoubleLine from "./charts/doubleLine.vue";

const store = useStore();

const location = store.getters.userinfo.location;
const curGardenId = ref(store.getters.userinfo.curGardenId);

const tabsArr = [
  {
    name: "龙眼",
  },
  {
    name: "荔枝",
  },
  {
    name: "芒果",
  },
];

const active = ref(0);
const handleActive = (i) => {
  active.value = i;
};

const list = [
  {
    name: "秋梢期",
    arr: [
      {
        name: "干旱预警",
        level: 1,
        id: 0,
      },
      {
        name: "高温预警",
        level: 1,
        id: 1,
      },
    ],
  },
  {
    name: "花芽分化期",
    arr: [
      {
        name: "干旱预警",
        level: 3,
        id: 2,
      },
      {
        name: "高温预警",
        level: 3,
        id: 3,
      },
    ],
  },
];

const listAct = ref(0);
const handleListAct = (i) => {
  listAct.value = i;
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
}
.mainDiv {
  position: absolute;
  top: 100px;
  bottom: 60px;
  left: 20px;
  right: 20px;
  color: #fff;
  .top,
  .bottom {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    border-top: 1px solid rgba(81, 233, 240, 0.6);
    .box-title {
      background: url("@/assets/img/detailsPage/title_bg.png") no-repeat center
        center / 100% 100%;
      width: 100%;
      font-weight: 800;
      font-size: 24px;
      padding: 3px 10px;
      .img {
        margin-right: 8px;
      }
      .name {
        color: #ff7a46;
      }
    }
    .left-box {
      width: 30%;
      height: 100%;
      border-right: 1px solid #fff;
    }
    .right-box {
      width: 70%;
      height: 100%;
    }
  }
  .top {
    height: 45%;
    margin-bottom: 10px;
  }
  .bottom {
    height: calc(100% - 45% - 8px - 10px);
    .pd-auto {
      padding: 20px 15px;
    }
    .box-cont {
      width: 100%;
      height: calc(100% - 10px - 8px - 20px);
      box-sizing: border-box;
      .tabs {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        .tabs-item {
          width: 128px;
          height: 38px;
          line-height: 33px;
          font-weight: 500;
          font-size: 14px;
          color: #b4fffb;
          text-align: center;
          background: url("@/assets/img/tabs_btn2.png") no-repeat center center /
            100% 100%;
          cursor: pointer;
          &.active {
            width: 138px;
            height: 42px;
            line-height: 36px;
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            background: url("@/assets/img/tabs_btn1_active.png") no-repeat
              center center / 100% 100%;
          }
        }
      }
      .list {
        overflow: auto;
        height: 100%;
        .list-item {
          margin-top: 25px;
          .name {
            display: flex;
            align-items: center;
            div {
              font-size: 18px;
              background: url("@/assets/img/detailsPage/list_name_bg.png")
                no-repeat center center / 100% 100%;
              padding: 3px 12px;
              margin-left: 8px;
            }
          }
          .border {
            margin-top: 10px;
            border-radius: 5px;
            padding: 15px 5px;
            background: rgba(48, 205, 209, 0.15);
            display: flex;
            .item-block {
              background: url("@/assets/img/detailsPage/yj_btn.png") no-repeat
                center center / 100% 100%;
              padding: 10px 15px;
              text-align: center;
              box-sizing: border-box;
              width: 68px;
              margin: 0 10px;
              cursor: pointer;
              &.item-active {
                background: url("@/assets/img/detailsPage/yj_btn_act.png")
                  no-repeat center center / 100% 100%;
                position: relative;
                &::after {
                  content: "";
                  position: absolute;
                  background: url("@/assets/img/detailsPage/act_arrow.png")
                    no-repeat center center / 100% 100%;
                  bottom: -10px;
                  left: 40%;
                  width: 14px;
                  height: 8px;
                }
              }
              &.item-block-3 {
                background: url("@/assets/img/detailsPage/yj_btn_3.png")
                  no-repeat center center / 100% 100%;
                &.item-active {
                  background: url("@/assets/img/detailsPage/yj_btn_act_3.png")
                    no-repeat center center / 100% 100%;
                  &::after {
                    background: url("@/assets/img/detailsPage/act_arrow_3.png")
                      no-repeat center center / 100% 100%;
                  }
                }
              }
            }
          }
        }
      }
      .cahrt {
        width: calc(100% - 442px);
        height: 100%;
      }
      .forewarning {
        width: 442px;
        height: 334px;
        box-sizing: border-box;
        background: url("@/assets/img/detailsPage/yj_bg.png") no-repeat center
          center / 100% 100%;
        .title {
          font-weight: bold;
          font-size: 22px;
          color: #0ee2dc;
          padding: 13px 0;
          width: 160px;
          margin: auto;
          text-align: center;
          background: url("@/assets/img/detailsPage/yj_title.png") no-repeat
            center center / 100% 100%;
        }
        .text {
          padding: 6px 15px;
        }
      }
    }
    .flex {
      display: flex;
    }
  }
}
</style>