<template>
  <div>
    <el-card>

      <el-form :model="query" v-if="showSearch" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="设备编码">
              <el-input v-model.trim="query.deviceCode" @keyup.enter.native="search" 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="false">未完成</el-option>
                <el-option label="已完成" value="true">已完成</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 type="primary" icon="el-icon-plus" @click="openCreate"-->
          <!--          >新增-->
          <!--          </el-button>-->
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table :data="list" ref="table"
                v-loading="loading" highlight-current-row
                click-row-light>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="维修单号" width="150" prop="repairBillNo"/>
        <el-table-column label="状态" width="150" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="scope.row.finishFlag?'success':'warning'">{{
                scope.row.finishFlag ? '已完成' : '未完成'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="维修方式" width="150" prop="statusName">
          <template slot-scope="scope">
            {{ scope.row.innerFlag ? '内部维修' : '外部维修' }}
          </template>
        </el-table-column>
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <el-table-column label="维修人姓名" width="150" prop="repairUserName"/>
        <el-table-column label="维修人电话" width="150" prop="repairUserPhone"/>
        <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="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 label="操作" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button type="text" v-if="!scope.row.finishFlag" @click="finishFuncFlag(scope.row)">完成维修</el-button>
            <el-button type="text" v-if="scope.row.finishFlag" @click="finishFuncFlag(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>

    <el-dialog
      visible
      v-if="finishFlag"
      @close="finishFuncFlagClose"
      title="维修单信息"
      width="80%"
    >
      <el-card v-if="currentRow">
        <div slot="header" class="clearfix">
          <div class="fl">
            {{ `设备号：${currentRow.deviceCode}` }}
          </div>
          <div class="fr">
            <el-button type="primary" @click="finishFunc" v-if="!currentRow.finishFlag"  :loading="finishLoading">完成维修</el-button>
          </div>
        </div>
        <el-descriptions border label-style="width:90px" :column="4">
          <el-descriptions-item label="维修号">{{ currentRow.id }}</el-descriptions-item>
          <el-descriptions-item label="状态"><el-tag :type="currentRow.finishFlag?'success':'warning'">{{
              currentRow.finishFlag ? '已完成' : '未完成'
            }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="名称">{{ currentRow.productName }}</el-descriptions-item>
          <el-descriptions-item label="规格">{{ currentRow.ggxh }}</el-descriptions-item>
          <el-descriptions-item label="销售标识">{{ currentRow.nameCode }}</el-descriptions-item>
          <el-descriptions-item label="注册/备案号">{{ currentRow.zczbhhzbapzbh }}</el-descriptions-item>
          <el-descriptions-item label="生产企业">{{ currentRow.manufactory }}</el-descriptions-item>
          <el-descriptions-item label="供应商">{{ currentRow.supName }}</el-descriptions-item>
          <el-descriptions-item label="批次号">{{ currentRow.batchNo }}</el-descriptions-item>
          <el-descriptions-item label="序列号">{{ currentRow.serialNo }}</el-descriptions-item>
          <el-descriptions-item label="udi码">{{ currentRow.udi }}</el-descriptions-item>
          <el-descriptions-item label="生产日期">{{ currentRow.productionDate }}</el-descriptions-item>
          <el-descriptions-item label="过期时间">{{ currentRow.expireDate }}</el-descriptions-item>
          <el-descriptions-item label="维修方式" :span="1">
            {{ currentRow.innerFlag ? '内部维修' : '外部维修' }}
          </el-descriptions-item>
          <el-descriptions-item label="维修人姓名" :span="1">
            {{ currentRow.repairUserName }}
          </el-descriptions-item>
          <el-descriptions-item label="维修人电话" :span="1">
            {{ currentRow.repairUserPhone }}
          </el-descriptions-item>
          <el-descriptions-item label="问题描述" :label-style="{'height': '100px'}" :span="4">
            {{ currentRow.description }}
          </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="currentRow.livePath"
              :isShowTip="false"
              :disabledUp="true"
            ></localImageUpload>

          </el-descriptions-item>
          <el-descriptions-item label="诊断信息" :label-style="{'height': '100px'}" :span="4">
            {{ currentRow.diagnosisInfo }}
          </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="currentRow.diagnosisLivePath"
              :disabledUp="true"
            ></localImageUpload>
          </el-descriptions-item>

          <el-descriptions-item label="维修内容" :label-style="{'height': '100px'}" :span="4" >
            <el-input  type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable v-model.trim="currentRow.repairDescription" :disabled="currentRow.finishFlag"></el-input>
          </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="currentRow.serviceLivePath"
              :isShowTip="false"
              :disabledUp="currentRow.finishFlag"
              @changeComponent1Data="component1DataChange"
            ></localImageUpload>

          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-dialog>
  </div>
</template>

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

<style lang="scss" scoped>

.grid-container {
  height: inherit;
  grid-template-columns: repeat(1, 1fr);
  display: grid;
  grid-gap: 10px;

  .el-card {
    margin: 0;
    padding-top: 0;
  }
}


.grid-item {
  height: 100%;
  padding: 15px;

  .el-row, .el-col {
    height: 100%;
  }

  .header {
    color: #676a6c;
    font-size: 20px;
    font-weight: bolder;
  }

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}

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

</style>
