<template>
  <div>
    <el-card>

      <el-form :model="detailQuery" v-if="showSearch" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="设备编码">
              <el-input v-model="detailQuery.deviceCode" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="detailQuery.productName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备状态">
              <el-select v-model="detailQuery.status"
                         style="width: 100%"
                         clearable>
                <el-option
                  v-for="item in deviceStatus"
                  :key="item.key"
                  :label="item.desc"
                  :value="item.key">
                </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="push"
          >选入
          </el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

<!--      <el-table :data="list" @row-click="rowClick" v-loading="loading" click-row-light>-->
<!--        <el-table-column label="序号" width="50" type="index"/>-->
<!--        <el-table-column label="科室" width="150" 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="120" prop="statusName">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag :type="deviceStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="巡检锁定" width="120">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag :type="scope.row.checkLock?'primark':'info'">{{ scope.row.checkLock ? '是' : '否' }}</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="数量" width="120" prop="count"/>-->
<!--        <el-table-column label="计量单位" width="100" prop="measname"/>-->
<!--        <el-table-column label="生产企业" width="180" prop="manufactory"/>-->
<!--        &lt;!&ndash;        <el-table-column label="批次号" width="100" prop="batchNo"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="序列号" width="100" prop="serialNo"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="生产日期" width="140" prop="productionDate"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="过期时间" width="140" prop="expireDate"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="供应商" width="100" prop="supName"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="udi码" width="150" prop="udi"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>&ndash;&gt;-->
<!--        &lt;!&ndash;        <el-table-column label="操作" width="120" fixed="right">&ndash;&gt;-->
<!--        &lt;!&ndash;          <template scope="scope">&ndash;&gt;-->

<!--        &lt;!&ndash;            <el-button type="text"&ndash;&gt;-->
<!--        &lt;!&ndash;            >详情&ndash;&gt;-->
<!--        &lt;!&ndash;            </el-button>&ndash;&gt;-->
<!--        &lt;!&ndash;          </template>&ndash;&gt;-->
<!--        &lt;!&ndash;        </el-table-column>&ndash;&gt;-->
<!--      </el-table>-->
<!--      <pagination-->
<!--        v-show="total>0"-->
<!--        :total="total"-->
<!--        :page.sync="query.page"-->
<!--        :limit.sync="query.limit"-->
<!--        @pagination="getList"-->
<!--      />-->
<!--    </el-card>-->

<!--    <el-card>-->
<!--      <div slot="header" class="clearfix">-->
<!--        <div class="fl">-->
<!--          {{-->
<!--            `设备详情 ${clickRow ? '——' + clickRow.productName + '(' + clickRow.ggxh + ')' : ''}`-->
<!--          }}-->
<!--        </div>-->
<!--        <div class="fr">-->
<!--          <el-button @click="getDetailList">刷新</el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--      <el-form v-if="clickRow" :model="detailQuery" inline label-width="auto">-->
<!--        <el-row :gutter="20">-->
<!--          <el-col>-->
<!--            <el-form-item label="设备编码">-->
<!--              <el-input v-model.trim="detailQuery.deviceCode" clearable/>-->
<!--            </el-form-item>-->
<!--            <el-button type="primary" icon="el-icon-search" @click="getDetailList"-->
<!--            >查询-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->
        <el-table
          :data="detailList"
          style="width: 100%"
          highlight-current-row="false"
          v-loading="detailLoading"
          :row-class-name="tableRowClassName"
          @current-change="handleChange"
          ref="multipleTable"
        >
          <el-table-column label width="45">
            <template slot-scope="scope">
              <el-radio :label="scope.row.deviceCode" v-model="radioCheck"><span></span></el-radio>
            </template>
          </el-table-column>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="科室" width="120" prop="deptName"/>
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <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="80" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检锁定" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.checkLock?'primark':'info'">{{ scope.row.checkLock ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="变更次数" width="80" prop="changeCount"/>
        <el-table-column label="维修次数" width="80" prop="repairCount"/>
        <el-table-column label="巡检次数" width="80" prop="checkCount"/>
        <el-table-column label="计量单位" width="80" prop="measname"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <el-table-column label="批次号" width="100" prop="batchNo"/>
        <el-table-column label="序列号" width="100" prop="serialNo"/>
        <el-table-column label="生产日期" width="120" prop="productionDate"/>
        <el-table-column label="过期时间" width="120" prop="expireDate"/>
        <el-table-column label="供应商" width="160" prop="supName"/>
        <el-table-column label="udi码" width="150" prop="udi"/>
        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
        <el-table-column label="操作" :width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="mr5" @click="getDeviceLogs(scope.row)"
            >变更日志
            </el-button>
            <el-popover class="mr5"
                        placement="left"
                        trigger="click">
              <div v-if="scope.row.QR" align="center">
                <el-image :src="scope.row.QR" style="display: block"/>
                <el-button style="display: block"
                           @click="downloadBase64Image(scope.row.QR,`${scope.row.deviceCode}——${scope.row.productName}——${scope.row.ggxh}`)">
                  下载
                </el-button>
              </div>
              <el-button slot="reference" type="text" @click="genQR(scope.row)"
              >设备码
              </el-button>
            </el-popover>
<!--            <el-button v-if="isChoose&&scope.row.status==deviceStatus.NORMAL.key&&scope.row.checkLock==false"-->
<!--                       type="text"-->
<!--                       @click="chooseFunc(scope.row)"-->
<!--            >选择-->
<!--            </el-button>-->
            <el-button
              type="text"
              size="small"
              @click.native.stop="printDevLabel(scope.row)"
            >打印
            </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"
      />
      <br> </br>
      <br> </br>
      <div class="grid-container" v-if="this.item != null ">
        <el-card >
          <div slot="header" class="clearfix">
            <div class="fl">
              设备号：

              {{ item.deviceCode }}
            </div>
          </div>
          <el-form :model="item" label-width="auto">
            <el-descriptions border label-style="width:70px" :column="2">
              <el-descriptions-item label="名称">
                {{ item.productName }}
              </el-descriptions-item>
              <el-descriptions-item label="规格">
                {{ item.ggxh }}
              </el-descriptions-item>
              <el-descriptions-item label="问题描述" span="2">
                <el-row>
                  <el-col>
                    <el-form-item label=" " prop="description">
                      <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable
                                show-word-limit
                                maxlength="300" v-model.trim="item.description"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </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>
      </div>

    </el-card>

    <el-dialog
      :title="`设备变更日志——${productRow.productName}(${productRow.deviceCode})`"
      :visible="true"
      v-if="showLog"
      @close="showLog = false"
    >
      <el-timeline>
        <el-timeline-item placement="top"
                          v-for="(item, index) in logList"
                          :key="index"
                          size="large"
                          icon="el-icon-s-promotion"
                          :type="deviceChangeType[item.type].tagType"
                          :timestamp="item.createTime">
          <el-card style="margin-left: 0px">
            <div slot="header">
              <div style="font-size: 24px">
                {{ item.typeName }}
              </div>
            </div>
            <el-descriptions>
              <el-descriptions-item label="操作部门">{{ item.deptName }}</el-descriptions-item>
              <el-descriptions-item label="操作人">{{ item.createUserName }}</el-descriptions-item>
              <el-descriptions-item label="变更单号">{{ item.changeOrderId }}</el-descriptions-item>
              <el-descriptions-item label="目标部门">{{ item.toDeptName }}</el-descriptions-item>
              <el-descriptions-item label="确认人">{{ item.confirmUserName }}</el-descriptions-item>
              <el-descriptions-item label="确认时间">{{ item.confirmTime }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>

</template>

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