<template>
  <!--详情 新增 编辑模块-->
  <div class="diaryMod">
    <vue-scroll style="height: 100%">
      <div class="goBack whiteBlock" v-if="type != 'add'">
        <!-- 返回 -->
        <el-button type="primary" size="medium" @click="goBackBtn"
          >{{$t('message.buildersDiary.back')}}</el-button
        >
        <!-- 下载打印 -->
        <el-button
          type="primary"
          v-if="type == 'detail'"
          size="medium"
          @click="downloadBtn"
          >{{$t('message.buildersDiary.downLoadPrint')}}</el-button
        >
      </div>
      <div class="whiteBlock modContent">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
          size="medium"
        >
          <!-- 标题 -->
          <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="10">
              <!-- 单位工程施工日志 -->
              <h3 style="text-align: center">{{$t('message.buildersDiary.unitConstructionLog')}}</h3>
            </el-col>
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
          <!-- 表单 -->
          <el-row
            :gutter="24"
            style="margin-left: 0; margin-right: 0; margin-top: 30px"
            v-if="type != 'detail'"
          >
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="10">
              <!-- 单位工程名称 -->
              <!-- <label class="xingxing"></label> -->
              <el-form-item class="xingxing" :label="$t('message.buildersDiary.unitProjectName')+'：'" prop="buildName">
                <el-input v-model="ruleForm.buildName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
          <el-row
            :gutter="24"
            v-if="type != 'detail'"
            style="margin-left: 0; margin-right: 0"
          >
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="10">
              <!-- 施工项目部门 -->
               <!-- <label class="xingxing"></label> -->
              <el-form-item class="xingxing" :label="$t('message.buildersDiary.constructionProjectDepartment')+'：'" prop="buildProjectDept">
                <el-input v-model="ruleForm.buildProjectDept"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
          <el-row
            :gutter="24"
            v-if="type != 'detail'"
            style="margin-left: 0; margin-right: 0"
          >
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="5">
              <!-- 项目负责人 -->
               <!-- <label class="xingxing"></label> -->
              <el-form-item class="xingxing":label="$t('message.buildersDiary.projectDutyPeople')+'：'" prop="projectDirector">
                <el-input v-model="ruleForm.projectDirector"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <!-- 单位工程施工员 -->
               <!-- <label class="xingxing"></label> -->
              <el-form-item class="xingxing" :label="$t('message.buildersDiary.unitConstructionPeople')+'：'" prop="constructionCrew">
                <el-input v-model="ruleForm.constructionCrew"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
          <!-- 自定义表头 -->
          <el-row
            :gutter="24"
            v-if="type == 'detail'"
            style="margin-left: 0; margin-right: 0"
          >
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="14">
              <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
                <!-- 单位工程名称 -->
                <el-col
                  :span="6"
                  class="customTd border_l text_align_r"
                  style="width: 23.88%"
                  >{{$t('message.buildersDiary.unitProjectName')}}：</el-col
                >
                <el-col :span="6" class="customTd" style="width: 28.43%">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="ruleForm.buildName"
                    placement="top-start"
                  >
                    <div class="text_align_c">{{ ruleForm.buildName }}</div>
                  </el-tooltip>
                </el-col>
                <!-- 施工项目部门 -->
                <el-col
                  :span="6"
                  class="customTd text_align_r"
                  style="width: 18.95%"
                  >{{$t('message.buildersDiary.constructionProjectDepartment')}}：</el-col
                >
                <el-col :span="6" class="customTd" style="width: 28.73%">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="ruleForm.buildProjectDept"
                    placement="top-start"
                  >
                    <div class="text_align_c">
                      {{ ruleForm.buildProjectDept }}
                    </div>
                  </el-tooltip>
                </el-col>
              </el-row>
              <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
                <!-- 项目负责人 -->
                <el-col
                  :span="6"
                  class="customTd border_l text_align_r"
                  style="width: 23.88%"
                  >{{$t('message.buildersDiary.projectDutyPeople')}}：</el-col
                >
                <el-col :span="6" class="customTd" style="width: 28.43%">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="ruleForm.projectDirector"
                    placement="top-start"
                  >
                    <div class="text_align_c">
                      {{ ruleForm.projectDirector }}
                    </div>
                  </el-tooltip>
                </el-col>
                <!-- 单位工程施工员 -->
                <el-col
                  :span="6"
                  class="customTd text_align_r"
                  style="width: 18.95%"
                  >{{$t('message.buildersDiary.unitConstructionPeople')}}：</el-col
                >
                <el-col :span="6" class="customTd" style="width: 28.73%">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="ruleForm.constructionCrew"
                    placement="top-start"
                  >
                    <div class="text_align_c">
                      {{ ruleForm.constructionCrew }}
                    </div>
                  </el-tooltip>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
          </el-row>

          <!-- 表格 -->
          <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="14">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center">
                  <template slot="header" slot-scope="scope">
                    <!-- 选择施工日期 -->
                    <el-date-picker
                      size="medium"
                      v-model="ruleForm.buildTime"
                      value-format="yyyy-MM-dd"
                      type="date"
                      :placeholder="$t('message.buildersDiary.placeholderText2')"
                      v-if="type != 'detail'"
                    >
                    </el-date-picker>
                    <span v-else>{{ ruleForm.buildTime }}</span>
                  </template>
                  <!-- 分项工程（施工部位） -->
                  <el-table-column :label="$t('message.buildersDiary.subdivisionalWork')" align="center">
                    <!-- 当日施工作业面情况 -->
                    <el-table-column
                      :label="$t('message.buildersDiary.toDayConstructionStatus')"
                      width="100"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column width="150" align="center">
                      <template slot="header" slot-scope="scope">
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="medium"
                          :placeholder="$t('message.buildersDiary.placeholderText2')"
                          v-model="ruleForm.buildPlace"
                          v-if="type != 'detail'"
                        >
                        </el-input>
                        <pre v-else class="table_pre">{{
                          ruleForm.buildPlace
                        }}</pre>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column width="350" align="center">
                  <template slot="header" slot-scope="scope">
                    <el-select
                      v-model="ruleForm.buildWeek"
                      size="medium"
                      :placeholder="$t('message.projectManage.pleaseChoose')"
                      v-if="type != 'detail'"
                    >
                      <el-option v-for="(item,index) in $t('message.buildersDiary.weekArr')" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                    <span v-else>{{ ruleForm.buildWeek }}</span>
                  </template>
                  <!-- 作业班组类型 -->
                  <el-table-column :label="$t('message.buildersDiary.workGroupType')" align="center">
                    <el-table-column width="150">
                      <template slot="header" slot-scope="scope">
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="medium"
                          :placeholder="$t('message.buildersDiary.placeholderText')"
                          v-model="ruleForm.taskTeamType"
                          v-if="type != 'detail'"
                        >
                        </el-input>
                        <pre v-else class="table_pre">{{
                          ruleForm.taskTeamType
                        }}</pre>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center">
                  <template slot="header" slot-scope="scope">
                    <!-- 上午天气 -->
                   {{$t('message.buildersDiary.AMWeather')}}
                    <el-input
                      v-model="ruleForm.morningWeather"
                      style="width: 60px"
                      size="medium"
                      :placeholder="$t('message.buildersDiary.placeholderText')"
                      v-if="type != 'detail'"
                    />
                    <span v-else>{{ ruleForm.morningWeather }}</span>
                  </template>
                  <!-- 作业单位班组名称 -->
                  <el-table-column :label="$t('message.buildersDiary.workUnitGroupName')" align="center">
                    <el-table-column width="150">
                      <template slot="header" slot-scope="scope">
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="medium"
                          :placeholder="$t('message.buildersDiary.placeholderText')"
                          v-model="ruleForm.taskTeam"
                          v-if="type != 'detail'"
                        >
                        </el-input>
                        <span v-else>{{ ruleForm.taskTeam }}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column align="center">
                  <template slot="header" slot-scope="scope">
                    <!-- 下午天气 -->
                    {{$t('message.buildersDiary.PMWeather')}}
                    <el-input
                      v-model="ruleForm.afternoonWeather"
                      style="width: 70px"
                      size="medium"
                      :placeholder="$t('message.buildersDiary.placeholderText')"
                      v-if="type != 'detail'"
                    />
                    <span v-else>{{ ruleForm.afternoonWeather }}</span>
                  </template>
                  <!-- 作业人数 -->
                  <el-table-column :label="$t('message.buildersDiary.workPeopleNum')" align="center">
                    <!-- 上午 -->
                    <el-table-column :label="$t('message.buildersDiary.AM')" align="center">
                      <el-table-column width="100">
                        <template slot="header" slot-scope="scope">
                          <el-input
                            v-model="ruleForm.morningPersonNum"
                            style="width: 70px"
                            size="medium"
                            :placeholder="$t('message.buildersDiary.placeholderText')"
                            v-if="type != 'detail'"
                          />
                          <span v-else>{{ ruleForm.morningPersonNum }}</span>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <!-- 下午 -->
                    <el-table-column :label="$t('message.buildersDiary.PM')" align="center">
                      <el-table-column width="100">
                        <template slot="header" slot-scope="scope">
                          <el-input
                            v-model="ruleForm.afternoonPersonNum"
                            style="width: 70px"
                            size="medium"
                            :placeholder="$t('message.buildersDiary.placeholderText')"
                            v-if="type != 'detail'"
                          />
                          <span v-else>{{ ruleForm.afternoonPersonNum }}</span>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column width="350" align="center">
                  <template slot="header" slot-scope="scope">
                    <!-- 气温 -->
                    {{$t('message.buildersDiary.temperature')}}
                    <el-input
                      v-model="ruleForm.temperature"
                      size="medium"
                      style="width: 70px"
                      :placeholder="$t('message.buildersDiary.placeholderText')"
                      v-if="type != 'detail'"
                    />
                    <span v-else>{{ ruleForm.temperature }}</span>
                  </template>
                  <!-- 作业情况 -->
                  <el-table-column :label="$t('message.buildersDiary.workStatus')" align="center">
                    <el-table-column>
                      <template slot="header" slot-scope="scope">
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="medium"
                          :placeholder="$t('message.buildersDiary.placeholderText')"
                          v-model="ruleForm.taskCondition"
                          v-if="type != 'detail'"
                        >
                        </el-input>
                        <pre v-else class="table_pre">{{
                          ruleForm.taskCondition
                        }}</pre>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
            <el-col :span="14">
              <div class="textarea_wrap">
                <div v-for="(item, index) in $t('message.buildersDiary.remarkInfo')" :key="index">
                  <div class="textarea_title">{{ item.title }}</div>
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 10 }"
                    :placeholder="$t('message.buildersDiary.placeholderText')"
                    v-model="ruleForm[item.value]"
                    v-if="type != 'detail'"
                  >
                  </el-input>
                  <pre v-else class="pre table_pre">{{
                    ruleForm[item.value]
                  }}</pre>
                </div>

                <div class="attachment">
                  <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    multiple
                    name="files"
                    ref="upload"
                    :file-list="fileList"
                    :disabled="type == 'detail'"
                  >
                    <el-button
                      size="small"
                      v-if="type != 'detail'"
                      type="primary"
                      >
                      <!-- 上传附件 -->
                      {{$t('message.buildersDiary.uploadFile')}}
                      </el-button
                    >
                    <!-- 件附 -->
                    <span v-else>{{$t('message.buildersDiary.formLabel9')}}</span>
                  </el-upload>
                </div>
              </div>

              <div style="text-align: center" v-if="type != 'detail'">
                <el-button
                  @click="submitForm('ruleForm')"
                  size="medium"
                  style="width: 100px; margin-top: 40px"
                  type="primary"
                  >
                  <!-- "新增" : "编辑" -->
                  {{ type == "add" ? "提交":$t('message.buildersDiary.edit') }}</el-button
                >
              </div>
            </el-col>
            <el-col :span="5">
              <div class="placeholder"></div>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 下载打印 -->
      <!-- 施工日志详情 -->
      <el-dialog
        :modal-append-to-body="false"
        class="projectDialog"
        :title="$t('message.buildersDiary.constructionLogDetail')"
        :visible.sync="detailDownloadDialog"
        width="60%"
        :close-on-click-modal="false"
      >
        <div class="dialog_content" style="padding: 0 100px">
          <div class="table_wrap" ref="downloadContent">
            <table>
              <tr>
                <th colspan="10" style="text-align: center">
                  <!-- 单位工程施工日志 -->
                  <h3>{{$t('message.buildersDiary.unitConstructionLog')}}</h3>
                </th>
              </tr>
              <tr>
                <!-- 单位工程名称 -->
                <td colspan="2" class="setTd site">{{$t('message.buildersDiary.unitProjectName')}}：</td>
                <td colspan="3" class="setTd">{{ downloadData.buildName }}</td>
                <!-- 施工项目部门 -->
                <td colspan="2" class="setTd site">{{$t('message.buildersDiary.constructionProjectDepartment')}}：</td>
                <td colspan="3" class="setTd">
                  {{ downloadData.buildProjectDept }}
                </td>
              </tr>
              <tr>
                <!-- 项目负责人 -->
                <td colspan="2" class="setTd site">{{$t('message.buildersDiary.projectDutyPeople')}}：</td>
                <td colspan="3" class="setTd">
                  {{ downloadData.projectDirector }}
                </td>
                <!-- 单位工程施工员 -->
                <td colspan="2" class="setTd site">{{$t('message.buildersDiary.unitConstructionPeople')}}：</td>
                <td colspan="3" class="setTd">
                  {{ downloadData.constructionCrew }}
                </td>
              </tr>
              <tr>
                <td colspan="2" class="site2">{{ downloadData.buildTime }}</td>
                <td colspan="2" class="site2">{{ downloadData.buildWeek }}</td>
                <td colspan="1" class="site2">
                  <!-- 上午天气 -->
                  {{$t('message.buildersDiary.AMWeather')}} {{ downloadData.morningWeather }}
                </td>
                <td colspan="2" class="site2">
                  <!-- 下午天气 -->
                  {{$t('message.buildersDiary.PMWeather')}} {{ downloadData.afternoonWeather }}
                </td>
                <td colspan="3" class="site2">
                  <!-- 气温 -->
                  {{$t('message.buildersDiary.temperature')}} {{ downloadData.temperature }}
                </td>
              </tr>
              <tr>
                <!-- 分项工程（施工部位） -->
                <td colspan="2" class="site2">{{$t('message.buildersDiary.subdivisionalWork')}}</td>
                <!-- 作业班组类型 -->
                <td colspan="2" class="site2">{{$t('message.buildersDiary.workGroupType')}}</td>
                <!-- 作业单位班组名称 -->
                <td colspan="1" class="site2">{{$t('message.buildersDiary.workUnitGroupName')}}</td>
                <!-- 作业人数 -->
                <td colspan="2" class="site2">{{$t('message.buildersDiary.workPeopleNum')}}</td>
                <!-- 作业情况 -->
                <td colspan="3" class="site2">{{$t('message.buildersDiary.workStatus')}}</td>
              </tr>
              <tr>
                <td rowspan="2" colspan="1" class="site2" style="width: 10px">
                  <!-- 当日施工作业面情况 -->
                  {{$t('message.buildersDiary.toDayConstructionStatus')}}
                </td>
                <td rowspan="2" colspan="1" class="site2">
                  {{ downloadData.buildPlace }}
                </td>
                <td rowspan="2" colspan="2" class="site2">
                  {{ downloadData.taskTeamType }}
                </td>
                <td rowspan="2" colspan="1" class="site2">
                  {{ downloadData.taskTeam }}
                </td>
                <!-- 上午 -->
              <td colspan="1" class="site2">{{$t('message.buildersDiary.AM')}}</td>
              <!-- 下午 -->
              <td colspan="1" class="site2">{{$t('message.buildersDiary.PM')}}</td>
                <td rowspan="2" colspan="3" class="site2">
                  {{ downloadData.taskCondition }}
                </td>
              </tr>
              <tr>
                <td class="site2">{{ downloadData.morningPersonNum }}</td>
                <td class="site2">{{ downloadData.afternoonPersonNum }}</td>
              </tr>
              <tr>
                <th colspan="10">
                  <!-- 现场分部分项施工进度情况(交底情况、劳动力配置情况、机械运行情况、进度计划情况、质量特殊过程关键部位施工旁站情况) -->
                  1、{{$t('message.buildersDiary.formLabel')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.buildProgress }}</td>
              </tr>
              <tr>
                <th colspan="10">
                   <!-- 作业面安全文明施工情况(工完场清、材料堆码) 、安全自检情况 -->
                    2、{{$t('message.buildersDiary.formLabel2')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.safeBuildCondition }}</td>
              </tr>
              <tr>
                <th colspan="10">
                 <!-- 材料进场情况(规格、数量、使用部位、验收情况、堆放位置) -->
                3、{{$t('message.buildersDiary.formLabel3')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.materialEnter }}</td>
              </tr>
              <tr>
                <!-- 设计变更、洽商、指令单,技术交底情况 -->
              <th colspan="10">4、{{$t('message.buildersDiary.formLabel4')}}:</th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.technicalInterpretation }}</td>
              </tr>
              <tr>
                <th colspan="10">
                  <!-- 现场验收情况(部位、时间、参与人、验收情况及结果)、工程资料填写交接归档情况 -->
                5、{{$t('message.buildersDiary.formLabel5')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.sceneInspected }}</td>
              </tr>
              <tr>
                <th colspan="10">
                  <!-- 上级单位外部单位人员到项目检查指导情况(对工程提出的决定、建议,要求解决处理的问题) -->
                6、{{$t('message.buildersDiary.formLabel6')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.inspectGuidance }}</td>
              </tr>
              <tr>
                <!-- 现场协调情况、工作面移交情况 -->
              <th colspan="10">7、{{$t('message.buildersDiary.formLabel7')}}:</th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.sceneCoordinate }}</td>
              </tr>
              <tr>
                <th colspan="10">
                  <!-- 其它特殊情况记录(停电、水,停窝工等,原材料,劳务力等其它影响施工情况) -->
                8、{{$t('message.buildersDiary.formLabel8')}}:
                </th>
              </tr>
              <tr>
                <td colspan="10">{{ downloadData.otherSpecial }}</td>
              </tr>
              <tr>
                <!-- 附件 -->
              <th colspan="10">{{$t('message.buildersDiary.formLabel9')}}：</th>
              </tr>
              <tr>
                <td colspan="10">
                  <span
                    v-for="(item, index) in downloadData.fileList"
                    :key="index"
                    >{{ item.name }}</span
                  >
                </td>
              </tr>
            </table>
          </div>

          <div class="dialog-footer" style="text-align: center">
            <!-- 下载打印 -->
            <el-button
              type="primary"
              icon="el-icon-download"
              size="medium"
              @click="confirmDownload('editProjectForm')"
              >{{$t('message.buildersDiary.downLoadPrint')}}</el-button
            >
          </div>
        </div>
      </el-dialog>

      <!-- 大图 -->
      <el-dialog :modal-append-to-body="false" :visible.sync="imageUrlDialog">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </vue-scroll>
  </div>
