<template>
  <div>
    <el-col :span="11">
      <el-card style="height: 270px;padding: 0px 8px 0px 8px">
        <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="所在部门" prop="department">
                <el-input v-model="form.department" style="width:90%;height: 50px"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在科室" prop="section">
                <el-input v-model="form.section" style="width:90%;height: 50px"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作地点" prop="position">
                <el-input v-model="form.position" style="width:90%;height: 50px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="计划工时(小时)" prop="hours">
                <el-input v-model="form.hours" style="width:90%;height: 50px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所需维修人员(人数)" prop="peopleNum">
                <el-input v-model="form.peopleNum" style="width:90%;height: 50px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划工作时间" prop="time">
                <el-date-picker
                  v-model="form.time"
                  :default-time="['00:00:00', '23:59:59']"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="height: 40px"
                  size="large"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item >
              <el-button class="button11" style="width: 100px;font-size: 16px" @click="submitOrder('form')">下  单</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
      <el-card style="height: 580px;padding: 0px 8px 0px 0px" class="card1">
        <el-tabs v-model="activeName">
          <el-tab-pane label="当前" name="1">
            <el-table
              v-loading="loading"
              :data="tableData"
              :header-cell-style="tableHeaderColor"
              :cell-style="tableColor"
              highlight-current-row
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              tooltip-effect="dark"
              style="width: 100%"
              height="470px">
              <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" label="状态" prop="状态" min-width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.状态代码 === 1 || scope.row.状态代码 === 2" color="rgb(227,0,21)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                  <el-tag v-if="scope.row.状态代码 === 4" color="rgb(0,142,207)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                  <el-tag v-if="scope.row.状态代码 === 3" color="rgb(255,165,0)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" label="申请人" prop="申请人" min-width="70" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.申请人姓名 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="开始时间" prop="开始时间" min-width="130" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.开始时间 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="持续时长" min-width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.持续时长 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="操作" min-width="60" show-overflow-tooltip >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    style="font-size: 16px;padding: 0px"
                    @click="deleteOrder(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 5px">
              <el-pagination
                :current-page="pageCurrent"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
            </div>
          </el-tab-pane>
          <el-tab-pane label="历史" name="2">
            <el-table
              v-loading="loading"
              :data="tableData1"
              :header-cell-style="tableHeaderColor"
              :cell-style="tableColor"
              highlight-current-row
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              tooltip-effect="dark"
              style="width: 100%"
              height="470px">
              <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" label="状态" prop="状态" min-width="75" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag color="green" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" label="申请人" prop="申请人" min-width="70" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.申请人姓名 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="开始时间" prop="开始时间" min-width="130" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.开始时间 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="持续时长" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.持续时长 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="操作" min-width="60" show-overflow-tooltip >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    style="font-size: 16px;padding: 0px"
                    @click="deleteOrder(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 5px">
              <el-pagination
                :current-page="pageCurrent1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize1"
                :total="total1"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"/>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="13">
      <el-card v-if="orderCurrentValue" style="height: 850px;overflow:scroll">
        <div>
          <div class="div5" style="font-size: 24px">{{ orderCurrent.工单号 }}</div>
          <el-card class="card">
            <el-table
              v-loading="loading"
              :data="orderTableData"
              :header-cell-style="tableHeaderColor1"
              :cell-style="tableColor1"
              element-loading-spinner="el-icon-loading"
              tooltip-effect="dark"
              style="width: 100%;margin-bottom: 20px">
              <el-table-column align="left" label="状态" min-width="70" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tag v-if="orderCurrent.状态代码 === 1 || orderCurrent.状态代码 === 2" color="rgb(227,0,21)" type="info" size="mini" >{{ orderCurrent.状态 }}</el-tag>
                  <el-tag v-if="orderCurrent.状态代码 === 4" color="rgb(0,142,207)" type="info" size="mini" >{{ orderCurrent.状态 }}</el-tag>
                  <el-tag v-if="orderCurrent.状态代码 === 3" color="rgb(255,165,0)" type="info" size="mini" >{{ orderCurrent.状态 }}</el-tag>
                  <el-tag v-if="orderCurrent.状态代码 === 5" color="rgb(115,168,57)" type="info" size="mini" >{{ orderCurrent.状态 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="left" label="所在部门" prop="所在部门" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ orderCurrent.所在部门 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="所在科室" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ orderCurrent.所在科室 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="工作地点" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ orderCurrent.工作地点 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="计划工时" min-width="70" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ orderCurrent.计划工时 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="所需维修人员" min-width="80" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ orderCurrent.所需维修人员 }}</span>
                </template>
              </el-table-column>
            </el-table>
            <span style="font-size: 18px">实际总工时：</span>
            <el-tag v-if="orderCurrent.实际总工时" color="rgb(0,142,207)" size="mini" type="info" >{{ orderCurrent.实际总工时 }}小时</el-tag>
            <el-tag v-else color="rgb(0,142,207)" size="mini" type="info" >0小时</el-tag>
          </el-card>
          <div class="div5">工作流及状态</div>
          <el-card class="card">
            <el-table
              v-loading="loading"
              :data="statusTableData"
              :header-cell-style="tableHeaderColor1"
              :cell-style="tableColor1"
              element-loading-spinner="el-icon-loading"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column align="center" label="人员安排">
                <template slot-scope="scope">
                  <el-button
                    :disabled="orderCurrent.状态代码 ===4 ||orderCurrent.状态代码 === 5 "
                    style="height: 50px;width: 140px"
                    class="button11"
                    @click="statusArrange()">安排</el-button>
                  <el-tag v-if="orderCurrent.安排时间" color="rgb(0,142,207)" size="mini" type="info" style="margin-top: 2px">{{ orderCurrent.安排时间 }}</el-tag>
                  <div v-else style="width: 100%;height: 25px"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="人员到场" min-width="90">
                <template slot-scope="scope">
                  <el-button
                    :disabled="orderCurrent.状态代码 ===1 || orderCurrent.状态代码 === 3 || orderCurrent.状态代码 === 4 || orderCurrent.状态代码 === 5"
                    style="height: 50px;width: 140px"
                    class="button11"
                    @click="statusReach()">到场确认</el-button>
                  <el-tag v-if="orderCurrent.到场时间" color="rgb(0,142,207)" size="mini" type="info" style="margin-top: 2px">{{ orderCurrent.到场时间 }}</el-tag>
                  <div v-else style="width: 100%;height: 25px"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="维修完成" min-width="90">
                <template slot-scope="scope">
                  <el-button
                    :disabled="orderCurrent.状态代码 ===1 || orderCurrent.状态代码 === 2 || orderCurrent.状态代码 === 4 || orderCurrent.状态代码 === 5"
                    style="height: 50px;width: 140px"
                    class="button11"
                    @click="statusRepair()">维修完成</el-button>
                  <el-tag v-if="orderCurrent.完成时间" color="rgb(0,142,207)" size="mini" type="info" style="margin-top: 2px">{{ orderCurrent.完成时间 }}</el-tag>
                  <div v-else style="width: 100%;height: 25px"/>
                </template>
              </el-table-column>
              <el-table-column align="center" label="生产接受并确认" min-width="90">
                <template slot-scope="scope">
                  <el-button
                    :disabled="orderCurrent.状态代码 ===1 || orderCurrent.状态代码 === 2 || orderCurrent.状态代码 === 3 || orderCurrent.状态代码 === 5 || orderCurrent.是否录入维修内容 === 0"
                    class="button11"
                    style="height: 50px;width: 140px"
                    @click="statusAccept()">确认接受</el-button>
                  <el-tag v-if="orderCurrent.确认时间" color="rgb(0,142,207)" size="mini" type="info" style="margin-top: 2px">{{ orderCurrent.确认时间 }}</el-tag>
                  <div v-else style="width: 100%;height: 25px"/>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-row style="margin: 0px 10px 40px 10px">
            <el-col :span="5">
              <el-button size="large" class="button12" @click="safety()">安全注意事项</el-button>
            </el-col>
            <el-col :span="7">
              <el-button size="large" class="button12" @click="orderMap()">操作轨迹</el-button>
            </el-col>
            <el-col :span="4">
              <div style="font-size: 18px;margin-top: 10px;margin-left: 10%">维修技术员:</div>
            </el-col>
            <el-col :span="8">
              <div v-if="orderCurrent.维修人员姓名">
                <el-tag v-for="(order,index) in orderCurrent.维修人员姓名" :key="index" color="rgb(115,168,57)" size="large" type="info" style="margin: 5px 5px">{{ order }}</el-tag>
              </div>
              <el-tag v-else color="rgb(227,0,21)" size="large" type="info" style="margin: 5px 5px">N/A</el-tag>
            </el-col>
          </el-row>
          <div class="div5">维修内容</div>
          <el-card class="card">
            <el-button
              :disabled="orderCurrent.状态代码 ===1 || orderCurrent.状态代码 === 2 || orderCurrent.状态代码 === 3 || contentCount !== 0"
              class="button12"
              style="background-color: white;"
              @click="entryContent()">录入维修内容</el-button>
            <span style="margin-left: 20px">请点击按钮录入维修内容</span>
            <el-table
              v-loading="loading"
              v-if=" contentCount !== 0"
              :data="contentServiceTableData"
              :header-cell-style="tableHeaderColor1"
              :cell-style="tableColor2"
              element-loading-spinner="el-icon-loading"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 30px">
              <el-table-column align="left" label="工作内容" min-width="120" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.现场解决措施 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="填写人" min-width="50" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.填写人 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" label="编辑" min-width="50" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button :disabled="orderCurrent.状态代码 ===1 || orderCurrent.状态代码 === 2 || orderCurrent.状态代码 === 3" size="mini" type="text" icon="el-icon-edit" @click="editContent(scope.row)"/>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <div v-if="assessCount !== 0" class="div5">评价及意见</div>
          <el-card v-if="assessCount !== 0" class="card">
            <el-row>
              <div>
                <el-rate v-model="assessValue" class="rate1" style="margin-left: 70px"/>
                <el-table
                  v-loading="loading"
                  :data="assessTableData"
                  :header-cell-style="tableHeaderColor1"
                  :cell-style="tableColor1"
                  element-loading-spinner="el-icon-loading"
                  tooltip-effect="dark"
                  style="width: 90%;margin-top: 10px;margin-left: 70px">
                  <el-table-column align="left" label="评价及意见" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.评价及意见 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="创建人" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.创建人 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="创建时间" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{ scope.row.创建时间 }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-row>
          </el-card>
        </div>
      </el-card>
      <!--    人员安排-->
      <el-dialog :title="arrangeTitle" :visible.sync="arrangeDialogFormVisible" width="50%" class="dialog1">
        <div style="width: 100%;height: 54px;background-color: rgb(245,245,245)">
          <el-input
            v-model="arrangementInput"
            placeholder="search"
            size="middle"
            style="width: 180px;margin: 7px 15px"
            suffix-icon="el-icon-search"
            @input="getRepairman()"/>
        </div>
        <el-table
          v-loading="loading"
          :data="arrangeTableData"
          :header-cell-class-name="arrangeCellHeader"
          :cell-class-name="arrangeTableCell"
          :header-cell-style="tableHeaderColor"
          :cell-style="tableColor1"
          element-loading-spinner="el-icon-loading"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="peopleSelectionChange">
          <el-table-column type="selection" width="55"/>
          <el-table-column align="left" label="姓名" min-width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.姓名 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="技能" min-width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.技能" color="rgb(0,142,207)" size="mini" type="info" > {{ scope.row.技能 }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="left" label="等级" min-width="60" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.等级 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="状态" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.维修工单号" color="rgb(153,153,153)" size="mini" type="info" >{{ scope.row.维修工单号 }}</el-tag>
              <el-tag v-else color="rgb(115,168,57)" size="mini" type="info" > 空闲 </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" min-width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button v-if="scope.row.维修工单号" size="mini" style="width: 80px;height: 40px;padding-left: 10px" class="button11" @click="statusFreed(scope.row)">紧急释放</el-button>
              <el-button v-if="scope.row.维修工单号" size="mini" style="width: 80px;height: 40px;padding-left: 10px" class="button11" @click="statusFreed1(scope.row)">能力释放</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-button :disabled="arrangeAbled" class="button11" style="margin: 20px 0px 20px 75%;width: 11%" @click="arrangeSubmit(),arrangeSubmit1()">确认</el-button>
          <el-button class="button12" style="margin: 20px 0px 20px 1%;width: 11%;background-color: white" @click="arrangeCancle()">取消</el-button>
        </el-row>
      </el-dialog>
      <!--    维修完成-->
      <el-dialog :title="completeTitle" :visible.sync="completeDialogFormVisible" width="460px">
        <div style="margin-top:-90px;margin-left: 40%;margin-bottom: 30px;">
          <img :src="img" style="height: 75px;width: 100px;">
        </div>
        <el-row>
          <span style="font-size:30px;margin-left: 35px;">你确定维修已完成？</span>
        </el-row>
        <el-row style="margin-top: 50px">
          <span style="font-size:16px;margin-left: 35px">维修完成后，请录入维修内容。</span>
        </el-row>
        <el-button class="button11" style="margin-top: 50px;margin-left:230px;width: 70px" @click="completeSubmit()">是</el-button>
        <el-button class="button12" style="background-color: white;width: 70px;margin-top: 50px;margin-left: 15px" @click="completeCancle">否</el-button>
      </el-dialog>
      <!--    录入维修内容-->
      <el-dialog :title="contentTitle" :visible.sync="contentDialogFormVisible" width="500px">
        <el-form ref="contentForm" :model="contentForm" :rules="contentRules" label-position="top" label-width="700px" label-padding-bottom="0px">
          <el-row>
            <div style="margin-top: 15px;margin-right: 35px">
              <el-form-item label="工作内容" prop="repairContent">
                <el-input v-model="contentForm.repairContent" type="textarea" class="inputext2" maxlength="255" style="width:97%;" show-word-limit/>
              </el-form-item>
              <el-form-item>
                <el-button v-if="contentSubmitValue === 1" class="button11" style="margin: 20px 0px 0px 60%;width: 18%" @click="contentSubmit('contentForm')">确认</el-button>
                <el-button v-else class="button11" style="margin: 20px 0px 0px 60%;width: 18%" @click="contentEditSubmit('contentForm')">确认</el-button>
                <el-button class="button12" style="margin: 20px 0px 0px 1%;width: 18%;background-color: white" @click="contentCancle('contentForm')">取消</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </el-dialog>
      <!--    确认接受-->
      <el-dialog :title="acceptTitle" :visible.sync="acceptDialogFormVisible" width="50%" class="dialog4">
        <div>
          <span>工单号: {{ orderCurrent.工单号 }}</span>
          <el-row style="margin-top: 30px">
            <el-col :span="9">
              <span>工单开始时间: </span>
              <el-tag color="rgb(0,142,207)" size="small" type="info" style="cursor: pointer">{{ orderCurrent.开始时间 }}</el-tag>
            </el-col>
            <el-col :span="9">
              <span>维修完成时间: </span>
              <el-tag color="rgb(0,142,207)" size="small" type="info" style="cursor: pointer">{{ orderCurrent.完成时间 }}</el-tag>
            </el-col>
            <el-col :span="6">
              <span>维修时长: </span>
              <el-tag color="rgb(0,142,207)" size="small" type="info" style="cursor: pointer">{{ orderCurrent.持续时长 }}</el-tag>
            </el-col>
          </el-row>
          <el-row style="margin-top: 30px">
            <el-col :span="2">
              <span>维修人: </span>
            </el-col>
            <el-col :span="5">
              <div v-if="orderCurrent.维修人员姓名">
                <el-tag v-for="(order,index) in orderCurrent.维修人员姓名" :key="index" color="rgb(115,168,57)" size="middle" type="info" style="margin-left: 5px">{{ order }}</el-tag>
              </div>
              <el-tag v-else color="rgb(227,0,21)" size="middle" type="info" style="margin-left: 5px">N/A</el-tag>
            </el-col>
          </el-row>
          <div style="margin-top: 15px">评价及意见</div>
          <el-rate v-model="acceptAssessValue" class="rate1" style="margin-top: 15px"/>
          <el-input
            v-model="acceptAssess"
            style="margin-top: 10px;width: 40%"
            class="inputext2"
            type="textarea"
            maxlength="255"
            show-word-limit
            placeholder="描述"/>
        </div>
        <el-row style="margin-top: 30px;">
          <el-button class="button11" style="margin-left:80%;width: 8%" @click="acceptSubmit()">是</el-button>
          <el-button class="button12" style="background-color: white;width:  8%;margin-left: 2%" @click="acceptCancle">否</el-button>
        </el-row>
      </el-dialog>
      <!--    操作轨迹-->
      <el-dialog :title="locusTitle" :visible.sync="locusDialogFormVisible" width="60%" class="dialog5">
        <el-table
          v-loading="loading"
          :data="locusTableData"
          :header-cell-style="tableHeaderColor"
          :cell-style="tableColor1"
          element-loading-spinner="el-icon-loading"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column align="left" label="日期时间" prop="日期时间" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.日期时间 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="类型" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.类型 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="原值" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.原值 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="新值" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.新值 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="用户" prop="用户" min-width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.用户 }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;margin-left: 65%;">
          <el-pagination
            :current-page="locusPageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="locusPageSize"
            :total="locusTotal"
            layout="total, prev, pager, next, sizes"
            @size-change="locusSizeChange"
            @current-change="locusCurrentChange"/>
        </div>
      </el-dialog>
      <!--  录入安全注意事项-->
      <el-dialog :title="safetyTitle" :visible.sync="safetyDialogFormVisible" width="500px">
        <el-row>
          <div style="margin-top: 10px;margin-right: 35px">
            <el-input v-model="safetyContent" type="textarea" class="inputext2" maxlength="255" style="width:97%" show-word-limit/>
            <el-button class="button11" style="margin: 30px 0px 0px 61%;width: 18%" @click="safetySubmit()">确认</el-button>
            <el-button class="button12" style="margin: 30px 0px 0px 1%;width: 18%;background-color: white" @click="safetyCancle()">取消</el-button>
          </div>
        </el-row>
      </el-dialog>
    </el-col>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
