<template>
  <div class="detail_contain">
    <p class="now_page_title">在线组件工具 /  流程设计  /  流程管理  / <span>详情</span></p>
    <div class="info_contain">
        <service-header :data="service_header_arr"></service-header>
        <div class="type_box">
            <div class="type_title">
                <div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c',color: '#e56600'}:{}">{{item}}</div>
            </div>
            <div class="type_box_select">
                <info-list :list_arr="now_service==0?list_arr:servicead_arr">
                  <table-um style="width:700px;" v-if="zd_table_arr.length" height='250px' :stripe="true" :headers="header_arr" :datas="zd_table_arr" slot="fw_table"></table-um>
                  <div slot="process">流程</div>
                  <div slot="count">
                    <div class="charts">
                      <div class="charts_box">
                        <div class="charts_box_detail" style="width:233px;">
                          <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/shop_ic_jierujg.png" alt="">
                          <div style="float:right;">
                            <p>流程实例总数</p>
                            <p><span>2,980</span><span>万</span></p>
                          </div>
                        </div>
                      </div>
                      <div class="charts_box">
                        <div class="charts_box_detail" style="width:245px;">
                          <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
                          <div style="float:right;margin-right:40px;">
                            <p>流程平均耗时</p>
                            <p style="right:-38px;"><span>35</span><span>min</span></p>
                          </div>
                        </div>
                      </div>
                      <div class="charts_box">
                        <div class="charts_box_detail" style="width:245px;">
                          <img style="width:48px;float:left;margin-top:20px;" src="../../../../../assets/imgs/liucheng_ic_haoshi.png" alt="">
                          <div style="float:right;">
                            <p>流程超时率</p>
                            <p><span>5</span><span>%</span></p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="data_charts">
                      <div class="data_charts_box">
                        <block-radius
                          class="block"
                          :show_header="true"
                          title="流程实例趋势分析"
                          :buttons_arr="['近7天', '近6个月']"
                          @changeButton="changeday"
                        >
                          <line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
                        </block-radius>
                      </div>
                      <div class="data_charts_box">
                        <block-radius
                          :show_header="true"
                          title="节点平均耗时排行"
                          class="block"
                        >
                          <toplist
                            class="block-radius-content"
                            :options="toplistData"
                            :target-value="toplistTargetValue"
                          ></toplist>
                        </block-radius>
                      </div>
                      <div class="data_charts_box">
                        <block-radius :show_header="true" title="节点超时率排行" class="block">
                          <BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
                        </block-radius>
                      </div>
                    </div>
                  </div>
                  <div slot="suvice">流程</div>
                </info-list>
            </div>
        </div>
    </div>
  </div>
</template>


