<template>
  <div class="app-container">
    <div class="anchor">
      <div class="nav-item" @click="scrollToAnchor('section1')">项目基本信息</div>
      <div class="nav-item" @click="scrollToAnchor('section2')">项目安排</div>
      <div class="nav-item" @click="scrollToAnchor('section3')">技术安排</div>
      <div class="nav-item" @click="scrollToAnchor('section4')">任务审核情况</div>
      <div class="nav-item" @click="scrollToAnchor('section5')">项目生产情况</div>
      <div class="nav-item" @click="scrollToAnchor('section6')">项目变更记录</div>
    </div>
    <div class="header">
      <el-button icon="el-icon-d-arrow-left" plain type="primary" class="back" @click="goBack"
        v-show="needReturn">返回</el-button>
      <el-button type="success" plain @click="printOpen = true" class="print" icon="el-icon-printer">打印任务通知单</el-button>
      <h1>{{ '【' + project.projectNumber + '】' + project.projectName }}</h1>
      <el-button icon="el-icon-search" type="primary" class="records" @click="clickRecords">流转记录</el-button>
      <el-button icon="el-icon-connection" type="success" class="flow" @click="clickProcess">流程图</el-button>
    </div>
    <el-divider></el-divider>

    <div class="content">
      <!-- 项目基本信息 -->
      <div class="box1" ref="section1">
        <div class="title">项目基本信息
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="column" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="number" />
                项目编号
              </template>
              {{ project.projectNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="clipboard" />
                项目名称
              </template>
              {{ project.projectName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="JamYelpSquare" />
                项目类型
              </template>
              {{ project.projectType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="guide" />
                项目来源
              </template>
              {{ project.projectSource == '0' ? '院内' : '院外' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="pmLevel" />
                项目级别
              </template>
              <el-tag :type="project.projectLevel ? (project.projectLevel === '0' ? 'info' : 'danger') : 'info'">
                {{ project.projectLevel ? (project.projectLevel == '0' ? '一般项目' : '重大项目') : '一般项目' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="school" />
                甲方单位
              </template>
              {{ project.partyA ? project.partyA.partyAName : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                联系人
              </template>
              {{ project.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="phone" />
                联系电话
              </template>
              {{ project.telephone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="contractSign" />
                合同编码
              </template>
              {{ project.contractCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="number" />
                合同编号
              </template>
              {{ project.contractNumber }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                承担部门
              </template>
              {{ project.undertakingDeptName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                项目登记人
              </template>
              {{ getUserName(project.projectRegistrant) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目登记时间
              </template>
              {{ project.registerTime }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="file" />
                项目任务书
              </template>
              <div v-if="project.taskDocument">
                <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + project.taskDocument}`)">
                  {{ getFileName(project.taskDocument) }}
                </el-link>
                <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + project.taskDocument}`"
                  :underline="false" target="_blank">
                  <span class="el-icon-download">下载文件</span>
                </el-link>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="build" />
                项目概况
              </template>
              <div>
                <el-table :data="workList">
                  <el-table-column type="index" width="50" />
                  <el-table-column label="工作内容" prop="content" width="600" />
                  <el-table-column label="等级或比例尺" prop="scale" />
                  <el-table-column label="单位" prop="unit" />
                  <el-table-column label="工作量" prop="workload" />
                  <el-table-column label="要求完成时间" prop="deadline" />
                  <el-table-column label="备注" prop="remark" />
                </el-table>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="business" />
                资料提交要求
              </template>
              {{ project.projectRequest }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="excel" />
                项目备注
              </template>
              {{ project.remark }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 部门安排 -->
      <div class="box1 mt20" ref="section2">
        <div class="title">项目安排
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="2" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                承担部门
              </template>
              <div style="display: flex;" class="ml20" v-if="project.undertakingDept">
                <div>{{ project.undertakingDeptName }}</div>
                <div class="ml20">
                  <el-button type="success" plain size="mini" icon="el-icon-refresh" @click="deptOpen = true"
                    v-hasPermi="['oa:project:edit']">
                    更换部门
                  </el-button>
                </div>
              </div>

            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                部门负责人
              </template>
              {{ deptLeaderList.join(',') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                项目负责人
              </template>
              <div style="display: flex;" class="ml20" v-if="project.projectLeader">
                <div>{{ project.projectLeaderUser ? project.projectLeaderUser.nickName : "" }}</div>
                <div class="ml20">
                  <el-button type="success" plain size="mini" icon="el-icon-refresh" @click="prLeaderOpen = true"
                    v-hasPermi="['oa:project:edit']">
                    更换项目负责人
                  </el-button>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                现场负责人
              </template>
              {{ getUserName(project.siteLeader) }}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                项目预算编制
              </template>
              <el-link type="primary" @click="openBudget = true" v-if="isProjectLeader">项目预算表</el-link>
              <div v-else>
                <el-link type="primary" @click="openBudget = true" v-hasPermi="['oa:allproject:query']">项目预算表</el-link>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 技术质量与安全部安排 -->
      <div class="box1 mt20" ref="section3">
        <div class="title">技术安排
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="3" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                技术负责人
              </template>
              {{ project.technicalDirectorUser ? project.technicalDirectorUser.nickName : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                技术设计人
              </template>
              {{ project.technicalDesignerUser ? project.technicalDesignerUser.nickName : '' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                质量检查员
              </template>
              {{ project.qualityInspectorName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                技术方案设计
              </template>
              <!-- v-hasPermi="['oa:project:edit']" -->
              <el-link type="primary" @click="openPlan = true">技术方案审批表</el-link>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- 任务审核情况  -->
      <div class="box1 mt20" ref="section4">
        <div class="title">任务审核情况
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions" border :column="1" style="text-align: center;">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                经营副总审核
              </template>
              <div>
                <el-input disabled type="textarea" v-model="projectComment.jyComment"></el-input>
                <div class="sign mt10">
                  <div class="mr20">签名：<span class="auditor">{{ projectComment.jyUser ? projectComment.jyUser.nickName :
                    ''
                  }}</span>
                  </div>
                  <div class="ml20"><span>审核时间：{{ projectComment.jyApprovalTime }}</span></div>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="user" />
                分管领导批准
              </template>
              <div>
                <el-input disabled type="textarea" v-model="projectComment.manageComment"></el-input>
                <div class="sign mt10">
                  <div class="mr20">签名：<span class="auditor">{{ projectComment.managerUser ?
                    projectComment.managerUser.nickName : '' }}</span>
                  </div>
                  <div class="ml20"><span>审核时间：{{ projectComment.manageApprovalTime }}</span></div>
                </div>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="box1 mt20" ref="section5">
        <div class="title">项目生产情况
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions xmsc" border :column="2" style="text-align: center;">
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                安全交底记录表
              </template>
              <el-link type="primary" @click="openSafe = true" class="mr20">安全交底记录表</el-link>
              <el-button type="warning" size="mini" plain @click="handleUrge('1')"
                v-if="isSend">发送企业微信消息提醒相关人员</el-button>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                技术交底记录表
              </template>
              <el-link type="primary" @click="openTech = true" class="mr20">技术交底记录表</el-link>
              <el-button type="warning" size="mini" plain @click="handleUrge('2')"
                v-if="isSend">发送企业微信消息提醒相关人员</el-button>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="equipment" />
                申请设备
              </template>
              <el-select v-model="devices" multiple disabled style="width:100%">
                <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.name + '【' + (item.brand != null ? item.brand : '') + (item.series != null ? '-' + item.series + '】' : '')
                  + (item.code != null ? '（设备编号：' + item.code + '）' : '')" :value="item.deviceId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="car" />
                使用车辆
              </template>
              <el-select v-model="cars" multiple disabled style="width:100%">
                <el-option v-for="item in carList"
                  :label="item.licensePlate + (item.brand ? item.brand : '') + (item.series ? item.series : '')"
                  :value="item.carId" :key="item.carId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="peoples" />
                驾驶员
              </template>
              <el-select v-model="drivers" multiple disabled style="width:100%">
                <el-option v-for="item in userList" :label="item.nickName" :value="item.userId" :key="item.userId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="dept" />
                参与人员
              </template>
              <el-select v-model="participates" multiple disabled style="width:100%">
                <el-option v-for="item in userList" :label="item.nickName" :value="item.userId" :key="item.userId">
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                进场时间
              </template>
              {{ project.entryTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                撤场时间
              </template>
              {{ project.exitTime }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                项目进度
              </template>
              <div>
                <el-table :data="progressList">
                  <el-table-column type="index" width="50" />
                  <el-table-column label="截至日期" prop="date" />
                  <el-table-column label="累计总进度（%）" prop="percentage" />
                  <el-table-column label="情况说明" prop="situation" />
                </el-table>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="date" />
                实际完成工作量
              </template>
              <div>
                <div>
                  <el-button type="primary" size="mini" plain icon="el-icon-download" @click="exportActualWork">导出</el-button>
                </div>
                <el-table :data="actualList">
                  <el-table-column label="序号" type="index" width="50" />
                  <el-table-column label="工作内容" prop="content" />
                  <el-table-column label="等级或比例尺" prop="scale" />
                  <el-table-column label="单位" prop="unit" />
                  <el-table-column label="工作量" prop="workload" />
                  <el-table-column label="实际完成时间" prop="deadline">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" prop="remark" />
                </el-table>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                项目借款
              </template>
              <borrow-data :taskForm="taskForm"></borrow-data>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                成果汇交
              </template>
              <achi-data :taskForm="taskForm" class="table-warpper"></achi-data>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                产值结算
              </template>
              <settle-data :taskForm="taskForm"></settle-data>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="box1 mt20" ref="section6">
        <div class="title">项目变更记录
          <div class="line"></div>
        </div>
        <div class="info mt20">
          <el-descriptions class="descriptions xmsc" border :column="2" style="text-align: center;">
            <el-descriptions-item :span="2">
              <template slot="label">
                <svg-icon slot="prefix" icon-class="form" />
                变更记录表
              </template>
              <div>
                <el-table :data="projectChangeList">
                  <el-table-column type="index" label="序号" width="55" align="center" />
                  <!-- <el-table-column label="项目编号" align="center" width="80" prop="project.projectNumber" />
                  <el-table-column label="项目名称" align="center" prop="project.projectName" /> -->
                  <!-- <el-table-column label="承担部门" align="center" prop="undertakingDeptName" />
                  <el-table-column label="项目负责人" align="center" width="90" prop="leaderUser.nickName" /> -->
                  <el-table-column label="变更内容" align="center" prop="content" />
                  <el-table-column label="登记人" align="center" width="80" prop="registrantUser.nickName" />
                  <el-table-column label="登记时间" align="center" prop="registerTime" width="100">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.registerTime, '{y}-{m}-{d}') }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <el-dialog title="项目预算" :visible.sync="openBudget" width="70%" append-to-body>
      <budget-tab :taskForm="taskForm"></budget-tab>
    </el-dialog>
    <el-dialog title="技术方案审批表" :visible.sync="openPlan" width="1000px" append-to-body>
      <technical-tab :taskForm="taskForm"></technical-tab>
    </el-dialog>
    <el-dialog title="安全交底记录表" :visible.sync="openSafe" width="1000px" append-to-body>
      <safe-tab :taskForm="taskForm"></safe-tab>
    </el-dialog>
    <el-dialog title="技术交底记录表" :visible.sync="openTech" width="1000px" append-to-body>
      <plan-tab :taskForm="taskForm"></plan-tab>
    </el-dialog>
    <el-dialog title="更换项目负责人" :visible.sync="prLeaderOpen" width="1000px" append-to-body>
      <choose-people :multiple="false" @chooseUser="changeProjectLeader"></choose-people>
    </el-dialog>
    <el-dialog title="更换承担部门" :visible.sync="deptOpen" width="1000px" append-to-body>
      <el-form>
        <el-form-item label="当前承担部门：">
          {{ project.undertakingDeptName }}
        </el-form-item>
        <el-form-item label="更换承担部门：">
          <el-select v-model="undertakingDept" multiple clearable style="width:80%">
            <el-option v-for="item in $store.state.user.deptList" :key="item.deptId" :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="text-center">
        <el-button type="primary" @click="changeUndertakingDept">确定</el-button>
        <el-button @click="deptOpen = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="打印预览" :visible.sync="printOpen" width="1000px" append-to-body>
      <project-print :project="project" :workList="workList" :projectComment="projectComment"
        @cancel="printOpen = false"></project-print>
    </el-dialog>
    <el-drawer title="流程图" :visible.sync="drawerOpen" direction="rtl" append-to-body>
      <div class="app-container">
        <flow :flowData="flowData" />
      </div>
    </el-drawer>
    <el-drawer title="办理进度" :visible.sync="recordOpen" direction="rtl" append-to-body>
      <div class="app-container">
        <row-detail :rows="clickRow"></row-detail>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getDept } from "@/api/system/dept";
import { getUsersDeptLeaderByDept, getUserByPost, getUsersManageLeaderByDept } from '@/api/system/post'
import { listUser, getUser } from "@/api/system/user";
import { getProject, updateProject } from "@/api/oa/project/project";
import { listProjectWork, addProjectWork } from "@/api/oa/project/projectWork";
import { listProjectComment, getProjectComment } from "@/api/oa/project/projectComment";
import { listProjectProgress, getProjectProgress } from "@/api/oa/project/projectProgress";
import { listProjectWorkload } from '@/api/oa/project/projectWorkload'
import { listDevice } from "@/api/oa/device/device";
import { listCar } from '@/api/oa/car/car';
import budgetInfo from '@/views/flowable/form/budget/budgetInfo.vue';
import SafeTab from '@/views/flowable/form/projectProcess/safeTab.vue';
import PlanTab from '@/views/flowable/form/projectProcess/technicalTab.vue';
import TechnicalTab from '@/views/flowable/form/projectProcess/planTab.vue';
import SettleData from '@/views/flowable/form/inProgress/settleData.vue';
import BorrowData from '@/views/flowable/form/inProgress/borrowData.vue';
import BudgetTab from '@/views/flowable/form/projectProcess/budgetTab.vue';
import achiData from "@/views/flowable/form/inProgress/achiData.vue";
import choosePeople from '@/views/flowable/form/budget/components/choosePeople.vue'
import { listProjectChange } from "@/api/oa/project/projectChange";
import { flowXmlAndNodeByFormId } from "@/api/flowable/definition";
import flow from '@/views/flowable/task/todo/detail/flow'
import RowDetail from '@/views/flowable/task/myProcess/send/rowDetail.vue';
import projectPrint from '@/views/flowable/form/components/print/projectPrint.vue';
import { sendQyMessage } from "@/api/qywx/index"

export default {
  components: { budgetInfo, SafeTab, TechnicalTab, PlanTab, SettleData, BorrowData, BudgetTab, achiData, choosePeople, flow, RowDetail, projectPrint },
  props: {
    needReturn: {
      type: Boolean,
      default: true
    }
  },
  beforeCreate() {
    // 找到当前tab并修改当前tab显示的标题
    let currentView = this.$store.getters.visitedViews[this.$store.getters.visitedViews.findIndex(
      (item) => item.path === this.$route.path
    )]
    if (currentView != null) {
      currentView.title = this.$route.query.projectName
    }
  },
  created() {
    this.getUserList();
    this.getDeviceList();
    this.getCarList();
    if (this.$route.query.projectId) {
      this.taskForm.formId = this.$route.query.projectId;
      let projectId = this.$route.query.projectId;
      this.getProjectInfo(projectId);
      this.getProjectWorkList(projectId);
      this.getProjectCommentList(projectId);
      this.getProjectProgressList(projectId);
      this.getActualList(projectId);
      this.getProjectChangeList(projectId);
    } else {
      this.goBack();
    }
  },
  watch: {
    '$route.query.projectId'(newProjectId, oldProjectId) {
      if (newProjectId && newProjectId !== oldProjectId) {
        // 重置数据
        this.project = {};
        this.deptLeaderList = [];
        this.projectComment = {};
        this.projectChangeList = [];
        this.workList = [];
        this.progressList = [];
        this.actualList = [];
        
        // 更新任务表单ID
        this.taskForm.formId = newProjectId;
        
        // 重新加载数据
        this.getProjectInfo(newProjectId);
        this.getProjectWorkList(newProjectId);
        this.getProjectCommentList(newProjectId);
        this.getProjectProgressList(newProjectId);
        this.getActualList(newProjectId);
        this.getProjectChangeList(newProjectId);
      }
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      project: {},
      activeName: '1',
      column: 3,
      userList: [],
      deviceList: [],
      carList: [],
      workList: [],
      deptLeaderList: [],
      progressList: [],
      actualList: [],
      openBudget: false,
      openPlan: false,
      openSafe: false,
      openTech: false,
      prLeaderOpen: false,
      deptOpen: false,
      taskForm: {
        formId: ''
      },
      projectComment: {},
      devices: [],
      cars: [],
      drivers: [],
      participates: [],
      undertakingDept: [],
      projectChangeList: [],
      drawerOpen: false,
      flowData: {},
      recordOpen: false,
      clickRow: {
        procInsId: '',
        deployId: ''
      },
      isProjectLeader: false,
      printOpen: false,
      isSend: false,
    }
  },
  methods: {
    exportActualWork() {
      this.download('oa/projectWorkload/export', {
        projectId: this.project.projectId
      }, `项目实际工作量表_${this.project.projectNumber}_${this.project.projectName}_${new Date().getTime()}.xlsx`);
    },
    scrollToAnchor(anchor) {
      const element = this.$refs[anchor];
      if (element) {
        window.scrollTo({
          behavior: 'smooth',
          top: element.offsetTop - 80
        });
      }
    },
    getProjectInfo(projectId) {
      getProject(projectId).then(res => {
        if (res.data) {
          this.project = res.data;
          if (this.project.projectLeader == this.$store.state.user.id) {
            this.isProjectLeader = true;
          }
          // 更新标签页标题
          if (this.project.projectNumber && this.project.projectName) {
            const newTitle = `【${this.project.projectNumber}】${this.project.projectName}`;
            this.$store.dispatch('tagsView/updateVisitedView', {
              ...this.$route,
              meta: {
                ...this.$route.meta,
                title: newTitle
              }
            });
          }
          let deptArr = [];
          if (this.project.undertakingDept && this.project.undertakingDept.trim() !== '') {
            deptArr = (this.project.undertakingDept.split(',')).map(Number)
          }
          for (let dept of deptArr) {
            getUsersDeptLeaderByDept({ deptId: Number(dept) }).then(res => {
              this.deptLeaderList.push(res.data.nickName);
            })
          }
          if (this.project.devices && this.project.devices.trim() !== '') {
            this.devices = (this.project.devices.split(',')).map(Number)
          }
          if (this.project.cars && this.project.cars.trim() !== '') {
            this.cars = (this.project.cars.split(',')).map(Number)
          }
          if (this.project.drivers && this.project.drivers.trim() !== '') {
            this.drivers = (this.project.drivers.split(',')).map(Number)
          }
          if (this.project.participates && this.project.participates.trim() !== '') {
            this.participates = (this.project.participates.split(',')).map(Number)
          }
          this.getManagerList();
        }
      })
    },
    // 获取该项目的分管领导
    getManagerList() {
      let deptArr = [];
      if (this.project.undertakingDept && this.project.undertakingDept.trim() !== '') {
        deptArr = (this.project.undertakingDept.split(',')).map(Number)
      }
      for (let deptId of deptArr) {
        getUsersManageLeaderByDept({ deptId }).then(resopnse => {
          if (resopnse.data) {
            resopnse.data.forEach(element => {
              if (this.$store.getters.userId == element.userId) {
                this.isSend = true
              }
            });
          }
        })
      }

    },
    getProjectChangeList(projectId) {
      listProjectChange({ pageNum: 1, pageSize: 100, projectId }).then(response => {
        this.projectChangeList = response.rows;
      });
    },
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        if (res.code == 200) {
          this.userList = res.rows
        }
      })
    },
    getDeviceList() {
      listDevice({
        pageNum: 1,
        pageSize: 99999999,
        type: '仪器设备'
      }).then(res => {
        this.deviceList = res.rows
      })
    },
    getCarList() {
      listCar({ pageSize: 9999, pageNum: 1 }).then(res => {
        this.carList = res.rows
      })
    },
    getProjectProgressList(projectId) {
      getProjectProgress(projectId).then(res => {
        if (res.data) {
          this.progressList = res.data;

        }
      });
    },
    getActualList(projectId) {
      listProjectWorkload({ pageNum: 1, pageSize: 100, projectId: projectId }).then(res => {
        if (res.total > 0) {
          this.actualList = res.rows;
        }
      })
    },
    getProjectWorkList(projectId) {
      listProjectWork({ pageNum: 1, pageSize: 50, projectId }).then(res => {
        this.workList = res.rows;
      })
    },
    getProjectCommentList(projectId) {
      getProjectComment(projectId).then(res => {
        if (res.data) {
          this.projectComment = res.data
        }
      })
    },
    getFileName(name) {
      if (name != null) {
        let arr = name.split('/')
        return arr[arr.length - 1];
      }
    },
    goBack() {
      let obj = { path: "/project/info" }
      this.$tab.closeOpenPage(obj);
      this.$router.push({ path: '/product/account/project' });
    },
    reviewWord(url) {
      this.$router.push({
        path: '/preview',
        query: {
          url: url
        }
      })
    },
    changeProjectLeader(val) {
      let preLeader = this.getUserName(this.project.projectLeader);
      let curLeader = val.nickName;
      this.$confirm('项目负责人将由 [' + preLeader + '] 变更为 [' + curLeader + '] ，是否确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateProject(
          { projectId: this.project.projectId, projectLeader: val.userId }
        ).then(res => {
          this.$message.success('项目负责人修改成功');
          this.prLeaderOpen = false;
          this.$router.go(0);
        })
      }).catch(() => { });
    },
    changeUndertakingDept() {
      let deptIds = this.undertakingDept.join(',');
      let currentDept = this.getDeptNames(deptIds);
      let preDept = this.getDeptNames(this.project.undertakingDept);
      this.$confirm('承担部门将由 [' + preDept + '] 变更为 [' + currentDept + '] ，是否确认', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateProject(
          { projectId: this.project.projectId, undertakingDept: deptIds }
        ).then(res => {
          this.$message.success('承担部门修改成功');
          this.deptOpen = false;
          this.$router.go(0);
        })
      })
    },
    async clickProcess() {
      if (this.$route.query.projectId) {
        let resData = await flowXmlAndNodeByFormId({ formId: this.$route.query.projectId, name: '3001' })
        this.flowData = resData.data;
        this.drawerOpen = true;
        let resData2 = await flowXmlAndNodeByFormId({ formId: this.$route.query.projectId, name: '3001' })
        this.flowData = resData2.data;
        this.drawerOpen = true;
      }
    },
    async clickRecords() {
      let resData = await flowXmlAndNodeByFormId({ formId: this.$route.query.projectId, name: '3001' })
      let { procInsId, deployId } = resData
      this.clickRow = { procInsId, deployId }
      this.recordOpen = true;
    },
    async handleUrge(type) {
      if (!this.project.projectLeader) {
        this.$message.error('项目负责人未选定')
        return
      }
      let message = ''
      let user = []
      let userStirngList = []
      if (type == '1') {
        let { data } = await getUserByPost({ postName: "专职安全员" });
        user.push(data[0].userId)
        message = "<font color='warning'>请尽快进行安全交底：</font>  \n>" +
          "项目编号：" + this.project.projectNumber + "  \n>" +
          "项目名称：" + this.project.projectName + "  \n>"
      } else if (type == '2') {
        message = "<font color='warning'>请尽快进行技术交底：</font>   \n>" +
          "项目编号：" + this.project.projectNumber + "  \n>" +
          "项目名称：" + this.project.projectName + "  \n>"
      }
      let deptList = (this.project.undertakingDept.split(',')).map(Number)
      for (let d of deptList) {
        let { data } = await getUsersDeptLeaderByDept({ deptId: d });
        user.push(data.userId)
      }
      user.push(this.project.projectLeader)
      for (let u of user) {
        let { data } = await getUser(u)
        userStirngList.push(data.pinyin)
      }
      let userString = userStirngList.join('|')
      this.$confirm('是否发送企业微信消息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let formData = new FormData();
        formData.append('message', message)
        formData.append('userString', userString + '|YuSiHan|WangRongHua')
        sendQyMessage(formData).then(() => {
          this.$message.success('消息已发送！')
        })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/element-reset.scss";

.header {
  position: relative;
  text-align: center;

  .back {
    position: absolute;
    left: 12px;
    top: -10px;
  }

  .print {
    position: absolute;
    left: 102px;
    top: -10px;
  }

  .records {
    position: absolute;
    right: 120px;
    top: -10px;
  }

  .flow {
    position: absolute;
    right: 12px;
    top: -10px;
  }
}

.content {
  background-color: #f3f5f7;
  padding: 20px 20px 40px 20px;

  .box1 {
    width: 100%;
    background-color: #ffffff;
  }

  .info {
    padding: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    padding: 20px 35px 0px;
    position: relative;

    .line {
      position: absolute;
      top: 22px;
      left: 20px;
      width: 4px;
      height: 20px;
      border-radius: 20px;
      background-color: #303133;
    }
  }
}

.sign {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 80px;
  /* 如果需要垂直居中 */
}

.table-warpper {
  max-width: 1422px;
}

.anchor {
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 999;

  .nav-item {
    background-color: #fff;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    text-align: center;
    cursor: pointer;
    font-size: 12px;
  }

  .nav-item:hover {
    background-color: var(--current-color);
    color: #fff;
  }
}

html {
  scroll-behavior: smooth;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  color: #5a5757;
  background: rgba($color: #a9adb3, $alpha: 0.1);
  width: 150px;
  min-width: 150px;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid #cdd0d3;
}

::v-deep .el-tag.el-tag--info {
  border-color: #d1d1dc;
  color: #101010
}
</style>