<template>
  <div class="fullHeight greenPage">
    <div class="greenContent">
      <div class="top">
        <div class="smallDiv smallDiv1 fullHeight">
          <div class="blockBox">
            <div class="title">
              <p class="e1" style="position: absolute; top: -1%; left: 33%">
                {{ $t('message.carOverview.latestApproachVehicle') }}
              </p>
            </div>
            <div class="blockContent">
              <!--                            {{inList[0]}}-->
              <!--                            *{{$store.state.FILEURL+inList[0].imageUrl}}-->
              <div class="carBox big">
                <img
                  :preview="
                    inObj.panoramaUrl
                      ? $store.state.FILEURL + inObj.panoramaUrl
                      : ''
                  "
                  :src="
                    inObj.panoramaUrl
                      ? $store.state.FILEURL + inObj.panoramaUrl
                      : ''
                  "
                />
                <div class="carDetail" v-if="inList.length">
                  <p
                    class="greenBtn whiteList"
                    :class="
                      inObj.isBlack === 0
                        ? ''
                        : inObj.isBlack === 1
                        ? 'red'
                        : 'green'
                    "
                  >
                    <img
                      v-for="item in 4"
                      :key="item"
                      :class="'arrow' + item"
                      class="arrow"
                      src="@/assets/images/carOverview/arrow.png"
                    />
                    {{
                      inObj.isBlack === 0
                        ? $t('message.carOverview.whiteList')
                        : inObj.isBlack === 1
                        ? $t('message.carOverview.blackList')
                        : $t('message.carOverview.temporaryCar')
                    }}
                  </p>
                  <p class="carNum">{{ inObj.carNumber }}</p>
                  <p class="time">{{ inObj.passTime }}</p>
                </div>
                <div
                  class="placeholderBox placeholderBox2"
                  v-if="inList.length == 0"
                >
                  <img src="@/assets/images/noData3.png" alt="" srcset="" />
                  <p>{{ $t('message.carOverview.noData') }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="blockBox">
            <div class="title">
              <p class="e4" style="position: absolute; top: -8%; left: 35%">
                {{ $t('message.carOverview.entryBrakeControl') }}
              </p>
            </div>
            <div class="blockContent controlBox">
              <div class="bg2" @click="clickOnStart(inObj)">
                {{ $t('message.carOverview.clickOnStart') }}
                {{ $t('message.carOverview.vehiclesEntering') }}
              </div>
            </div>
          </div>
        </div>
        <div class="centerDiv fullHeight">
          <p class="centerTitle">
            {{ $t('message.carOverview.todaysTrafficStatistics') }}
          </p>
          <div ref="centerChart" class="centerChart"></div>
          <div class="totalBox">
            <div class="item">
              <p>{{ $t('message.carOverview.vehiclesForApproachToday') }}</p>
              <div class="bg1">
                <countTo
                  :startVal="0"
                  :endVal="outInData.innum"
                  :duration="5000"
                ></countTo>
              </div>
            </div>
            <div class="item">
              <p>{{ $t('message.carOverview.vehiclesForToday') }}</p>
              <div class="bg1">
                <countTo
                  :startVal="0"
                  :endVal="outInData.outnum"
                  :duration="5000"
                ></countTo>
              </div>
            </div>
            <div class="item">
              <p>{{ $t('message.carOverview.vehicleWashingRate') }}</p>
              <div class="bg1">
                <!-- <countTo :startVal="0" :endVal="0" :duration="5000"></countTo> -->
                0%
              </div>
            </div>
          </div>
        </div>
        <div class="smallDiv fullHeight">
          <div class="blockBox">
            <div class="title">
              <p class="e3" style="position: absolute; top: -1%; left: 34%">
                {{ $t('message.carOverview.latestVehicle') }}
              </p>
            </div>
            <div class="blockContent alarmBlockContent">
              <div class="carBox big">
                <img
                  :preview="
                    outObj.panoramaUrl
                      ? $store.state.FILEURL + outObj.panoramaUrl
                      : ''
                  "
                  :src="
                    outObj.panoramaUrl
                      ? $store.state.FILEURL + outObj.panoramaUrl
                      : ''
                  "
                  alt=""
                  srcset=""
                />
                <div class="carDetail" v-if="outList.length">
                  <p
                    class="greenBtn whiteList"
                    :class="
                      outObj.isBlack === 0
                        ? ''
                        : outObj.isBlack === 1
                        ? 'red'
                        : 'green'
                    "
                  >
                    <img
                      v-for="item in 4"
                      :key="item"
                      :class="'arrow' + item"
                      class="arrow"
                      src="@/assets/images/carOverview/arrow.png"
                    />
                    {{
                      outObj.isBlack === 0
                        ? $t('message.carOverview.whiteList')
                        : outObj.isBlack === 1
                        ? $t('message.carOverview.blackList')
                        : $t('message.carOverview.temporaryCar')
                    }}
                  </p>
                  <p class="carNum">{{ outObj.carNumber }}</p>
                  <p class="time">{{ outObj.passTime }}</p>
                </div>
                <div
                  class="placeholderBox placeholderBox2"
                  v-if="outList.length == 0"
                >
                  <img src="@/assets/images/noData3.png" alt="" srcset="" />
                  <p>{{ $t('message.carOverview.noData') }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="blockBox">
            <div class="title">
              <p class="e5" style="position: absolute; top: -8%; left: 34%">{{ $t('message.carOverview.exitGateControl') }}</p>
            </div>
            <div class="blockContent controlBox">
              <div class="bg2" @click="clickOutStart">
                {{ $t('message.carOverview.clickOnStart') }}
                {{ $t('message.carOverview.vehicleAppearance') }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="blockBox fullHeight" style="height: 170% !important">
          <div class="title">
            <p class="e6" style="position: absolute; top: -3%; left: 44%">
              {{
                $t('message.carOverview.vehiclesApproachingTheSceneAreSnapped')
              }}
            </p>
          </div>
          <div class="blockContent carList">
            <vue-scroll :ops="ops">
              <div class="carBox" v-for="item in inList" :key="item.id">
                <img
                  :preview="$store.state.FILEURL + item.panoramaUrl"
                  :src="$store.state.FILEURL + item.panoramaUrl"
                  alt=""
                  srcset=""
                />
                <div class="carDetail">
                  <p class="carNum">{{ item.carNumber }}</p>
                  <p class="time">{{ item.passTime }}</p>
                  <span
                    class="greenBtn"
                    :class="
                      item.isBlack === 0
                        ? ''
                        : item.isBlack === 1
                        ? 'red'
                        : 'green'
                    "
                  >
                    <img
                      v-for="item in 4"
                      :key="item"
                      :class="'arrow' + item"
                      class="arrow"
                      src="@/assets/images/carOverview/arrow.png"
                    />
                    {{
                      item.isBlack === 0
                        ? $t('message.carOverview.whiteList')
                        : item.isBlack === 1
                        ? $t('message.carOverview.blackList')
                        : $t('message.carOverview.temporaryCar')
                    }}</span
                  >
                </div>
              </div>
            </vue-scroll>
            <div
              class="placeholderBox2"
              style="position: absolute; left: 47%; top: 100px"
              v-if="inList.length == 0"
            >
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <p>{{ $t('message.carOverview.noData') }}</p>
            </div>
          </div>
        </div>
        <div class="blockBox fullHeight" style="height: 170% !important">
          <div class="title">
            <p class="e7" style="position: absolute; top: -3%; left: 44%">
              {{ $t('message.carOverview.exitVehicleSnapshot') }}
            </p>
          </div>
          <div class="blockContent carList">
            <vue-scroll :ops="ops">
              <div class="carBox" v-for="item in outList" :key="item.id">
                <img
                  :preview="$store.state.FILEURL + item.panoramaUrl"
                  :src="$store.state.FILEURL + item.panoramaUrl"
                  alt=""
                  srcset=""
                />
                <div class="carDetail">
                  <p class="carNum">{{ item.carNumber }}</p>
                  <p class="time">{{ item.passTime }}</p>
                  <span
                    class="greenBtn"
                    :class="
                      item.isBlack === 0
                        ? ''
                        : item.isBlack === 1
                        ? 'red'
                        : 'green'
                    "
                  >
                    <img
                      v-for="item in 4"
                      :key="item"
                      :class="'arrow' + item"
                      class="arrow"
                      src="@/assets/images/carOverview/arrow.png"
                    />
                    {{
                      item.isBlack === 0
                        ? $t('message.carOverview.whiteList')
                        : item.isBlack === 1
                        ? $t('message.carOverview.blackList')
                        : $t('message.carOverview.temporaryCar')
                    }}
                  </span>
                </div>
              </div>
            </vue-scroll>
            <div
              class="placeholderBox2"
              style="position: absolute; left: 47%; top: 110px"
              v-if="outList.length == 0"
            >
              <img src="@/assets/images/noData3.png" alt="" srcset="" />
              <p>{{ $t('message.carOverview.noData') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCarPassRecordStatistics,
  getCarCameraListApi,
  openGate
} from '../../../assets/js/api/carManage'
import echarts from 'echarts4';;
import countTo from "vue-count-to";
import closePage from "@/components/closePage"
export default {
  components: {
    countTo, closePage
  },
  data() {
    return {
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true
        }
      },
      valve: {},
      inList: [],
      inObj: {},
      outList: [],
      outObj: {},
      outInData: {
        innum: 0,
        outnum: 0,
        presencenum: 0
      },
      weatherInfo: {
        data: [],
      },
      Chart: null,
      option: {},
      angle: 0,
      interval: null
    };
  },
  mounted() {
    this.getCar();
    // this.upDataChart();
  },
  methods: {
    getCar() {
      getCarCameraListApi({ projectSn: this.$store.state.projectSn }).then(result => {
        if (result.success) {
          console.log('查看阀门', result.result);
          result.result.map(item => {
            if (item.passType === 1) {
              this.valve.in = item.cameraId;
            } else if (item.passType === 2) {
              this.valve.out = item.cameraId;
            }
          })
        }
      })
      getCarPassRecordStatistics({ projectSn: this.$store.state.projectSn }).then(result => {
        if (result.success) {
          console.log('查看车辆', result.result);
          this.inList = result.result.inList;
          this.inObj = this.inList[0] || {};
          this.outList = result.result.outList;
          this.outObj = this.outList[0] || {};
          this.outInData = result.result.outInData;
          this.$nextTick(() => {
            this.$previewRefresh();
            // 
            if (this.Chart) {
              // this.Chart.setOption(this.option);
              // if(this.interval){
              //     clearInterval(this.interval)
              // }
              // this.interval=setInterval(() => {
              //     //用setInterval做动画感觉有问题
              //     this.angle = this.angle + 3;
              //     this.Chart.setOption(this.option, true);
              // }, 100);
            } else {
              this.upDataChart();
            }

          })
          setTimeout(() => {
            this.getCar()
          }, 10000)
          // console.log('查看outObj', this.outObj);
        }
      })
    },
    clickOnStart() {
      console.log('入场开启', this.inObj, this.valve)
      if (!this.valve.in) {
        this.$message.error('没有入场相机')
        return
      }
      openGate({ cameraId: this.valve.in }).then(result => {
        if (result.success) {
          console.log('进入成功', result.result);
          this.$message.success(result.message)
        }
      })
    },
    clickOutStart() {
      console.log('出厂开启', this.inObj, this.valve)
      if (!this.valve.out) {
        this.$message.error('没有出场相机')
        return
      }
      openGate({ cameraId: this.valve.out }).then(result => {
        if (result.success) {
          console.log('出厂成功', result.result);
          this.$message.success(result.message)
        }
      })
    },
    upDataChart() {
      let that = this;
      // this.Chart.clear();
      // let angle = 0; //角度，用来做简单的动画效果的
      this.Chart = echarts.init(this.$refs.centerChart);
      // let value = this.outInData.presencenum;
      console.log('查看outInData', this.outInData);
      this.option = {
        title: {
          text:
            "{a|" +
            this.outInData.presencenum +
            "}\n{c| " +
            this.$t("message.carOverview.presentVehicle") +
            " }",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 46,
                color: "#5CE2F6",
              },
              c: {
                fontSize: 16,
                lineHeight: 20,
                color: "#5CE2F6",
              },
            },
          },
        },

        series: [
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
                  startAngle: ((0 + that.angle) * Math.PI) / 180,
                  endAngle: ((90 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
                  startAngle: ((180 + that.angle) * Math.PI) / 180,
                  endAngle: ((270 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CC1CD",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -that.angle) * Math.PI) / 180,
                  endAngle: ((40 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CC1CD",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -that.angle) * Math.PI) / 180,
                  endAngle: ((220 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CC1CD",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CC1CD", //粉
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CC1CD", //绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            type: "pie",
            radius: ["72%", "58%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: this.outInData.presencenum,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#5EE4F7",
                  },
                },
              },
              {
                value: 100 - this.outInData.presencenum,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#072735",
                  },
                },
              },
            ],
          },
          //划块线
          {
            name: "",
            type: "gauge",
            radius: "72%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 20,
              lineStyle: {
                width: 2,
                color: "#061740",
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
        ],
      };
      // this.Chart.setOption(this.option);
      // this.interval = setInterval(() => {
        //用setInterval做动画感觉有问题
        this.angle = this.angle + 6;
        this.Chart.setOption(this.option, true);
      // }, 100);
    },

    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    getCirlPoint(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url('./styleShzj.less');

.whiteList {
  position: relative;
  background: #235a67;
  margin-top: 0;
  width: calc(100% - 22px);

  .arrow {
    opacity: 1;
  }
}
/deep/ .__view {
  display: flex;
}

.carBox {
  & > img {
    height: unset;
  }
}
</style>