import img from '@/assets/404_images/20.png'
export default {
  data() {
    return {
      img,
      activeName: '1',
      safetyTitle: '',
      safetyDialogFormVisible: false,
      safetyContent: '',
      locusTitle: '',
      locusDialogFormVisible: false,
      locusTableData: [],
      locusOrder: '',
      locusTotal: 0, // 总条数
      locusPageSize: 10, // 每页显示条数
      locusPageCurrent: 1, // 后台获取页
      assessTableData: [],
      assess: '',
      assessCount: 0,
      assessValue: 0,
      acceptTitle: '',
      acceptDialogFormVisible: false,
      acceptAssessValue: 0,
      acceptAssess: '',
      contentServiceTableData: [],
      contentCount: 0,
      contentValue: '',
      contentTitle: '',
      contentDialogFormVisible: false,
      contentForm: {
        repairContent: ''
      },
      contentRules: {
        repairContent: [{ required: true, trigger: 'blur' }]
      },
      contentSubmitValue: -1,
      completeTitle: '',
      completeDialogFormVisible: false,
      arrangeDialogFormVisible: false,
      arrangeTitle: '',
      arrangementInput: '',
      arrangeTableData: [],
      multipleSelection: [],
      arrangeAbled: true,
      orderCurrent: {},
      orderCurrentValue: '',
      orderTableData: [{}],
      statusTableData: [{}],
      tableData: [],
      tableData1: [],
      loading: false,
      form: {
        department: '',
        section: '',
        position: '',
        time: [],
        hours: '',
        peopleNum: ''
      },
      rules: {
        position: [{ required: true, trigger: 'blur' }],
        time: [{ required: true, trigger: 'blur' }]
      },
      total1: 0, // 总条数
      pageSize1: 10, // 每页显示条数
      pageCurrent1: 1, // 后台获取页
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'cname'
    ])
  },
  created() {
    this.searchOrder1()
    this.searchOrder()
  },
  methods: {
    // 表头样式
    tableHeaderColor() {
      return 'background-color: rgb(250, 250, 250);height:40px;border-bottom: 3px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);font-weight: 5000;padding: 5px 10px'
    },
    tableColor() {
      return 'border-color: #E8E8E8;padding: 10px 0px 8px 0px'
    },
    tableHeaderColor1() {
      return 'height:20px;border-bottom: 3px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);font-weight: 5000;padding: 8px 10px'
    },
    tableColor1() {
      return 'border-color: #E8E8E8;padding: 12px 0px 10px 0px'
    },
    tableColor2() {
      return 'border-color: #E8E8E8;padding: 6px 0px 4px 0px'
    },
    // 新建工单
    submitOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['所在部门', this.form.department]
          param[1] = ['所在科室', this.form.section]
          param[2] = ['工作地点', this.form.position]
          param[3] = ['计划开始时间', this.form.time[0]]
          param[4] = ['计划结束时间', this.form.time[1]]
          param[5] = ['计划工时', this.form.hours]
          param[6] = ['申请人', this.id]
          param[7] = ['用户', this.cname]
          param[8] = ['所需维修人员', this.form.peopleNum]
          var Data = this.CreateData('12', '维修工单_临时工单_增加', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '信息增加成功',
                type: 'success'
              })
              this.form.department = ''
              this.form.section = ''
              this.form.position = ''
              this.form.time = []
              this.form.hours = ''
              this.form.peopleNum = ''
              this.searchOrder()
            } else {
              this.$message.error('信息增加失败')
            }
          })
        }
      })
    },
    // 查询工单
    searchOrder() {
      this.tableData = []
      var param = []
      param[0] = ['PageSize', this.pageSize]
      param[1] = ['PageCurrent', this.pageCurrent]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '维修工单_临时工单_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.tableData.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            状态: v.状态,
            状态代码: v.状态代码,
            开始时间: v.开始时间,
            工作地点: v.工作地点,
            申请人姓名: v.申请人姓名,
            持续时长: v.持续时长
          })
          this.total = parseInt(response.data.output[0].ItemCount)
        })
      })
    },
    // 查询工单
    searchOrder1() {
      this.tableData1 = []
      var param = []
      param[0] = ['PageSize', this.pageSize1]
      param[1] = ['PageCurrent', this.pageCurrent1]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '维修工单_临时工单_历史查询', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.tableData1.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            状态: v.状态,
            状态代码: v.状态代码,
            开始时间: v.开始时间,
            工作地点: v.工作地点,
            申请人姓名: v.申请人姓名,
            持续时长: v.持续时长
          })
          this.total1 = parseInt(response.data.output[0].ItemCount)
        })
      })
    },
    deleteOrder(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['维修工单代码', row.维修工单代码]
        var Data = this.CreateData('12', '维修工单_删除', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchOrder()
            this.searchOrder1()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击工单
    orderClick(row) {
      this.orderCurrentValue = row.维修工单代码
      this.searchCurrentOrder()
    },
    searchCurrentOrder() {
      var param = []
      param[0] = ['维修工单代码', this.orderCurrentValue]
      param[1] = ['维修工单代码_check', 1]
      var Data = this.CreateData('11', '维修工单_当前工单_查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].维修人员姓名) {
          response.data[0].维修人员姓名 = response.data[0].维修人员姓名.split(',')
        }
        if (response.data[0].维修人员代码) {
          response.data[0].维修人员代码 = response.data[0].维修人员代码.split(',')
        }
        this.orderCurrent = response.data[0]
      }).then(() => {
        this.getServiceContent()
        this.getAssess()
      })
    },
    // 获得当前工单维修内容
    getServiceContent() {
      this.contentServiceTableData = []
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      var Data = this.CreateData('11', '维修工单_维修内容_查询 ', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.contentServiceTableData.push({
            内容代码: v.内容代码,
            填写人: v.填写人,
            现场解决措施: v.现场解决措施
          })
        })
        this.contentCount = response.data.length
      })
    },
    // 获得评价意见
    getAssess() {
      this.assessValue = 0
      this.assessTableData = []
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      var Data = this.CreateData('11', '维修工单_评价及意见_查询 ', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.assessValue = response.data[0].评价分数
        }
        response.data.map(v => {
          this.assessTableData.push({
            评价及意见: v.评价及意见,
            创建人: v.创建人,
            创建时间: v.创建时间
          })
        })
        this.assessCount = response.data.length
      })
    },
    // 人员安排
    statusArrange() {
      this.arrangeDialogFormVisible = true
      this.arrangeTitle = '选择人员'
      this.arrangementInput = ''
      this.getRepairman()
    },
    // 查询人员
    getRepairman() {
      this.arrangeTableData = []
      if (this.arrangementInput) { this.arrangementInput_check = 1 } else { this.arrangementInput_check = 0 }
      var param = []
      param[0] = ['关键字', this.arrangementInput]
      param[1] = ['关键字_check', this.arrangementInput_check]
      var Data = this.CreateData('11', '维修工单_维修人员_查询 ', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.arrangeTableData.push({
            安排代码: v.安排代码,
            人员代码: v.人员代码,
            姓名: v.姓名,
            技能: v.技能,
            等级: v.等级,
            技能代码: v.技能代码,
            维修工单代码: v.维修工单代码,
            维修工单号: v.维修工单号
          })
        })
      })
    },
    // 多选框条件隐藏
    arrangeTableCell(row) {
      if (row.row.维修工单号 !== null && row.columnIndex === 0) {
        return 'myCell'
      }
    },
    arrangeCellHeader(row) {
      if (row.columnIndex === 0) {
        return 'myCell'
      }
    },
    // 人员状态释放
    statusFreed(row) {
      var param = []
      param[0] = ['安排代码', row.安排代码]
      param[1] = ['维修工单代码', row.维修工单代码]
      param[2] = ['用户', this.cname]
      var Data = this.CreateData('12', '维修工单_维修人员_状态释放', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息编辑成功',
            type: 'success'
          })
          this.getRepairman()
          this.searchCurrentOrder()
        } else {
          this.$message.error('信息编辑失败')
        }
      })
    },
    // 人员状态释放
    statusFreed1(row) {
      var param = []
      param[0] = ['安排代码', row.安排代码]
      param[1] = ['维修工单代码', row.维修工单代码]
      param[2] = ['用户', this.cname]
      var Data = this.CreateData('12', '维修工单_维修人员_状态释放1', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '信息编辑成功',
            type: 'success'
          })
          this.getRepairman()
          this.searchCurrentOrder()
        } else {
          this.$message.error('信息编辑失败')
        }
      })
    },
    // 选中维修人员
    peopleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.arrangeAbled = true
      } else { this.arrangeAbled = false }
      this.newPeople = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.newPeople.push(this.multipleSelection[i].姓名)
      }
    },
    // 维修人员确认
    arrangeSubmit() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        var param = []
        param[0] = ['人员代码', this.multipleSelection[i].人员代码]
        param[1] = ['维修工单代码', this.orderCurrent.维修工单代码]
        var Data = this.CreateData('12', '维修工单_维修人员_安排工单', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '已安排',
              type: 'success'
            })
            this.searchCurrentOrder()
            this.searchOrder()
            this.arrangeDialogFormVisible = false
          } else {
            this.$message.error('人员安排失败')
          }
        })
      }
    },
    arrangeSubmit1() {
      this.originalPeople = this.orderCurrent.维修人员姓名
      if (this.originalPeople !== null) {
        this.newPeople = this.newPeople.concat(this.originalPeople)
      }
      var param = []
      param[0] = ['人员原值', this.originalPeople]
      param[1] = ['人员新值', this.newPeople]
      param[2] = ['维修工单代码', this.orderCurrent.维修工单代码]
      param[3] = ['用户', this.cname]
      var Data = this.CreateData('12', '维修工单_维修人员_操作轨迹', param)
      ExecDatabase(Data).then(response => {
      })
    },
    // 关闭人员安排弹出框
    arrangeCancle() {
      this.arrangeDialogFormVisible = false
    },
    // 人员到场
    statusReach() {
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      param[1] = ['用户', this.cname]
      var Data = this.CreateData('12', '维修工单_人员到场确认', param)
      ExecDatabase(Data).then(response => {
      }).then(() => {
        this.searchCurrentOrder()
        this.searchOrder()
      })
    },
    // 维修完成
    statusRepair() {
      this.completeDialogFormVisible = true
    },
    // 确认维修完成
    completeSubmit() {
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      param[1] = ['是否停机', this.orderCurrent.是否停机]
      param[2] = ['用户', this.cname]
      param[3] = ['故障代码', this.orderCurrent.故障代码]
      var Data = this.CreateData('12', '维修工单_维修完成', param)
      ExecDatabase(Data).then(response => {
      }).then(() => {
        this.searchCurrentOrder()
        this.searchOrder()
        this.completeDialogFormVisible = false
      })
    },
    // 关闭维修完成弹出框
    completeCancle() {
      this.completeDialogFormVisible = false
    },
    // 录入维修内容
    entryContent() {
      if (this.$refs['contentForm'] !== undefined) {
        this.$refs['contentForm'].resetFields()
      }
      this.contentDialogFormVisible = true
      this.contentTitle = '录入维修内容'
      this.contentSubmitValue = 1
      this.contentForm.repairContent = ''
    },
    // 修改维修内容
    editContent(row) {
      if (this.$refs['contentForm'] !== undefined) {
        this.$refs['contentForm'].resetFields()
      }
      this.contentSubmitValue = 2
      this.contentDialogFormVisible = true
      this.contentTitle = '修改维修内容'
      this.contentValue = row.内容代码
      this.contentForm.repairContent = row.现场解决措施
    },
    // 维修内容确定保存
    contentSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
          param[1] = ['维修人员代码', this.id]
          param[2] = ['现场解决措施', this.contentForm.repairContent]
          var Data = this.CreateData('12', '维修工单_维修内容_增加', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '已保存',
                type: 'success'
              })
              this.searchCurrentOrder()
              this.contentDialogFormVisible = false
            } else {
              this.$message.error('信息编辑失败')
            }
          })
        }
      })
    },
    // 修改维修内容确定保存
    contentEditSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
          param[1] = ['维修人员代码', this.id]
          param[2] = ['现场解决措施', this.contentForm.repairContent]
          param[3] = ['内容代码', this.contentValue]
          var Data = this.CreateData('12', '维修工单_维修内容_修改', param)
          ExecDatabase(Data).then(response => {
            if (response.data[0].result === '1') {
              this.$message({
                message: '已保存',
                type: 'success'
              })
              this.searchCurrentOrder()
              this.contentDialogFormVisible = false
            } else {
              this.$message.error('信息编辑失败')
            }
          })
        }
      })
    },
    // 关闭维修内容弹出框
    contentCancle(formName) {
      this.$refs[formName].resetFields()
      this.contentDialogFormVisible = false
    },
    // 打开确认接受弹出框
    statusAccept() {
      this.acceptDialogFormVisible = true
      this.acceptTitle = '工单确认详情'
      this.acceptAssessValue = 3
      this.acceptAssess = ''
    },
    // 确认接受
    acceptSubmit() {
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      param[1] = ['创建人', this.cname]
      param[2] = ['评价及意见', this.acceptAssess]
      param[3] = ['评价分数', this.acceptAssessValue]
      param[4] = ['用户', this.cname]
      var Data = this.CreateData('12', '维修工单_评价及意见_增加', param)
      ExecDatabase(Data).then(response => {
      }).then(() => {
        this.searchCurrentOrder()
        this.searchOrder()
        this.acceptDialogFormVisible = false
      })
    },
    // 关闭确认接受弹出框
    acceptCancle() {
      this.acceptDialogFormVisible = false
    },
    // 打开操作轨迹弹出框
    orderMap() {
      this.locusDialogFormVisible = true
      this.locusTitle = '工单操作轨迹'
      this.getLocus()
    },
    // 查询操作轨迹数据
    getLocus() {
      this.locusTableData = []
      var param = []
      param[0] = ['PageSize', this.locusPageSize]
      param[1] = ['PageCurrent', this.locusPageCurrent]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      param[4] = ['维修工单代码', this.orderCurrent.维修工单代码]
      var Data = this.CreateData('11', '维修工单_操作轨迹_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.locusTableData.push({
            日期时间: v.日期时间,
            类型: v.类型,
            原值: v.原值,
            新值: v.新值,
            用户: v.用户
          })
        })
        this.locusTotal = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 打开注意事项弹出框
    safety() {
      this.safetyDialogFormVisible = true
      this.safetyTitle = '安全注意事项'
      this.safetyContent = this.orderCurrent.安全注意事项
    },
    // 确认
    safetySubmit() {
      var param = []
      param[0] = ['维修工单代码', this.orderCurrent.维修工单代码]
      param[1] = ['安全注意事项', this.safetyContent]
      var Data = this.CreateData('12', '维修工单_安全事项', param)
      ExecDatabase(Data).then(response => {
      }).then(() => {
        this.searchCurrentOrder()
        this.safetyDialogFormVisible = false
      })
    },
    // 关闭注意事项弹出框
    safetyCancle() {
      this.safetyDialogFormVisible = false
    },
    locusSizeChange(val) {
      this.locusPageCurrent = 1
      this.locusPageSize = val
      this.getLocus()
    },
    locusCurrentChange(val) {
      this.locusPageCurrent = val
      this.getLocus()
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchOrder()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchOrder()
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchOrder1()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchOrder1()
    }
  }
}
</script>

<style scoped>
  .div5 {
    font-size: 20px;
    margin: 10px 0px;
  }
  .card{
    margin-bottom: 30px;
  }
  >>>.dialog1 .el-dialog__header {
    padding: 40px 20px 10px 40px;
  }
  >>>.myCell .el-checkbox__input {
    display: none
  }
  >>>.inputext2 .el-textarea__inner {
    padding: 5px 15px;
    line-height: 1.5;
    width: 100%;
    height: 90px;
    background-color: rgb(247,247,247);
    border-color: rgb(247,247,247);
    border-bottom: 1px solid rgb(207,208,209);
  }
  >>>.inputext2 .el-textarea__inner:focus {
    background-color: rgb(239,239,240);
  }
  >>>.el-tabs__item {
    font-size: 18px;
    padding-top: 0px;
    padding-bottom: 45px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  >>>.card1 .el-card__body {
    padding: 5px 20px 20px 20px;
  }
</style>
