<template>
  <div class="aiAnlysis">
    <closePage></closePage>
    <div class="title_wrap flex3">
      <span>{{ date }}</span>
      <span class="styleText">{{time}}</span>
      <div class="title_c">{{$store.state.currentProDetail.projectName}} - {{$t('message.aiAnalysis.analyze')}}</div>
      <div class="flex3 title_r">
        <div style="text-align: center;">
          <img :src="weatherInfo.url" width="26" height="26" />
          <div>{{projectDetail.provinceName}}{{projectDetail.cityName}}{{projectDetail.areaName}}</div>
        </div>
        <div style="margin:0 10px;text-align: center;">
          <div style="font-size:24px">{{ weatherInfo.tem2 }} ~ {{ weatherInfo.tem1 }}</div>
          <div>{{ weatherInfo.wea }}</div>
        </div>
        <div style="text-align: center;">
          <div style="margin-top: 10px">{{ weatherInfo.win_speed }}</div>
          <div>风力</div>
        </div>
      </div>
    </div>
    <div class="content">
      <img src="@/assets/images/aiOverview/l_r_border.png" class="l_border_img" />
      <img src="@/assets/images/aiOverview/l_r_border.png" class="r_border_img" />
      <div class="content_top flex">
        <div class="content_t_l_wrap">
          <div style>
            <div class="subhead_content">
              <span>{{$t('message.aiAnalysis.itemInformation')}}</span>/Worksheet information
            </div>
            <div class="itemInfo_type flex3">
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.projectType')}}</div>
                <div class="type_value">湿地公园</div>
                <!-- <div
                  class="type_value"
                  v-for="(item, index) in $t(
                    'message.companyDiagram.PROJECTTYPE'
                  )"
                  :key="index"
                  v-if="projectDetail.projectType == item.id"
                  >{{ item.name }}</div> -->
              </div>
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.projectScale')}}</div>
                <div class="type_value">
                  {{projectDetail.projectAcreage}}
                  <span>m²</span>
                </div>
              </div>
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.projectCost')}}</div>
                <div class="type_value">
                   <!-- {{projectDetail.projectAcreage}} -->3332
                  <span>万</span>
                </div>
              </div>
            </div>
            <div class="itemInfo_type flex3">
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.constructionPeriod')}}</div>
                <div class="type_value">
                  180
                  <span>{{$t('message.aiAnalysis.sky')}}</span>
                </div>
              </div>
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.safeProduction')}}</div>
                <div class="type_value">
                  65
                  <span>{{$t('message.aiAnalysis.sky')}}</span>
                </div>
              </div>
              <div class="type">
                <div class="type_name">{{$t('message.aiAnalysis.remainingDays')}}</div>
                <div class="type_value">
                  115
                  <span>{{$t('message.aiAnalysis.sky')}}</span>
                </div>
              </div>
            </div>
            <div class="projectInfo">
              <div class="type_name">{{$t('message.aiAnalysis.projectInformation')}}</div>
              <div
                class="type_value"
              >全国工程信息网是天工网旗下的工程信息网站,专为建设行业销售人员打述的信息服务平台,包括全国大部分拟建和在建工程项目,其中不乏有酒店、住宅社区、别墅、办公楼</div>
            </div>
          </div>
          <div class="realTime">
            <div class="subhead_content">
              <span>{{$t('message.aiAnalysis.realTimeData')}}</span>/Real-time data
            </div>
            <div class="flex chart_wrap">
              <div class="chart" ref="environment"></div>
              <div class="chart" ref="personnel"></div>
            </div>
          </div>
        </div>
        <div class="content_t_c_wrap">
          <div class="video_wrap">
            <div class="video_content">
              <videoModule :value="devList" :displayBottomMod='true' :winNumBer='4' :autoplay='false'
              :showCaptrue="false"
              :showControl="false"
              :showPlayback="false"></videoModule>
            </div>
          </div>
        </div>
        <div class="content_t_r_wrap">
          <div class="subhead_content">
            <span>{{$t('message.aiAnalysis.warningMessage')}}</span>/Alarm information
          </div>
          <div class="warningMessage">
            <div class="warning_title flex3">
              <div>{{$t('message.aiAnalysis.time')}}</div>
              <div>{{$t('message.aiAnalysis.place')}}</div>
              <div>{{$t('message.aiAnalysis.type')}}</div>
            </div>
            <div class="warning_content_wrap">
              <div class="warning_content flex3 showBg" v-for="item in 10" :key="item+'77'">
                <div>9/18/14:41:51</div>
                <div class="place">b座水泥地</div>
                <div class="type">人脸拍摄</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_bottom">
        <div class="subhead_content">
          <span>{{$t('message.aiAnalysis.faceCaptured')}}</span>/Face capture
        </div>
        <div class="face_wrap">
          <el-carousel
            :interval="500000"
            arrow="always"
            style="height:100%"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="item in 4"
              :key="item"
              style="padding: 0 60px; box-sizing: border-box;"
            >
              <div class="flex" style="height: 100%;">
                <div class="flex face_message" v-for="(item,index) in personList" :key="index+'99'">
                  <img :src="item.url" />
                  <div class="face_message_content">
                    <div class="top">
                      <span>{{item.name}}</span>
                      <span class="personType">工作人员</span>
                    </div>
                    <div>
                      <span>{{$t('message.aiAnalysis.snapLocation')}}：</span>
                      <span>b座水泥地</span>
                    </div>
                    <div>
                      <span>{{$t('message.aiAnalysis.IdNumber')}}：</span>
                      <span>441155554411221144</span>
                    </div>
                    <div>
                      <span>{{$t('message.aiAnalysis.catchTheTime')}}：</span>
                      <span>2020年9月18日15:55:51</span>
                    </div>
                  </div>
                </div>
               
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="subhead_content">
          <span>{{$t('message.aiAnalysis.capturedVehicles')}}</span>/Vehicle capture
        </div>
        <div class="Vehicle_wrap">
          <el-carousel
            :interval="500000"
            arrow="always"
            style="height:100%"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="item in 4"
              :key="item"
              style="padding: 0 60px; box-sizing: border-box;"
            >
              <div class="flex" style="width:100%; height:100%">
                <div class="Vehicle_content" v-for="(item,index) in carList" :key="index+'11'">
                  <div class="car_img">
                  <img :src="item.url" width="100%" height="100%"></div>
                  <div class="car_info">
                    <div class="carNum">{{item.carNum}}</div>
                    <div>{{item.time}}</div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import videoModule from "@/components/videoModule/videoModule.vue";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import closePage from "@/components/closePage"
