<template>
  <div class="mianBox">
    <div class="header">
      <div class="headerTop">
        <div>{{ dateDay }}</div>
        <div class="time">{{ dataTime }}</div>
        <div class="weather">
          <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
        </div>
        <div>
          {{ $store.state.weaterRes.weather || "" }}
          {{ $store.state.weaterRes.temperature || "" }}℃
        </div>
        <div class="titleHeader">智慧农贸</div>
        <img src="../../assets/trade/topr.png" alt="" class="topR" />
      </div>
      <div class="headerB">
        <div class="headerBBox yellowBox">
          <div class="number">136</div>
          <div>
            <div class="textF">总摊位数量（个）</div>
            <div>+1.16% <img src="../../assets/trade/up.png" alt="" /></div>
          </div>
        </div>
        <div class="headerBBox skyBlueBox">
          <div class="number">56</div>
          <div>
            <div class="textF">空摊位数量（个）</div>
            <div>-0.15% <img src="../../assets/trade/down.png" alt="" /></div>
          </div>
        </div>
        <div class="headerBBox redBox">
          <div class="number">56004</div>
          <div>
            <div class="textF">总面积（㎡）</div>
            <div>+2.35% <img src="../../assets/trade/up.png" alt="" /></div>
          </div>
        </div>
        <div class="headerBBox blueBox">
          <div class="number">53.25</div>
          <div>
            <div class="textF">摊位占用率（%）</div>
            <div>-3.12% <img src="../../assets/trade/down.png" alt="" /></div>
          </div>
        </div>
        <div class="headerBBox shitYellowBox">
          <div class="number">32</div>
          <div>
            <div class="textF">电子秤总数（个）</div>
            <div>+0.26% <img src="../../assets/trade/up.png" alt="" /></div>
          </div>
        </div>
        <div class="headerBBox greenBox">
          <div class="number">78</div>
          <div>
            <div class="textF">电子秤在线数（个）</div>
            <div>+1.86% <img src="../../assets/trade/up.png" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="contentLeft">
        <div class="contentLeft-top">
          <div class="contentLeft-title titleBg">周交易数据</div>
          <div class="contentLeft-content">
            <div
              ref="echartD"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
              "
            ></div>
          </div>
        </div>
        <div class="contentLeft-bot">
          <div class="contentLeft-title titleBg">台账数据</div>
          <div class="contentLeft-content">
            <div
              ref="echartD2"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
              "
            ></div>
          </div>
        </div>
      </div>
      <div class="contentCenter">
        <div id="mapF"></div>
      </div>
      <div class="contentRight">
        <div class="contentRight-top">
          <div class="contentRight-title titleBg">日交易摊位排行榜</div>
          <div class="contentRight-content">
            <div
              ref="echartD3"
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
              "
            ></div>
          </div>
        </div>
        <div class="contentRight-bot">
          <div class="contentRight-title titleBg">实时交易记录</div>
          <div class="contentRight-content">
            <table
              border="0"
              cellpadding="0"
              cellspacing="0"
              style="
                width: 100%;
                height: 100%;
                color: #fff;
                border-collapse: collapse;
              "
            >
              <tr>
                <th v-for="item in tableDataHeader" :key="item.prop">
                  {{ item.name }}
                </th>
              </tr>
              <tr v-for="(item, ind) in tableData" :key="ind">
                <td v-for="items in tableDataHeader" :key="items.prop">
                  {{ item[items.prop] }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import AMap from "AMap";
import getDataE from "./echarts";
import getDataE2 from "./echarts2";
import getDataE3 from "./echarts3";
export default {
  data() {
    return {
      dateDay: "",
      dataTime: "",
      timeArea: "",
      weatherObj: {},
      echartsBox: null,
      echartsBox2: null,
      echartsBox3: null,
      echartsBox4: null,
      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
      tableData: [
        {
          name: "苹果",
          dpName: "周丽娟水果店",
          jf: "8.8",
          zl: "1",
          je: "17.6",
          time: "15:23:26",
        },
        {
          name: "辣椒面",
          dpName: "曾学孔自产自销铺",
          jf: "12",
          zl: "2",
          je: "48",
          time: "15:22:00",
        },
        {
          name: "螃蟹",
          dpName: "丁文根水产海鲜铺",
          jf: "55.9",
          zl: "1",
          je: "111.8",
          time: "15:21:00",
        },
        {
          name: "大白菜",
          dpName: "宁秋花蔬菜摊",
          jf: "3.9",
          zl: "0.5",
          je: "3.9",
          time: "15:20:00",
        },
        {
          name: "猪头肉",
          dpName: "伍世豪肉铺",
          jf: "4.5",
          zl: "1",
          je: "9",
          time: "15:19:00",
        },
        {
          name: "基围虾",
          dpName: "华城冷冻食品",
          jf: "36",
          zl: "0.5",
          je: "36",
          time: "15:18:00",
        },
        {
          name: "老冰棍",
          dpName: "徐志勇冷饮店",
          jf: "3.9",
          zl: "1",
          je: "7.8",
          time: "15:17:00",
        },
      ],
      tableDataHeader: [
        { name: "商品名称", prop: "name" },
        { name: "商铺名称", prop: "dpName" },
        { name: "价格/元", prop: "jf" },
        { name: "总量/kg", prop: "zl" },
        { name: "金额/元", prop: "je" },
        { name: "时间", prop: "time" },
      ],
      lnglats: [
        { x: 121.145887, y: 31.147121 },
        { x: 121.109494, y: 31.057544 },
        { x: 121.208371, y: 31.088126 },
        { x: 121.185712, y: 31.068131 },
        { x: 121.262616, y: 31.210944 },
        { x: 121.176786, y: 31.164539 },
        { x: 121.112928, y: 31.058132 },
        { x: 121.173352, y: 31.166889 },
        { x: 121.097135, y: 31.042249 },
        { x: 121.190519, y: 31.035189 },
        { x: 121.186399, y: 31.006356 },
        { x: 121.158246, y: 31.148086 },
        { x: 121.087522, y: 31.155137 },
        { x: 121.154126, y: 31.125165 },
      ],
      chartData: [
        {
          name: "周乾隆南北干货铺",
          value: 1124.6,
        },
        {
          name: "郭安云肉铺",
          value: 1043.2,
        },
        {
          name: "宁秋花蔬菜摊",
          value: 988,
        },
        {
          name: "徐志勇冷饮店",
          value: 901,
        },
        {
          name: "伍世豪肉铺",
          value: 822,
        },
        {
          name: "周丽娟水果店",
          value: 810,
        },
        {
          name: "宁小龙蔬菜铺",
          value: 750,
        },
        {
          name: "华城冷冻食品",
          value: 660,
        },
        {
          name: "曾学孔自产自销铺",
          value: 532,
        },
        {
          name: "丁文根水产海鲜铺",
          value: 512,
        },
      ].sort((a, b) => {
        return a.value - b.value;
      }),
    };
  },
  watch: {
    "$store.state.windowWidth"() {
      echarts.init(this.$refs.echartD).resize();
      echarts.init(this.$refs.echartD2).resize();
      echarts.init(this.$refs.echartD3).resize();
    },
  },
  created() {
    setInterval(() => {
      this.getTable();
      this.getEchart();
    }, 3000);
  },
  mounted() {
    this.getData();
    this.initMap();
    setInterval(() => {
      let day = new Date();
      this.dateDay =
        day.getFullYear() +
        "年" +
        (day.getMonth() + 1 < 10
          ? "0" + (day.getMonth() + 1)
          : "" + (day.getMonth() + 1)) +
        "月" +
        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate()) +
        "日  " +
        " 星期" +
        this.dataWeekList[day.getDay()];
      this.dataTime =
        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
        ":" +
        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
        ":" +
        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
    }, 1000);
  },
  methods: {
    getTable() {
      this.tableData.forEach((val) => {
        val.time =
          new Date().getTime() - Math.ceil(Math.random() * 5 * 60 * 1000);
      });
      this.tableData = this.tableData.sort((next, val) => {
        return val.time - next.time;
      });
      this.tableData.forEach((val) => {
        let day = new Date(val.time);
        val.time =
          (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
          ":" +
          (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
          ":" +
          (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
      });
    },
    getEchart() {
      this.chartData = this.chartData.map((val) => {
        let a = Math.random() > 0.3 ? Math.random()*30 :''
        return a ? {
          ...val,
          value: (+val.value + a).toFixed(1)
        } : val
      }).sort((val, next) => {
        return val.value - next.value;
      });
      this.echartsBox3.setOption(getDataE3(this.chartData));
    },
    async initMap() {
      this.map = await new AMap.Map("mapF", {
        mapStyle: "amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da", //设置地图的显示样式
        resizeEnable: true,
        zoom: 13,
        zooms: [3, 16],
        // features: [] //清空背景道路等
      });
      AMap.plugin(["AMap.Geolocation"], () => {
        var geolocation = new AMap.Geolocation({
          showButton: true, //是否显示定位按钮
          buttonPosition: "RT", //定位按钮的位置
          /* LT LB RT RB */
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
          zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          showMarker: true, //是否显示定位点
          markerOptions: {
            //自定义定位点样式，同Marker的Options
            offset: new AMap.Pixel(-18, -36),
            content:
              '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
          },
          showCircle: true, //是否显示定位精度圈
          circleOptions: {
            //定位精度圈的样式
            strokeColor: "#0093FF",
            noSelect: true,
            strokeOpacity: 0.5,
            strokeWeight: 1,
            fillColor: "#02B0FF",
            fillOpacity: 0.25,
          },
        });
        this.map.addControl(geolocation);
      });
      this.addMarker();
    },
    addMarker(lnglats = this.lnglats) {
      // 创建标点和点击事件
      let markers = lnglats.map((val, ind) => {
        let marker = new AMap.Marker({
          position: new AMap.LngLat(val.x, val.y),
          zIndex: 9,
          extData: {
            id: ind + 1,
          },
        });
        return marker;
      });
      this.map.add(new AMap.OverlayGroup(markers));
      this.map.setFitView(); // 根据所有点自适应
    },
    async getData() {
      this.echartsBox = echarts.init(this.$refs.echartD)
      this.echartsBox.setOption(getDataE());
      this.echartsBox2 = echarts.init(this.$refs.echartD2)
      this.echartsBox2.setOption(getDataE2());
      this.echartsBox3 = echarts.init(this.$refs.echartD3)
      this.echartsBox3.setOption(getDataE3(this.chartData));
    },
    async getWeather() {
      let res = await this.$axios.get("/aliWeather");
      if (res.showapi_res_code === 0) {
        this.weatherObj = res.showapi_res_body.now;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url("../../assets/trade/bg.png");
  background-size: 100% 100%;
  .header {
    width: 100%;
    height: 200px;
    background: url("../../assets/trade/top.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .headerTop {
      width: 100%;
      display: flex;
      height: 45px;
      align-items: center;
      font-size: 16px;
      color: #fff;
      position: relative;
      div {
        margin-left: 20px;
      }
      img {
        width: 24px;
      }
      .time {
        font-size: 28px;
        width: 90px;
        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
      }
      .titleHeader {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: 0 auto;
        font-size: 38px;
        color: #fff;
        text-align: center;
        font-family: "DS", "DS-B", "DS-BB", "DS-BS";
        font-weight: 700;
        letter-spacing: 5px;
        text-shadow: 2px 2px 10px 0px rgba(9, 29, 52, 0.48);
        background-image: linear-gradient(0deg, #6dbfff 0%, #fefeff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .topR {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 37px;
        height: 37px;
      }
    }
    .headerB {
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      box-sizing: border-box;
      .headerBBox {
        width: 290px;
        height: 100px;
        background: #000;
        border-top: 1px solid;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 15px;
        box-sizing: border-box;
        & > div {
          display: flex;
          justify-content: space-between;
          margin: 5px 0;
        }
        .number {
          font-size: 36px;
          font-family: "DS", "DS-B", "DS-BB", "DS-BS";
          font-weight: 500;
          line-height: 32px;
        }
        .textF {
          color: #fff;
        }
      }
      .yellowBox {
        background: rgba(225, 249, 72, 0.2);
        color: #f9f348;
        border-color: #fff948;
      }
      .skyBlueBox {
        background: rgba(40, 251, 219, 0.2);
        color: #29ffde;
        border-color: rgba(40, 251, 219, 1);
      }
      .redBox {
        background: rgba(255, 55, 55, 0.2);
        color: rgba(255, 55, 55, 1);
        border-color: rgba(255, 55, 55, 1);
      }
      .blueBox {
        background: rgba(42, 207, 255, 0.2);
        color: rgba(42, 207, 255, 1);
        border-color: rgba(42, 207, 255, 1);
      }
      .shitYellowBox {
        background: rgba(255, 174, 0, 0.2);
        color: rgba(255, 174, 0, 1);
        border-color: rgba(255, 174, 0, 1);
      }
      .greenBox {
        background: rgba(0, 255, 96, 0.2);
        color: rgba(0, 255, 96, 1);
        border-color: rgba(0, 255, 96, 1);
      }
    }
  }
  .content {
    width: 100%;
    flex: 1;
    display: flex;
    padding: 20px 30px;
    box-sizing: border-box;
    .contentLeft {
      width: 25%;
      padding: 20px;
      box-sizing: border-box;
      background: rgba(0, 41, 91, 0.7);
      .contentLeft-top {
        height: 60%;
        .contentLeft-content {
          height: calc(100% - 42px);
          width: 100%;
        }
      }
      .contentLeft-bot {
        height: 40%;
        .contentLeft-content {
          height: calc(100% - 42px);
          width: 100%;
        }
      }
    }
    .contentCenter {
      position: relative;
      flex: 1;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      #mapF {
        width: 100%;
        height: 100%;
      }
    }
    .contentRight {
      width: 25%;
      padding: 20px;
      box-sizing: border-box;
      background: rgba(0, 41, 91, 0.7);
      .contentRight-top {
        height: 60%;
        .contentRight-content {
          height: calc(100% - 42px);
          width: 100%;
        }
      }
      .contentRight-bot {
        height: 40%;
        .contentRight-content {
          padding-top: 10px;
          box-sizing: border-box;
          height: calc(100% - 42px);
          width: 100%;
        }
      }
      tr {
        font-size: 14px;
        text-align: left;
        border-bottom: 1px dashed rgba(4, 187, 255, 0.3);
      }
    }
    .titleBg {
      width: 100%;
      height: 42px;
      font-size: 16px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 500;
      text-align: left;
      color: #bbe4ff;
      line-height: 42px;
      text-indent: 30px;
      background: url("../../assets/trade/title.png");
      background-size: 100% 100%;
    }
  }
}
</style>