<template>
  <div>

    <el-card >
<!--      <el-tabs type="border-card" v-model="tabActive" :before-leave="tabClick">-->
<!--        <el-tab-pane label="我的受理" :name="2"></el-tab-pane>-->
<!--        <el-tab-pane label="报修大厅" :name="1"></el-tab-pane>-->
<!--        <el-card>-->

          <el-form :model="query" v-if="showSearch" label-width="auto">
            <el-row :gutter="20">
              <el-col :span="6" v-if="tabActive==2">
                <el-form-item label="受理状态">
                  <el-select v-model="query.status" clearable>
                    <el-option v-for="item in deviceRepairApplyStatus" :label="item.desc" :value="item.key" :key="item.key"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报修部门">
                  <deptSelect :value.sync="query.applyDeptCode"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报修号">
                  <el-input v-model.trim="query.applyId" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态">
                  <el-select v-model="query.isFinish" clearable>
                    <el-option  label="未完成" :value="0" :key="0"></el-option>
                    <el-option  label="已完成" :value="1" :key="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="top-right-btn">
            <el-button-group>
              <el-button icon="el-icon-view" type="primary" @click="showSearch = !showSearch">显示/隐藏搜索栏
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
              >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="search"
              >查询
              </el-button>
            </el-button-group>
          </div>
          <el-divider style="margin: 15px"></el-divider>

          <el-table :data="list" ref="table"
                    v-loading="loading" @row-click="rowClick" highlight-current-row
                    click-row-light>
            <el-table-column label="序号" width="50" type="index"/>
            <el-table-column label="报修单号" width="150" prop="repairApplyBillNo"/>
            <el-table-column label="状态" width="150" prop="statusName">
              <template slot-scope="scope">
                <el-tag :type="deviceRepairApplyStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报修部门" width="120" prop="applyDeptName"/>
            <el-table-column label="报修人" width="120" prop="applyUserName"/>
            <el-table-column label="报修人电话" width="120" prop="applyUserPhone"/>
            <el-table-column label="报修时间" width="140" prop="applyTime"/>
<!--            <el-table-column label="受理部门" width="140" prop="confirmDeptName"/>-->
<!--            <el-table-column label="受理人" width="140" prop="confirmUserName"/>-->
<!--            <el-table-column label="受理人电话" width="140" prop="confirmPhone"/>-->
<!--            <el-table-column label="受理时间" width="140" prop="confirmTime"/>-->
            <el-table-column label="设备数量" width="100" prop="deviceCount"/>
            <el-table-column label="已完成数量" width="100" prop="finishCount"/>
<!--            <el-table-column v-if="tabActive==1" label="操作" fixed="right" width="80">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button type="text" @click="confirm(scope.row)">受理</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="getList"
          />
        </el-card>

