<template>
  <div class="app-container">
    <div class="table">
      <div class="name">
        <span>项目名称</span>
        <el-select v-model="projectValue" placeholder="请选择项目名称" filterable>
          <el-option
            v-for="item in project"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-button v-if="isEdit" type="primary" class="el-icon-edit" style="margin-left: 20px;">修改</el-button>
        <el-button v-else type="primary" class="el-icon-circle-check-outline" style="margin-left: 20px;">保存</el-button>
        <table class="tg">
          <colgroup>
            <col style="width: 150px">
            <col style="width: 250px">
            <col style="width: 250px">
            <col style="width: 250px">
            <col style="width: 250px">
            <col style="width: 250px">
          </colgroup>
          <tr>
            <th>项目名称</th>
            <th colspan="2">山东XX新线项目</th>
            <th>客户</th>
            <th colspan="2">xxx有限公司</th>
          </tr>
          <tr>
            <td>时间</td>
            <td>2016年_月_日</td>
            <td>项目阶段</td>
            <td></td>
            <td>项目负责人</td>
            <td></td>
          </tr>
          <tr>
            <td>类别</td>
            <td>内容</td>
            <td>目标</td>
            <td>计划时间</td>
            <td>原因分析</td>
            <td>下一步措施</td>
          </tr>
          <tr>
            <td rowspan="3">本周项目计划</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td rowspan="3">本周出现的问题</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td rowspan="3">下周计划</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { projectSelect } from '../../api/ProjectManagement/summarize'
export default {
  name: 'Summarize',
  data() {
    return {
      projectValue: '',
      project: [],
      isEdit: true
    }
  },
  watch: {
    project(val) {
      if (val.length > 0) {
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
    }
  }
}
</script>

<style scoped>
  .tg{
    border-collapse:collapse;
    border-spacing:0;
  }
  .tg td{
    height: 45px;
    font-size:16px;
    padding:12px 10px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    color: #606266;
    border-color:#ebeef5;
  }
  .tg th{
    min-height: 400px;
    font-size:20px;
    font-weight:bolder;
    padding:10px 5px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    color: #909399;
    border-color:#ebeef5;
  }
  .tg .title{
    font-weight: 500;
    font-size: 24px;
    color: #909399;
  }
  .table table{
    margin: 20px
  }
  .main {
    font-size: 30px;
    font-weight: bolder;
  }
  .name {
    margin: 10px auto;
  }
  span {
    font-size: 22px;
    margin: 20px;
  }
</style>
