<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;" height='250px' :stripe="true" :headers="header_arr" :datas="zd_table_arr" slot="fw_table"></table-um>
                  <!-- <div slot="process">流程</div> -->
                  <workflows-view slot="process" :id="workflows_id" :hide-detail="true"></workflows-view>
                  <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>{{all_count.total_instances>=10000?all_count.total_instances/10000:all_count.total_instances}}</span><span :style="all_count.total_instances>=10000?'':{opacity:0}">万</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>{{all_count.avg_time}}</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>{{all_count.timeout_rate}}</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"
                            unit="min"
                          ></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> -->
                  <workflows-view slot="suvice" :id="workflows_id" :hide-detail="false"></workflows-view>
                </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/process-top-list";
import BarChart from "@/components/e-charts/bar-chart";
import workflowsView from "@/components/work-flow/workflows-view";
export default {
  components: {
        serviceHeader,
        infoList,
        tableUm,
        BlockRadius,
        lineChart,
        Toplist,
        BarChart,
        workflowsView
    },
  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:''
      },
      workflows_id:'',
      all_count: {
          "total_instances": 0, //流程实例总数
          "timeout_rate": 0,//流程超时率
          "avg_time": 0 // 流程平均耗时
      },
      toplistData:[],
      toplistTargetValue:0,
      bar_data_org: {
        legendData: [],
        seriesData: [
          
        ]
      },
      state:1,
      now_service:0,
      service_arr:[],
      line_data:{
        xAxisData: [],
        seriesData: [
          {
            name: "趋势",
            data: []
          }
        ]
      },
      list_arr:[
        {
            title:'流程描述：',
            info:''
        },
        {
            title:'所属组织：',
            info:''
        },
        {
            title:'创建时间：',
            info:''
        },
        {
            title:'流程挂载服务：',
            info:'',
            type:'solt',
            solt_name:'fw_table'
        },
      ],
      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:[],
      chart_data:'',
    }
  },
  created(){
    this.get_process_detail()
    this.get_table_service()
    this.workflows_id = parseInt(this.$route.params.id)
  },
  methods:{
    get_process_detail(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/briefDetail?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                console.log(data);
                this.state = data.state
                this.get_header(data)
                this.getbaseinfo(data)
                if(this.state!==0){
                  this.get_all_count()
                  this.get_process_num()
                  this.get_node_time()
                  this.get_node_timeout()
                }else{
                  this.list_arr.push(
                    {
                        title:'流程概览：',
                        info:'',
                        type:'solt',
                        solt_name:'process'
                    })
                }
                
            })
            .catch(function(response) {
                
            });
    },
    changeday(index){
      if(index==0){
        this.deal_charts_data(this.chart_data.day)
      }else{
        this.deal_charts_data(this.chart_data.month)
      }
    },
    get_node_time(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/detail/nodeElapsedTimeStat?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                this.toplistData = []
                var temp = []
                if(data){
                  data.forEach(e => {
                    this.toplistData.push({
                      service_name:e.node_name,
                      request_count:e.elapsed_time
                    })
                    temp.push(e.elapsed_time)
                  });
                  if(Math.max(...temp)>=1){
                    this.toplistTargetValue = Math.max(...temp)
                  }else{
                    this.toplistTargetValue = 1
                  }
                }
            })
            .catch(function(response) {
                
            });
    },
    get_node_timeout(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/detail/nodeTimeoutRate?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                if(data){
                  var tempx = []
                  var tempy = []
                  data.forEach(e => {
                    tempx.push(e.node_name)
                    tempy.push(e.timeout_rate*100)
                  });
                  this.bar_data_org= {
                    legendData: tempx,
                    seriesData: tempy
                  }
                }
            })
            .catch(function(response) {
                
            });
    },
    get_process_num(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/detail/statInstance?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                if(data){
                  this.chart_data = data
                  this.deal_charts_data(this.chart_data.day)
                }
            })
            .catch(function(response) {
                
            });
    },
    deal_charts_data(arr){
      var tempx = []
      var tempy = []
      arr.forEach(e => {
        tempx.push(e.date)
        tempy.push(e.wf_instances)
      });
      this.line_data={
        xAxisData: tempx,
        seriesData: [
          {
            name: "趋势",
            data: tempy
          }
        ]
      }
    },
    get_all_count(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/detail/summary?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                if(data){
                  this.all_count = data
                }
            })
            .catch(function(response) {
                
            });
    },
    get_table_service(){
      this.$http
            .get('/apaas/serviceapp/v3/workflows/mountServices?id='+this.$route.params.id)
            .then(response => {
                let data = response.data.data
                this.zd_table_arr = []
                if(data&&data.length){
                  data.forEach(e => {
                    this.zd_table_arr.push({
                      fwmc:e.name,
                      id:e.service_id,
                      time:e.service_end_time
                    })
                  });
                }
            })
            .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',' '))
    }
  }

}
</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>
