<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;" @click="edit">修改</el-button>
        <el-button v-else type="primary" class="el-icon-circle-check-outline" style="margin-left: 20px;" @click="save">保存</el-button>
      </div>

      <table class="tg">
        <tr>
          <td colspan="8" class="title">一、项目基本情况</td>
        </tr>
        <tr>
          <td colspan="2">项目名称</td>
          <td colspan="2">{{ projectName }}</td>
          <td colspan="2">项目编号</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.项目编号" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.项目编号 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">制作人</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.制作人" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.制作人 }}</span>
          </td>
          <td colspan="2">审核人</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.审核人" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.审核人 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">项目经理</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.项目经理" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.项目经理 }}</span>
          </td>
          <td colspan="2">制作品日期</td>
          <td colspan="2">
            <el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.制作日期" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.制作日期 | formatTime }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8" class="title">二、项目完成情况总结</td>
        </tr>
        <tr>
          <td colspan="8">1、时间总结</td>
        </tr>
        <tr>
          <td>开始时间</td>
          <td>
            <el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.开始时间" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.开始时间 | formatTime }}</span>
          </td>
          <td colspan="2">计划完成日期</td>
          <td>
            <el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.计划完成日期" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.计划完成日期 | formatTime }}</span>
          </td>
          <td colspan="2">实际完成日期</td>
          <td>
            <el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.实际完成日期" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.实际完成日期 | formatTime }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">时间（差异）分析</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.时间分析" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.时间分析 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">2、成本总结</td>
        </tr>
        <tr>
          <td colspan="2">计划费用</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.计划费用" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.计划费用 }}</span>
          </td>
          <td colspan="2">实际费用</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.实际费用" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.实际费用 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">成本（差异）分析 </td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.成本分析" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.成本分析 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">3、交付结果总结</td>
        </tr>
        <tr>
          <td colspan="8">计划交付结果</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.计划交付结果" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.计划交付结果 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">实际交付结果</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.实际交付结果" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.实际交付结果 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">未交付结果</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.未交付结果" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.未交付结果 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8">交付结果（差异）分析</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.交付结果分析" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.交付结果分析 }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="8" class="title">三、项目经验、教训总结</td>
        </tr>
        <tr>
          <td colspan="8">
            <el-input class="textarea" type="textarea" size="small" placeholder="请输入内容" v-model="tableData.项目经验教训总结" v-if="!isEdit" style="min-height: 160px">
            </el-input>
            <div v-html="summary"></div>
          </td>
        </tr>
        <tr>
          <td colspan="4">签字</td>
          <td colspan="4">日期</td>
        </tr>
        <tr>
          <td colspan="2">审核人</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.审核人" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.审核人 }}</span>
          </td>
          <td colspan="4">
            <el-date-picker type="date" size="small" placeholder="请输入内容" v-model="tableData.审核人签字日期" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.审核人签字日期 | formatTime }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">项目经理</td>
          <td colspan="2">
            <el-input size="small" placeholder="请输入内容" v-model="tableData.项目经理" v-if="!isEdit">
            </el-input>
            <span v-else>{{ tableData.项目经理 }}</span>
          </td>
          <td colspan="4">
            <el-date-picker size="small" type="date" placeholder="请选择日期" v-model="tableData.项目经理签字日期" v-if="!isEdit">
            </el-date-picker>
            <span v-else>{{ tableData.项目经理签字日期 | formatTime }}</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { projectSelect, getTableData, editTableData } from '../../api/ProjectManagement/summarize'
export default {
  name: 'Summarize',
  data() {
    return {
      projectValue: '',
      project: [],
      isEdit: true,
      tableData: {}
    }
  },
  watch: {
    project(val) {
      if(val.length > 0){
       this.projectValue = val[0].value
      }
    },
    projectValue(val) {
      this.getData(val)
    }
  },
  computed: {
    projectName() {
      for (let i = 0; i < this.project.length; i++) {
        if (this.project[i].value === this.projectValue) {
          return this.project[i].label
        }
      }
    },
    summary() {
      if(this.tableData.项目经验教训总结) {
        return this.tableData.项目经验教训总结.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
      } else {
        return ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
    },
    async getData(val) {
      this.tableData = {}
      const response = await getTableData(val)
      this.tableData = response.data[0]
    },
    edit() {
      this.isEdit = false
      this.getData(this.projectValue)
    },
    async save() {
      this.isEdit = true
      console.log(this.tableData.项目经验教训总结)
      const response = await editTableData(this.tableData.项目总结流水号, this.projectValue, this.projectName, this.tableData.项目编号, this.tableData.制作人, this.tableData.审核人, this.tableData.项目经理, this.tableData.制作日期, this.tableData.开始时间, this.tableData.计划完成日期, this.tableData.实际完成日期, this.tableData.时间分析, this.tableData.计划费用, this.tableData.实际费用, this.tableData.成本分析, this.tableData.计划交付结果, this.tableData.实际交付结果, this.tableData.未交付结果, this.tableData.交付结果分析, this.tableData.项目经验教训总结, this.tableData.项目经理签字日期, this.tableData.审核人签字日期)
      if (response.data[0].result === '0') this.$message.error(`编辑失败`)
    }
  }
}
</script>

<style scoped>
 .tg{
   border-collapse:collapse;
   border-spacing:0;
 }
 .tg td{
   width: 12%;
   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:normal;
   padding:10px 5px;
   border-style:solid;
   border-width:1px;
   overflow:hidden;
   word-break:normal;
   border-color:black;
 }
  .tg .title{
    font-weight: 500;
    font-size: 24px;
    color: #909399;
  }
  .table table{
    width: 1080px;
    margin: 0 auto;
  }
  .main {
    with:1080px;
    font-size: 30px;
    font-weight: bolder;
  }
  .name {
    width: 1080px;
    margin: 10px auto;
  }
  .name span {
    font-size: 22px;
    margin: 20px;
  }
</style>
<style>
  .textarea .el-textarea__inner{
    min-height: 150px!important;
  }
</style>
