<template>
  <div class="app-container">
    <el-card>
      <el-steps :active="1" finish-status="success">
  <el-step title="申请"></el-step>
  <el-step title="受理"></el-step>
  <el-step title="策划"></el-step>
  <el-step title="现场审核"></el-step>
  <el-step title="产品检测"></el-step>
  <el-step title="评定"></el-step>
  <el-step title="出证"></el-step>
  <el-step title="归档"></el-step>
</el-steps>
    </el-card>
    <el-row :gutter="6" style="margin-top:6px">
      <el-col :span="20">
            <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="申请信息" name="Basic" style="overflow-y:auto;overflow-x:hidden;">
        <CCCform @handleCommit="save" :certapp="certappdata" v-if="kind=='CCC'&isLoad"></CCCform>
        <QMSform @handleCommit="save" :certapp="certappdata" v-if="kind=='QMS'&isLoad"></QMSform>
      </el-tab-pane>
      <el-tab-pane label="产品单元"  name="Productunit" v-if="certapp" lazy>
          <Productunit :certapp="certapp"></Productunit>
      </el-tab-pane>
      <el-tab-pane label="原材料供应商" name="Productunit1" v-if="certapp" lazy>
      </el-tab-pane>
      <el-tab-pane label="检测设备" name="Productunit2" v-if="certapp" lazy>
        
      </el-tab-pane>
      <el-tab-pane label="资料评审" name="Productunit3" v-if="certapp" lazy>
        
      </el-tab-pane>
      <el-tab-pane label="收费信息" name="Productunit4" v-if="certapp" lazy>
        <el-button
            type="primary"
            @click="handleComplete()"
          >完成受理</el-button>
      </el-tab-pane>
      <el-tab-pane label="审核成员" name="Certappmember" v-if="certapp" lazy>
        <Member :certapp="certapp" ></Member>
      </el-tab-pane>
      <el-tab-pane label="现场审核反馈" name="Certappfeedback" v-if="certapp" lazy>
        <Conclusion :certapp="certapp" ></Conclusion>
      </el-tab-pane>
      <el-tab-pane label="认证评定" name="Certappaccess" v-if="certapp" lazy>
        <access :certapp="certapp" ></access>
      </el-tab-pane>
    </el-tabs>
      </el-col>
      <el-col :span="4">
            <el-card>
              <div slot="header" class="clearfix">
            <span>业务时间线</span>
          </div>
        <el-timeline >
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
    </el-card>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import CCCform from "@/views/certapp/cccform"
import Productunit from "@/views/certapp/productunit"
import { getCertapp, completeCertapp } from "@/api/certapp"
import router from '@/router';
import QMSform from "@/views/certapp/qmsform"
import Conclusion from "@/views/audit/conclusion"
import Member from "@/views/audit/member"
import access from "@/views/accessment/access"
export default {
  components: { CCCform, Productunit, QMSform, Conclusion, Member, access},
  props: [],
  data() {
    return {
      activeName:'Basic',
      certapp:null,
      certappdata:null,
      kind:'CCC',
      isLoad:false,
      activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }]
    };
  },
  computed: {},
  watch: {
    // "formData.cert_field": "changeRules"
  },
  created() {
    this.getParams()
  },
  mounted() {},
  methods: {
      getParams(){
          var id = this.$route.params.id
          this.certapp = id
          getCertapp(id).then(res=>{
            this.certappdata = res.data
            this.kind = res.data.cert_field_.code
            this.isLoad = true
          })
          if(this.$route.name=='Certappupdate' || this.$route.name=='Certappdetail'){
            this.activeName = 'Basic'
          }else{
            this.activeName = this.$route.name
          }
          
      },
      save(val){
        this.certapp=val
      },
      handleComplete(){
        completeCertapp(this.certapp.id).then(res=>{
          this.$message.success('成功')
          this.$router.go(-1)
        })
      }
  }
};
</script>
