<template>
  <div style="width:100%;height:100%;overflow:auto;padding:0px 23px;">
      <el-descriptions class="margin-top" title="" :column="2" size="mini" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    站点名称
                </template>
                {{detailInfo.siteName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    站点状态
                </template>
                <el-tag :type="detailInfo.state == '未审核'? 'warning': (detailInfo.state == '审核通过' ? 'success':'danger')" size="mini">{{detailInfo.state}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    负责人
                </template>
                {{detailInfo.director}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    负责人电话
                </template>
                {{detailInfo.phone}}
            </el-descriptions-item>
            
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    是否有人值守
                </template>
                <el-tag size="mini" v-if="detailInfo.isonduty">是</el-tag>
                <el-tag size="mini" type="danger"  v-else>否</el-tag>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    是否接收进山消息推送
                </template>
                <el-tag size="mini" v-if="detailInfo.isreceive">是</el-tag>
                <el-tag size="mini" type="danger" v-else>否</el-tag>
                
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    站点图片
                </template>
                {{detailInfo.siteImg}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    站点地址
                </template>
                {{detailInfo.siteAddress}}
            </el-descriptions-item>

    </el-descriptions>

    <el-descriptions class="margin-top" title="" style="margin-top:15px;" :column="4" size="mini" border>
        
        <el-descriptions-item>
            <template slot="label">
                站点地址
            </template>
            <div class="position">
                <Map :lngLat="lngLat"></Map>
            </div>
        </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" style="margin-top:15px;" :column="3" size="mini" border>
        <el-descriptions-item>
            <template slot="label">
                <div style="min-width:160px;">
                    <i class="el-icon-tickets"></i>
                    接收消息人员
                </div>
            </template>
            <el-table
                 border
                :data="userlist"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="人员名称"
                   >
                </el-table-column>
                <el-table-column
                    prop="account"
                    label="手机号"
                   >
                </el-table-column>
            </el-table>
        </el-descriptions-item>
    </el-descriptions>
    <div style="margin-top:15px;">
        <el-input placeholder="审核说明" v-model="form.content" style="width:calc( 100% - 140px);margin-right:15px;" size="mini"></el-input>
        <el-button type="danger" size="mini" @click="examine(2)">拒绝</el-button>
        <el-button type="success" size="mini" @click="examine(1)">通过</el-button>
    </div>
  </div>
</template>
<script>
import { postMethodCommon, getMethodCommon } from '../../../../api/common';
import form from '../../../../store/modules/form';
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;

import Map from '@/components/mapbox/Map.vue';

export default {
  name:"AddForm",
  components:{
      Map,
  },
  props:["detailInfo"],
  data(){
      return {
          form:{
              siteId:null,
              state:null,
              content:null,
          },
          lngLat:null,
          userlist:[]
      }
  },
  created(){
    console.log(process.env.VUE_APP_BASE_IMG_URL)
      this.form.siteId = this.detailInfo.id;
      this.form.content = this.detailInfo.stateContent
      let transformAfter = this.transformGCJ2WGS(this.detailInfo.lat,this.detailInfo.lng)
      this.lngLat = [transformAfter.lon,transformAfter.lat];
      
      this.getUserList();
  },
  methods:{
      examine(state){
          this.form.state = state;
          console.log(this.form);
          postMethodCommon("/FireCodePC/AuditSite?siteId="+this.form.siteId+"&state="+this.form.state+"&content="+this.form.content).then(res=>{
              if(res.code == 200){
                  this.$emit("addSuccess")
              }
          })
      },
      getUserList(){
          getMethodCommon("/FireCodeApp/LoadSiteUser",{siteId:this.detailInfo.id,userRole:2,pageIndex:1,pageSize:10000}).then(res=>{
              if(res.code == 200){
                    this.userlist = res.data;  
              }
          })
      },
        transformGCJ2WGS(gcjLat, gcjLon) {
            let d = this.delta(gcjLat, gcjLon)
            return {
            'lat': gcjLat - d.lat,
            'lon': gcjLon - d.lon
            }
        },
        delta(lat, lon) {
            var PI = 3.14159265358979324;
            let a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
            let ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
            let dLat = this.transformLat(lon - 105.0, lat - 35.0)
            let dLon = this.transformLon(lon - 105.0, lat - 35.0)
            let radLat = lat / 180.0 * PI
            let magic = Math.sin(radLat)
            magic = 1 - ee * magic * magic
            let sqrtMagic = Math.sqrt(magic)
            dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
            dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
            return {
            'lat': dLat,
            'lon': dLon
            }
        },
        transformLat(x, y) {
            var PI = 3.14159265358979324;
            let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
            ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
            ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
            return ret
        },
        transformLon(x, y) {
            var PI = 3.14159265358979324;
            let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
            ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
            ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
            return ret
        }

  }
}
</script>
<style scoped>
.service-type-btn{
  width:100%;
  height:180px;
  text-align: center;
  margin-top:100px;
}

.position{
    width:900px;
    height:320px;
}

::v-deep a.mapboxgl-ctrl-logo{
    display:none!important;
}

::v-deep .mapboxgl-ctrl-attrib-inner{
    display:none!important;
}
</style>