<template>
  <div>
    <div>
      <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    </div>
    <div class="message">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>申请信息</span>
        </div>
        <el-row>
          <el-col :span="4">企业名称</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">联系人</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">联系电话</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">企业名称</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">联系人</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">联系电话</el-col>
          <el-col :span="4"><input type="text" /></el-col>
        </el-row>
      </el-card>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>跟进记录</span>
          </div>
          <!-- 列表 -->

          <el-table
            :data="dataList"
            :header-cell-style="{
              'background-color': '#e8e8e8',
              color: 'black'
            }"
            border=""
          >
            <el-table-column align="left" label="跟进人" prop="person" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="跟进时间" prop="personDate" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="跟进状态" prop="state" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="处理意见" prop="suggest" min-width="160" show-overflow-tooltip />
          </el-table>
        </el-card>
      </div>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>跟进登录</span>
        </div>
        <el-row>
          <el-col :span="4">跟进人</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">跟进时间</el-col>
          <el-col :span="4"><input type="text" /></el-col>
          <el-col :span="4">跟进状态</el-col>
          <el-col :span="4"
            ><select value="1">
              <option value="1">跟进中</option>
              <option value="2">vertical</option>
            </select></el-col
          >
          <el-col :span="4">处理意见</el-col>
          <el-col :span="4"><input type="text" placeholder="记录处理意见" /></el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          person: '李四',
          personDate: '2020-09-10 12:12',
          state: '跟进中',
          suggest: '业务沟通中'
        },
        {
          person: '李四',
          personDate: '2020-09-10 12:12',
          state: '跟进中',
          suggest: '业务沟通中'
        },
        {
          person: '李四',
          personDate: '2020-09-10 12:12',
          state: '跟进中',
          suggest: '业务沟通中'
        }
      ]
    }
  },
  methods: {
    goBack() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card__body {
  .el-col:nth-child(2n + 1) {
    background-color: #e8e8e8;
  }
  .el-col {
    border: 1px solid black;
    height: 48px;
    text-align: center;
    line-height: 48px;
    overflow: hidden;
    margin: 0px 0px -1px -1px;
    input {
      outline: none;
      border: 0px;
      height: 48px;
    }
  }
}

.message {
  margin-top: 10px;
}
</style>