<script>
import serviceHeader from '@/components/service-header'
import infoList from '@/components/infoList'
import tableUm from '@/components/table/table-um'
import BlockRadius from "@/components/general/block-radius";
import lineChart from "@/components/e-charts/line_chart";
import Toplist from "@/components/e-charts/toplist";
import BarChart from "@/components/e-charts/bar-chart";
export default {
  components: {
        serviceHeader,
        infoList,
        tableUm,
        BlockRadius,
        lineChart,
        Toplist,
        BarChart
    },
  data(){
    return{
      service_header_arr:{
          id: "",
          isMap: false,
          name:'',
          first:[],
          second:[],
          fixed_process:false,
          public:false,
          unpublic:false,
          undeploy:false,
          deploy:false,
          fixed_url:'/',
          url:''
      },
      toplistData:[],
      toplistTargetValue:0,
      bar_data_org: {},
      state:1,
      now_service:0,
      service_arr:[],
      line_data:{
        xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
        seriesData: [
          {
            name: "趋势",
            data: [100,200,500,1000,1800,500]
          }
        ]
      },
      list_arr:[
        {
            title:'流程描述：',
            info:''
        },
        {
            title:'所属组织：',
            info:''
        },
        {
            title:'创建时间：',
            info:''
        },
        {
            title:'流程挂载服务：',
            info:'',
            type:'solt',
            solt_name:'fw_table'
        },
        {
            title:'流程概览：',
            info:'',
            type:'solt',
            solt_name:'process'
        },
      ],
      servicead_arr:[
        {
          title: "流程统计",
          prop:"title",
          type: "solt",
          solt_name: "count",
        },
        {
          title: "流程概览",
          prop:"title",
          type: "solt",
          solt_name: "suvice",
        },
      ],
      header_arr:[
        {
            prop:'fwmc',
            label:'服务名称',
            align:'left',
            type:'click',
            url:'/',
            id:'id',
        },
        {
            prop:'time',
            label:'到期时间',
            width:'200px',
            align:'center',
        },
      ],
      zd_table_arr:[]
    }
  },
  created(){
    this.get_process_detail()
  },
  methods:{
    get_process_detail(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/detail?id='+9)
            .then(response => {
                let data = response.data.data
                console.log(data);
                this.state = data.state
                this.get_header(data)
                this.getbaseinfo(data)
            })
            .catch(function(response) {
                
            });
    },
    changeday(){

    },
    get_table_service(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/mountServices?id='+9)
            .then(response => {
                let data = response.data.data
                if(data&&data.length){
                  this.zd_table_arr = data
                }
            })
            .catch(function(response) {
                
            });
    },
    get_header(data){
      this.$set(this.service_header_arr,'name',data.name)
      let state = this.state
      //未部署
      if(state==0){
        this.$set(this.service_header_arr,'first',[])
        this.$set(this.service_header_arr,'second',[])
        this.service_header_arr.first.push({
          name:'工作区域',
          text:data.workarea_name
        })
        this.service_header_arr.first.push({
          name:'流程状态',
          text:'未部署'
        })
        this.service_header_arr.second.push({
          name:'修改时间',
          text:data.update_time=='0001-01-01T00:00:00Z'?'-':data.update_time.split("+")[0].replace('T',' ')
        })
        this.service_arr = ['流程基本信息']
        this.service_header_arr.fixed_process=true
        this.service_header_arr.public=false
        this.service_header_arr.unpublic=false
        this.service_header_arr.undeploy=false
        this.service_header_arr.deploy=true
      //已部署
      }else if(state == 1){
        this.$set(this.service_header_arr,'first',[])
        this.$set(this.service_header_arr,'second',[])
        this.service_header_arr.first.push({
          name:'工作区域',
          text:data.workarea
        })
        this.service_header_arr.first.push({
          name:'流程状态',
          text:'已部署'
        })
        this.service_header_arr.first.push({
          name:'部署时间',
          text:data.deployment_time=='0001-01-01T00:00:00Z'?'-':data.deployment_time.split("+")[0].replace('T',' ')
        })
        this.service_header_arr.second.push({
          name:'服务接口地址',
          text:data.api_url
        })
        this.service_arr = ['流程基本信息','流程运行状态']
        this.service_header_arr.fixed_process=true
        this.service_header_arr.public=true
        this.service_header_arr.unpublic=false
        this.service_header_arr.undeploy=true
        this.service_header_arr.deploy=false
      //已发布
      }else{
        this.$set(this.service_header_arr,'first',[])
        this.$set(this.service_header_arr,'second',[])
        this.service_header_arr.first.push({
          name:'工作区域',
          text:data.workarea
        })
        this.service_header_arr.first.push({
          name:'流程状态',
          text:'已发布'
        })
        this.service_header_arr.first.push({
          name:'发布时间',
          text:'2020-04-11'
        })
        this.service_header_arr.second.push({
          name:'服务接口地址',
          text:data.api_url
        })
        this.service_arr = ['流程基本信息','流程运行状态']
        this.service_header_arr.fixed_process=true
        this.service_header_arr.public=false
        this.service_header_arr.unpublic=true
        this.service_header_arr.undeploy=false
        this.service_header_arr.deploy=false
      }
    },
    getbaseinfo(data){
      this.$set(this.list_arr[0],'info',data.describe)
      this.$set(this.list_arr[1],'info',data.org_name)
      this.$set(this.list_arr[2],'info',data.create_time.split('+')[0].replace('T',' '))
      this.zd_table_arr=[
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
        {
          fwmc:'身份验证服务',
          time:'2020-11-15 15:20:30'
        },
      ]
    }
  }

}
</script>
<style scoped>
.detail_contain{
    width: 100%;
    padding: 0 20px;
    margin-bottom: 20px;
}
.info_contain{
    padding: 25px 20px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
	border-radius: 12px;
}
.now_page_title{
    margin: 15px 0;
    color: #898d9e;
}
.now_page_title span{
    color: #242c43;
    font-weight: 600;
}
.type_box{
    width: 100%;
}
.type_title{
    width: 100%;
    height: 65px;
    line-height: 65px;
    color: #8890a7;
    border-bottom: 2px solid #f4f7fc;
}
.type_select{
    float: left;
    width: auto;
    margin-right: 40px;
    height: 65px;
    cursor: pointer;
}
.type_box_select{
    padding: 30px 10px 10px 10px;
    width: 100%;
}
.charts{
  width: 100%;
  height: 128px;
  background-color: #fbfcfe;
	border-radius: 12px;
  overflow: hidden;
}
.charts_box{
  float: left;
  width: calc((100% - 4px)/3);
  height: 65px;
  box-sizing: content-box;
  border-right: 2px solid #e6ebfe;
  margin-top: 30px;
}
.charts .charts_box:nth-last-of-type(1){
  border: 0;
}
.charts_box_detail{
  margin: 0 auto;
  overflow: hidden;
}
.charts_box_detail div{
  position: relative;
  margin-right: 30px;
}
.charts_box_detail div p{
  font-size: 16px;
  color: #58617a;
}
.charts_box_detail div p:nth-last-of-type(1){
  position: absolute;
  right: -28px;
}
.charts_box_detail div p span:nth-of-type(1){
  font-size: 24px;
	font-weight: 600;
	color: #242c43;
  margin-right: 10px;
}
.charts_box_detail div p span:nth-of-type(2){
  font-size: 16px;
	color: #242c43;
}
.data_charts{
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.data_charts_box{
  width: calc((100% - 40px)/3);
  float: left;
  height: 300px;
  box-sizing: border-box;
	background-color: #fbfcfe;
	border-radius: 12px;
  margin-right: 20px;
  margin-top: 26px;
}
.data_charts .data_charts_box:nth-last-of-type(1){
  margin-right: 0px;
}
.data_charts_box >>> .block_radius{
  background-color: #fbfcfe;
  height: 100%;
}
.block-radius-content {
  width: 100%;
  background-color: #fbfcfe;
  height: calc(100% - 36px);
  margin-top: 15px;
}
.block {
  width: 100%;
  height: 100%;
}
</style>
