<template>
  <div class="u-OA-jixiao">
    <div class="head">第四部分　试验报告交付</div>
    <table class="main-table">
      <tr>
        <td class="title" style="width: 100px">试验完成时间</td>
        <td class="content" style="width: 360px">
          <!-- <div style="width: 440px"></div> -->
          <j-date v-model="tableData1.wanChengTime" placeholder="请选择日期" :disabled='disabled1'></j-date>
          <!-- <input v-model="tableData1.wanChengTime" style="text-align: center" /> -->
        </td>
        <td class="title white" style="width: 100px">添加归档材料</td>
        <td class="content" style="width: 450px">
          <j-upload v-model="tableData1.fileList" text="上传" :disabled='disabled1'></j-upload>
          <!-- <input id="excel" type="file" name="excel"
            @change="getFilePath"
          /> -->
          <!-- <div class="import-content">
            <el-button @click="daoruButton">点击进行导入明细表</el-button>
            <div class="excel">{{ excel }}</div>
          </div> -->
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">添加试验报告</td>
        <td class="content" style="width: 360px">
          <j-upload v-model="tableData1.fileListBg" text="上传" :disabled='disabled1'></j-upload>
          <!-- <div style="width: 440px"></div> -->
        </td>
        <td class="title white" style="width: 100px">质量审核</td>
        <td class="content" style="width: 450px;display:flex;border:0px;align-items:center;justify-content: center;">
          <div style="text-align: center;line-height: 50px;">{{ fqUserName1 }}　　时间： {{ shenheTime1 }}</div>
          <div class="btn" style="margin-right:1.1%" @click="addSubTable1">保存</div>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">客户反馈</td>
        <td class="content" style="width: 360px">
          <!-- <div style="width: 440px"></div> -->
          <input v-model="tableData2.khFanKui" style="text-align: center" :disabled='disabled2'/>
        </td>
        <td class="title white" style="width: 100px">报告签发</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData2.bgQianFa" style="text-align: center" :disabled='disabled2'/>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px">报告办理</td>
        <td class="content" style="width: 360px">
          <j-upload v-model="tableData2.fileListBl" text="上传" :disabled='disabled2'></j-upload>
          <!-- <div style="width: 440px"></div> -->
        </td>
        <td class="title white" style="width: 100px">报告接收</td>
        <td class="content" style="width: 450px">
          <input v-model="tableData2.bgJieShou" style="text-align: center" :disabled='disabled2'/>
        </td>
      </tr>
      <tr>
        <td class="title" style="width: 100px"></td>
        <td class="content" style="width: 360px">
          <div style="width: 440px"></div>
        </td>
        <!-- <td class="content" style="width: 100px" colspan="2"></td> -->
        <td class="title white" style="width: 100px">报告归档</td>
        <td class="content" style="width: 450px;display:flex;border:0px;align-items:center;justify-content: center;">
          <div style="text-align: center;line-height: 50px;">{{ fqUserName2 }}　　时间： {{ shenheTime2 }}</div>
          <div class="btn" style="margin-right:1.1%" @click="addSubTable2">保存</div>
          <!-- <input v-model="tableData2.shuruLeixing" style="text-align: center" /> -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import JUpload from '@/components/jeecg/JUpload'
import { runFlowPathSaveData } from '@/api/api'
export default {
    name: 'itdmBgJiaofu',
    components: { JUpload },
    props: {
      // json
      tableData4: {
        type: Array,
        default: false,
        required: false
      }
    },
    data() {
        return {
            tableData1: {
              // 完成时间
              wanChengTime: '',
              // 添加归档材料
              fileList:[],
              // 添加试验报告
              fileListBg:[],
            },
            tableData2: {
              // 报告办理
              fileListBl:[],
            },
            // // 导入excel
            // excel: '',
            disabled1: true,
            disabled2: true,
            fqUserName1: '',
            shenheTime1: '',
            fqUserName2: '',
            shenheTime2: ''
        }
    },
    created(){
      console.log(44444,this.tableData4)
    },
    watch: {
      tableData4: {
        handler(newV, oldV){
          if(newV && newV[0]){
            if (newV[0].saveData != null) {
              this.tableData1 = JSON.parse(newV[0].saveData)
              this.fqUserName1 = newV[0].fqUserName
              this.shenheTime1 = newV[0].shenheTime
            }
            if (newV[1].saveData != null) {
              this.tableData2 = JSON.parse(newV[1].saveData)
              this.fqUserName2 = newV[1].fqUserName
              this.shenheTime2 = newV[1].shenheTime
            }
            if (newV[0].dangqian == true && newV[0].isUpdate == true) {
              this.disabled1 = false
            }
            if (newV[1].dangqian == true && newV[1].isUpdate == true) {
              this.disabled2 = false
            }
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      // 点击导入excel
      // daoruButton() {
      //   document.getElementById('excel').click()
      // },
      // getFilePath(e) {
      //   this.excel = document.getElementById('excel').files[0].name
      //   console.log(this.excel)
      // },
      addSubTable1() {
        if (this.tableData4[0].dangqian == true && this.tableData4[0].isUpdate == true) {
          console.log(this.tableData1,this.tableData4[0].id)
          const a = {
            runFlowPathStep: this.tableData4[0].id,
            saveData: JSON.stringify(this.tableData1)
          }
          console.log(a)
          runFlowPathSaveData(a).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
            }
          })
        } else {
          this.$message.error("无保存权限或当前节点不在进行中")
        }
      },
      addSubTable2() {
        if (this.tableData4[1].dangqian == true && this.tableData4[1].isUpdate == true) {
          console.log(this.tableData2,this.tableData4[1].id)
          const a = {
            runFlowPathStep: this.tableData4[1].id,
            saveData: JSON.stringify(this.tableData2)
          }
          console.log(a)
          runFlowPathSaveData(a).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message.success(res.message)
            }
          })
        } else {
          this.$message.error("无保存权限或当前节点不在进行中")
        }
      }
    }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
table * {
  box-sizing: border-box;
  font-size: 14px;
}
table {
  border: 1px solid rgb(30, 53, 65);
  width: 100%;
  table-layout:fixed;
}
td {
  text-align: center;
  border: 1px solid rgb(30, 53, 65);
}
tr {
  height: 50px;
}

.main-table {
  background-color: #E5E0EC;
}
.title {
  background-color: #fff;
  font-weight: bold;
}
.addRow {
  width: 60px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.btn {
  /* display: inline-block; */
  padding: 2px 10px;
  font-size: 13px;
  border: 1px solid rgb(3, 188, 244);
  color: rgb(8, 187, 241);
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 3%;
}
.delBtn {
  padding: 3px 10px;
  text-align: center;
  font-size: 12px;
}
input {
  padding: 0 20px;
  height: 50px;
  outline: none;
  border: none;
  background: transparent;
}

.head {
    height: 35px;
    background-color: #FFFF00;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    font-size: 18px;
    border: 1px solid rgb(30, 53, 65);
}
</style>