<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>
                  <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'
export default {
  components: {
        serviceHeader,
        infoList,
        tableUm
    },
  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:''
      },
      state:1,
      now_service:0,
      service_arr:[],
      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',
        },
        {
            prop:'time',
            label:'到期时间',
            width:'200px',
            align:'center',
        },
      ],
      zd_table_arr:[]
    }
  },
  created(){
    this.get_header()
    this.getbaseinfo()
  },
  methods:{
    get_header(){
      this.$set(this.service_header_arr,'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:'1111'
        })
        this.service_header_arr.first.push({
          name:'流程状态',
          text:'未部署'
        })
        this.service_header_arr.second.push({
          name:'修改时间',
          text:'2020-04-11'
        })
        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:'1111'
        })
        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:'http://localhost:1z/zdrylx?code=430100000000'
        })
        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:'1111'
        })
        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:'http://localhost:1z/zdrylx?code=430100000000'
        })
        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(){
      this.$set(this.list_arr[0],'info','浙江省长兴县综合治理平台事故申报处理流程服务，仅供长兴县使用')
      this.$set(this.list_arr[1],'info','北京比格大数据有限公司')
      this.$set(this.list_arr[2],'info','2019-02-17 21:09:23')
      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%;
}
</style>
