<template>
  <div class="infor">
    <Model :title="titles">
      <div>
        <div class="flex">
          <template v-for="v in list">
            <!-- <div
              v-if="v.util == '平方千米'"
              class="flex flex1"
              :key="v.name"
              style="
                margin-left: 10px;

                margin-top: 0;
                margin-bottom: 0;
              "
            >
              <img class="imgs" :src="v.img" alt="" />
              <div>
                <div class="land-title">{{ v.name }}</div>
                <span class="colors"
                  >{{ v.value }}
                  <span style="font-size: 14px; color: #fff">{{
                    v.util
                  }}</span></span
                >
              </div>
            </div> -->
            <div
              class="flex flex1"
              :key="v.name"
              style="margin-left: 10px"
              :style="{
                'margin-top': `${title == '新街镇' ? '0' : '19px'}`,
                'margin-bottom': `${title == '新街镇' ? '0' : '19px'}`,
              }"
            >
              <img class="imgs" :src="v.img" alt="" />
              <div>
                <div class="land-title">{{ v.name }}</div>
                <span class="colors"
                  >{{ v.value }}
                  <span style="font-size: 14px; color: #fff">{{
                    v.util
                  }}</span></span
                >
              </div>
            </div>
          </template>
        </div>
      </div>
    </Model>
  </div>
</template>
<script>
import Model from "../model.vue";
import img0 from "@/assets/image/dkzs_ic@2x.png";
import img1 from "@/assets/image/dkzmj_ic@2x.png";
import img2 from "@/assets/image/qtgc_ic2@2x.png";
import img3 from "@/assets/image/ggypagc_ic2@2x.png";

export default {
  name: "LandInfor",
  components: { Model },
  props: {
    title: "随县",
  },
  mounted() {
    this.initRT();
  },
  data() {
    return {
      titles: "随县农业概况",
      list: [
        {
          name: "随县-耕地",
          value: "171.18",
          img: img0,
          util: "万亩",
        },

        {
          name: "随县-园地",
          value: "19.33",
          img: img1,
          util: "万亩",
        },
        {
          name: "随县-林地",
          value: "518.69",
          img: img2,
          util: "万亩",
        },
        {
          name: "随县-草地",
          value: "1.47",
          img: img3,
          util: "万亩",
        },
      ],
    };
  },
  created() {
    if (this.title == "新街镇") {
      this.titles = "新街镇概况";
      this.list = [
        {
          name: "面积",
          value: "144.54",
          img: img0,
          util: "平方千米",
        },
        {
          name: "户籍人口",
          value: "44013",
          img: img0,
          util: "人",
        },
        {
          name: "耕地面积",
          value: "9.5",
          img: img2,
          util: "万亩",
        },
        {
          name: "林地面积",
          value: "4.9",
          img: img3,
          util: "万亩",
        },
      ];
    }
  },
  methods: {
    initRT() {
      let Chart = this.$refs.landline;
      let myChart = this.$echarts.init(Chart);
      let colors = [
        {
          borderColor: "rgba(56, 255, 174,1)",
          start: "rgba(56, 255, 174,0.8)",
          end: "rgba(133, 253, 230,0.3)",
        },
        {
          borderColor: "rgba(2, 254, 255,1)",
          start: "rgba(2, 254, 255,0.8)",
          end: "rgba(74, 210, 255,0.3)",
        },
      ];
      // color: ['#82F3C5', '#02FEFF'],
      const option = {
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          data: ["数量", "数量1"],
        },
        grid: {
          top: "17%",
          left: "15%",
          bottom: "22%",
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        // dataset: {
        //     source: [
        //         ['product', '2015', '2016'],
        //         ['田地', 2300, 1800],
        //         ['建设用地', 831, 1734],
        //         ['非粮化', 2264, 1652],
        //         ['撂荒', 724, 2539]
        //     ]
        // },
        xAxis: {
          type: "category",
          data: ["田地", "建设用地", "非粮化", "撂荒"],
          axisLine: {
            lineStyle: {
              color: "#02FEFF",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          max: 4000,
          min: 0,
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(2, 254, 255,0.3)",
            },
          },
        },
        series: [
          {
            type: "bar",
            data: [2300, 831, 2264, 724],
            name: "数量",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[0].start,
                  },
                  {
                    offset: 1,
                    color: colors[0].end,
                  },
                ]),
              },
            },
          },
          {
            type: "bar",
            name: "数量1",
            data: [1800, 1734, 1652, 2539],
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[1].start,
                  },
                  {
                    offset: 1,
                    color: colors[1].end,
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.infor {
  margin-top: 15px;

  .flex {
    display: flex;
    flex-wrap: wrap;
  }

  .flex1 {
    justify-content: space-between;
    width: 45%;
    padding-bottom: 10px;
    margin: 19px 0;
    > div {
      .land-title {
        padding: 5px 0;
        font-size: 18px;
      }

      .colors {
        color: #02feff;
        font-size: 22px;
        font-weight: bold;
      }
    }
    .imgs {
      width: 75px;
      height: 75px;
      margin-right: 10px;
    }
  }

  .land-line {
    height: 220px;
  }
}
</style>
