<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: 93px">
            <col style="width: 83px">
            <col style="width: 64px">
            <col style="width: 64px">
            <col style="width: 63px">
            <col style="width: 63px">
            <col style="width: 92px">
            <col style="width: 64px">
            <col style="width: 76px">
            <col style="width: 105px">
            <col style="width: 102px">
            <col style="width: 134px">
          </colgroup>
          <tr>
            <th class="tg-s268" colspan="12">一、项目基本情况</th>
          </tr>
          <tr>
            <td class="tg-s268" colspan="2">项目名称</td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-s268" colspan="3">项目编号</td>
            <td class="tg-0lax" colspan="4"></td>
          </tr>
          <tr>
            <td class="tg-s268" colspan="2">制作人</td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-s268" colspan="3">审核人</td>
            <td class="tg-0lax" colspan="4"></td>
          </tr>
          <tr>
            <td class="tg-s268" colspan="2">项目经理</td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-s268" colspan="3">制作日期</td>
            <td class="tg-0lax" colspan="4"></td>
          </tr>
          <tr>
            <td class="tg-s268" colspan="12">二、历史变更记录（按时间顺序记录项目每一次变更情况）</td>
          </tr>
          <tr>
            <td class="tg-s268">序号</td>
            <td class="tg-s268">变更时间</td>
            <td class="tg-s268" colspan="2">涉及项目任务</td>
            <td class="tg-s268" colspan="3">变更要点</td>
            <td class="tg-0lax" colspan="3">变更理由</td>
            <td class="tg-0lax">申请人</td>
            <td class="tg-0lax">部门负责人</td>
          </tr>
          <tr>
            <td class="tg-s268"></td>
            <td class="tg-s268"></td>
            <td class="tg-s268" colspan="2"></td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-0lax" colspan="3"></td>
            <td class="tg-0lax"></td>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-s268"></td>
            <td class="tg-s268"></td>
            <td class="tg-s268" colspan="2"></td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-0lax" colspan="3"></td>
            <td class="tg-0lax"></td>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-s268"></td>
            <td class="tg-s268"></td>
            <td class="tg-s268" colspan="2"></td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-0lax" colspan="3"></td>
            <td class="tg-0lax"></td>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-s268"></td>
            <td class="tg-s268"></td>
            <td class="tg-s268" colspan="2"></td>
            <td class="tg-s268" colspan="3"></td>
            <td class="tg-0lax" colspan="3"></td>
            <td class="tg-0lax"></td>
            <td class="tg-0lax"></td>
          </tr>
          <tr>
            <td class="tg-s268" colspan="12">三、请求变更信息</td>
          </tr>
          <tr>
            <td class="tg-s268" colspan="12">1、申请变更的内容</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="12"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="12">2、申请变更的原因</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="12"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="12">四、影响分析</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">受影响的基准计划</td>
            <td class="tg-0lax" colspan="2">1、进度计划</td>
            <td class="tg-0lax" colspan="4">2、费用计划</td>
            <td class="tg-0lax" colspan="3">3、资源计划</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="5">是否需要成本/进度影响分析？</td>
            <td class="tg-0lax" colspan="4">是</td>
            <td class="tg-0lax" colspan="3">否</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">对成本影响</td>
            <td class="tg-0lax" colspan="9"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">对进度影响</td>
            <td class="tg-0lax" colspan="9"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">对资源的影响</td>
            <td class="tg-0lax" colspan="9"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">变更程度分类</td>
            <td class="tg-0lax" colspan="2">高</td>
            <td class="tg-0lax" colspan="4">中</td>
            <td class="tg-0lax" colspan="3">低</td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="3">若不进行变更有何影响</td>
            <td class="tg-0lax" colspan="9"></td>
          </tr>
          <tr>
            <td class="tg-0lax">申请人签字</td>
            <td class="tg-0lax" colspan="2"></td>
            <td class="tg-0lax" colspan="2">申请日期</td>
            <td class="tg-0lax" colspan="2">项目经理签字</td>
            <td class="tg-0lax" colspan="2"></td>
            <td class="tg-0lax">日期</td>
            <td class="tg-0lax" colspan="2"></td>
          </tr>
          <tr>
            <td class="tg-0lax" colspan="12">五、审批结果</td>
          </tr>
          <tr>
            <td class="tg-0lax">审批意见</td>
            <td class="tg-0lax" colspan="5"></td>
            <td class="tg-0lax">审批人签字</td>
            <td class="tg-0lax" colspan="2"></td>
            <td class="tg-0lax">日期</td>
            <td class="tg-0lax" colspan="2"></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{
    font-size:16px;
    padding:12px 10px;
    border-style:solid;
    border-width:1px;
    overflow:hidden;
    word-break:normal;
    color: #606266;
    border-color:#ebeef5;
  }
  .tg th{
    font-size:14px;
    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 auto;
  }
  .main {
    font-size: 30px;
    font-weight: bolder;
  }
  .name {
    margin: 10px auto;
  }
  span {
    font-size: 22px;
    margin: 20px;
  }
</style>
