<template>
  <div class="full-page-content">
    <el-row>
      <el-col :span="12" class="content-title">
        <!-- <el-row>
          <el-col :span="24" class="content-padding">
            <div class="title">已开发服务列表</div>
          </el-col>
        </el-row> -->
      </el-col>
      <el-col :span="12" class="content-add">
        <!--<el-button type="primary" @click="userHandle('add')"  >新增服务</el-button>-->
      </el-col>
      <!-- 头部 -->
      <el-col :span="24" class="content-header">
        <div class="content-box">
          <el-row :gutter="20">
            <el-row :span="6" class="box-box">
              <el-col :span="6">
                <div class="right-box color-e85b33">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-project"></use>
                  </svg>
                </div>
              </el-col>
              <el-col :span="18" class="">
                <el-row>
                  <el-col :span="24" class="left-top">项目数量</el-col>
                  <el-col :span="24" class="left-bottom">{{
                    countStatistics.projectCount
                  }}</el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="4">
                <div class="img-right">
                  <img
                    src="../../../assets/img/button-right.png"
                    width="100%"
                    alt=""
                  />
                </div>
              </el-col> -->
            </el-row>
          </el-row>
        </div>
        <div class="content-box1">
          <el-row :gutter="20">
            <el-row :span="6" class="box-box">
              <el-col :span="6">
                <div class="right-box color-e85b33">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dailishezhi"></use>
                  </svg>
                </div>
              </el-col>
              <el-col :span="18" class="">
                <el-row>
                  <el-col :span="24" class="left-top">代理服务数量</el-col>
                  <el-col :span="24" class="left-bottom">{{
                    countStatistics.proxyServiceCount
                  }}</el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="4">
                <div class="img-right">
                  <img
                    src="../../../assets/img/button-right.png"
                    width="100%"
                    alt=""
                  />
                </div>
              </el-col> -->
            </el-row>
          </el-row>
        </div>
        <div class="content-box2">
          <el-row :gutter="20">
            <el-row :span="6" class="box-box">
              <el-col :span="6">
                <div class="right-box color-e85b33">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qiyeyewu"></use>
                  </svg>
                </div>
              </el-col>
              <el-col :span="18" class="">
                <el-row>
                  <el-col :span="24" class="left-top">业务服务数量</el-col>
                  <el-col :span="24" class="left-bottom">{{
                    countStatistics.businessServiceCount
                  }}</el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="4">
                <div class="img-right">
                  <img
                    src="../../../assets/img/button-right.png"
                    width="100%"
                    alt=""
                  />
                </div>
              </el-col> -->
            </el-row>
          </el-row>
        </div>
        <div class="content-box3">
          <el-row :gutter="20">
            <el-row :span="6" class="box-box">
              <el-col :span="6">
                <div class="right-box color-e85b33">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-notification"></use>
                  </svg>
                </div>
              </el-col>
              <el-col :span="18" class="">
                <el-row>
                  <el-col :span="24" class="left-top">消息流数量</el-col>
                  <el-col :span="24" class="left-bottom">{{
                    countStatistics.flowCount
                  }}</el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="4">
                <div class="img-right">
                  <img
                    src="../../../assets/img/button-right.png"
                    width="100%"
                    alt=""
                  />
                </div>
              </el-col> -->
            </el-row>
          </el-row>
        </div>
        <div
          class="content-box3"
          style="
            height: 104px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            background-color: #fff;
          "
        >
          <p style="width: 100%; margin-top: 20px; color: #000">快速添加项目</p>
          <p style="width: 100%">
            <el-button type="primary" @click="userHandle('add')"
              >新增项目</el-button
            >
          </p>
        </div>
      </el-col>
      <!-- 常用项目 -->
      <el-col :span="24">
        <el-row style="display: flex">
          <el-col class="commonlyUsed" style="margin-right: 10px">
            <el-row class="title-border">
              <el-col :span="24" class="title-padding">
                <div class="title" style="display: flex; width: 100%">
                  搜索
                  <div class="title-right" @click="openMore">
                    <span  
                    >查看更多 <i class="el-icon-arrow-right"
                  /></span>
                  </div>
                
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="commonlyUsed-content">
                <search />
                <!-- <el-row :gutter="20">
                  <el-col :span="4">
                    <div class="titleList">项目列表 </div>
                    <el-tree class="treeColor" highlight-current="true" :data="data" :props="defaultProps"
                      @node-click="handleNodeClick"></el-tree>

                  </el-col>

                  <el-col :span="20" class="commonlyUsed-right">
                    <el-table :data="tableData" style="width: 100%">
                      <el-table-column type="index" label="序号" >
                      </el-table-column>
                      <el-table-column prop="date" label="服务名称" width="100">
                      </el-table-column>
                      <el-table-column prop="serviceName" label="服务调用方" width="100">
                      </el-table-column>
                      <el-table-column prop="province" label="服务提供方" width="100">
                      </el-table-column>
                      <el-table-column prop="city" label="接口协议" width="100">
                      </el-table-column>
                      <el-table-column prop="address" label="有无映射" width="100">
                      </el-table-column>
                      <el-table-column prop="address" label="操作">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑映射</el-button>
                      </el-table-column>

                    </el-table>
                  </el-col>
                </el-row> -->
              </el-col>
            </el-row>
          </el-col>
          <!-- 应用中心 -->
          <div :class="['authsloading', { widthZoom: isZoom }]">
            <el-col class="commonlyUsed">
              <el-row class="title-border">
                <el-col :span="24" class="title-padding">
                  <div class="title">应用中心</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="commonlyUsed-content">
                  <el-row :gutter="12">
                    <el-col :span="8">
                      <el-col :span="24">
                        <img
                          class="img1"
                          src="../../../assets/img/sql.png"
                          alt=""
                        />
                      </el-col>

                      服务资产库
                    </el-col>
                    <el-col :span="8">
                      <el-col :span="24">
                        <img
                          class="img1"
                          src="../../../assets/img/sql.png"
                          alt=""
                        />
                      </el-col>
                      服务监控平台
                    </el-col>
                    <!-- <el-col :span="8">
                      <el-col :span="24">
                        <img class="img1" src="../../../assets/img/sql.png" alt="">
                      </el-col>
                      服务监控平台
                    </el-col> -->
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
            <!-- 服务系统关系图 -->
            <el-col class="commonlyUsed">
              <el-row class="title-border">
                <el-col :span="24" class="title-padding">
                  <div class="title">服务系统关系图</div>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24" class="commonlyUsed-content1">
                  <el-row :gutter="12">
                    <el-col :span="24">
                      <div>
                        当前系统核心
                        <el-select v-model="value" placeholder="SAP">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                  <div id="mapSer_" :style="{ width: '100%', height: '300px' }"></div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row> -->
            </el-col>
            <div
              class="zoomButton"
              style="display: none"
              @click="isZoom = !isZoom"
            >
              <i v-if="isZoom" class="el-icon-caret-left"></i>
              <i v-else class="el-icon-caret-right"></i>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <project-info
      :ProjectInfo="ProjectInfo"
      @confirm="handleSubmit()"
      :value="value"
      @changedialog="changechangeValue"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import search from '../../search'