</template>
<script>
import {
  addBuildersDiaryApi,
  editBuildersDiaryApi,
} from "@/assets/js/api/buildersDiary.js";
import html2canvas from "html2canvas";

export default {
  props: ["status", "data"],
  data() {
    return {
      uploadUrl: "",
      fileUrl: "",
      projectSn: "",
      type: "", //新增 编辑 详情 类型
      //新增表单
      ruleForm: {
        afternoonPersonNum: "",
        afternoonWeather: "",
        buildName: "",
        buildPlace: "",
        buildProgress: "",
        buildProjectDept: "",
        buildTime: "",
        buildWeek: "星期一",
        constructionCrew: "",
        imgUrl: "",
        inspectGuidance: "",
        materialEnter: "",
        morningPersonNum: "",
        morningWeather: "",
        otherSpecial: "",
        projectDirector: "",
        safeBuildCondition: "",
        sceneCoordinate: "",
        sceneInspected: "",
        taskCondition: "",
        taskTeam: "",
        taskTeamType: "",
        technicalInterpretation: "",
        temperature: "",
      },
      remarkInfo: [
        {
          title:
            "1、现场分部分项施工进度情况(交底情况、劳动力配置情况、机械运行情况、进度计划情况、质量特殊过程关键部位施工旁站情况):",
          value: "buildProgress",
        },
        {
          title:
            "2、作业面安全文明施工情况(工完场清、材料堆码) 、安全自检情况:",
          value: "safeBuildCondition",
        },
        {
          title: "3、材料进场情况(规格、数量、使用部位、验收情况、堆放位置):",
          value: "materialEnter",
        },
        {
          title: "4、设计变更、洽商、指令单,技术交底情况:",
          value: "technicalInterpretation",
        },
        {
          title:
            "5、现场验收情况(部位、时间、参与人、验收情况及结果)、工程资料填写交接归档情况:",
          value: "sceneInspected",
        },
        {
          title:
            "6、上级单位外部单位人员到项目检查指导情况(对工程提出的决定、建议,要求解决处理的问题):",
          value: "inspectGuidance",
        },
        {
          title: "7、现场协调情况、工作面移交情况:",
          value: "sceneCoordinate",
        },
        {
          title:
            "8、其它特殊情况记录(停电、水,停窝工等,原材料,劳务力等其它影响施工情况):",
          value: "otherSpecial",
        },
      ], // 备注其他信息列表
      fileList: [],
      rules: {},
      tableData: [],
      //查看大图
      imageUrlDialog: false,
      dialogImageUrl: "",
      //下载的数据
      detailDownloadDialog: false,
      downloadData: {},
    };
  },

  created() {
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    
    this.projectSn = this.$store.state.projectSn;
    this.type = this.$props.status;
  },

  watch: {
    type: {
      handler(newVal, eldVal) {
        if (newVal == "detail" || newVal == "edit") {
          this.ruleForm = this.$props.data;
          if (this.ruleForm.imgUrl) {
            this.fileList = JSON.parse(this.ruleForm.imgUrl);
          }
        } else {
        }
      },
    },
  },

  methods: {
    //返回按钮
    goBackBtn() {
      this.$emit("setType", 1);
    },

    //上传成功
    handleSuccess(file) {
      let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
      console.log(data,'datadatadatadata')
      this.fileList.push(data);
    },
    //删除成功
    handleRemove(file) {
      let url = file.url?file.url:file.response.data[0].imageUrl;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          this.fileList.splice(i, 1);
        }
      }
      console.log(this.fileList)
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = this.fileUrl + file.url;
      this.imageUrlDialog = true;
    },
    //提交保存
    submitForm() {

      if(!this.ruleForm.buildName){
        this.$message.error("请输入单位工程名称")
        return false;
      }
      if(!this.ruleForm.buildProjectDept){
        this.$message.error("请输入施工项目部门")
        return false;
      }
      if(!this.ruleForm.projectDirector){
        this.$message.error("请输入项目负责人")
        return false;
      }
      if(!this.ruleForm.constructionCrew){
        this.$message.error("请输入单位工程施工员")
        return false;
      }
      if(!this.ruleForm.buildTime){
        this.$message.error("请选择施工日期")
        return false;
      }
      if(!this.ruleForm.morningWeather){
        this.$message.error("请输入上午天气")
        return false;
      }
      if(!this.ruleForm.afternoonWeather){
        this.$message.error("请输入下午天气")
        return false;
      }
      if(!this.ruleForm.temperature){
        this.$message.error("请输入气温")
        return false;
      }
      if(!this.ruleForm.buildPlace){
        this.$message.error("请输入分项工程（施工部位）")
        return false;
      }

      if(!this.ruleForm.taskTeamType){
        this.$message.error("请输入作业班组类型")
        return false;
      }
      if(!this.ruleForm.taskTeam){
        this.$message.error("请输入作业班组名称")
        return false;
      }
      if(!this.ruleForm.morningPersonNum){
        this.$message.error("请输入上午作业人数")
        return false;
      }
      if(!this.ruleForm.afternoonPersonNum){
        this.$message.error("请输入下午作业人数")
        return false;
      }
      if(!this.ruleForm.taskCondition){
        this.$message.error("请输入作业情况")
        return false;
      }
      if(this.fileList.length==0){
        this.$message.error("请上传附件")
        return false;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.ruleForm));
          data.imgUrl = this.fileList.length > 0 ? JSON.stringify(this.fileList) : "";
          data.projectSn = this.projectSn;
          if (this.type == "add") {
            addBuildersDiaryApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
                this.fileList = [];
                this.ruleForm = {
                  afternoonPersonNum: "",
                  afternoonWeather: "",
                  buildName: "",
                  buildPlace: "",
                  buildProgress: "",
                  buildProjectDept: "",
                  buildTime: "",
                  buildWeek: this.$t('message.buildersDiary.constructionLog')[0],
                  constructionCrew: "",
                  imgUrl: "",
                  inspectGuidance: "",
                  materialEnter: "",
                  morningPersonNum: "",
                  morningWeather: "",
                  otherSpecial: "",
                  projectDirector: "",
                  safeBuildCondition: "",
                  sceneCoordinate: "",
                  sceneInspected: "",
                  taskCondition: "",
                  taskTeam: "",
                  taskTeamType: "",
                  technicalInterpretation: "",
                  temperature: "",
                };
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            editBuildersDiaryApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
                this.$emit("setType", 1);
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //下载按钮
    downloadBtn() {
      this.detailDownloadDialog = true;
      this.downloadData = JSON.parse(JSON.stringify(this.ruleForm));
      this.downloadData.fileList = this.downloadData.imgUrl
        ? JSON.parse(this.downloadData.imgUrl)
        : [];
    },
    //确定下载
    confirmDownload() {
      html2canvas(this.$refs.downloadContent).then((canvas) => {
        let saveUrl = canvas.toDataURL("image/png");

        let a = document.createElement("a");

        document.body.appendChild(a);

        a.href = saveUrl;
        console.log('saveUrl',saveUrl)

         // "施工日志"
        a.download = this.$t('message.buildersDiary.constructionLog');

        a.click();

        this.detailDownloadDialog = false;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.xingxing{
  position: relative;
}
.xingxing::before{
   content: "*";
   color: red;
   font-size: 14px;
   position: absolute;
    top: 10px;
    left: 0px;
   
}

.diaryMod {
  width: 100%;
  height: 100%;
}
.goBack {
  padding: 15px 20px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modContent {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  padding-bottom: 50px;
}
.placeholder {
  width: 100%;
  height: 20px;
}
/deep/ .el-table__body-wrapper {
  height: 0px !important;
}

/deep/.el-table--scrollable-x .el-table__body-wrapper {
  height: 0px !important;
}
/deep/.textarea_wrap {
  border: 2px solid #dde5f9;
  border-top: none;
  .el-textarea__inner {
    border: none !important;
    border-top: 2px solid #dde5f9 !important;
    border-bottom: 2px solid #dde5f9 !important;
  }
}
.textarea_title {
  width: 100%;
  min-height: 35px;
  box-sizing: border-box;
  padding: 5px 20px;
  line-height: 25px;
}

// /deep/ .el-table thead.is-group th {
//   background: none;
// }
.attachment {
  padding: 20px 15px;
}
.pre {
  border-top: 2px solid #dde5f9 !important;
  border-bottom: 2px solid #dde5f9 !important;
  margin: 0;
  padding: 15px;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: 1px solid #dde5f9;
  text-align: left;
  // height: 35px;
  // line-height: 35px;
  padding: 10px 15px;
}

.customTd {
  height: 45px;
  line-height: 25px;
  padding: 10px 0;
  box-sizing: border-box;
  border: 2px solid #e0e7f9;
  background: #f5f7fa;
  color: #737996;
  font-weight: bold;
  border-bottom: none;
  border-left: none;
}
.border_l {
  border-left: 2px solid #e0e7f9;
}
.text_align_r {
  text-align: right;
  font-size: 14px;
}
.text_align_c {
  text-align: center;
  font-weight: normal;
  color: #262d47;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setTd {
  width: 25%;
}
.site {
  text-align: right;
}
.site2 {
  text-align: center;
}
.table_pre {
  white-space: pre-wrap;
}
</style>