<template>
  <div>
    <el-card>
      <div style="font-size:18px;color:303133">提测说明详情</div>
      <el-form label-width="90px" style="margin-top:20px;margin-left:20px" >
        <el-form-item label="Jira项目:" style="width:300px">
          <el-input v-model="jiraProjectName"></el-input>
        </el-form-item>
        <el-form-item label="项目名称:" style="width:300px">
          <el-input v-model="projectName"></el-input>
        </el-form-item>
        <el-form-item label="服务及分支:">
          <el-table :data="serviceAndBranch" border style="width:85%">
            <el-table-column label="服务名称" prop="serviceName" width="200px"></el-table-column>
            <el-table-column label="服务分支" prop="branch"></el-table-column>
            <el-table-column label="开发负责人" prop="developer" width="120px"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="apollo变更:">
          <el-table :data="apollo" border style="width:85%">
            <el-table-column label="项目名称" prop="projectName"></el-table-column>
            <el-table-column label="apollo Key" prop="key"></el-table-column>
            <el-table-column label="apollo value" prop="value"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="数据库变更:" style="width:86%">
          <el-table :data="database" border>
            <el-table-column label="数据库名称" prop="db" width="200"></el-table-column>
            <el-table-column label="sql" prop="sql"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="需求地址:">
          <a :href="requirement">{{requirement}}</a>
        </el-form-item>
        <el-form-item label="接口地址:">
          <a :href="api">{{api}}</a>
        </el-form-item>
        <el-form-item label="其它:">
          <el-input type="textarea" v-model="scope" style="width:85%" :rows="8"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { detailTestDescription } from '@/api/TestDesciption'

export default {
  data() {
    return {
      projectName: '',
      jiraProjectName: '',
      requirement: '',
      api: '',
      scope: '',
      apollo: [],
      database: [],
      serviceAndBranch: [],
      url: 'https://element.eleme.io'
    }
  },
  activated() {
    detailTestDescription({
      projectName: this.$route.query.projectName,
      jiraProjectKey: this.$route.query.jiraProjectKey
    }).then((resp) => {
      var data = resp.data.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)
    })
  }
}
</script>
<style lang="sss" scoped>
.col-style {
  margin-top: 20px;
  margin-left: 40px;
}
.col2-style {
  margin-top: 20px;
  margin-left: -55px;
}
</style>
