<template>
  <div>
    <el-card style="width: 100%">
      <div style="margin: 0 10px">
        <div style="display: flex;align-items: center;padding: 20px 0">
          <span style="margin-left: 10px">名称</span>
          <el-input v-model="ProjectManagement_ProjectName" clearable style="width: 200px;margin: 0 10px" placeholder="项目名称"/>
          <span style="margin-left: 10px">状态</span>
          <el-select
            v-model="ProjectManagement_statusAll"
            style="width: 200px;margin: 0 10px"
            clearable
            placeholder="项目状态"
          >
            <el-option
              v-for="item in ProjectManagement_statusListAll"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="success" icon="el-icon-search" @click="searchProject">查询</el-button>
          <el-button type="warning" icon="el-icon-edit" @click="addProject">新增项目</el-button>
        </div>
        <el-table
          :data="projectList"
          :header-cell-style="{background:'#F5F5F5'}"
          style="width: 80%; border: 1px solid #9e9b9b"
          border
          height="420px"
          tooltip-effect="dark"
          @row-click="searchProject_info">
          <el-table-column type="index" align="center" label="序号" width="60px"/>
          <el-table-column align="left" label="项目名称" min-width="130px">
            <template slot-scope="scope">
              {{ scope.row.节点名称 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划开始" width="110px">
            <template slot-scope="scope">
              {{ scope.row.计划开始 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划结束" width="110px">
            <template slot-scope="scope">
              {{ scope.row.计划结束 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目负责人" width="110px">
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="90px">
            <template slot-scope="scope">
              <span :style="{color: scope.row.状态颜色}">{{ scope.row.状态名称 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目工时(h)" width="110px">
            <template slot-scope="scope">
              <span>{{ scope.row.工时 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目附件" width="90px">
            <template slot-scope="scope">
              <span style="cursor: pointer;color: #0ba9e3" @click="showFileUpload(scope.row)">{{ scope.row.文件数量 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="编辑" width="120px">
            <template slot-scope="scope">
              <el-button type="text" size="mini" style="font-size: large" icon="el-icon-upload" @click="showFileUpload(scope.row)"/>
              <el-button type="text" size="mini" style="font-size: large" icon="el-icon-edit" @click="editProject(scope.row)"/>
              <el-button type="text" size="mini" style="font-size: large;color: red" icon="el-icon-delete" @click="deleteProject(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;align-items: center;padding: 20px 0">
          <el-button :disabled="projectList_Info_Title === ''" type="warning" icon="el-icon-edit" @click="addProject_info">新增子项目</el-button>
          <span style="font-size: 20px;margin-left: 10px">{{ projectList_Info_Title }}</span>
        </div>
        <el-table
          :data="projectList_Info"
          :header-cell-style="{background:'#F5F5F5'}"
          :expand-row-keys="expandsDetail"
          :row-key="getRowKeys"
          style="width: 80%; border: 1px solid #9e9b9b"
          border
          min-height="300px"
          tooltip-effect="dark"
          @expand-change="searchProject_infoRowData">
          <el-table-column type="index" align="center" label="序号" width="60px"/>
          <el-table-column align="center" type="expand" label="" fixed width="0">
            <template slot-scope="scope" >
              <div style="display: flex">
                <!-- 子项目详细数据表-->
                <div style="margin: 5px 10px;width: 100%;z-index: 99;">
                  <el-table
                    :data="projectList_Info_InfoList"
                    :header-cell-style="{ background: '#e5e7f8', color: '#606266' }"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.2)"
                    class="main"
                    style="width: 100%"
                    max-height="400px"
                    border
                    size="mini"
                    @cell-mouse-enter="cellMouseEnter">
                    <el-table-column type="index" align="center" label="序号" width="60px"/>
                    <el-table-column align="center" label="填写人员" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.姓名 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="填报日期" width="120">
                      <template slot-scope="scope">
                        {{ scope.row.创建日期 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="left" label="工作内容">
                      <template slot-scope="scope">
                        {{ scope.row.工作内容 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="备注" width="200">
                      <template slot-scope="scope">
                        {{ scope.row.备注 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="开始时间" width="120">
                      <template slot-scope="scope">
                        {{ scope.row.计划开始时间 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="完成时间" width="120">
                      <template slot-scope="scope">
                        {{ scope.row.计划完成时间 }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="项目内容" min-width="130px">
            <template slot-scope="scope">
              {{ scope.row.子项目内容 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划完成" width="110px">
            <template slot-scope="scope">
              {{ scope.row.计划完成 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="指派人员" width="110px">
            <template slot-scope="scope">
              {{ scope.row.姓名 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="100px">
            <template slot-scope="scope">
              <span :style="{color: scope.row.状态颜色}">{{ scope.row.状态名称 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="任务工时(h)" width="110px">
            <template slot-scope="scope">
              <span>{{ scope.row.工时 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="日报附件" width="90px">
            <template slot-scope="scope">
              <span style="cursor: pointer;color: #0ba9e3" @click="showFileUpload_son(scope.row)">{{ scope.row.文件数量 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="编辑" width="100px">
            <template slot-scope="scope">
              <el-button type="text" size="mini" style="font-size: large" icon="el-icon-edit" @click="editProject_info(scope.row)"/>
              <el-button type="text" size="mini" style="font-size: large;color: red" icon="el-icon-delete" @click="deleteProject_info(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 50px;width: 100px"/>
      </div>
    </el-card>
    <!--    项目新增-->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="titleForDayContent"
      center
      width="400px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="90px"
        style="width: 100%;margin: auto"
      >
        <el-form-item label="项目名称" prop="项目名称">
          <el-input
            v-model="form.项目名称"
            style="width: 220px"
            clearable
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="项目状态" prop="项目状态">
          <el-select
            v-model="form.项目状态"
            style="width: 220px"
            filterable
            placeholder="项目状态"
          >
            <el-option
              v-for="item in ProjectManagement_statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始" prop="计划开始">
          <el-date-picker
            v-model="form.计划开始"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划开始"/>
          <el-tooltip class="item" effect="dark" content="填写项目计划开始时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="计划结束" prop="计划结束">
          <el-date-picker
            v-model="form.计划结束"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划结束"/>
          <el-tooltip class="item" effect="dark" content="填写项目计划结束时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="负责人" prop="负责人">
          <el-select
            v-model="form.负责人"
            style="width: 220px"
            filterable
            placeholder="负责人"
          >
            <el-option
              v-for="item in ProjectManagement_PersonList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tooltip class="item" effect="dark" content="项目负责人！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-row style="text-align: center;margin-top: 10px">
          <el-button @click="cancel_Project('form')">取消</el-button>
          <el-button
            type="primary"
            @click="addProject_Confirm('form')"
          >提交</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
    <!--    项目编辑-->
    <el-dialog
      :visible.sync="dialogFormVisible1"
      :title="titleForDayContent1"
      center
      width="400px"
    >
      <el-form
        ref="form1"
        :model="form1"
        :rules="rules1"
        label-position="right"
        label-width="90px"
        style="width: 100%;margin: auto"
      >
        <el-form-item label="项目名称" prop="项目名称">
          <el-input
            v-model="form1.项目名称"
            style="width: 220px"
            clearable
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="项目状态" prop="项目状态">
          <el-select
            v-model="form1.项目状态"
            style="width: 220px"
            filterable
            placeholder="项目状态"
          >
            <el-option
              v-for="item in ProjectManagement_statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始" prop="计划开始">
          <el-date-picker
            v-model="form1.计划开始"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划开始"/>
          <el-tooltip class="item" effect="dark" content="填写项目计划开始时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="计划结束" prop="计划结束">
          <el-date-picker
            v-model="form1.计划结束"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划结束"/>
          <el-tooltip class="item" effect="dark" content="填写项目计划结束时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="负责人" prop="负责人">
          <el-select
            v-model="form1.负责人"
            style="width: 220px"
            filterable
            placeholder="负责人"
          >
            <el-option
              v-for="item in ProjectManagement_PersonList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tooltip class="item" effect="dark" content="项目负责人！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-row style="text-align: center;margin-top: 10px">
          <el-button @click="cancel_Project('form1')">取消</el-button>
          <el-button
            type="primary"
            @click="editProject_Confirm('form1')"
          >提交</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
    <!--    子项目新增-->
    <el-dialog
      :visible.sync="dialogFormVisible2"
      :title="titleForDayContent2"
      center
      width="400px"
    >
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules2"
        label-position="right"
        label-width="100px"
        style="width: 100%;margin: auto"
      >
        <el-form-item label="项目名称" prop="项目名称">
          <el-input
            v-model="form2.项目名称"
            style="width: 220px"
            readonly
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="子项目内容" prop="子项目内容">
          <el-input
            v-model="form2.子项目内容"
            style="width: 220px"
            clearable
            placeholder="子项目内容"
          />
        </el-form-item>
        <el-form-item label="子项目状态" prop="子项目状态">
          <el-select
            v-model="form2.子项目状态"
            style="width: 220px"
            filterable
            placeholder="子项目状态"
          >
            <el-option
              v-for="item in ProjectManagement_statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划完成" prop="计划完成">
          <el-date-picker
            v-model="form2.计划完成"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划完成"/>
          <el-tooltip class="item" effect="dark" content="填写子项目计划完成时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="指派人员" prop="指派人员">
          <el-select
            v-model="form2.指派人员"
            style="width: 220px"
            filterable
            placeholder="指派人员"
          >
            <el-option
              v-for="item in ProjectManagement_PersonList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tooltip class="item" effect="dark" content="针对子项目，需要指派该项目的实施人员！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-row style="text-align: center;margin-top: 10px">
          <el-button @click="cancel_Project_info('form2')">取消</el-button>
          <el-button
            type="primary"
            @click="addProject_Confirm_info('form2')"
          >提交</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
    <!--    子项目编辑-->
    <el-dialog
      :visible.sync="dialogFormVisible3"
      :title="titleForDayContent3"
      center
      width="400px"
    >
      <el-form
        ref="form3"
        :model="form3"
        :rules="rules3"
        label-position="right"
        label-width="100px"
        style="width: 100%;margin: auto"
      >
        <el-form-item label="项目名称" prop="项目名称">
          <el-input
            v-model="form3.项目名称"
            style="width: 220px"
            readonly
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="子项目内容" prop="子项目内容">
          <el-input
            v-model="form3.子项目内容"
            style="width: 220px"
            clearable
            placeholder="子项目内容"
          />
        </el-form-item>
        <el-form-item label="子项目状态" prop="子项目状态">
          <el-select
            v-model="form3.子项目状态"
            style="width: 220px"
            filterable
            placeholder="子项目状态"
          >
            <el-option
              v-for="item in ProjectManagement_statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划完成" prop="计划完成">
          <el-date-picker
            v-model="form3.计划完成"
            :clearable="false"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="计划完成"/>
          <el-tooltip class="item" effect="dark" content="填写子项目计划完成时间！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="指派人员" prop="指派人员">
          <el-select
            v-model="form3.指派人员"
            style="width: 220px"
            filterable
            placeholder="指派人员"
          >
            <el-option
              v-for="item in ProjectManagement_PersonList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tooltip class="item" effect="dark" content="针对子项目，需要指派该项目的实施人员！" placement="top">
            <el-button type="text" icon="el-icon-info"/>
          </el-tooltip>
        </el-form-item>
        <el-row style="text-align: center;margin-top: 10px">
          <el-button @click="cancel_Project_info('form3')">取消</el-button>
          <el-button
            type="primary"
            @click="editProject_Confirm_info('form3')"
          >提交</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
    <!--    文件列表-->
    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" :title="projectTitle" top="1vh" center width="1800px">
      <div style="height: 800px">
        <el-col :span="6">
          <div style="display: flex">
            <el-upload
              :action="action"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-error="uploadFailure"
              :show-file-list="showFileList"
              :file-list="fileList"
              class="upload-demo"
              multiple
            >
              <el-button
                v-show="is_Son"
                type="primary"
                @click="batchImportOfDrawings"
              >选择文件上传</el-button>
            </el-upload>
            <el-button style="margin-left: 10px" @click="dialogVisible = false">关闭</el-button>
          </div>
          <el-table
            :data="hadFile"
            :header-cell-style="{background:'#F5F5F5'}"
            style="width: 98%; border: 1px solid #9e9b9b"
            border
            max-height="758px"
            tooltip-effect="dark">
            <el-table-column align="left" label="文件名称" min-width="100px">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center;">
                  <div style="width: 30px;height: 30px">
                    <div v-if="scope.row.suffix === 'pdf'" class="icon">
                      <svg-icon icon-class="pdf" />
                    </div>
                    <div v-else-if="scope.row.suffix === 'docx' || scope.row.suffix === 'doc'" class="icon">
                      <svg-icon icon-class="doc" />
                    </div>
                    <div v-else-if="scope.row.suffix === 'txt'" class="icon">
                      <svg-icon icon-class="txt" />
                    </div>
                    <div v-else-if="scope.row.suffix === 'xlsx' || scope.row.suffix === 'xls'" class="icon">
                      <svg-icon icon-class="excel" />
                    </div>
                    <div v-else-if="scope.row.suffix === 'pptx' || scope.row.suffix === 'ppt'" class="icon">
                      <svg-icon icon-class="ppt" />
                    </div>
                    <div v-else-if="scope.row.suffix === 'jpg' || scope.row.suffix === 'jpeg' || scope.row.suffix === 'png'" class="icon">
                      <svg-icon icon-class="pic" />
                    </div>
                    <div v-else class="icon"><svg-icon icon-class="file" /></div>
                  </div>
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="编辑" width="120px">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-view" @click="searchProject_info_File(scope.row)"/>
                <el-button type="text" size="mini" style="font-size: large" icon="el-icon-download" @click="downLoadFile(scope.row)"/>
                <el-button v-show="is_Son" type="text" size="mini" style="font-size: large;color: red" icon="el-icon-delete" @click="deleteFileData(scope.row)"/>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="18">
          <span v-if="fileName !== ''" style="font-size: 18px;font-weight: bolder">{{ fileName }}</span>
          <span v-else style="font-size: 18px;font-weight: bolder">请选择左侧文件进行预览（部分格式需要点击两次预览，才会显示出来，正在修改此bug）</span>
          <span v-show="downloadIng" style="color: #0ba9e3">正在下载.......</span>
          <div style="max-height: 780px;overflow: auto;">
            <div style="height: 780px;border: 1px solid #a1a1a1">
              <div v-show="fileContent !== ''">
                <el-image v-if="isImageType" :src="fileContentImg" :preview-src-list="evaluatePictureList" lazy fit="fill"/>
                <div v-else-if="isPdfType">
                  <iframe
                    :src="fileContentPdf"
                    width="100%"
                    height="810px"/>
                </div>
                <div v-else-if="isTxtType">
                  <el-input :rows="22" :value="fileContentTxt" type="textarea" readonly/>
                </div>
                <div v-else-if="isWordType">
                  <div v-scale ref="wordPreview" style="width:100%;height: 475px"/>
                </div>
                <div v-else-if="isExcelType">
                  <div id="luckysheetShow"/>
                </div>
                <div v-else-if="isPptype">
                  <div id="uploadFileInput" style="width: 1200px;height: 750px"/>
                </div>
                <div v-else class="noView">不支持的预览格式</div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MESDownloadFile, MESUploadFileProject, MESDeleteFile } from '@/utils/request'
import { mapGetters } from 'vuex'
import axios from 'axios'
import LuckyExcel from 'luckyexcel'
const docx = require('docx-preview')
export default {
  name: 'ProjectManagement',
  data() {
    return {
      is_Son: false,
      downloadIng: false,
      currentData: null,
      projectTitle: '',
      taskID: '',
      taskID_son: '',
      imageType: ['bmp', 'jpg', 'png', 'gif', 'jpeg', 'BMP', 'JPG', 'PNG', 'GIF', 'JPEG'],
      pdfType: ['pdf', 'PDF'],
      txtType: ['txt', 'TXT'],
      wordType: ['doc', 'docx', 'DOC', 'DOCX'],
      excelType: ['xls', 'xlsx', 'XLS', 'XLSX'],
      pptType: ['ppt', 'PPT', 'pptx', 'PPTX'],
      currentDownLoadUrl: '',
      fileName: '',
      fileType: '',
      fileContent: '',
      evaluatePictureList: [],
      fileContentImg: null,
      fileContentPdf: null,
      fileContentTxt: null,
      fileContentWord: null,
      fileContentExcel: null,
      fileContentPpt: null,
      isImageType: false,
      isPdfType: false,
      isTxtType: false,
      isWordType: false,
      isExcelType: false,
      isPptype: false,
      hadFile: [],
      showFileList: false,
      fileList: [],
      action: '',
      dialogVisible: false,
      dialogVisible_son: false,
      projectList_Info_InfoList: [],
      form: {
        项目名称: '',
        计划开始: '',
        计划结束: '',
        项目状态: 0,
        负责人: 0
      },
      rules: {
        项目状态: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
        计划开始: [{ required: true, message: '请选计划开始时间', trigger: 'change' }],
        计划结束: [{ required: true, message: '请选计划结束时间', trigger: 'change' }],
        项目名称: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
        负责人: [{ required: true, message: '请选择负责人', trigger: 'change' }]
      },
      form1: {
        ID: '',
        项目名称: '',
        计划开始: '',
        计划结束: '',
        项目状态: 0,
        负责人: 0
      },
      rules1: {
        项目状态: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
        项目名称: [{ required: true, message: '请填写项目名称', trigger: 'blur' }],
        计划开始: [{ required: true, message: '请选计划开始时间', trigger: 'change' }],
        计划结束: [{ required: true, message: '请选计划结束时间', trigger: 'change' }],
        负责人: [{ required: true, message: '请选择负责人', trigger: 'change' }]
      },
      form2: {
        指派人员: '',
        子项目内容: '',
        计划完成: '',
        子项目状态: '',
        项目名称: ''
      },
      rules2: {
        子项目状态: [{ required: true, message: '请选择子项目状态', trigger: 'change' }],
        计划完成: [{ required: true, message: '请选择计划完成时间', trigger: 'change' }],
        指派人员: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        子项目内容: [{ required: true, message: '请填写子项目内容', trigger: 'blur' }]
      },
      form3: {
        指派人员: '',
        子项目状态: '',
        计划完成: '',
        ID: '',
        子项目内容: '',
        项目名称: ''
      },
      rules3: {
        子项目状态: [{ required: true, message: '请选择子项目状态', trigger: 'change' }],
        计划完成: [{ required: true, message: '请选择计划完成时间', trigger: 'change' }],
        指派人员: [{ required: true, message: '请选择负责人', trigger: 'change' }],
        子项目内容: [{ required: true, message: '请填写子项目内容', trigger: 'blur' }]
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      titleForDayContent: '新增项目',
      titleForDayContent1: '编辑项目',
      titleForDayContent2: '新增子项目',
      titleForDayContent3: '编辑子项目',
      ProjectManagement_ProjectName: '',
      ProjectManagement_person: '',
      ProjectManagement_status: '',
      ProjectManagement_statusAll: 9999,
      ProjectManagement_statusList: [],
      ProjectManagement_PersonList: [],
      ProjectManagement_statusListAll: [],
      projectList: [],
      projectList_Info: [],
      projectList_Info_Title: '',
      projectList_Info_CurrentRow: null,
      projectList_Info_CurrentRow_son: null,
      // 子项目展开
      expandsDetail: []
    }
  },
  computed: {
    ...mapGetters(['id', 'token', 'name', 'clickItemData', 'personList'])
  },
  created() {
    this.searchPeople()
    this.searchProject()
    this.searchProjectStatus()
  },
  mounted() {
  },
  methods: {
    searchProject_info_File(row) {
      axios({
        method: 'get',
        url: MESDownloadFile,
        params: {
          id: row.idd + '.' + row.suffix
        },
        responseType: 'blob'
      }).then(res => {
        console.log(row)
        const that = this
        this.fileName = row.name
        this.fileType = row.suffix
        this.fileContent = res.data
        this.fileContentImg = ''
        this.fileContentPdf = ''
        this.fileContentTxt = ''
        this.fileContentPpt = ''
        window.luckysheet.destroy()
        if ($('#uploadFileInput')) $('#uploadFileInput').empty()
        this.evaluatePictureList = []
        if (this.imageType.indexOf(this.fileType) !== -1) {
          this.isImageType = true
          this.isTxtType = false
          this.isPdfType = false
          this.isWordType = false
          this.isExcelType = false
          this.isPptype = false
          this.fileContentImg = window.URL.createObjectURL(res.data)
          this.evaluatePictureList.push(this.fileContentImg)
        } else if (this.pdfType.indexOf(this.fileType) !== -1) {
          this.isImageType = false
          this.isTxtType = false
          this.isPdfType = true
          this.isWordType = false
          this.isExcelType = false
          this.isPptype = false
          this.fileContentPdf = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf;chartset=UTF-8' }))
        } else if (this.txtType.indexOf(this.fileType) !== -1) {
          this.isImageType = false
          this.isPdfType = false
          this.isTxtType = true
          this.isWordType = false
          this.isExcelType = false
          this.isPptype = false
          const READER = new FileReader()
          READER.addEventListener('loadend', function(e) {
            that.fileContentTxt = e.target.result
          })
          READER.readAsText(res.data)
        } else if (this.wordType.indexOf(this.fileType) !== -1) {
          this.isImageType = false
          this.isPdfType = false
          this.isTxtType = false
          this.isWordType = true
          this.isExcelType = false
          this.isPptype = false
          docx.renderAsync(res.data, that.$refs.wordPreview, null, {
            className: 'docx', // 默认和文档样式类的类名/前缀
            inWrapper: true, // 启用围绕文档内容呈现包装器
            ignoreWidth: false, // 禁用页面的渲染宽度
            ignoreHeight: false, // 禁用页面的渲染高度
            ignoreFonts: false, // 禁用字体渲染
            breakPages: true, // 在分页符上启用分页
            ignoreLastRenderedPageBreak: true, // 在lastRenderedPageBreak元素上禁用分页
            experimental: false, // 启用实验功能（制表符停止计算）
            trimXmlDeclaration: true, // 如果为true，则在解析之前将从xml文档中删除xml声明
            useBase64URL: false, // 如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
            useMathMLPolyfill: false, // 包括用于铬、边等的MathML多填充。
            showChanges: false, // 启用文档更改的实验渲染（插入/删除）
            debug: false // 启用额外的日志记录
          })
        } else if (this.excelType.indexOf(this.fileType) !== -1) {
          this.isImageType = false
          this.isPdfType = false
          this.isTxtType = false
          this.isWordType = false
          this.isExcelType = true
          this.isPptype = false
          LuckyExcel.transformExcelToLucky(res.data, function(exportJson, luckysheetfile) {
            if (exportJson.sheets == null || exportJson.sheets.length === 0) {
              that.$message.error('无法读取excel文件的内容，当前不支持xls文件!')
              return
            }
            window.luckysheet.create({
              container: 'luckysheetShow', // luckysheet is the container id
              lang: 'zh', // 设定表格语言
              allowCopy: false, // 是否允许拷贝
              showtoolbar: false, // 是否显示工具栏
              showinfobar: false, // 是否显示顶部信息栏
              showsheetbar: true, // 是否显示底部sheet页按钮
              showstatisticBar: true, // 是否显示底部计数栏
              sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
              allowEdit: false, // 是否允许前台编辑
              enableAddRow: false, // 允许增加行
              enableAddCol: false, // 允许增加列
              userInfo: false, // 右上角的用户信息展示样式
              showRowBar: true, // 是否显示行号区域
              showColumnBar: true, // 是否显示列号区域
              sheetFormulaBar: false, // 是否显示公式栏
              enableAddBackTop: false, // 返回头部按钮
              showstatisticBarConfig: {
                count: false,
                view: false,
                zoom: false
              },
              showsheetbarConfig: {
                add: false, // 新增sheet
                menu: false, // sheet管理菜单
                sheet: false // sheet页显示
              },
              forceCalculation: true, // 强制计算公式
              data: exportJson.sheets
            })
            document.getElementById('luckysheetShow').style.height = '750px'
            document.getElementById('luckysheetShow').style.width = '1200px'
          })
        } else if (this.pptType.indexOf(this.fileType) !== -1) {
          this.isImageType = false
          this.isPdfType = false
          this.isTxtType = false
          this.isWordType = false
          this.isExcelType = false
          this.isPptype = true
          $('#uploadFileInput').pptxToHtml({
            pptxFileUrl: row.url,
            slideMode: false,
            keyBoardShortCut: false,
            slideModeConfig: { // on slide mode (slideMode: true)
              first: 1,
              nav: true, /** true,false : show or not nav buttons*/
              navTxtColor: 'white', /** color */
              navNextTxt: '&#8250;', // ">"
              navPrevTxt: '&#8249;', // "<"
              showPlayPauseBtn: false, /** true,false */
              keyBoardShortCut: false, /** true,false */
              showSlideNum: false, /** true,false */
              showTotalSlideNum: false, /** true,false */
              autoSlide: false, /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */
              randomAutoSlide: false, /** true,false ,autoSlide:true */
              loop: false, /** true,false */
              background: 'black', /** false or color*/
              transition: 'default', /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */
              transitionTime: 3 /** transition time in seconds */
            }
          })
        } else {
          this.isImageType = false
          this.isPdfType = false
          this.isTxtType = false
          this.isWordType = false
          this.isExcelType = false
          this.isPptype = false
        }
      })
    },
    downLoadFile(row) {
      this.downloadIng = true
      axios({
        method: 'get',
        url: MESDownloadFile,
        params: {
          id: row.idd + '.' + row.suffix
        },
        responseType: 'blob'
      }).then(res => {
        var a = document.createElement('a')
        a.download = row.name
        a.href = window.URL.createObjectURL(res.data)
        document.body.append(a)
        a.click()
        document.body.removeChild(a)
      }).finally(() => {
        this.downloadIng = false
      })
    },
    deleteFileData(row) {
      axios({
        method: 'get',
        url: MESDeleteFile,
        params: {
          id: row.idd + '.' + row.suffix
        }
      }).then(res => {
        console.log(res)
      })
      var param = []
      param[0] = ['num', row.id]
      var Data = this.CreateData(
        '12',
        'PDM_项目名称_客户提供资料_删除数据',
        param
      )
      this.ExecDatabase(Data).then(res => {
        if (res.data[0].result === '1') {
          this.searchWord()
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    showFileUpload(row) {
      this.projectList_Info_CurrentRow = row
      this.searchWord()
      this.is_Son = true
    },
    showFileUpload_son(row) {
      this.is_Son = false
      this.projectList_Info_CurrentRow_son = row
      this.searchWord_son()
    },
    searchWord() {
      this.dialogVisible = true
      this.projectTitle = `【${this.projectList_Info_CurrentRow.节点名称}】文件列表(点击文件名查看)`
      this.taskID = this.projectList_Info_CurrentRow.文件ID
      this.hadFile = []
      var param = []
      param[0] = ['id', this.taskID]
      var Data = this.CreateData(
        '11',
        'PDM_项目名称_客户提供资料_查询数据',
        param
      )
      this.fileContentImg = ''
      this.fileContentPdf = ''
      this.fileContent = ''
      this.fileName = ''
      this.ExecDatabase(Data).then(res => {
        this.suffix = res.data
        if (res.data.length > 0) {
          const server = `${MESDownloadFile}`.split('/')
          res.data.map(item => {
            this.hadFile.push({
              url: `http://${server[2]}/webpage/part/${item.uid}.${
                item.suffix
              }`,
              name: `${item.name}.${item.suffix}`,
              suffix: item.suffix,
              id: item.num,
              idd: item.uid
            })
          })
        }
      })
      this.dialogVisible = true
    },
    searchWord_son() {
      this.dialogVisible_son = true
      this.projectTitle = `【${this.projectList_Info_CurrentRow_son.子项目内容}】文件列表(点击文件名查看)`
      this.taskID_son = this.projectList_Info_CurrentRow_son.子项目节点ID
      this.hadFile = []
      var param = []
      param[0] = ['子项目代码', this.taskID_son]
      var Data = this.CreateData(
        '11',
        'PDM_项目名称_客户提供资料_查询数据_子项目',
        param
      )
      this.fileContentImg = ''
      this.fileContentPdf = ''
      this.fileContent = ''
      this.fileName = ''
      this.ExecDatabase(Data).then(res => {
        this.suffix = res.data
        if (res.data.length > 0) {
          const server = `${MESDownloadFile}`.split('/')
          res.data.map(item => {
            this.hadFile.push({
              url: `http://${server[2]}/webpage/part/${item.uid}.${
                item.suffix
              }`,
              name: `${item.name}.${item.suffix}`,
              suffix: item.suffix,
              id: item.num,
              idd: item.uid
            })
          })
        }
      })
      this.dialogVisible = true
    },
    batchImportOfDrawings() {
      this.action = `${MESUploadFileProject}?&num=1&tableName=PDM_图档管理_通用文件&type=1&UploaderName=${
        this.id
      }&projectValue=${this.taskID}`
    },
    uploadSuccess(res, file, fileList) {
      if (res[0].result === '1') {
        const index = fileList.indexOf(file)
        fileList.splice(index, 1)
      } else {
        this.$message.error(
          `${file.name}文件上传失败，请检查上传文件是否正确！`
        )
      }
      if (fileList.length === 0) {
        this.searchWord()
        this.$message.success('文件上传成功')
      }
    },
    uploadFailure(res, file, fileList) {
      fileList.map(file => {
        this.$message.error(
          `${file.name}文件上传失败，请检查上传文件是否正确！`
        )
      })
    },
    beforeUpload(file) {
      // 获取上传文件大小
      const imgSize = Number(file.size / 1024 / 1024)
      if (imgSize > 10) {
        this.$msgbox({
          title: '',
          message: '文件大小不能超过10MB，请重新上传。',
          type: 'warning'
        })
        return false
      }
      return true
    },
    searchPeople() {
      this.ProjectManagement_PersonList = []
      this.ProjectManagement_person = ''
      var param = []
      var Data = this.CreateData('11', '项目管理_人员列表_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.ProjectManagement_PersonList.push({
            label: response.data[i].姓名,
            value: response.data[i].人员编号
          })
        }
      })
    },
    searchProjectStatus() {
      this.ProjectManagement_statusListAll = [
        {
          label: '全部',
          value: 9999
        }
      ]
      this.ProjectManagement_statusList = []
      var param = []
      var Data = this.CreateData('11', '项目管理_项目状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.ProjectManagement_statusListAll.push({
            label: response.data[i].状态名称,
            value: response.data[i].ID
          })
          this.ProjectManagement_statusList.push({
            label: response.data[i].状态名称,
            value: response.data[i].ID
          })
        }
        this.ProjectManagement_status = response.data[0].ID
        this.ProjectManagement_statusAll = 9999
      })
    },
    addProject() {
      this.form.负责人 = ''
      this.form.项目状态 = ''
      this.form.项目名称 = ''
      this.dialogFormVisible = true
    },
    addProject_Confirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['负责人', this.form.负责人]
          param[1] = ['项目状态', this.form.项目状态]
          param[2] = ['项目名称', this.form.项目名称]
          param[3] = ['计划开始', this.form.计划开始]
          param[4] = ['计划结束', this.form.计划结束]
          var Data = this.CreateData(
            '12',
            '项目管理_关系_增加节点',
            param
          )
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              this.searchProject()
            } else {
              this.$message.error('信息增加失败')
            }
          })
        } else {
          return false
        }
      })
    },
    editProject(row) {
      this.form1.ID = row.节点ID
      this.form1.负责人 = row.负责人ID
      this.form1.项目名称 = row.节点名称
      this.form1.项目状态 = row.状态ID
      this.form1.计划开始 = row.计划开始
      this.form1.计划结束 = row.计划结束
      this.dialogFormVisible1 = true
    },
    editProject_Confirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['负责人', this.form1.负责人]
          param[1] = ['项目状态', this.form1.项目状态]
          param[2] = ['项目名称', this.form1.项目名称]
          param[3] = ['计划开始', this.form1.计划开始]
          param[4] = ['计划结束', this.form1.计划结束]
          param[5] = ['ID', this.form1.ID]
          var Data = this.CreateData(
            '12',
            '项目管理_关系_修改节点',
            param
          )
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息修改成功',
                type: 'success'
              })
              this.dialogFormVisible1 = false
              this.searchProject()
            } else {
              this.$message.error('信息修改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    cancel_Project(formName) {
      this.dialogFormVisible = false
      this.dialogFormVisible1 = false
      this.$refs[formName].resetFields()
    },
    deleteProject(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', row.节点ID]
        var Data = this.CreateData('11', '项目管理_关系_删除节点', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.searchProject()
          } else {
            this.$message.error('删除失败，项目已被填写日报使用！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addProject_info() {
      this.form2.子项目内容 = ''
      this.form2.项目名称 = this.projectList_Info_Title
      this.dialogFormVisible2 = true
    },
    addProject_Confirm_info(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['项目id', this.projectList_Info_CurrentRow.节点ID]
          param[1] = ['项目内容', this.form2.子项目内容]
          param[2] = ['负责人ID', this.form2.指派人员]
          param[3] = ['状态ID', this.form2.子项目状态]
          param[4] = ['计划完成', this.form2.计划完成]
          var Data = this.CreateData(
            '12',
            '项目管理_详情_关系_增加节点',
            param
          )
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.dialogFormVisible2 = false
              this.searchProject_info(this.projectList_Info_CurrentRow)
            } else {
              this.$message.error('信息增加失败')
            }
          })
        } else {
          return false
        }
      })
    },
    editProject_info(row) {
      this.form3.ID = row.子项目节点ID
      this.form3.子项目内容 = row.子项目内容
      this.form3.子项目状态 = row.状态ID
      this.form3.指派人员 = row.负责人ID
      this.form3.计划完成 = row.计划完成
      this.form3.项目名称 = this.projectList_Info_Title
      this.dialogFormVisible3 = true
    },
    editProject_Confirm_info(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['子项目节点ID', this.form3.ID]
          param[1] = ['项目内容', this.form3.子项目内容]
          param[2] = ['负责人ID', this.form3.指派人员]
          param[3] = ['状态ID', this.form3.子项目状态]
          param[4] = ['计划完成', this.form3.计划完成]
          var Data = this.CreateData(
            '12',
            '项目管理_详情_关系_编辑节点',
            param
          )
          this.ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息修改成功',
                type: 'success'
              })
              this.dialogFormVisible3 = false
              this.searchProject_info(this.projectList_Info_CurrentRow)
            } else {
              this.$message.error('信息修改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    cancel_Project_info(formName) {
      this.dialogFormVisible2 = false
      this.dialogFormVisible3 = false
      this.$refs[formName].resetFields()
    },
    deleteProject_info(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['子项目节点ID', row.子项目节点ID]
        var Data = this.CreateData('11', '项目管理_详情_关系_删除节点', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.searchProject_info(this.projectList_Info_CurrentRow)
          } else if (response.data[0].result === '3') {
            this.$message.error('删除失败，至少存在一个子项目！')
          } else {
            this.$message.error('删除失败，子项目已被填写日报使用！')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    searchProject() {
      this.projectList = []
      this.projectList_Info_CurrentRow = null
      this.projectList_Info = []
      this.projectList_Info_Title = ''
      var param = []
      if (this.ProjectManagement_statusAll === '') this.ProjectManagement_statusAll = 9999
      param[0] = ['项目名称', this.ProjectManagement_ProjectName]
      param[1] = ['状态', this.ProjectManagement_statusAll]
      var Data = this.CreateData('11', '项目管理_关系_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        this.projectList = response.data
      })
    },
    searchProject_info(row) {
      this.projectList_Info_CurrentRow = row
      this.projectList_Info_Title = row['节点名称']
      this.projectList_Info = []
      var param = []
      param[0] = ['项目id', row['节点ID']]
      var Data = this.CreateData('11', '项目管理_详情_关系_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        this.projectList_Info = response.data
      })
    },
    // 搜索详细的详细信息
    searchProject_infoRowData(row) {
      if (this.expandsDetail.length !== 0) {
        if (this.expandsDetail[0] === row.子项目节点ID) {
          this.expandsDetail = []
          return
        }
      }
      this.expandsDetail = []
      this.projectList_Info_InfoList = []
      var param = []
      param[0] = ['子项目节点id', row.子项目节点ID]
      var Data = this.CreateData('11', '项目管理_关系_查询子项目节点详细', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.projectList_Info_InfoList = response.data
          this.expandsDetail.push(row.子项目节点ID)
        } else {
          this.$message.warning('该节点下无详细内容！')
        }
      })
    },
    cellMouseEnter(row) {

    },
    // 获取展开列的子项目节点ID
    getRowKeys(row) {
      return row.子项目节点ID
    },
    // 控制展开列
    selectPlan(row, expandedRows) {
      if (this.expandsDetail.length !== 0) {
        if (this.expandsDetail[0] === row.子项目节点ID) {
          this.expandsDetail = []
          return
        }
      }
      if (expandedRows.length) {
        this.expandsDetail = []
        var param = []
        param[0] = ['子项目节点id', row.子项目节点ID]
        var Data = this.CreateData('11', '项目管理_关系_查询子项目节点详细', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length !== 0) {
            this.projectList_Info_InfoList = response.data
            this.expandsDetail.push(row.子项目节点ID)
          } else {
            this.$message.warning('该节点下无详细内容！')
          }
        })
      } else {
        this.expandsDetail = []
      }
    }
  }
}
</script>

<style scoped>
.noView{
  font-size: 20px;
  text-align: center;
  line-height: 700px;
  color: #505050;
}
</style>
