<template>
  <div>
    <el-card>
      <div style="font-size:18px;color:303133">提测说明详情</div>
      <el-row>
        <el-col :span="4">
          <div class="col-style">jira项目名称:</div>
        </el-col>
        <el-col :span="6">
          <div class="col2-style"> {{jiraProjectName}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">项目名称:</div>
        </el-col>
        <el-col :span="6">
          <div class="col2-style">
            {{projectName}}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">服务及分支:</div>
        </el-col>
        <el-col :span="18">
          <el-table :data="serviceAndBranch" border style="width:90%;margin-top:20px;margin-left:-50px">
            <el-table-column label="服务名称" prop="serviceName" width="300"></el-table-column>
            <el-table-column label="服务分支" prop="branch" width="300"></el-table-column>
            <el-table-column label="开发负责人" prop="developer" width="170"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">apollo变更:</div>
        </el-col>
        <el-col :span="18">
          <el-table :data="apollo" border style="width:90%;margin-top:20px;margin-left:-50px">
            <el-table-column label="项目名称" prop="projectName" width="300"></el-table-column>
            <el-table-column label="apollo Key" prop="key" width="300"></el-table-column>
            <el-table-column label="apollo value" prop="value" width="170"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">数据库变更:</div>
        </el-col>
        <el-col :span="18">
          <el-table :data="database" border style="width:90%;margin-top:20px;margin-left:-50px">
            <el-table-column label="数据库名称" prop="db" width="300"></el-table-column>
            <el-table-column label="sql" prop="sql" width="470"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">需求地址:</div>
        </el-col>
        <el-col :span="6">
          <div class="col2-style">{{requirement}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">接口地址:</div>
        </el-col>
        <el-col :span="6">
          <div class="col2-style">{{api}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col-style">其 它:</div>
        </el-col>
        <el-col :span="6">
          <div class="col2-style">{{scope}}</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { detailTestDescription } from '@/api/TestDesciption'

export default {
  data() {
    return {
      projectName: '',
      jiraProjectName: '',
      requirement: '',
      api: '',
      scope: '',
      apollo: [],
      database: [],
      serviceAndBranch: []
    }
  },
  created() {
    // console.log('this.$route.query', this.$route.query)
    // 详情接口
    detailTestDescription({
      projectName: this.$route.query.projectName,
      jiraProjectKey: this.$route.query.jiraProjectKey
    }).then((resp) => {
      var data = resp.data.data
      console.log('rrr', data)
      this.projectName = data.projectName
      this.jiraProjectName = data.jiraProjectName
      this.requirement = data.requirement
      this.api = data.api
      this.scope = data.scope
      this.serviceAndBranch = JSON.parse(data.serviceAndBranch)
      this.apollo = JSON.parse(data.apollo)
      this.database = JSON.parse(data.database)
    })
  },

  methods: {}
}
</script>
<style lang="sss" scoped>
.col-style {
  margin-top: 20px;
  margin-left: 40px;
}
.col2-style {
  margin-top: 20px;
  margin-left: -50px;
}
</style>
