<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px">
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          clearable
          placeholder="请输入姓名"
          size="small"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item label="班组" prop="classes">
        <el-select v-model="queryParams.classes" clearable placeholder="请选择班组" size="small"
                   @change="handleQuery">
          <el-option
            v-for="dict in classesOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" clearable placeholder="请选择性别" size="small"
                   @change="handleQuery">
          <el-option
            v-for="dict in sexOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位" prop="post">
        <el-checkbox v-model="queryParams.boiler" @change="handleQuery">裂解</el-checkbox>
        <el-checkbox v-model="queryParams.cracking" @change="handleQuery">热区</el-checkbox>
        <el-checkbox v-model="queryParams.hotarea" @change="handleQuery">冷区</el-checkbox>
        <el-checkbox v-model="queryParams.coldarea" @change="handleQuery">PGU/AEU</el-checkbox>
        <el-checkbox v-model="queryParams.operator" @change="handleQuery">白班操作员</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['production:person:add']"
          icon="el-icon-refresh"
          size="mini"
          type="success"
          @click="syncPerson"
        >同步人员数据
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-s-operation"
          size="mini"
          type="warning"
          @click="toMatrix"
        >PPE矩阵管理
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="personList" :element-loading-text="loadingText" :height="clientHeight" border
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column :formatter="plantCodeFormat" align="center" label="装置名称" prop="plantCode"/>
      <el-table-column align="center" label="姓名" prop="name"/>
      <el-table-column align="center" label="员工号" prop="employeeid"/>
      <el-table-column :formatter="classesFormat" align="center" label="班组" prop="classes"/>
      <el-table-column :formatter="sexFormat" align="center" label="性别" prop="sex"/>
      <el-table-column :formatter="boilerFormat" align="center" label="裂解" prop="boiler"/>
      <el-table-column :formatter="crackingFormat" align="center" label="热区" prop="cracking"/>
      <el-table-column :formatter="hotareaFormat" align="center" label="冷区" prop="hotarea"/>
      <el-table-column :formatter="coldareaFormat" align="center" label="PGU/AEU" prop="coldarea"/>
      <el-table-column :formatter="operatorFormat" align="center" label="白班操作员" prop="operator"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-document"
            size="mini"
            type="text"
            @click="checkDetailList(scope.row)"
          >检查记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <el-dialog :close-on-click-modal="false" :visible.sync="detail.listOpen" title="检查记录" width="50%">
      <el-form v-show="detail.showSearch" ref="detailQueryForm" :inline="true" :model="detail.queryParams"
               label-width="68px">
        <el-form-item label="检查时间" prop="checkDate">
          <el-date-picker v-model="detail.queryParams.checkDateStr" clearable placeholder="选择检查时间"
                          size="small"
                          style="width: 200px"
                          type="month"
                          value-format="yyyy-MM"
                          @change="handleQuery">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleDetailQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetDetailQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button
        v-if="isChecker&&currentTeam===detail.row.classes"
        icon="el-icon-plus"
        size="mini"
        type="primary"
        @click="addDetail"
      >添加检查结果
      </el-button>
      <right-toolbar :showSearch.sync="detail.showSearch" @queryTable="handleDetailQuery"></right-toolbar>
      <el-descriptions :column="3" border class="margin-top" size="default">
        <el-descriptions-item label="姓名">
          {{ detail.row.name }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ sexFormat(detail.row) }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位">
          {{ postFormat(detail.row) }}
        </el-descriptions-item>
      </el-descriptions>

      <el-table v-loading="detail.loading" :data="detail.mainList" :height="clientHeight-150"
                border @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="检查日期" prop="checkDate">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" label="检查人" prop="checker"/>
        <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-document"
              size="mini"
              type="text"
              @click="checkDetail(scope.row)"
            >检查详情
            </el-button>
            <el-button
              icon="el-icon-download"
              size="mini"
              type="text"
              @click="exportCheck(scope.row)"
            >导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <pagination
        v-show="detail.total>0"
        :limit.sync="detail.queryParams.pageSize"
        :page.sync="detail.queryParams.pageNum"
        :total="detail.total"
        @pagination="getMainList"
      />
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="detail.open" title="检查详情" width="90%">
      <el-descriptions :column="3" border class="margin-top" size="default">
        <el-descriptions-item label="姓名">
          {{ detail.row.name }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ sexFormat(detail.row) }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位">
          {{ postFormat(detail.row) }}
        </el-descriptions-item>
      </el-descriptions>
      <div>
        <div v-if="detail.row.sex!=1">
          <el-table :data="detail.staffLocker" border>
            <el-table-column align="center" label="自行车棚员工PPE柜">
              <el-table-column align="center" label="PPE种类" prop="ppeType"/>
              <el-table-column align="center" label="检查内容">
                <el-table-column align="center" label="应配备岗位" prop="usePost"/>
                <el-table-column align="center" label="是否配备" prop="isEquip">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isEquip" clearable placeholder="请选择是否配备" size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isEquip">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isEquip }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否无破损、未被污染" prop="isPollution">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isPollution" clearable placeholder="请选择是否无破损、未被污染"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isPollution">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isPollution }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="摆放符合要求" prop="putAsRequired">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.putAsRequired" clearable placeholder="请选择是否摆放符合要求"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.putAsRequired">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.putAsRequired }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否按要求贴“使用时间卡”" prop="isRequire">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isRequire" clearable placeholder="请选择是否按要求贴“使用时间卡"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isRequire">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isRequire }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否在使用有效期内" prop="isValidity">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isValidity" clearable placeholder="请选择是否在使用有效期内"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isValidity">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isValidity }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="检验合格的标识在有效期内" prop="isIdentification">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isIdentification" clearable
                                 placeholder="请选择是否检验合格的标识在有效期内" size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isIdentification">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isIdentification }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否配有专用湿巾" prop="isWetTissue">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="detail.isWetTissue" clearable placeholder="请选择是否配有专用湿巾"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="detail.isWetTissue">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isWetTissue }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <!--              <el-table-column
                              v-if="detail.isAdd||detail.isEdit"
                              label="操作"
                              width="100px">
                              <template slot-scope="scope">
                                <el-button
                                  size="small"
                                  type="text"
                                  @click.native.prevent="deleteRow(scope.$index, detail.staffLocker)">
                                  移除
                                </el-button>
                              </template>
                            </el-table-column>-->
            </el-table-column>
          </el-table>
          <div v-if="detail.isAdd||detail.isEdit" style="margin-top: 10px" >
            <el-image :preview-src-list="ppe1" :src="ppe1[0]" fit="cover"
                      style="height: 60px;width: 3%;margin-right: 1%"/>
            <el-input v-model="detail.staffRemark" placeholder="请输入备注" style="width: 96%"
                      type="textarea"/>
          </div>
          <el-descriptions v-else :column="1" border class="margin-top" size="default">
            <el-descriptions-item label="备注" label-style="width:100px">
              {{ detail.staffRemark }}
            </el-descriptions-item>
          </el-descriptions>
          <!--          <div>
                      <el-button v-if="detail.isAdd||detail.isEdit"
                                 icon="el-icon-plus"
                                 type="text"
                                 @click="addRow(detail.staffLocker)">
                        添加一行
                      </el-button>
                    </div>-->
        </div>

        <div v-if="detail.row.sex!=1">
          <el-table :data="detail.cmldefLocker" border style="margin: 20px 0 0 0;">
            <el-table-column align="center" label="自行车棚防化靴/防化服柜">
              <el-table-column align="center" label="PPE种类" prop="ppeType"/>
              <el-table-column align="center" label="检查内容">
                <el-table-column align="center" label="应配备岗位" prop="usePost"/>
                <el-table-column align="center" label="是否配备" prop="isEquip">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isEquip" clearable placeholder="请选择是否配备" size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isEquip">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isEquip }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="是否无破损、未被污染" prop="isPollution">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isPollution" clearable placeholder="请选择是否无破损、未被污染"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isPollution">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isPollution }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="摆放符合要求" prop="putAsRequired">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.putAsRequired" clearable placeholder="请选择是否摆放符合要求"
                                 size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.putAsRequired">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.putAsRequired }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="检验合格的标识在有效期内" prop="isIdentification">
                  <template slot-scope="scope">
                    <div v-if="detail.isEdit||detail.isAdd">
                      <el-select v-model="scope.row.isIdentification" clearable
                                 placeholder="请选择是否检验合格的标识在有效期内" size="small">
                        <el-option
                          v-for="dict in ppeCheckOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                      <!--                      <el-radio-group v-model="scope.row.isIdentification">
                                              <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                                {{ dict.dictLabel }}
                                              </el-radio-button>
                                            </el-radio-group>-->
                    </div>
                    <span v-else>{{ scope.row.isIdentification }}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <!--              <el-table-column
                              v-if="detail.isAdd||detail.isEdit"
                              label="操作"
                              width="100px">
                              <template slot-scope="scope">
                                <el-button
                                  size="small"
                                  type="text"
                                  @click.native.prevent="deleteRow(scope.$index, detail.cmldefLocker)">
                                  移除
                                </el-button>
                              </template>
                            </el-table-column>-->
            </el-table-column>
          </el-table>
          <div v-if="detail.isAdd||detail.isEdit" style="margin-top: 10px">
            <el-image :preview-src-list="ppe2" :src="ppe2[0]" fit="cover"
                      style="height: 60px;width: 3%;margin-right: 1%"/>
            <el-input v-model="detail.cmldefRemark" placeholder="请输入备注" style="width: 96%"
                      type="textarea"/>
          </div>
          <el-descriptions v-else :column="1" border class="margin-top" size="default">
            <el-descriptions-item label="备注" label-style="width:100px">
              {{ detail.cmldefRemark }}
            </el-descriptions-item>
          </el-descriptions>
          <!--          <div>
                      <el-button v-if="detail.isAdd||detail.isEdit"
                                 icon="el-icon-plus"
                                 type="text"
                                 @click="addRow(detail.cmldefLocker)">
                        添加一行
                      </el-button>
                    </div>-->
        </div>

        <el-table :data="detail.wardrobe" border style="margin: 20px 0 0 0;">
          <el-table-column align="center" label="更衣柜">
            <el-table-column align="center" label="检查内容">
              <el-table-column align="center" label="没有存放污染工作服/工作鞋">
                <template slot-scope="scope">
                  <div v-if="detail.isEdit||detail.isAdd">
                    <el-select v-model="scope.row.noPollution" clearable
                               placeholder="请选择是否没有存放污染工作服/工作鞋" size="small">
                      <el-option
                        v-for="dict in ppeCheckOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                    <!--                    <el-radio-group v-model="scope.row.noPollution">
                                          <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                            {{ dict.dictLabel }}
                                          </el-radio-button>
                                        </el-radio-group>-->
                  </div>
                  <span v-else>{{ scope.row.noPollution }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="摆放符合要求">
                <template slot-scope="scope">
                  <div v-if="detail.isEdit||detail.isAdd">
                    <el-select v-model="scope.row.putAsRequired" clearable
                               placeholder="请选择是否摆放符合要求" size="small">
                      <el-option
                        v-for="dict in ppeCheckOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                    <!--                    <el-radio-group v-model="scope.row.putAsRequired">
                                          <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                            {{ dict.dictLabel }}
                                          </el-radio-button>
                                        </el-radio-group>-->
                  </div>
                  <span v-else>{{ scope.row.putAsRequired }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="未存放食物/饮料">
                <template slot-scope="scope">
                  <div v-if="detail.isEdit||detail.isAdd">
                    <el-select v-model="scope.row.noFood" clearable
                               placeholder="请选择是否未存放食物/饮料" size="small">
                      <el-option
                        v-for="dict in ppeCheckOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                    <!--                    <el-radio-group v-model="scope.row.noFood">
                                          <el-radio-button :label="dict.dictLabel"  v-for="dict in ppeCheckOptions">
                                            {{ dict.dictLabel }}
                                          </el-radio-button>
                                        </el-radio-group>-->
                  </div>
                  <span v-else>{{ scope.row.noFood }}</span>
                </template>
              </el-table-column>
              <!--              <el-table-column
                              v-if="detail.isAdd||detail.isEdit"
                              label="操作"
                              width="100px">
                              <template slot-scope="scope">
                                <el-button
                                  size="small"
                                  type="text"
                                  @click.native.prevent="deleteRow(scope.$index, detail.wardrobe)">
                                  移除
                                </el-button>
                              </template>
                            </el-table-column>-->
            </el-table-column>
          </el-table-column>
        </el-table>
        <div v-if="detail.isAdd||detail.isEdit" style="margin-top: 10px">
          <el-image :preview-src-list="ppe3" :src="ppe3[0]" fit="cover"
                    style="height: 60px;width: 3%;margin-right: 1%"/>
          <el-input v-model="detail.wardrobeRemark" placeholder="请输入备注" style="width: 96%;"
                    type="textarea"/>
        </div>
        <el-descriptions v-else :column="1" border class="margin-top" size="default">
          <el-descriptions-item label="备注" label-style="width:100px">
            {{ detail.wardrobeRemark }}
          </el-descriptions-item>
        </el-descriptions>
        <!--        <div>
                  <el-button v-if="detail.isAdd||detail.isEdit"
                             icon="el-icon-plus"
                             type="text"
                             @click="addRow(detail.wardrobe)">
                    添加一行
                  </el-button>
                </div>-->

        <div v-if="!detail.isEdit&&!detail.isAdd&&detail.checker&&detail.checkDate"
             style="width: 100%;font-size: 20px;text-align: center;margin-top: 20px">
          检查人：<span style="text-decoration: underline;margin-right: 200px">{{ detail.checker }}</span>
          检查时间：<span style="text-decoration: underline;">{{ detail.checkDate }}</span>
        </div>
      </div>
      <div v-if="detail.isEdit||detail.isAdd" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDetail">{{ $t('确 定') }}</el-button>
        <el-button @click="cancelDetail">{{ $t('取 消') }}</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  addPerson,
  delPerson,
  exportPerson,
  getPerson,
  importTemplate,
  listPerson,
  updatePerson
} from "@/api/production/person";
import {treeselect} from "@/api/system/dept";
import {getToken} from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addMain, exportMain, getMain, listMain} from "@/api/production/main";
import {listMatrixByPost} from "@/api/production/matrix";
import {getLoginStaffInfo} from "@/api/plant/staffmgr";

