<template>
  <div class="app-container">
    <h3 style="overflow:hidden;">
      hook info
    </h3>
    <el-form ref="hookInfo" :model="hookInfo" label-width="120px">
      <el-form-item label="id" prop="id" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.id"/>
      </el-form-item>
      <el-form-item label="gitRepositoryId" prop="gitRepositoryId" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.gitRepositoryId"/>
      </el-form-item>
      <el-form-item label="gitRefId" prop="gitRefId" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.gitRefId"/>
      </el-form-item>
      <el-form-item label="objectKind" prop="objectKind" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.objectKind"/>
      </el-form-item>
      <el-form-item label="userId" prop="userId" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.userId"/>
      </el-form-item>
      <el-form-item label="userEmail" prop="userEmail" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.userEmail"/>
      </el-form-item>
      <el-form-item label="userName" prop="userName" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.userName"/>
      </el-form-item>
      <el-form-item label="projectId" prop="projectId" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.projectId"/>
      </el-form-item>
      <el-form-item label="ref" prop="ref" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.ref"/>
      </el-form-item>
      <el-form-item label="totalCommitsCount" prop="totalCommitsCount" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.totalCommitsCount"/>
      </el-form-item>
      <el-form-item label="before" prop="before" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.before"/>
      </el-form-item>
      <el-form-item label="after" prop="after" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.after"/>
      </el-form-item>
      <el-form-item label="checkoutSha" prop="checkoutSha" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.checkoutSha"/>
      </el-form-item>
      <el-form-item label="repository" prop="repository" style="width: 50%;">
        <div style="border:1px solid #ddd;border-radius: 4px" >
          <div v-for="(value ,key) in hookInfo.repository" :key="key">
            <pre style="margin-left:10px">{{ key }} :{{ value }}</pre>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="commit 1" prop="commits" style="width: 80%;">
        <div style="border:1px solid #ddd;border-radius: 4px;width:80%;" >
          <div v-for="item in hookInfo.commits" :key="item.id" class="ace-container">
            <pre style="margin-left:10px">{{ item }}</pre>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="createTime" prop="createTime" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.createTime"/>
      </el-form-item>
      <el-form-item label="updateTime" prop="updateTime" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.updateTime"/>
      </el-form-item>
      <el-form-item label="logicDel" prop="logicDel" style="width: 50%;">
        <el-input :disabled="true" v-model="hookInfo.logicDel"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { findHook } from '@/api/pipeline'

export default {
  data() {
    return {
      hookInfo: {}
    }
  },
  created() {
    this.findHook()
  },
  mounted() {
  },
  methods: {
    findHook() {
      // 获取gitHookReceiveId
      this.gitHookReceiveId = this.$route.query.gitHookReceiveId
      findHook(this.gitHookReceiveId).then(res => {
        this.listLoading = false
        this.hookInfo = res.data.data
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