import echartsZ from './components/echartsZ.vue'
import ProjectInfo from '../project_list/ProjectInfo'
import {
  getCountStatistics,
  getConnectorTypeStatistics,
  getProject,
  getProxyService,
  getResourceTypeStatistics
} from '@/api/home'
import { mapServer } from '@/api/mapServer'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'
import echartsBin from './components/echartsBin.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceListMixins],
  components: {
    echartsBin,
    ProjectInfo,
    search,
    echartsZ
  },
  data() {
    return {
      isZoom: true,
      options: [
        {
          value: 'SPA',
          label: 'SPA'
        }
      ],
      data: [
        {
          label: '项目列表1'
        },
        {
          label: '项目列表1'
        },
        {
          label: '项目列表1'
        },
        {
          label: '项目列表1'
        },
        {
          label: '项目列表1'
        }
      ],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      ProjectInfo: {},
      countStatistics: {}, // 头部统计数据
      connectorTypeStatistics: [], // 服务类型统计
      resourceTypeStatistics: [], // 资源类型统计
      proxyServiceList: [], // 常用服务
      value: false, // 是否显示弹框
      page: {
        pageNum: 0,
        pageSize: 4,
        total: 0
      }
    }
  },
  mounted() {
    this.getCountStatistics() // 获取首页头部统计数据
    this.getConnectorTypeStatistics() // 获取服务类型统计数据
    this.getProxyService() // 首页常用服务
    this.getResourceTypeStatistics() // 资源类型统计
    this.createMap()
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    // 获取常用项目
    async getData() {
      this.tableLoading = true
      // const rt = await queryProxyService({
      const rt = await getProject(4).catch((e) => {
        this.tableLoading = false
        return Promise.reject(e)
      })
      if (rt.status === '200') {
        this.tableLoading = false
        this.tableList = rt.data
        return Promise.resolve(rt)
      } else {
        this.tableLoading = false
      }
    },
    // 获取头部统计数据
    getCountStatistics() {
      getCountStatistics()
        .then((rt) => {
          if (rt.status === '200') {
            console.log(rt.data,'打印一下数据')
            this.countStatistics = rt.data
            // console.log(this.countStatistics.proxyServiceCount,'123132')
          }
        })
        .catch((e) => {})
    },

    getConnectorTypeStatistics() {
      getConnectorTypeStatistics()
        .then((rt) => {
          if (rt.status === '200') {
            this.connectorTypeStatistics = rt.data
          }
        })
        .catch((e) => {})
    },
    // 关闭
    changechangeValue(val) {
      if (val == false) {
        this.value = false
      }
    },
    // 打开弹框，添加或删除
    userHandle(type) {
      if (type === 'add') {
        this.ProjectInfo = {}
        this.value = true
      }
    },
    // 获取资源类型统计数据
    getResourceTypeStatistics() {
      getResourceTypeStatistics()
        .then((rt) => {
          if (rt.status === '200') {
            this.resourceTypeStatistics = rt.data
          }
        })
        .catch((e) => {})
    },
    // 获取常用服务
    getProxyService() {
      getProxyService(4)
        .then((rt) => {
          if (rt.status === '200') {
            this.proxyServiceList = rt.data
          }
        })
        .catch((e) => {})
    },
    projectDetail(val) {
      this.setProjectID(val.id)
      this.setProjectName(val.id)
      localStorage.setItem('projectID', val.id)
      localStorage.setItem('projectName', val.name)
      this.$router.push({
        path: '/project_list/project_page'
      })
    },
    getDataNext(val) {
      // 分页
      this.page.pageNum = val
      this.getData()
    },
    openMore() {
      this.$router.push({ path: '/search/all' })
    },
    createMap() {
      const vm = this
      const map = echarts.init(document.getElementById('mapSer_'))
      const option = {
        itemStyle: {
          normal: {
            color: '#333'
          },
          shadowBlur: 10
        },
        legend: {
          show: true,
          x: 'left',
          width: 0,
          textStyle: {
            fontSize: 12,
            color: '#ffffff'
          },
          itemWidth: 10
        },
        color: ['#35c2ff', '#E8B842', '#A170DD'],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            legendHoverLink: false,
            hoverAnimation: true,
            nodeScaleRatio: false,
            // 箭头
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 15],
            edgeLabel: {
              show: true,
              normal: {
                show: true,
                position: 'middle',
                textStyle: {
                  fontSize: 12
                },
                formatter: '{c}'
              }
            },
            focusNodeAdjacency: true,
            roam: true,
            categories: vm.categories,
            // 圆形上面的文字
            label: {
              normal: {
                position: 'SPA',
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              }
            },
            force: {
              repulsion: 2500
            },
            // itemStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            //       {
            //         offset: 1,
            //         color: '#35c2ff'
            //       }
            //     ])
            //   },
            //   shadowBlur: 10
            // },
            // lineStyle: {
            //   normal: {
            //     width: 1,
            //     shadowColor: 'none',
            //     color: '#0250FD',
            //   },
            // },
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0.1
              }
            },
            data: [1123123, 333, 3333],
            links: '1'
          }
        ]
      }
      const that = this
      map.setOption(option)
      // map.on('click', function (params) {
      //   console.log('params', params)
      //   if (params.dataType === 'node') {
      //     that.$router.push({
      //       path: '/home/mapSers',
      //       query: {
      //         names: params.name,
      //       },
      //     })
      //   } else {
      //     let querydata = {
      //       'fname': params.data.source,
      //       'tname': params.data.target,
      //       'starttime': that.date.starttime,
      //       'endtime': that.date.endtime,
      //       'access_token': window.localStorage.getItem('access_token'),
      //       'domainname': 1,
      //     }
      //     that.$router.push(
      //       {
      //         path: '/home/problemA',
      //         query: querydata
      //       }
      //     )
      //   }
      //  if(params.dimensionNames[0]=='value'){
      //      let querydata= {dataconsumer: params.data.source,dataprovider:params.data.target}
      //         that.$router.push(
      //         {
      //             path: '/home/servicecataLog',
      //             query: querydata
      //         }
      //         )
      //         //  this.$router.push({path: '/servicecataLog', query: {dataconsumer: params.data.source,dataprovider:params.data.target}})
      //         }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.full-page-content {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #1b83bd;
  }
  .authsloading {
    // margin-left: 10px;
    position: relative;
    right: 0;
    top: 0;
    .zoomButton {
      position: absolute;
      top: 50%;
      left: -13px;
      z-index: 12;
      width: 12px;
      padding: 16px 0;
      margin-top: -20px;
      text-align: center;
      color: #fff;
      border-right: 1px solid #7180c8;
      border-radius: 4px 0 0 4px;
      background-color: #2d42af;
      cursor: pointer;
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
    }
  }
  .widthZoom {
    width: 0;
    .el-col {
      display: none;
    }
  }
  .img-right {
    transform: translateY(15px);
  }
  .img1 {
    width: 50px;
    height: 50px;
  }

  .treeColor {
    margin-left: -5px;
  }

  .entryName {
    cursor: pointer;
    margin-top: 9px;
  }

  // padding-bottom: 20px;
  overflow: hidden;

  .content-title {
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 12px;
  }

  .content-add {
    text-align: right;
  }

  .content-header {
    text-align: center;
    min-width: 1240px;
    color: #fff;

    .mar-left-l {
      margin-left: 1.25%;
    }
    .content-box2,
    .content-box3,
    .content-box1,
    .content-box {
      border-radius: 4px;
      width: 19%;
      background-color: rgb(31, 179, 180);
      float: left;
      margin-left: 10px;
      .box-box {
        padding: 20px;
        text-align: left;
        .left-top {
          text-align: center;
          font-size: 16px;
          font-weight: 500;
        }
        .left-bottom {
          text-align: center;
          font-weight: bold;
          font-size: 28px;
          margin-top: 6px;
          color: #fff;
        }
        .right-box {
          width: 42px;
          height: 42px;
          margin: 8px auto;
          border-radius: 50%;
          color: #fff;
          text-align: center;
          font-size: 42px;
          line-height: 42px;
        }
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        // .color-e85b33 {
        //   background: #e85b33;
        // }
      }
    }
    .content-box3 {
      background-color: rgb(232, 130, 43);
    }
    .content-box1 {
      background-color: rgb(65, 136, 244);
    }
    .content-box {
      background-color: #5770e9;
    }
  }

  .commonlyUsed {
    margin-top: 18px;

    .title-border {
      background: #fff;
    }

    .commonlyUsed-content1 {
      padding: 12px;
      background: #fff;
    }
    .commonlyUsed-content {
      // text-align: center;
      padding: 12px;
      background: #fff;
      .tree,
      .list {
        height: 360px;
        overflow-y: auto;
      }
      /deep/ .tableHeight {
        height: 390px;
        min-height: 390px;
      }
      /deep/ .el-table__body-wrapper {
        height: 350px!important;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .commonlyUsed-info {
        width: 20%;
        .commonlyUsed-left {
          height: 10px;
          width: 10px;
          margin: 20px;
        }
        .commonlyUsed-left:hover {
          background: #0f16ea;
        }
        .info-box {
          background: #f7f7f7;
          margin-bottom: 12px;
          padding: 22px;
          cursor: pointer;
          .info-word {
            font-size: 17px;
            font-weight: bold;
            margin-top: 5px;
          }
          .info-icon {
            text-align: center;
            font-size: 20px;
            width: 28px;
            height: 28px;
            background: #fff;
            border-radius: 5px;
            line-height: 28px;
            color: #0f16ea;
          }
          .info-describe {
            height: 28px;
            color: #9a9393;
            font-size: 13px;
            padding: 8px 0px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .info-name {
            font-size: 14px;
            font-weight: bold;
          }
          .mar-top-10 {
            margin-top: 10px;
          }
          .project-left {
            text-align: center;
          }
          .project-border-r {
            border-right: 1px solid #d2d9ef;
          }
          .project-num {
            font-size: 18px;
            font-weight: bold;
            color: #6ab3fd;
          }
          .project-nums {
            font-size: 18px;
            font-weight: bold;
            color: #7e95ec;
          }

          .project-word {
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
    }
  }

  .content-type-left {
    margin-top: 18px;
    height: 360px;

    .content-type-echart {
      width: 100%;
      height: 300px;
      background: #fff;
    }
  }

  .resources {
    background: #fff;

    .resources-box {
      padding: 0 24px;

      .resources-box-border {
        border-bottom: 1px solid #f1f5ff;
        padding: 19px 0px;
      }
    }

    .resources-left {
      font-size: 15px;
      font-weight: 500;

      .resources-icon {
        color: #3457d8;
        font-size: 20px;
        margin-right: 8px;
      }
    }

    .resources-right {
      text-align: right;
      font-size: 15px;
      color: #b7aeae;
    }
  }

  .resources :hover {
    background: #f1f5ff;
    color: #5473e8;
  }

  .resources :hover .resources-right {
    color: #5473e8;
  }

  .record {
    background: #fff;
    padding: 15px 0px;

    .record-box {
      padding: 0 24px;

      .record-box-border {
        border: 1px solid #efefef;
        padding: 10px 0px;
        margin-bottom: 12px;
      }
    }

    .record-left {
      font-size: 15px;
      font-weight: 500;
      padding-left: 12px;
    }

    .record-user {
      font-size: 15px;
      color: #b7aeae;
    }

    .record-right {
      text-align: right;
      font-size: 15px;
      color: #b7aeae;
      padding-right: 12px;
    }

    .record-box :hover {
      border-color: #5473e8 !important;
    }

    .record-box :hover .record-user {
      color: #5473e8;
    }

    .record-box :hover .record-left {
      color: #5473e8;
    }

    .record-box :hover .record-right {
      color: #5473e8;
    }
  }

  .mar-left {
    margin-left: 18px;
  }

  .title-border {
    border-bottom: 1px solid #efefef;
    background: #fff;
  }

  .title-padding {
    padding: 16px 18px;
  }

  .content-padding {
    padding: 0px 18px;
    margin-bottom: 12px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    border-left: 4px solid #1536da;
    padding-left: 10px;

    .title-input {
      margin-left: 20px;
      width: 200px;
    }

    .title-right {
      cursor: pointer;
      position: absolute;
      right:0;
      text-align: right;
      float: right;
      color: #b7aeae;
      font-size: 12px;
      margin-top: 5px;
      //cursor: pointer;
    }
  }

  .titleList {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
<style lang="scss">
.commonlyUsed-content .serach {
  .tree,
  .list {
    height: 360px;
    overflow-y:auto;
  }
  .list {
    min-width: 200px;
  }
}
</style>