export default {
  name: "Person",
  components: {Treeselect},
  options: {
    whitespace: true
  },
  data() {
    return {
      ppe1: [process.env.VUE_APP_BASE_API+"/profile/ppeImg/ppe1.png"],
      ppe2: [process.env.VUE_APP_BASE_API+"/profile/ppeImg/ppe2.png"],
      ppe3: [process.env.VUE_APP_BASE_API+"/profile/ppeImg/ppe3.png"],
      detail: {
        total: 0,
        isEdit: false,
        isAdd: false,
        open: false,
        listOpen: false,
        showSearch: false,
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          staffId: null,
          checkDateStr: null
        },
        row: {},
        staffLocker: [],
        cmldefLocker: [],
        wardrobe: [],
        staffRemark: null,
        cmldefRemark: null,
        wardrobeRemark: null,
        oldStaffLocker: [],
        oldCmldefLocker: [],
        oldWardrobe: [],
        isWetTissue: null,
        checkDate: null,
        checker: null,
        mainList: [],
        loading: false,
      },
      isChecker: false,
      currentTeam: "",
      // 装置名称字典
      plantCodeOptions: [],
      yesNoOptions: [],
      ppePostOptions: [],
      ppeCheckOptions: [],
      // 遮罩层
      loading: true,
      loadingText: "",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 员工PPE检查表格数据
      personList: [],
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      clientHeight: 300,
      // 是否显示弹出层
      open: false,
      // 班组字典
      classesOptions: [],
      // 性别字典
      sexOptions: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/production/person/importData"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        plantCode: null,
        name: null,
        employeeid: null,
        classes: null,
        sex: null,
        boiler: null,
        cracking: null,
        hotarea: null,
        coldarea: null,
        validity: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        remarks: null,
        deptId: null,
        operator: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          {required: true, message: "唯一标识ID不能为空", trigger: "blur"}
        ],
        plantCode: [
          {required: true, message: "装置名称不能为空", trigger: "blur"}
        ],
        deptId: [
          {required: true, message: "部门编号不能为空", trigger: "blur"}
        ],
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    //设置表格高度对应屏幕高度
    this.$nextTick(() => {
      this.clientHeight = document.body.clientHeight - 250
    })
    this.getList();
    this.getTreeselect();
    this.getDicts("TEAM_DIVIDE").then(response => {
      this.classesOptions = response.data;
    });
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("PLANT_DIVIDE").then(response => {
      this.plantCodeOptions = response.data;
    });
    this.getDicts("YES_NO_EN").then(response => {
      this.yesNoOptions = response.data;
    });
    this.getDicts("PPE_POST").then(response => {
      this.ppePostOptions = response.data;
    });
    this.getDicts("PPE_CHECK").then(response => {
      this.ppeCheckOptions = response.data;
    });
    getLoginStaffInfo().then(res => {
      this.currentTeam = res.data.team
      this.isChecker = res.data.checker
    })
  },
  methods: {
    toMatrix(){
        this.$router.push({ path: '/production/matrix', query: {}});
    },
    submitDetail() {
      if (this.detail.staffLocker)
        this.detail.staffLocker.forEach(item => {
          item.isWetTissue = this.detail.isWetTissue;
        })
      let data = {
        deptId: this.detail.row.deptId,
        staffId: this.detail.row.employeeid,
        staffLockers: this.detail.staffLocker,
        cmldefLockers: this.detail.cmldefLocker,
        wardrobes: this.detail.wardrobe,
        staffRemark: this.detail.staffRemark,
        cmldefRemark: this.detail.cmldefRemark,
        wardrobeRemark: this.detail.wardrobeRemark
      }
      addMain(data).then(res => {
        this.detail.isEdit = false;
        this.detail.isAdd = false;
        this.detail.open = false;
        this.getMainList();
      })
    },
    addRow(rows) {
      rows.push({});
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    addDetail() {
      this.detail.open = true;
      this.detail.isAdd = true;
      this.detail.staffRemark = null;
      this.detail.cmldefRemark = null;
      this.detail.wardrobeRemark = null;
      this.detail.oldStaffLocker = [];
      this.detail.oldCmldefLocker = [];
      this.detail.oldWardrobe = [];
      this.detail.oldStaffLocker = this.detail.staffLocker;
      this.detail.oldCmldefLocker = this.detail.cmldefLocker;
      this.detail.oldWardrobe = this.detail.wardrobe;
      this.detail.isWetTissue = '是';
      this.detail.staffLocker = [];
      this.detail.cmldefLocker = [];
      this.detail.wardrobe = [];
      listMatrixByPost({staffId: this.detail.row.employeeid}).then(res => {
        this.detail.staffLocker = res.data.staffLockers;
        this.detail.cmldefLocker = res.data.cmldefLockers;
        this.detail.wardrobe = res.data.wardrobes;
      })
    },
    cancelDetail() {
      this.detail.isEdit = false;
      this.detail.isAdd = false;
      this.detail.open = false;
      this.getMainList();
    },
    checkDetail(row) {
      this.detail.open = true;
      this.detail.isEdit = false;
      this.detail.isAdd = false;
      this.detail.oldStaffLocker = [];
      this.detail.oldCmldefLocker = [];
      this.detail.oldWardrobe = [];
      this.detail.staffLocker = [];
      this.detail.cmldefLocker = [];
      this.detail.wardrobe = [];
      this.detail.checkDate = null;
      this.detail.checker = null;
      this.getDetail(row);
    },
    checkDetailList(row) {
      this.detail.showSearch = false;
      this.detail.mainList = [];
      this.detail.row = {};
      this.detail.listOpen = true;
      this.detail.row = row;
      this.getMainList(row);
    },
    getMainList(row) {
      this.detail.loading = true;
      this.detail.queryParams.staffId = this.detail.row.employeeid || row.employeeid;
      listMain(this.detail.queryParams).then(res => {
        this.detail.mainList = res.rows;
        this.detail.total = res.total;
        this.detail.loading = false;
      })
    },
    getDetail(row) {
      getMain(row.id).then(res => {
        this.detail.checker = res.data.checker;
        this.detail.checkDate = res.data.checkDate;
        this.detail.staffLocker = res.data.staffLockers;
        this.detail.cmldefLocker = res.data.cmldefLockers;
        this.detail.wardrobe = res.data.wardrobes;
        this.detail.staffRemark = res.data.staffRemark;
        this.detail.cmldefRemark = res.data.cmldefRemark;
        this.detail.wardrobeRemark = res.data.wardrobeRemark;
      })
    },
    // 装置名称字典翻译
    plantCodeFormat(row, column) {
      return this.selectDictLabel(this.plantCodeOptions, row.plantCode);
    },
    // 裂解字典翻译
    boilerFormat(row, column) {
      return this.selectDictLabel(this.yesNoOptions, row.boiler);
    },
    // 压缩字典翻译
    crackingFormat(row, column) {
      return this.selectDictLabel(this.yesNoOptions, row.cracking);
    },
    // 分离字典翻译
    hotareaFormat(row, column) {
      return this.selectDictLabel(this.yesNoOptions, row.hotarea);
    },
    // PGU/AEU字典翻译
    coldareaFormat(row, column) {
      return this.selectDictLabel(this.yesNoOptions, row.coldarea);
    },
    // 白班操作员字典翻译
    operatorFormat(row, column) {
      return this.selectDictLabel(this.yesNoOptions, row.operator);
    },
    /** 查询员工PPE检查列表 */
    getList() {
      this.loading = true;
      listPerson(this.queryParams).then(response => {
        this.personList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.loadingText = "";
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 班组字典翻译
    classesFormat(row, column) {
      return this.selectDictLabel(this.classesOptions, row.classes);
    },
    // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex);
    },
    postFormat(row, column) {
      let val = "";
      if (row.boiler == 1)
        val += '裂解、'
      if (row.cracking == 1)
        val += '热区、'
      if (row.hotarea == 1)
        val += '冷区、'
      if (row.coldarea == 1)
        val += 'PGU/AEU、'
      if (row.operator == 1)
        val += '白班操作员'
      if (val.endsWith('、'))
        val = val.substring(0, val.length - 1)
      return val;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        plantCode: null,
        name: null,
        employeeid: null,
        classes: null,
        sex: null,
        boiler: null,
        cracking: null,
        hotarea: null,
        coldarea: null,
        validity: null,
        delFlag: null,
        createrCode: null,
        createdate: null,
        updaterCode: null,
        updatedate: null,
        remarks: null,
        deptId: null,
        operator: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleDetailQuery() {
      this.getMainList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.boiler = null;
      this.queryParams.cracking = null;
      this.queryParams.hotarea = null;
      this.queryParams.coldarea = null;
      this.queryParams.operator = null;
      this.handleQuery();
    },
    /** 重置按钮操作 */
    resetDetailQuery() {
      this.detail.queryParams.checkDateStr = null;
      this.handleDetailQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加员工PPE检查";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPerson(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改员工PPE检查";
      });
    },
    syncPerson() {
      this.loading = true;
      this.loadingText = '同步中...'
      addPerson({}).then(response => {
        this.msgSuccess("同步成功");
        this.open = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePerson(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPerson(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delPerson(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有员工PPE检查数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportPerson(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 导出按钮操作 */
    exportCheck(row) {
      const queryParams = this.detail.queryParams;
      queryParams.id = row.id;
      this.$confirm('是否确认导出?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportMain(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