<!--      <br></br>-->
              <el-card>
          <div slot="header" class="clearfix">
            <div class="fl">
              {{ `报修单详情 ${clickRow ? '——' + clickRow.id : ''}` }}
            </div>
            <div v-if="clickRow" class="fr">
              <el-button @click="getDetailList">刷新</el-button>
            </div>
          </div>
          <el-table :data="detailList" v-loading="detailLoading">
            <el-table-column label="序号" width="50" type="index"/>
            <el-table-column label="设备编码" width="150" prop="deviceCode"/>
            <el-table-column label="设备部门" width="100" prop="deptName"/>
            <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
            <el-table-column label="名称" width="150" prop="productName"/>
            <el-table-column label="规格型号" width="160" prop="ggxh"/>
            <el-table-column label="状态" width="160" prop="statusName">
              <template slot-scope="scope">
                <el-tag :type="deviceRepairApplyDetailStatus[scope.row.status].tagType">{{
                    deviceRepairApplyDetailStatus[scope.row.status].desc
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否维修" width="160" prop="repairFlag">
              <template slot-scope="scope">
                <span>{{
                    scope.row.repairFlag==null?"":scope.row.repairFlag ? "维修" : "不维修(报废/销毁)"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="问题描述" width="160" prop="description"/>
            <el-table-column label="诊断信息" width="160" prop="diagnosisInfo"/>
            <el-table-column label="计量单位" width="100" prop="measname"/>
            <el-table-column label="批次号" width="100" prop="batchNo"/>
            <el-table-column label="序列号" width="100" prop="serialNo"/>
            <el-table-column label="生产日期" width="140" prop="productionDate"/>
            <el-table-column label="过期时间" width="140" prop="expireDate"/>
            <el-table-column label="供应商" width="100" prop="supName"/>
            <el-table-column label="udi码" width="150" prop="udi"/>
            <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
            <el-table-column label="生产企业" width="180" prop="manufactory"/>
            <el-table-column v-if="tabActive==1" label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.status==deviceRepairApplyDetailStatus.WAIT_DIAGNOSIS.key"
                           @click="openDiagnosisDialog(scope.row)">受理
                </el-button>
                <el-button type="text" v-if="scope.row.repairId" @click="repairId = scope.row.repairId">查看维修单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="detailTotal>0"
            :total="detailTotal"
            :page.sync="detailQuery.page"
            :limit.sync="detailQuery.limit"
            @pagination="getDetailList"
          />

        </el-card>

<!--      </el-tabs>-->


    <el-dialog
      :visible="detailFlag"
      v-if="detailFlag"
      width="80%"
      title="诊断设备"
      @close="detailFlag = false"
    >
      <el-card>
        <div slot="header" class="clearfix">
          <div class="fl">
            设备号：{{ detailData.deviceCode }}
          </div>
          <div class="fr">
            <el-button @click="detailFlag = false">取消</el-button>
            <el-button type="primary" @click="commitFunc" :loading="submitLoading">提交</el-button>
          </div>
        </div>
        <el-form :model="diagnosisData" ref="saveForm" :rules="detailRules" label-width="auto">
          <el-descriptions border label-style="width:90px" :column="3">
            <el-descriptions-item label="名称">{{ detailData.productName }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{ detailData.ggxh }}</el-descriptions-item>
            <el-descriptions-item label="销售标识">{{ detailData.nameCode }}</el-descriptions-item>
            <el-descriptions-item label="注册/备案号">{{ detailData.zczbhhzbapzbh }}</el-descriptions-item>
            <el-descriptions-item label="生产企业">{{ detailData.manufactory }}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{ detailData.supName }}</el-descriptions-item>
            <el-descriptions-item label="批次号">{{ detailData.batchNo }}</el-descriptions-item>
            <el-descriptions-item label="序列号">{{ detailData.serialNo }}</el-descriptions-item>
            <el-descriptions-item label="udi码">{{ detailData.udi }}</el-descriptions-item>
            <el-descriptions-item label="生产日期">{{ detailData.productionDate }}</el-descriptions-item>
            <el-descriptions-item label="过期时间">{{ detailData.expireDate }}</el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>
            <el-descriptions-item label="问题描述" :label-style="{'height': '100px'}" :span="3">
              {{ detailData.description }}
            </el-descriptions-item>
            <el-descriptions-item label="报修现场图片" span="4" label-style="height:100px">
              <localImageUpload
                :fileType="['image/jpeg','image/png','image/gif']"
                :maxFiles= "maxFiles"
                :fileSizeLimit="fileSizeLimit"
                :type="deptDeviceCheck"
                :uploadedFileNames="detailData.livePath"
                :isShowTip="false"
                :disabledUp="true"
              ></localImageUpload>
            </el-descriptions-item>
            <el-descriptions-item label="是否维修" :span="3">
              <el-form-item label=" " prop="repairFlag" style="margin-bottom: 0">
                <el-radio-group v-model="diagnosisData.repairFlag">
                  <el-radio :label="true">维修</el-radio>
                  <el-radio :label="false">不维修(报废/销毁)</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="diagnosisData.repairFlag" label="维修方式" :span="3">
              <el-form-item label=" " prop="innerFlag" style="margin-bottom: 0">
                <el-radio-group v-model="diagnosisData.innerFlag">
                  <el-radio :label="true">内部维修</el-radio>
                  <el-radio :label="false">外部维修</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="diagnosisData.repairFlag" label="维修部门" :span="3">
              <el-form-item label=" " prop="repairDeptCode" style="margin-bottom: 10px">
                <deptSelect :value.sync="diagnosisData.repairDeptCode" :maintenance="true" placeholder="请选择报修部门"  />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item v-if="diagnosisData.repairFlag" label="维修人姓名" :span="3">
              <el-form-item label=" " prop="repairUserId" style="margin-bottom: 10px">
                <el-select
                  v-model="diagnosisData.repairUserId"
                  @change="handleEmployeeSelect"
                >
                  <el-option
                    v-for="(item, index) in userlist"
                    :key="index"
                    :label="item.employeeName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item v-if="diagnosisData.repairFlag" label="维修人电话" :span="3">
              <el-form-item label=" " prop="repairUserPhone" style="margin-bottom: 10px">
                <el-input v-model.trim="diagnosisData.repairUserPhone" placeholder="请输入维修人电话"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="诊断信息" :label-style="{'height': '100px'}" :span="3">
              <el-form-item label=" " prop="diagnosisInfo" style="margin-bottom: 10px">
                <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable
                          show-word-limit
                          maxlength="300" v-model.trim="diagnosisData.diagnosisInfo"/>
              </el-form-item>
            </el-descriptions-item>


            <el-descriptions-item label="诊断图片" span="4" label-style="height:100px">
              <localImageUpload
                :fileType="['image/jpeg','image/png','image/gif']"
                :maxFiles= "this.maxFiles"
                :fileSizeLimit="this.fileSizeLimit"
                :type="deptDeviceCheck"
                :uploadedFileNames="this.uploadedFileNames"
                :isShowTip="false"
                @changeComponent1Data="component1DataChange"
              ></localImageUpload>
            </el-descriptions-item>


          </el-descriptions>
        </el-form>
      </el-card>
    </el-dialog>

    <el-dialog
      visible
      v-if="repairId"
      @close="repairId=null"
      title="维修单信息"
      width="80%"
    >
      <deviceRepairDialog :repairId="repairId" :disabledUp="true" />
    </el-dialog>
  </div>
</template>

<script src="./js/deviceRepairApplyHall.js"/>

<style lang="scss" scoped>


::v-deep .el-dialog__body {
  padding: 0 0 20px 0;
}

::v-deep .el-tabs__content {
  padding: 0 0 20px 0;
}

::v-deep .el-select {
  width: 100%;
}

</style>