import {
  getWeatherDataApi
} from "@/assets/js/api/environmentManage";
export default {
  name: "aiAnlysis",
  components: {
    videoModule,closePage
  },
  data() {
    return {
      personList: [
        {
          url: "http://139.159.136.114:8081/itbgp/file/5417a6bb-57fb-49ae-b8a6-6f65826bf102.png",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          url: "http://139.159.136.114:8081/itbgp/file/92df32ce-fe2d-472f-bd8b-7ed8c44ddeeb.png",
          name: "方大明",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          url: "http://139.159.136.114:8081/itbgp/file/f9590bcd-8ac9-44e3-b185-55860d3a9f95.png",
          name: "杜华",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          url: "http://139.159.136.114:8081/itbgp/file/b05c5c83-c8fe-4bf5-8ca3-843b0f901bf0.png",
          name: "石磊",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      devList: [
        {
          winNum: 0,
          value: "大门视频",
          url:
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/0/1/20200914T082944/dev_6G07ECFPAZ2B319_20200914T082944.m3u8?proto=https",
        },
        {
          winNum: 0,
          value: "视频2",
          url:
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/1/1/20200914T082255/dev_6G07ECFPAZ2B319_20200914T082255.m3u8?proto=https",
        },
        {
          winNum: 0,
          value: "视频3",
          url:
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/2/1/20200916T082803/dev_6G07ECFPAZ2B319_20200916T082803.m3u8?proto=https",
        },
        {
          winNum: 0,
          value: "视频4",
          url:
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/5/1/20200915T011247/dev_6G07ECFPAZ2B319_20200915T011247.m3u8?proto=https",
        },
        {
          winNum: 0,
          value: "视频5",
          url:
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/3/1/20200915T092330/dev_6G07ECFPAZ2B319_20200915T092330.m3u8?proto=https",
        },
        {
          winNum: 0,
          value: "视频6",
          url:
            // "ezopen://open.ys7.com/E21189670/1.hd.live",
            "https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/4/1/20200916T083044/dev_6G07ECFPAZ2B319_20200916T083044.m3u8?proto=https",
        },
      ],
      selectDev: "",
      videoUrl: "",
      videoArr: [],
      carList:[
        {carNum:'粤BK593A',url:'http://139.159.136.114:8080/itbgp/file/ea80dae2-e78f-4088-9ab7-f5abb72c34af.jpg',time:'2019-05-08 06:55:25'},
        {carNum:'粤B9R13K',url:'http://139.159.136.114:8080/itbgp/file/45b8759b-f76b-4e05-97af-bc9c5556823e.jpg',time:'2019-05-08 06:18:19'},
        {carNum:'粤B9R13K',url:'http://139.159.136.114:8080/itbgp/file/1ee8850e-a87c-47db-ac25-9ed991bbf1b3.jpg',time:'2019-05-08 06:17:51'},
        {carNum:'桂MNJ585',url:'http://139.159.136.114:8080/itbgp/file/1f27b9c7-1fa0-45c4-a4c7-8393a4b5bba7.jpg',time:'2019-05-08 05:44:40'},
        {carNum:'粤BJD158',url:'http://139.159.136.114:8080/itbgp/file/48a9c27a-2693-473b-b723-6fd9385eb9b5.jpg',time:'2019-05-08 03:59:28'},
      ],
      projectDetail:{},
      weatherInfo:{},
      time:'',
      date:'',
    };
  },
  mounted() {
    this.getDataDateils()
    this.createdEcharts();
   this.getTime()
  },
  methods: {
    getTime() {
      var myDate = new Date(); //实例一个时间对象；
      this.date = myDate.getFullYear();   //获取系统的年；
      this.date += '-' + (myDate.getMonth() + 1);   //获取系统月份，由于月份是从0开始计算，所以要加1
      this.date += '-' + myDate.getDate(); // 获取系统日，
      this.time = ' ' + myDate.getHours(); //获取系统时，
      this.time += ':' + myDate.getMinutes(); //分
      this.time += ':' + myDate.getSeconds(); //秒

      setTimeout(() => {
        this.getTime()
      }, 1000);
    },
    loadWeather(){
     var _this = this
      getWeatherDataApi({cityid:this.projectDetail.cityCode}).then((res) => {
        var json = JSON.parse(res.result);
        this.weatherInfo = json.data[0]
        this.weatherInfo.url = require('@/assets/images/weather/'+this.weatherInfo.wea_img+'.png')
      });
    },
     //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.projectDetail = res.result;
           this.loadWeather()
        }
      });
    },
    createdEcharts() {
      let that = this;
      //环境图表
      let environment = echarts.init(this.$refs.environment);
      environment.clear();
      let option1 = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color:['#FAC81B','#998FE5','#125DD1','#08CEF7','#56F194'],
        // legend: {
        //   left: "center",
        //   top: "bottom",
        //   data: [
        //     "rose1",
        //     "rose2",
        //     "rose3",
        //     "rose4",
        //     "rose5",
        //     "rose6",
        //     "rose7",
        //     "rose8",
        //   ],
        // },

        series: [
          {
            name: that.$t('message.aiAnalysis.areaModel'),
            type: "pie",
            radius: [0, 50],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: {
              normal: {
                length: 5,
              },
            },
            data: [
              { value: 10, name: that.$t('message.aiAnalysis.noise') },
              { value: 5, name: that.$t('message.aiAnalysis.noise2') },
              { value: 15, name: that.$t('message.aiAnalysis.dust') },
              { value: 25, name: that.$t('message.aiAnalysis.mixedSoil') },
              { value: 20, name: that.$t('message.aiAnalysis.waste') }
            ],
          },
        ],
      };
      environment.setOption(option1);
      //工种人员图表
      let personnel = echarts.init(this.$refs.personnel);
      personnel.clear();
      let option2 = {
        color:['#FAC81B','#998FE5','#125DD1','#08CEF7','#56F194'],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   left: "center",
        //   top: "bottom",
        //   data: [
        //     "rose1",
        //     "rose2",
        //     "rose3",
        //     "rose4",
        //     "rose5",
        //     "rose6",
        //     "rose7",
        //     "rose8",
        //   ],
        // },

        series: [
          {
            name: that.$t('message.aiAnalysis.areaModel'),
            type: "pie",
            radius: [0, 50],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: {
              normal: {
                length: 3,
                length2: 2
              },
            },
            data: [
              { value: 10, name: that.$t('message.aiAnalysis.projectsNumber') },
              { value: 5, name: that.$t('message.aiAnalysis.sitesNumber') },
              { value: 15, name:that.$t('message.aiAnalysis.absenteeism') },
              { value: 25, name: that.$t('message.aiAnalysis.securityNumber') },
              { value: 20, name: that.$t('message.aiAnalysis.strangeNumber') }
            ],
          },
        ],
      };
      personnel.setOption(option2);
    },

    querySearch(queryString, cb) {
      var restaurants = this.devList;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex4 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.aiAnlysis {
  width: 100%;
  height: 100%;
  background: #050c22;
  color: #fff;
  .title_wrap {
    width: 100%;
    height: 80px;
    margin-top: -10px;
    background-image: url("../../../assets/images/aiOverview/title_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0 40px;
    box-sizing: border-box;
    .title_c {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: -30px;
      margin-left: 285px;
    }
    .title_r{
      width: 20%;
      font-size: 12px;
    }
    .title_l{
      width: 20%;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 70px);
    background: #050c22;
    box-sizing: border-box;
    padding: 10px 60px 22px;
    position: relative;
    .l_border_img {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 22px;
      height: 95%;
      width: 30px;
    }
    .r_border_img {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 22px;
      height: 95%;
      width: 30px;
      transform: rotateY(180deg);
      -ms-transform: rotateY(180deg); /* IE 9 */
      -moz-transform: rotateY(180deg); /* Firefox */
      -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
      -o-transform: rotateY(180deg); /* Opera */
    }
    .content_top {
      width: 100%;
      height: 62%;
    }

    .content_t_l_wrap,
    .content_t_r_wrap {
      width: 25%;
      height: 100%;
    }
    .content_t_c_wrap {
      width: 50%;
      height: 100%;
      margin: 0 15px;
    }

    .video_wrap {
      width: 100%;
      height: 100%;
      border: 1px solid #073f56;
      .video_content {
        width: 100%;
        height: 100% ;
      }
      .operation {
        width: 100%;
        height: 40px;
        background: #0d1534;
        padding: 3px 5px;
        box-sizing: border-box;
        border-top: 1px solid #073f56;
      }
    }

    .subhead_content {
      width: 100%;
      height: 26px;
      background-repeat: no-repeat;
      background-image: url("../../../assets/images/aiOverview/subhead.png");
      background-position-y: bottom;
      span {
        font-size: 18px;
        font-weight: 600;
      }
    }
    .itemInfo_type {
      width: 100%;
      margin: 14px 0;
      flex-wrap: wrap;
      .type {
        width: 29%;
        height: 54px;
        background-image: url("../../../assets/images/aiOverview/subhead_bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        .type_name {
          font-size: 14px;
          margin-left: 14px;
          color: #09e1ff;
        }
        .type_value {
          font-size: 18px;
          font-weight: 600;
          margin-top: 10px;
          span {
            font-size: 12px;
            font-weight: 100;
            margin-left: 4px;
            color: #dadade;
          }
        }
      }
    }
    .projectInfo {
      position: relative;
      width: 100%;
      height: 10%;
      background-image: url("../../../assets/images/aiOverview/max_subhead_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .type_name {
        font-size: 14px;
        margin-left: 14px;
        color: #09e1ff;
      }
      .type_value {
        font-size: 14px;
        padding: 10px 10px 18px;
        letter-spacing: 1px;
      }
    }

    .realTime {
      width: 100%;
      margin-top: 26px;
      height: 40%;
      .chart_wrap {
        width: 100%;
        height: calc(100% - 26px);
      }
      .chart {
        width: 50%;
        height: 100%;
      }
    }

    .warningMessage {
      width: 100%;
      height: calc(100% - 26px);
      .warning_title {
        width: 100%;
        margin: 10px 0;
        text-align: center;
        div {
          width: 33.3%;
          color: #a4a3a2;
        }
      }
      .warning_content_wrap {
        width: 100%;
        height: calc(100% - 44px);
      }
      .warning_content {
        width: 100%;
        align-items: start;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        &:nth-child(2n-1){
          background: #0c1f3f;
        }
        div {
          text-align: center;
          width: 33.3%;
        }
        .place {
          color: #09d6ff;
        }
      }
    }

    
    // .showBg {
    //   background: #0c1f3f;
    // }

    .content_bottom {
      width: 100%;
      height: 35%;
      .subhead_content {
        width: 100%;
        height: 26px;
        background-repeat: no-repeat;
        background-image: url("../../../assets/images/aiOverview/max_subhead.png");
        background-position-y: bottom;
        span {
          font-size: 18px;
          font-weight: 600;
        }
      }
      .face_wrap {
        width: 100%;
        height: 35%;
        margin-bottom: 10px;
        .face_message {
          width: 280px;
          height: 82px;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 1%;
          margin-right: 20px;
          img {
            height: 100%;
            width: 68px;
          }
          .face_message_content {
            width: calc(100% - 68px);
            padding: 5px 0;
            padding-left: 10px;
            height: 82px;
            border: 1px solid #0a5873;
            border-left: none;
            background: #0c1f3f;
            box-sizing: border-box;
            
            div {
              line-height: 17px;
              opacity: 0.6;
            }
            .top{
              margin-bottom: 3px;
              opacity: 1;
            }
          }
        }
      }
      .Vehicle_wrap {
        width: 100%;
        height: 52%;
        .Vehicle_content {
          font-size: 12px;
          width: 120px;
          text-align: center;
          border: 1px solid #0a4966;
          margin-right: 20px;
          .car_img {
            width: 100%;
            height: 84px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
          .car_info {
            padding: 10px 2px;
            
            div{
              opacity: 0.5;
            }
            .carNum{
              color: #09e1ff;
              font-size: 14px;
              margin-bottom: 3px;
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .styleText{
      position: absolute;
    margin-left: 80px;
    }
  /deep/ .el-carousel__container {
    height: 100%;
  }
  /deep/ .el-carousel__arrow--right {
    color: #00c8ff !important;
    right: 0;
    background: #373c4e;
  }
  /deep/ .el-carousel__arrow--left {
    color: #00c8ff !important;
    left: 0;
    background: #373c4e;
  }
  /deep/.el-input__inner {
    background: #0d1534;
    border-color: #1e5787;
    color: #fff;
  }
}
.personType{
  background-color: #74BE56;
  color: white;
  border-radius: 3px;
  margin-left: 10px;
  display: inline-block;
  padding: 1px 2px;
}

</style>