<template>
  <div class="Repair">
    <div class="RepairMain">
      <div class="CRTop">
        <div>
          <span>急修管理 / 急修记录</span>
        </div>
        <div style="text-align:right">
          <el-button type="primary" round plain v-if="RepairBtn.RepairBtn111" @click="exportExcel">导出excel</el-button>
          <el-button v-if="RepairStatus==2&&RepairBtn.RepairBtn112" type="primary" round plain @click="PrintRepair">批量打印急修单</el-button>
        </div>
      </div>
      <el-row>
        <el-tabs class="BCtabs" v-model="activeName" type="border-card" @tab-click="changeRepair">
          <el-tab-pane label="已完成" name="first">
            <el-form class="TableSelectMain" :model="RepairSearch" :inline="true" label-position="left">
              <el-row>
                <el-form-item >
                  <el-select v-model="RepairSearch.regionId" clearable filterable placeholder="选择区域" @change="getprojectList">
                    <el-option
                      v-for="item in RegionList"
                      :key="item.id"
                      :label="item.areaName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-select v-model="RepairSearch.projectId" clearable filterable placeholder="选择项目">
                    <el-option
                      v-for="item in RegionProjectList"
                      :key="item.projectId"
                      :label="item.projectName"
                      :value="item.projectId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-select v-model="RepairSearch.workerId" clearable filterable placeholder="选择维保工">
                    <el-option
                      v-for="item in WorkerList"
                      :key="item.userId"
                      :label="item.name"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item class="inBorderRadius">
                  <el-date-picker
                    v-model="timeDate"
                    @change="changeDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="报修开始时间"
                    end-placeholder="报修结束时间"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item >
                  <el-input
                    placeholder="输入电梯注册代码"
                    v-model="RepairSearch.info"
                  ></el-input>
                </el-form-item>

                <el-form-item >
                  <el-select v-model="RepairSearch.source" clearable filterable placeholder="选择故障来源">
                    <el-option
                      v-for="item in sourceList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item >
                  <el-button type="primary" round @click="searchRepair">查询</el-button>
                  <el-button type="info" plain round @click="setRepair">重置</el-button>
                </el-form-item>
              </el-row>
            </el-form>
            <p class="SearchTitle">
              总记录条数
              <span style="color:#379FFF">{{TitleTotal}}</span>条，符合条件
              <span style="color:#379FFF">{{RepairTotal}}</span>条
            </p>
            <div class="RepairTable">
              <el-table
                ref="multipleTable"
                :data="RepairData"
                style="width: 100%"
                tooltip-effect="dark"
                @selection-change="CompletedhandleSelectionChange"
                class="CompletedTable"
                :header-cell-style="{'background-color':'rgba(250,250,250,1)'}"
                border
                v-loading="RepairDataLoad"
              >
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="areaName" label="区域"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="registrationCode" label="注册代码" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="devicePosition" label="电梯位置" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="workerName" label="维修工"></el-table-column>
                <el-table-column label="故障来源">
                  <template slot-scope="props">
                    <span>{{props.row.source==1?'物业':(props.row.source==2?'维保':(props.row.source==3?'物联':''))}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="召修原因">
                  <template slot-scope="props">
                    <span>{{props.row.repairReason==1?'停电':(props.row.repairReason==2?'故障':(props.row.repairReason==0?'其他':''))}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="callerDate" label="报修时间" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column v-if="RepairStatus==2" prop="stopDate" label="到达时间" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column v-if="RepairStatus==2" prop="stopDate" label="停梯时间" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column v-if="RepairStatus==2" prop="recoveryDate" label="恢复时间" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column v-if="RepairStatus==2" prop="repairDuration" label="急修时长" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" min-width="280px;" fixed="right">
                  <template slot-scope="props">
                    <el-button
                    v-if="RepairStatus==2"
                    type="primary"
                    size="mini"
                    plain
                    class
                    round
                      style="margin-left: 5px;"
                      @click="showRepairpolicy(props.row)"
                    >急修单</el-button>
                    <el-button v-if="RepairStatus==2&&RepairBtn.RepairBtn110" type="success" size="mini"
                    plain
                    class
                    round @click="showRepairpolicyPic(props.row)">急修图片</el-button>
                    <el-button v-if="RepairStatus==2" type="warning" size="mini"
                    plain
                    class
                    round @click="addCollect(props.row)">新增急修收款</el-button>
                    
                    <el-button v-if="RepairStatus==3" type="warning" size="mini"
                    plain
                    class
                    round >查看原因</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagenation">
                <span>
                  <el-pagination
                    background
                    layout="prev, pager, next, sizes, total, jumper"
                    :total="RepairTotal"
                    @current-change="Repairclick"
                    @size-change="RepairhandleSizeChange"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                  ></el-pagination>
                </span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已关闭" name="second">
            <el-form class="TableSelectMain" :model="RepairSearch" :inline="true" label-position="left">
              <el-row>
                <el-form-item >
                  <el-select v-model="RepairSearch.regionId" clearable filterable placeholder="选择区域" @change="getprojectList">
                    <el-option
                      v-for="item in RegionList"
                      :key="item.id"
                      :label="item.areaName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="RepairSearch.projectId" clearable filterable placeholder="选择项目">
                    <el-option
                      v-for="item in RegionProjectList"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="RepairSearch.workerId" clearable filterable placeholder="选择维保工">
                    <el-option
                      v-for="item in WorkerList"
                      :key="item.userId"
                      :label="item.name"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item class="inBorderRadius">
                  <el-date-picker
                    v-model="timeDate"
                    @change="changeDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="报修开始时间"
                    end-placeholder="报修结束时间"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
                
                <el-form-item >
                  <el-input
                    placeholder="输入电梯注册代码"
                    v-model="RepairSearch.info"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-select v-model="RepairSearch.source" clearable filterable placeholder="选择故障来源">
                    <el-option
                      v-for="item in sourceList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" round @click="searchRepair">查询</el-button>
                  <el-button type="info" plain round @click="setRepair">重置</el-button>
                </el-form-item>
              </el-row>
            </el-form>
            <p class="SearchTitle">
              总记录条数
              <span style="color:#379FFF">{{TitleTotal}}</span>条，符合条件
              <span style="color:#379FFF">{{RepairTotal}}</span>条
            </p>
            <div class="RepairTable">
              <el-table
                ref="multipleTable"
                :data="ClosedData"
                style="width: 100%"
                tooltip-effect="dark"
                class="ClosedTable"
                border
                v-loading="RepairDataLoad"
                @selection-change="ClosedDatahandleSelectionChange"
              > 
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="areaName" label="区域"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="registrationCode" label="注册代码" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="devicePosition" label="电梯位置" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="workerName" label="维修工"></el-table-column>
                <el-table-column label="故障来源">
                  <template slot-scope="props">
                    <span>{{props.row.source==1?'物业':(props.row.source==2?'维保':(props.row.source==3?'物联':''))}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="召修原因">
                  <template slot-scope="props">
                    <span>{{props.row.repairReason==1?'停电':(props.row.repairReason==2?'故障':(props.row.repairReason==0?'其他':''))}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="callerDate" label="报修时间" min-width="100px" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" min-width="100px;" >
                  <template slot-scope="props">
                    <el-button type="success" size="mini"
                    plain
                    class
                    round @click="closeReason(props.row)">查看原因</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagenation">
                <span>
                  <el-pagination
                    background
                    layout="prev, pager, next, sizes, total, jumper"
                    :total="ClosedData.length"
                    @current-change="click"
                    @size-change="handleSizeChange"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                  ></el-pagination>
                </span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    
    <!--电梯急修单-->
    <div class="Repairpolicy">
      <el-dialog
        title="电梯急修单"
        :visible.sync="dialogRepairpolicy"
        width="70%"
        :before-close="handleClose"
      >
        <div class="RepairpolicyContent">
          <div class="RepairpolicyContentTop">
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >项目编号：{{RepairpolicyData.projectCode}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >项目名称：{{RepairpolicyData.projectName}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >注册代码：{{RepairpolicyData.registrationCode}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >项目地址：{{RepairpolicyData.position}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10"
              >报修时间：{{RepairpolicyData.callerDate}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10"
              >派工时间：{{RepairpolicyData.assignTime}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10"
              >接单时间：{{RepairpolicyData.takingTime}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10 bB mb5"
              >到达时间：{{RepairpolicyData.arriveTime}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10 bB mb5"
              >停梯时间：{{RepairpolicyData.stopDate}}</el-col>
              <el-col
                :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                class="pb10 bB mb5"
              >恢复时间：{{RepairpolicyData.recoveryDate}}</el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >故障部位：{{splitObj(RepairpolicyData.faultParts,2)}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >故障原因：{{splitObj(RepairpolicyData.faultReasons,2)}}</el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >故障处理：{{splitObj(RepairpolicyData.faultHandles,1)}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >故障性质：{{splitObj(RepairpolicyData.faultNatures,1)}}</el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10 bB mb5"
              >故障责任：{{splitObj(RepairpolicyData.faultDuties,1)}}</el-col>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10 bB mb5"
              >现场描述：{{RepairpolicyData.fieldDescription}}</el-col>
            </el-row>
            <el-row>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                <el-row>更换配件：{{RepairpolicyData.sparepart}}</el-row>
                <el-row>配件费&nbsp&nbsp&nbsp&nbsp：{{RepairpolicyData.partsCost}}</el-row>
                <el-row>工时费&nbsp&nbsp&nbsp&nbsp：{{RepairpolicyData.charge}}</el-row>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                <el-row>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6">维保签名：</el-col>
                  <el-col :xs="8" :sm="8" :md="6" :lg="6">
                    <img :src="RepairpolicyData.mainSign" width="100%" height="50" />
                  </el-col>
                  <el-col :xs="8" :sm="8" :md="6" :lg="6">
                    <img :src="RepairpolicyData.secondSign" width="100%" height="50" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div class="RepairpolicyContentBottom">
            <el-row class="mt10">
              <el-col
                :xs="6"
                :sm="6"
                :md="6"
                :lg="6"
                class="pb10"
              >急修负责人：{{RepairpolicyData.workerName}}</el-col>
              <el-col
                :xs="6"
                :sm="6"
                :md="6"
                :lg="6"
                class="pb10"
              >联系电话：{{RepairpolicyData.workerTel}}</el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" class="pb10">
                服务态度：{{RepairpolicyData.evaluation?(RepairpolicyData.evaluation.serviceLevel == 1
                ? "★☆☆☆☆"
                : RepairpolicyData.evaluation.serviceLevel == 2
                ? "★★☆☆☆"
                : RepairpolicyData.evaluation.serviceLevel == 3
                ? "★★★☆☆"
                : RepairpolicyData.evaluation.serviceLevel == 4
                ? "★★★★☆"
                : RepairpolicyData.evaluation.serviceLevel == 5
                ? "★★★★★"
                : ""):''}}
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" class="pb10">
                急修满意度：{{RepairpolicyData.evaluation?(RepairpolicyData.evaluation.starLevel == 1
                ? "★☆☆☆☆"
                : RepairpolicyData.evaluation.starLevel == 2
                ? "★★☆☆☆"
                : RepairpolicyData.evaluation.starLevel == 3
                ? "★★★☆☆"
                : RepairpolicyData.evaluation.starLevel == 4
                ? "★★★★☆"
                : RepairpolicyData.evaluation.starLevel == 5
                ? "★★★★★"
                : ""):''}}
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >急修意见：{{RepairpolicyData.evaluation?RepairpolicyData.evaluation.advice:""}}</el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                <el-row>
                  <el-col :xs="6" :sm="6" :md="6" :lg="6">客户签名：</el-col>
                  <el-col :xs="10" :sm="8" :md="6" :lg="6">
                    <img :src="RepairpolicyData.evaluation?RepairpolicyData.evaluation.imgUrl:''" width="100%" height="50" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="12"
                :sm="12"
                :md="12"
                :lg="12"
                class="pb10"
              >电梯位置：{{RepairpolicyData.devicePosition}}</el-col>
            </el-row>
          </div>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogRepairpolicy = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>


    <div class="Repairpolicy">
      <el-dialog
        title="电梯急修单"
        :visible.sync="dialogRepairpolicys"
        width="70%"
        :before-close="handleClose"
      >
        <div id="planPrint">
          <div class="RepairpolicyContent" v-for="item in RepairpolicyDatas" :key="item.id">
            <div class="RepairpolicyContentTop">
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >项目编号：{{item.projectCode}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >项目名称：{{item.projectName}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >注册代码：{{item.registrationCode}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >项目地址：{{item.position}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10"
                >报修时间：{{item.callerDate}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10"
                >派工时间：{{item.assignTime}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10"
                >接单时间：{{item.takingTime}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10 bB mb5"
                >到达时间：{{item.arriveTime}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10 bB mb5"
                >停梯时间：{{item.stopDate}}</el-col>
                <el-col
                  :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  class="pb10 bB mb5"
                >恢复时间：{{item.recoveryDate}}</el-col>
              </el-row>
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >故障部位：{{splitObj(item.faultParts,2)}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >故障原因：{{splitObj(item.faultReasons,2)}}</el-col>
              </el-row>
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >故障处理：{{splitObj(item.faultHandles,1)}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >故障性质：{{splitObj(item.faultNatures,1)}}</el-col>
              </el-row>
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10 bB mb5"
                >故障责任：{{splitObj(item.faultDuties,1)}}</el-col>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10 bB mb5"
                >现场描述：{{item.fieldDescription}}</el-col>
              </el-row>
              <el-row>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                  <el-row>更换配件：{{item.sparepart}}</el-row>
                  <el-row>配件费&nbsp&nbsp&nbsp&nbsp：{{item.partsCost}}</el-row>
                  <el-row>工时费&nbsp&nbsp&nbsp&nbsp：{{item.charge}}</el-row>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                  <el-row>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">维保签名：</el-col>
                    <el-col :xs="8" :sm="8" :md="6" :lg="6">
                      <img :src="item.mainSign" width="100%" height="50" />
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="6" :lg="6">
                      <img :src="item.secondSign" width="100%" height="50" />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div class="RepairpolicyContentBottom">
              <el-row class="mt10">
                <el-col
                  :xs="6"
                  :sm="6"
                  :md="6"
                  :lg="6"
                  class="pb10"
                >急修负责人：{{item.workerName}}</el-col>
                <el-col
                  :xs="6"
                  :sm="6"
                  :md="6"
                  :lg="6"
                  class="pb10"
                >联系电话：{{item.workerTel}}</el-col>
                <el-col :xs="6" :sm="6" :md="6" :lg="6" class="pb10">
                  服务态度：{{item.serviceLevel == 1
                  ? "★☆☆☆☆"
                  : item.serviceLevel == 2
                  ? "★★☆☆☆"
                  : item.serviceLevel == 3
                  ? "★★★☆☆"
                  : item.serviceLevel == 4
                  ? "★★★★☆"
                  : item.serviceLevel == 5
                  ? "★★★★★"
                  : ""}}
                </el-col>
                <el-col :xs="6" :sm="6" :md="6" :lg="6" class="pb10">
                  急修满意度：{{item.starLevel == 1
                  ? "★☆☆☆☆"
                  : item.starLevel == 2
                  ? "★★☆☆☆"
                  : item.starLevel == 3
                  ? "★★★☆☆"
                  : item.starLevel == 4
                  ? "★★★★☆"
                  : item.starLevel == 5
                  ? "★★★★★"
                  : ""}}
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >急修意见：{{item.advice}}</el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" class="pb10">
                  <el-row>
                    <el-col :xs="6" :sm="6" :md="6" :lg="6">客户签名：</el-col>
                    <el-col :xs="10" :sm="8" :md="6" :lg="6">
                      <img :src="item.customerSign" width="100%" height="50" />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  :xs="12"
                  :sm="12"
                  :md="12"
                  :lg="12"
                  class="pb10"
                >电梯位置：{{item.devicePosition}}</el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogRepairpolicys = false">取 消</el-button>
          <el-button type="primary" @click="getPrint">打 印</el-button>
        </div>
      </el-dialog>
    </div>

    <!--急修图片-->
    <div class="RepairpolicyPic">
      <el-dialog
        title="急修图片"
        :visible.sync="dialogRepairpolicyPic"
        width="40%"
        :before-close="handleClose"
      >
        <div class="block">
          <el-carousel height="350px">
            <el-carousel-item v-for="item in RepairpolicyPicData" :key="item.id">
              <el-image :src="item.imgUrl" fit="fill"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogRepairpolicyPic = false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="急修收款"
        :visible.sync="pageCondition.isDialog"
        width="900px"
        :before-close="pageClose"
      >
        <div>
          <el-form :model="dialogData" class="pageCondition"> 
            <el-row type="flex">
              <el-col :span="3" :offset="1">
                <span>项目名称:</span>
              </el-col>
              <el-col :span="7">
                <span>{{dialogData.projectName}}</span>
              </el-col>
              <el-col :span="3">
                <span>项目地址:</span>
              </el-col>
              <el-col :span="7">
                <span>{{dialogData.projectAddress}}</span>
              </el-col>
            </el-row>
            <el-row type="flex" style="margin:15px 0">
              <el-col :span="3" :offset="1">
                <span>金额:</span>
              </el-col>
              <el-col :span="7">
                <span>{{dialogData.costTotal}}</span>
              </el-col>
            </el-row>
            <h3 style="margin-bottom:15px">收款项目：</h3>
            <div>
              <el-row type="flex" justify="start" class="headerColor">
                <el-col :span="7" class="TXc">项目名称</el-col>
                <el-col :span="7" class="TXc">项目描述</el-col>
                <el-col :span="5" class="TXc">应收金额</el-col>
                <el-col :span="4"></el-col>
              </el-row>
              <div v-if="erRecordCosts.length==0" class="ftitle">暂无数据</div>
              <el-row
                v-for="(item,i) in erRecordCosts"
                :key="i"
                type="flex"
                justify="start"
                v-else
                class="MoneyInput">
                <el-col :span="7">
                  <div>
                    <el-input v-model="item.costName"></el-input>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div>
                    <el-input v-model="item.costDesc"></el-input>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div>
                    <el-input v-model="item.costMoney"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button size="mini" type="success" plain @click="deleteNper(item,i)">删除</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="MarB10 marT10">
              <el-button @click="addCollection" type="primary" plain size="mini">添加收款项目</el-button>
            </div>
          </el-form >
          <div>
            <div style="text-align:center">
              <el-button type="primary" size="small" round @click="changeDiaData">确认</el-button>
              <el-button type="info" size="small" plain round @click="pageClose">取消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>

    <!--关闭原因-->
    <div class="closeReason">
      <el-dialog
        title="关闭原因"
        :visible.sync="dialogcloseReason"
        width="30%"
        :before-close="handleClose"
      >
        <p>{{closeReasonData}}</p>
        <div slot="footer" class="dialog-footer Txc">
          <el-button type="primary" @click="dialogcloseReason = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "Repair",
  data() {
    return {
      activeName: "first",
      RepairStatus:2,
      CompletedChoose:[],
      ClosedDataChoose:[],
      handleClose: null,
      //分页
      pagesize: 10,
      currpage: 1,
      RepairTotal:10,
      RepairSearch: {
        regionId: "",
        projectId: "",
        workerId: "",
        repairEnd: "",
        repairBegin: "",
        info:"",
        source:""
      },
      timeDate:['',''],
      sourceList:[
        {
          value:1,
          name:"物业"
        },{
          value:2,
          name:"维保"
        },{
          value:3,
          name:"物联"
        },
      ],
      RepairData: [],
      RepairDataLoad:false,
      ClosedData: [
        {
          ArriveTime: null,
          AssignTime: "/Date(1566787090000)/",
          CallerDate: "/Date(1566838830000)/",
          CallerFaultDescription: "55",
          CallerName: "",
          CallerTel: "0          ",
          Coordinate: "114.245738,30.600100",
          CreateDate: "/Date(1566787090000)/",
          CreatorName: "彭丹",
          EmergencyRepairID: 1001111107979,
          IsCritical: 1,
          IsTrapped: 1,
          LiftCode: "FT000007",
          LiftID: 1001105202115,
          LiftStatus: 2,
          Position: "一楼大厅",
          ProjectName: "香海园",
          ProjectUser: null,
          RecoveryDate: null,
          RecoveryTime: null,
          RegionID: 10011312844,
          RegionName: "泛海国际",
          RegistrationCode: "1111111111",
          RepairReason: 1,
          Source: 4,
          Status: 6,
          StopDate: null,
          StopTime: null,
          TakingTime: null,
          WorkerID: 1001101131069,
          WorkerName: "彭丹"
        }
      ],
      RegionList: [],
      RegionProjectList: [],
      ProjectLiftList: [
        {
          ID: 1001105202111,
          Name: "二栋一楼(9876543210)"
        },
        {
          ID: 1001105202112,
          Name: "二栋十楼(8888888888)"
        }
      ],
      // 急修收款
      pageCondition: {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        projectId: "",
        projectIdOne: "",
        projectOption: [],
        workerId: "",
        workerIdOne: "",
        workerIdOption: [],
        infoOne: "",
        info: "",
        repairBeginOne: "",
        repairBegin: "",
        repairEndOne: "",
        repairEnd: "",
        total: 0,
        pageNum: 1,
        pageSize: 15,
        tableData: [],
        isDialog: false,
        listDiaData: []
      },
      emercyList: {},
      dialogData: {},
      erRecordCosts:[],
      addCollectId:'',
      WorkerList: [
       
      ],
      RepairpolicyDatas:[],
      //电梯急修单
      dialogRepairpolicy: false,
      dialogRepairpolicys: false,
      RepairpolicyData: {
        evaluation:{

        }
      },
      //急修图片
      dialogRepairpolicyPic:false,
      RepairpolicyPicData: [
      {
          imgUrl:
            "",
          MTRecordID: 10011091049211,
          id: 1
        },
        {
          imgUrl:
            '',
          MTRecordID: 10011091049193,
          id: 2
        }
      ],
      
      dialogcloseReason:false,
      closeReasonData:"",
      TitleTotal:"",
      RepairBtn:{
        RepairBtn110:0,
        RepairBtn111:0,
        RepairBtn112:0,
      }
    };
  },
  created() {
    this.getRegionList();
    this.getWorker()
    this.getRepairData(2,1,10)

    var RepairBtn = {}
    this.getButton(109).then(result => {
      if (result.data.statusCode==="1") {
        RepairBtn = result.data.data
        RepairBtn.map((item)=>{
          if(item.id==110){
            this.RepairBtn.RepairBtn110 = item.checked?1:0 
          }else if(item.id==111){
            this.RepairBtn.RepairBtn111 = item.checked?1:0  
          }else if(item.id==112){
            this.RepairBtn.RepairBtn112 = item.checked?1:0  
          }
        })
        console.log(this.RepairBtn.RepairBtn56)
      }
    });
  },
  methods: {
    changeRepair(tab, event) {
      if (tab.$el.id == "pane-first") {
        this.RepairStatus = 2;
        this.RepairSearch= {
          regionId: "",
          projectId: "",
          workerId: "",
          repairEnd: "",
          repairBegin: "",
          info:"",
          source:""
        }
        this.timeDate=['','']
        this.getRepairData(2,1,10)
      } else if (tab.$el.id == "pane-second") {
        this.RepairStatus = 3;
        this.RepairSearch= {
          regionId: "",
          projectId: "",
          workerId: "",
          repairEnd: "",
          repairBegin: "",
          info:"",
          source:""
        }
        this.timeDate=['','']
        this.getRepairData(3,1,10)
      }
    },
    CompletedhandleSelectionChange(val) {
      this.CompletedChoose = val
      console.log(val);
    },
    ClosedDatahandleSelectionChange(val) {
      this.ClosedDataChoose = val
      console.log(val);
    },
    exportExcel() {
      if(this.RepairStatus==2){
        if (this.CompletedChoose.length == 0) {
          this.$message({
            message: "请先选择急修单",
            type: "warning"
          });
        } else {
          var list = [];
          for(var i=0;i<this.CompletedChoose.length;i++){
            list.push(this.CompletedChoose[i].id,)
          }
          var url = "business/emergency/emergency-repair/export";
          var param = {
            ids: list
          };
          this.axios.post(url, param, { responseType: "arraybuffer" }).then(res => {
            const aLink = document.createElement("a");
            let blob = new Blob([res], { type: "application/zip" });
            aLink.href = URL.createObjectURL(blob);
            aLink.setAttribute("download", "急修单已完成列表");
            aLink.click();
          });
        }
      }else{
        if (this.ClosedDataChoose.length == 0) {
          this.$message({
            message: "请先选择急修单",
            type: "warning"
          });
        } else {
          var list = [];
          for(var i=0;i<this.ClosedDataChoose.length;i++){
            list.push(this.ClosedDataChoose[i].id,)
          }
          var url = "business/emergency/emergency-repair/export";
          var param = {
            ids: list
          };
          this.axios.post(url, param, { responseType: "arraybuffer" }).then(res => {
            const aLink = document.createElement("a");
            let blob = new Blob([res], { type: "application/zip" });
            aLink.href = URL.createObjectURL(blob);
            aLink.setAttribute("download", "急修单已关闭列表");
            aLink.click();
          });
        }
      } 
      
      
    },
    PrintRepair(){
      if (this.CompletedChoose.length == 0) {
        this.$message({
          message: "请先选择急修单",
          type: "warning"
        });
      } else {
        var list = [];
        for(var i=0;i<this.CompletedChoose.length;i++){
          list.push(this.CompletedChoose[i].id,)
        }
        var url = "business/emergency/emergency-repair/print";
        var param = {
          ids: list
        };
        this.axios.post(url, param).then(res => {
          var data = res;
          if(data.statusCode==="1"||data.statusCode==="9"){
            this.dialogRepairpolicys = true
            this.RepairpolicyDatas = data.data?data.data:[]
            console.log(this.RepairpolicyDatas)
            
          }
        });
      }
    },
    pageClose() {
      this.pageCondition.listDiaData = [
        {
          costName: "",
          costMoney: "",
          costDesc: "",
        }
      ];
      this.pageCondition.isDialog = false;
    },
    getPrint(){
      var dom = document.getElementById('planPrint');
        let newContent =dom.innerHTML;
        let oldContent = document.body.innerHTML;
        document.body.innerHTML = newContent;
        window.print();
        window.location.reload();
        document.body.innerHTML = oldContent;
        // var win = window.open('');
    },
    // 分页显示条数
    RepairhandleSizeChange(val) {
      this.pagesize = val;
      this.getRepairData(this.RepairStatus,this.currpage,val)
    },
    // 分页页码
    Repairclick(val) {
      this.currpage = val;
      this.getRepairData(this.RepairStatus,val,this.pagesize)
    },
    handleSizeChange(val) {

    },
    click(val) {},
    //获取区域下拉框数据
    getRegionList(){
      var url = "enterprise/region/project/regions";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem('mtCompanyId'))
        // mtCompanyId:1001102100031
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.RegionList = data.data
        }else{
          this.$message.error(data.message);
        }
       
        console.log(data.data)
      })
    },
    changeDate(val){
     this.RepairSearch.repairBegin=val[0];
     this.RepairSearch.repairEnd=val[1];
    },
   
    //获取急修记录
    getRepairData(status,pageNum,pageSize) {
      this.RepairDataLoad = true;
      var url = "business/emergency/emergency-repair/page";
      var param = {
        mtCompanyId:JSON.parse(sessionStorage.getItem('mtCompanyId')),
        status: status,
        pageNum: pageNum,
        pageSize: pageSize
      };
      this.RepairSearch.regionId?(param.regionId=this.RepairSearch.regionId):""
      this.RepairSearch.projectId?(param.projectId=this.RepairSearch.projectId):""
      this.RepairSearch.workerId?(param.workerId=this.RepairSearch.workerId):""
      this.RepairSearch.repairBegin?(param.repairBegin=this.RepairSearch.repairBegin):""
      this.RepairSearch.repairEnd?(param.repairEnd=this.RepairSearch.repairEnd):""
      this.RepairSearch.info?(param.info=this.RepairSearch.info):""
      this.RepairSearch.source?(param.source=this.RepairSearch.source):""
      this.axios.post(url, param).then(result => {
        var data = result;
        console.log(data)
        if(data.statusCode) this.RepairDataLoad = false;
        if(data.statusCode==="1"||data.statusCode==="9"){
          if(status==2){
            this.RepairData = data.data.page.rows
          }else if(status==3){
            this.ClosedData = data.data.page.rows
          }
          this.RepairTotal = data.data.page.total;
          this.TitleTotal = data.data.count
        }else{
          this.$message.error(data.message);
        }
      });
    },
    getprojectList(){
      var url = "business/project/projectIDList";
      var param = {
        regionId:this.RepairSearch.regionId
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.RegionProjectList = data.data
        }
      });
    },
    getWorker(){
      var url = "system/companyuser/getCompanyMembers";
      var param = {
        companyId:JSON.parse(sessionStorage.getItem('mtCompanyId')),
        roleCode:"ROLEMTWORK"
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.WorkerList = data.data
        }
      });
    },
    addCollect(row) {
      // this.pageCondition.dialogData = row;
      this.erRecordCosts=[]
      this.addCollectId = row.id
      var url = "business/emergency/emergency-repair/findOne";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        id: row.id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var data = res
          this.dialogData = data.data?data.data:{}
          this.erRecordCosts = data.data.erRecordCosts?data.data.erRecordCosts:[]
          this.pageCondition.isDialog = true
        } else {
          this.$message.error(res.message);
        }
      });
    },
    showRepairpolicy(row) {
      var url = "business/emergency/emergency-repair/findOne";
      var param = {
        id:row.id
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.RepairpolicyData = data.data
          console.log(this.RepairpolicyData)
        }
      });
      this.dialogRepairpolicy = true;
    },
    splitObj(obj, index) {
      var html = "";
      if (obj) {
        if (index == 1) {
          for (var i = 0; i < obj.length; i++) {
            html += i + 1 + "." + obj[i].faultType + ",";
          }
        } else if (index == 2) {
          for (var i = 0; i < obj.length; i++) {
            html += i + 1 + "." + obj[i].faultDesc + ",";
          }
        }
        html = html.substring(0, html.length - 1);
        return html;
      } else {
        return html;
      }
    },
    showRepairpolicyPic(row){
      var url = "business/emergency/emergency-repair/images";
      var param = {
        id:row.id
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.RepairpolicyPicData = data.data
          console.log(this.RepairpolicyData)
        }
      });
        this.dialogRepairpolicyPic = true
    },
    addCollection() {
      let a = {
        costName: "",
        costDesc: "",
        costMoney: "",
      };
      this.erRecordCosts.push(a);
    },
    deleteNper(item, i) {
      this.erRecordCosts.splice(i, 1);
    },
    changeDiaData(){
      var url = "business/emergency/emergency-repair/addCost";
      this.erRecordCosts.map((item)=>{
        item.erRecordId = this.addCollectId;
        return item
      })
      var param = {
        id:this.addCollectId,
        erRecordCosts:this.erRecordCosts
      };
      this.axios.post(url, param).then(result => {
        var data = result;
        if(data.statusCode==="1"||data.statusCode==="9"){
          this.getRepairData(this.RepairStatus,this.currpage,this.pagesize)
          this.pageCondition.isDialog = false
        }
      });
    },
    closeReason(row){
        this.closeReasonData = row.closeReason
        this.dialogcloseReason = true;
    },
    searchRepair(){
      this.getRepairData(this.RepairStatus,this.currpage,this.pagesize)
    },
    setRepair(){
      this.RepairSearch.regionId=""
      this.RepairSearch.projectId=""
      this.RepairSearch.workerId=""
      this.RepairSearch.repairBegin=""
      this.RepairSearch.repairEnd=""
      this.RepairSearch.info=""
      this.RepairSearch.source=""
      this.timeDate = ['','']
      this.getRepairData(this.RepairStatus,this.currpage,this.pagesize)
    }
  }
};
</script>
<style lang="stylus">
$ft14 = 14px;

.Repair {
  height: 100%;
  .RepairMain {
    height: 100%;
    background: #fff;
    .TableSelectMain {
      .inBorderRadius .el-input__inner {
          border-radius: 20px;
          height: 32px;
          line-height: 26px;  
          i.el-input__icon.el-range__icon.el-icon-date {
              line-height: 26px;
          }
          .el-range-separator {
              line-height: 26px;
              width: auto;
          }
      }
    }
    
  }
  .pageCondition{
    font-size:16px
    
    .headerColor {
        background: #f3f3f3;
        padding: 10px 30px;
        font-size:14px
    }
    .MoneyInput.el-row.el-row--flex {
        margin: 20px 30px 0 30px;
        .el-col {
            text-align: center;
        }
    }
    .ftitle {
        padding: 20px;
        text-align: center;
        font-size: 20px;
        color: #e9e9e9;
    }
    
  }

  .cell {
    text-align: center;
  }

  

  .TableSelect {
    font-size: $ft14;
    padding: 10px 20px;

    .el-button {
      padding: 12px 10px;
    }
    
  }

  .CompletedTable {
    .el-button {
      padding: 10px;
      border-radius: 10px;
    }
    
  }

  .ClosedTable {
    .el-button {
      padding: 10px;
      border-radius: 10px;
    }
  }

  .Repairpolicy {
    .el-dialog__body {
      padding: 5px 20px;
    }

    .RepairpolicyContent {
      margin-bottom: 20px;
      .RepairpolicyContentTop {
        border: 1px solid #dfdfdf;
        padding: 10px;
      }

      .RepairpolicyContentBottom {
      }
    }
  }

  .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
  }
  .RepairpolicyPic {
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
.el-tabs--border-card.BCtabs .el-tabs__header.is-top {
    margin: 10px 20px;
}
</style>

