<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="仪器类型" prop="model">
        <el-select
          v-model="queryParams.type"
          @keyup.enter.native="handleQuery"
          style="width: 50%"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option label="非IOT仪器" :value="1"></el-option>
          <el-option label="IOT仪器" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仪器名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入仪器名称进行搜索"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仪器ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入仪器ID进行搜索"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @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
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:instrument:add']"
        >新增
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="instrumentList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
        align="center"
      />
      <el-table-column label="升序排序" align="center" prop="sortNo"/>
      <el-table-column label="仪器ID" align="center" prop="id"/>
      <el-table-column label="仪器类型" align="center" prop="type">
        <template slot-scope="scope">
          <span v-show="scope.row.type == 1">普通仪器</span>
          <span v-show="scope.row.type == 2">iot仪器</span>
        </template>
      </el-table-column>
      <el-table-column
        label="仪器封面"
        align="center"
        prop="banner"
        width="150px"
      >
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="100"
            :src="scope.row.banner"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        label="仪器LOGO"
        align="center"
        prop="logo"
        width="150px"
      >
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="100"
            :src="scope.row.logo"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        label="仪器名称"
        align="center"
        prop="name"
        width="150px"
      />
      <el-table-column label="仪器型号" align="center" prop="model"/>
      <el-table-column label="保修日期" align="center" prop="guarantee">
        <template slot-scope="scope">
					<span v-show="scope.row.guarantee != null"
          >{{ scope.row.guarantee }}年</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="小程序标签"
        align="center"
        prop="miniTagNames"
        width="150px"
      >
        <template slot-scope="scope">
          <el-tag v-for="item in getSplitList(scope.row.miniTagNames)" :key="item">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="外部标签"
        align="center"
        prop="wecomTagNames"
        width="150px"
      >
        <template slot-scope="scope">
          <el-tag v-for="item in getSplitList(scope.row.wecomTagNames)" :key="item">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <!--<el-table-column
        label="日常打卡奖励"
        align="center"
        prop="dailyClockCredit"
      />
      <el-table-column
        label="额外打卡奖励"
        align="center"
        prop="extraClockCredit"
      />-->
      <el-table-column
        label="操作"
        align="center"
        width="200px"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:instrument:edit']">编辑
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editMiniProgramTags(scope.row)">
            设置小程序可见标签
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editWecomTags(scope.row)">设置企微可见标签
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editInstrumentNameVisible(scope.row)">
            正品控名称配置
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editInstrumentInstructionVisible(scope.row)">
            配置说明书
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['system:instrument:remove']" v-if="scope.row.status == 0">隐藏
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['system:instrument:remove']" v-if="scope.row.status == 1">解除隐藏
          </el-button>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改仪器列对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="排序" prop="sortNo">
          <el-input-number
            v-model="form.sortNo"
            controls-position="right"
            :min="0"
            :precision="0"
            placeholder="请输入排序:值越大，排序越前"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="仪器封面" prop="banner" width="150px">
          <template>
            <!-- 仪器封面 -->
            <el-upload
              :action="uploadUrl"
              :headers="headers"
              :file-list="bannerFile.fileList"
              list-type="picture-card"
              accept=".jpg,.png"
              :limit="1"
              :class="{ hide: bannerFile.uploadHide }"
              :on-change="bannerUploadChange"
              :on-remove="bannerUploadRemove"
              :on-success="bannerUploadSuccess"
              :on-error="uploadError"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
									<span
                    class="el-upload-list__item-preview"
                    @click="bannerPicturePreview(file)"
                  >
										<i class="el-icon-zoom-in"></i>
									</span>
									<span
                    v-if="!bannerFile.disabled"
                    class="el-upload-list__item-delete"
                    @click="bannerUploadRemove(file)"
                  >
										<i class="el-icon-delete"></i>
									</span>
								</span>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
            <!-- 预览窗口 -->
            <el-dialog :visible.sync="bannerFile.dialogVisible" append-to-body>
              <img width="100%" :src="bannerFile.dialogImageUrl" alt=""/>
            </el-dialog>
          </template>
        </el-form-item>
        <!--  仪器LOGO  -->
        <el-form-item label="仪器LOGO" prop="logo">
          <template>
            <el-upload
              :action="uploadUrl"
              :headers="headers"
              :file-list="logoFile.fileList"
              list-type="picture-card"
              accept=".jpg,.png"
              :limit="1"
              :class="{ hide: logoFile.uploadHide }"
              :on-change="logoUploadChange"
              :on-remove="logoUploadRemove"
              :on-success="logoUploadSuccess"
              :on-error="uploadError"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
									<span
                    class="el-upload-list__item-preview"
                    @click="logoPicturePreview(file)"
                  >
										<i class="el-icon-zoom-in"></i>
									</span>
									<span
                    v-if="!logoFile.disabled"
                    class="el-upload-list__item-delete"
                    @click="logoUploadRemove(file)"
                  >
										<i class="el-icon-delete"></i>
									</span>
								</span>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
            <!-- 预览窗口 -->
            <el-dialog :visible.sync="logoFile.dialogVisible" append-to-body>
              <img width="100%" :src="logoFile.dialogImageUrl" alt=""/>
            </el-dialog>
          </template>
        </el-form-item>
        <!--  仪器序列号  -->
        <el-form-item label="仪器序列号图片" prop="serial">
          <template>
            <el-upload
              :action="uploadUrl"
              :headers="headers"
              :file-list="serialFile.fileList"
              list-type="picture-card"
              accept=".jpg,.png"
              :limit="1"
              :class="{ hide: serialFile.uploadHide }"
              :on-change="serialUploadChange"
              :on-remove="serialUploadRemove"
              :on-success="serialUploadSuccess"
              :on-error="uploadError"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
									<span
                    class="el-upload-list__item-preview"
                    @click="serialPicturePreview(file)"
                  >
										<i class="el-icon-zoom-in"></i>
									</span>
									<span
                    v-if="!serialFile.disabled"
                    class="el-upload-list__item-delete"
                    @click="serialUploadRemove(file)"
                  >
										<i class="el-icon-delete"></i>
									</span>
								</span>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            </el-upload>
            <!-- 预览窗口 -->
            <el-dialog :visible.sync="serialFile.dialogVisible" append-to-body>
              <img width="100%" :src="serialFile.dialogImageUrl" alt=""/>
            </el-dialog>
          </template>
        </el-form-item>
        <el-form-item label="手写绑定介绍视频/图片" prop="manualCodeBinding">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="manualUploadExceed"
            :on-success="manualUploadSuccess"
            :on-error="uploadError"
            :file-list="manualFile.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传一个文件，且视频不超过10M，图片不超过1M
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="扫码绑定介绍图片" prop="scanCodeBinding">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="scanUploadExceed"
            :on-success="scanUploadSuccess"
            :on-error="uploadError"
            :file-list="scanFile.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传一个文件，且视频不超过10M，图片不超过1M
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="仪器名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入仪器名称"/>
        </el-form-item>
        <el-form-item label="保修日期" prop="guarantee">
          <el-input-number
            :min="0"
            :precision="0"
            v-model="form.guarantee"
          ></el-input-number>
        </el-form-item>
        <!--  <el-form-item label="日常打卡获得积分" prop="dailyClockCredit">
          <el-input-number
            :min="0"
            :precision="0"
            v-model="form.dailyClockCredit"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="开启额外打卡奖励" prop="dailyClockCredit">
          <el-switch
            v-model="form.isExtraClock"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#DCDCDC"
            @change="isExtraClockChange"
          >
          </el-switch>
        </el-form-item>
        <el-form-item
          v-if="form.isExtraClock == 1"
          label="额外打卡奖励积分"
          prop="extraClockCredit"
        >
          <el-input-number
            :min="0"
            :precision="0"
            v-model="form.extraClockCredit"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          v-if="form.isExtraClock == 1"
          label="额外打卡时间"
          prop="extraClockTimeRange"
        >
          <el-date-picker
            v-model="form.extraClockTimeRange"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>-->
        <el-form-item label="仪器绑定积分" prop="bindingCredit">
          <el-input-number :min="0" :precision="0" v-model="form.bindingCredit"/>
        </el-form-item>
        <el-form-item label="仪器类型" prop="type">
          <el-select
            v-model="form.type"
            style="width: 50%"
            @change="typeChange"
          >
            <el-option label="非IOT仪器" :value="1"></el-option>
            <el-option label="IOT仪器" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="仪器型号" prop="model">
          <el-select v-model="form.model" style="width: 50%">
            <el-option label="FR200" value="FR200"></el-option>
            <el-option label="WL200" value="WL200"></el-option>
            <el-option label="FR380" value="FR380"></el-option>
            <el-option label="FR390" value="FR390"></el-option>
            <el-option label="M01" value="M01"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模式" prop="modeIdsValue">
          <template>
            <el-select v-model="form.modeIdsValue" multiple placeholder="请选择模式" @change="modeIdsValueChang">
              <el-option
                v-for="item in this.mode.modeIdsOptions"
                :key="item.id"
                :label="item.modeName"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button v-if="form.modeIdsValue!=undefined && form.modeIdsValue!=null && form.modeIdsValue.length > 1"
                       @click="openModeIdDialog()" size="small" type="primary">排序
            </el-button>
          </template>
        </el-form-item>
        <el-form-item label="带NEW标识模式" prop="newModeIdList">
          <template>
            <el-select v-model="form.newModeIdList" multiple placeholder="请选择带new标识模式">
              <el-option
                v-for="item in newModeOptionList"
                :key="item.id"
                :label="item.modeName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="生成护理记录最短时间" prop="nursingTime">
          <el-time-picker
            v-model="form.nursingTime"
            value-format="HH:mm:ss"
            placeholder="请选择护理时长"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="IOT版本" prop="iotVersion">
          <el-input v-model="form.iotVersion" placeholder="请输入IOT版本"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="IOT升级数据文件" prop="iotUpgradeData">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="iotUpgradeUploadExceed"
            :on-success="iotUpgradeUploadSuccess"
            :on-error="uploadError"
            :file-list="iotUpgradeFile.fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="扫机身码" prop="isScanCode">
          <el-switch
            v-model="form.isScanCode"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#DCDCDC"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否支持购买" prop="isPurchase">
          <el-select
            v-model="form.isPurchase"
            style="width: 50%"
            @change="isPurchaseChang"
          >
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.isPurchase == 1"
          label="商城小程序appid"
          prop="shoppingAppid"
        >
          <el-input
            v-model="form.shoppingAppid"
            placeholder="请输入商城小程序appid"
          />
        </el-form-item>
        <el-form-item
          v-if="form.isPurchase == 1"
          label="商城小程序path"
          prop="shoppingPath"
        >
          <el-input
            v-model="form.shoppingPath"
            placeholder="请输入商城小程序path"
          />
        </el-form-item>

        <el-form-item label="初次护理弹窗">
          <el-button size="small" type="primary" @click="addNurse()"
          >添加规则
          </el-button
          >
          <input
            ref="nurseFile"
            id="nurseFile"
            type="file"
            name="file"
            accept=".png,.jpg,.jpeg,.gif,.mpeg,.mp4,.avi,.mov,.wmv"
            @change="nurseFileChange($event)"
          />
          <el-table
            v-if="nurseList.length"
            :data="nurseList"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column label="弹窗提示图片或视频" width="140">
              <template slot-scope="scope">
                <template v-if="!scope.row.file">
                  <el-button
                    size="small"
                    type="primary"
                    @click="addNurseFile(scope.$index)"
                  >上传文件
                  </el-button
                  >
                </template>
                <template v-else>
                  <template v-if="scope.row.fileType === 'image'">
                    <ImagePreview :src="scope.row.file"/>
                  </template>
                  <template v-else>
                    <div style="width: 80px; height: 80px">
                      <video
                        style="width: 100%; height: 100%"
                        :src="scope.row.file"
                      ></video>
                    </div>
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="规则提示内容">
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入"
                  v-model="scope.row.message"
                  clearable
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="scope">
                <el-popconfirm
                  @confirm="handleNurseDelete(scope)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                >
                  <el-button slot="reference" type="text" size="small"
                  >删除
                  </el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="仪器介绍">
          <el-button size="small" type="primary" @click="addIntroduce()"
          >添加介绍
          </el-button
          >
          <input
            ref="introduceFile"
            id="introduceFile"
            type="file"
            name="file"
            accept=".png,.jpg,.jpeg,.gif,.mpeg,.mp4,.avi,.mov,.wmv"
            @change="introduceFileChange($event)"
          />
          <el-table
            v-if="introduceList.length"
            :data="introduceList"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column label="弹窗提示图片或视频" width="140">
              <template slot-scope="scope">
                <template v-if="!scope.row.file">
                  <el-button
                    size="small"
                    type="primary"
                    @click="addIntroduceFile(scope.$index)"
                  >上传文件
                  </el-button
                  >
                </template>
                <template v-else>
                  <template v-if="scope.row.fileType === 'image'">
                    <ImagePreview :src="scope.row.file"/>
                  </template>
                  <template v-else>
                    <div style="width: 80px; height: 80px">
                      <video
                        style="width: 100%; height: 100%"
                        :src="scope.row.file"
                      ></video>
                    </div>
                  </template>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="规则提示内容">
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入"
                  v-model="scope.row.message"
                  clearable
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="80">
              <template slot-scope="scope">
                <el-popconfirm
                  @confirm="handleIntroduceDelete(scope)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                >
                  <el-button slot="reference" type="text" size="small"
                  >删除
                  </el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item v-if="form.type == 2" label="蓝牙连接中图片" prop="bluetoothConnecting">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="bluetoothConnectUploadExceed"
            :on-success="bluetoothConnectUploadSuccess"
            :on-error="uploadError"
            :file-list="bluetoothConnectFile.fileList"
            accept=".png,.jpg,.jpeg,.gif,.mpeg,.mp4,.avi,.mov,.wmv"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙连接中标题" prop="bluetoothConnectingTitle">
          <el-input v-model="form.bluetoothConnectingTitle" placeholder="请输入蓝牙连接中标题"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙连接中文案" prop="bluetoothConnectingContent">
          <el-input v-model="form.bluetoothConnectingContent" placeholder="请输入蓝牙连接中文案"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙连接失败图片" prop="bluetoothConnectFail">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="bluetoothFailUploadExceed"
            :on-success="bluetoothFailUploadSuccess"
            :on-error="uploadError"
            :file-list="bluetoothConnectFailFile.fileList"
            accept=".png,.jpg,.jpeg,.gif,.mpeg,.mp4,.avi,.mov,.wmv"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙连接失败标题" prop="bluetoothConnectFailTitle">
          <el-input v-model="form.bluetoothConnectFailTitle" placeholder="请输入蓝牙连接失败标题"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙连接失败文案" prop="bluetoothConnectFailContent">
          <el-input v-model="form.bluetoothConnectFailContent" placeholder="请输入蓝牙连接失败文案"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙断开连接图片" prop="bluetoothClosed">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :limit="1"
            :on-exceed="bluetoothClosedUploadExceed"
            :on-success="bluetoothClosedUploadSuccess"
            :on-error="uploadError"
            :file-list="bluetoothClosedFile.fileList"
            accept=".png,.jpg,.jpeg,.gif,.mpeg,.mp4,.avi,.mov,.wmv"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传一个文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙断开连接标题" prop="bluetoothClosedTitle">
          <el-input v-model="form.bluetoothClosedTitle" placeholder="请输入蓝牙断开连接标题"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="蓝牙断开连接文案" prop="bluetoothClosedContent">
          <el-input v-model="form.bluetoothClosedContent" placeholder="请输入蓝牙断开连接文案"/>
        </el-form-item>
        <el-form-item v-if="form.type == 2" label="IOT版本升级介绍" prop="iotVersionUpgrade">
          <editor
            v-model="form.iotVersionUpgrade"
            placeholder="请输入内容"
            :min-height="192"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑小程序可见标签   -->
    <el-dialog
      title="编辑小程序可见标签"
      :visible.sync="miniProgramTag.visible"
      width="50%"
    >
      <el-form ref="miniProgramTag" :model="miniProgramTag" label-width="150px">
        <el-row>
          <el-col :span="100">
            <el-form-item
              label="小程序标签"
              prop="selectTagList"
              label-width="100px"
            >
              <treeselect
                v-model="miniProgramTag.selectTagList"
                :options="miniProgramTag.optionTree"
                :multiple="true"
                :show-count="true"
                placeholder="请选择小程序标签"
                :disable-branch-nodes="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="miniProgramTag.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitMiniProgramTagList"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑企微可见标签   -->
    <el-dialog
      title="编辑企微可见标签"
      :visible.sync="wecomTag.visible"
      width="50%"
    >
      <el-form :model="wecomTag" label-width="150px">
        <el-row>
          <el-col :span="100">
            <el-form-item
              label="小程序标签"
              prop="tagIdArray"
              label-width="100px"
            >
              <treeselect
                v-model="wecomTag.selectTagList"
                :options="wecomTag.optionTree"
                :multiple="true"
                :show-count="true"
                placeholder="请选择小程序标签"
                :disable-branch-nodes="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="wecomTag.visible = false">重 置</el-button>
        <el-button type="primary" @click="submitWecomTagList">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="正品控商品名配置" :visible.sync="instrumentName.visible" width="50%">
      <el-button size="mini" type="primary" icon="el-icon-add" @click="addInstrumentNameline()">新增</el-button>
      <el-table :show-header="false" v-loading="loading" :data="instrumentName.nameForm">
        <el-table-column type="index" width="55" align="center"/>
        <el-table-column align="center" prop="productName" width="400">
          <template slot-scope="scope">
            <el-input placeholder="请输入正品控名称" v-model="scope.row.productName" clearable/>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-save" @click="saveInstrumentName(scope.row)">保存
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="delInstrumentName(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="产品说明书配置" :visible.sync="instrumentInstructions.visible" width="50%">
      <el-button size="mini" type="primary" icon="el-icon-add" @click="addInstrumentInstructionLine()">添加说明书
      </el-button>
      <el-table v-loading="loading" :data="instrumentInstructions.instructionList">
        <el-table-column align="center" prop="name" width="200" label="说明书类型">
          <template slot-scope="scope">
            <el-input placeholder="请输入说明书类型" v-model="scope.row.name" clearable/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="link" width="250" label="说明书(每个类型只能上传一个说明书)">
          <!--  scope.row.link        -->
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="headers"
              :limit="1"
              :on-exceed="instructionUploadExceed"
              :on-success="(response, file, fileList) => {
                return instructionUploadSuccess(response, file, fileList, scope.$index);
              }"
              :on-error="uploadError"
              :file-list="scope.row.fileList"
              accept=".pdf,.PDF"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-save" @click="viewInstrumentInstruction(scope.row)">查看
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-save" @click="saveInstrumentInstruction(scope.row)">保存
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="delInstrumentInstruction(scope)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="排序" :visible.sync="mode.modeSortVisible" width="50%" :close-on-click-modal="false"
               :before-close="handleCloseMode">
      <div>
        <draggable v-model="mode.modeIdsValueTemp" draggable=".itemTag">
          <template v-for="element in this.mode.modeIdsValueTemp">
            <el-tag :key="element.id" class="itemTag"> {{ element.modeName }}</el-tag>
          </template>
        </draggable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseMode">取 消</el-button>
        <el-button type="primary" @click="handleSaveMode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listInstrument,
  getInstrument,
  delInstrument,
  addInstrument,
  updateInstrument,
  getMiniProgramTagTree,
  getWecomTagTree,
  listRelate,
  delRelate,
  updateRelate,
  addRelate,
  listInstructions,
  delInstructions,
  addInstructions,
  updateInstructions, listAllMode, addInstrumentTag, listInstrumentTag,
} from '@/api/system/instrument'
import {getToken} from '@/utils/auth'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import {upload} from "@/api/upload";

import draggable from 'vuedraggable'

export default {
  name: 'Instrument',
  components: {Treeselect, draggable},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 仪器列表格数据
      instrumentList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        name: null,
        type: null,
      },
      /* 文件上传地址 */
      uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      /* 仪器封面 */
      bannerFile: {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      },
      /* 仪器logo */
      logoFile: {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      },
      /* 序列号图片 */
      serialFile: {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      },
      /* 手写绑定介绍视频/图片 */
      manualFile: {
        uploadHide: false,
        fileList: [],
      },
      /* 扫码绑定介绍视频/图片 */
      scanFile: {
        uploadHide: false,
        fileList: [],
      },
      /* iot升级数据文件 */
      iotUpgradeFile: {
        uploadHide: false,
        fileList: [],
      },
      /* 蓝牙连接文件 */
      bluetoothConnectFile: {
        uploadHide: false,
        fileList: [],
      },
      /* 蓝牙断开连接文件 */
      bluetoothConnectFailFile: {
        uploadHide: false,
        fileList: [],
      },
      /* 蓝牙断开连接文件 */
      bluetoothClosedFile: {
        uploadHide: false,
        fileList: [],
      },
      /* 小程序可见标签 */
      miniProgramTag: {
        instrumentId: null,
        selectTagList: null,
        visible: false,
        optionTree: [],
      },
      /* 企微可见标签 */
      wecomTag: {
        instrumentId: null,
        selectTagList: null,
        visible: false,
        optionTree: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sortNo: [{required: true, message: '排序不能为空', trigger: 'blur'}],
        banner: [{required: true, message: '仪器封面不能为空'}],
        logo: [{required: true, message: '仪器logo不能为空'}],
        serial: [{required: true, message: '序列号图片不能为空'}],
        name: [
          {required: true, message: '仪器名称不能为空', trigger: 'blur'},
        ],
        guarantee: [
          {required: true, message: '请选择保修日期', trigger: 'blur'},
        ],
        dailyClockCredit: [
          {
            required: true,
            message: '日常打卡奖励积分不能为空',
            trigger: 'blur',
          },
        ],
        isExtraClock: [
          {required: true, message: '请选择是否开启额外打卡奖励'},
        ],
        bindingCredit: [
          {
            required: true,
            message: '仪器绑定奖励积分',
            trigger: 'blur',
          },
        ],
        extraClockCredit: [
          {
            required: true,
            message: '额外打卡奖励积分不能为空',
            trigger: 'blur',
          },
        ],
        extraClockTimeRange: [
          {
            required: true,
            message: '额外打卡时间段不能为空',
            trigger: 'blur',
          },
        ],
        type: [
          {required: true, message: '仪器类型不能为空', trigger: 'change'},
        ],
        model: [
          {required: true, message: '仪器型号不能为空', trigger: 'change'},
        ],
        modeIdsValue: [
          {required: true, message: '仪器模式不能为空', trigger: 'change'},
        ],
        nursingTime: [
          {
            required: true,
            message: '生成护理记录最短时长不能为空',
            trigger: 'change',
          },
        ],
        isPurchase: [{required: true, message: '是否支持购买'}],
        shoppingAppid: [
          {required: true, message: '购买商城APPID不能为空', trigger: 'blur'},
        ],
        shoppingPath: [
          {required: true, message: '购买商城PATH不能为空', trigger: 'blur'},
        ],
      },
      /** 初次护理规则 */
      imageFileType: ['png', 'jpg', 'jpeg', 'gif'],
      nurseIndex: 0,
      nurseList: [
        {
          file: '',
          fileType: '',
          message: '',
        },
      ],
      /** 仪器介绍规则 */
      introduceIndex: 0,
      introduceList: [
        {
          file: '',
          fileType: '',
          message: '',
        },
      ],
      /* 正品控商品名 */
      instrumentName: {
        visible: false,
        instrumentId: null,
        nameForm: []
      },
      // 预览弹窗
      previewSrc: '', // 预览地址
      isPreviewVideo: true, // 预览开关
      /* 仪器说明书 */
      instrumentInstructions: {
        visible: false,
        instrumentId: null,
        instructionList: [{
          id: null,
          fileList: [],
          instrumentId: null,
          name: null,
          link: null,
        }]
      },
      /* 模式 */
      mode: {
        modeSortVisible: false,
        modeIdsValueTemp: [],
        modeIdsOptions: [],
        sortMode: [],
      },
      newModeOptionList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询仪器列列表 */
    getList() {
      this.loading = true
      listInstrument(this.queryParams).then((response) => {
        this.instrumentList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.nurseIndex = 0;
      this.nurseList = [
        {
          file: '',
          fileType: '',
          message: '',
        }
      ];
      this.introduceIndex = 0;
      this.introduceList = [
        {
          file: '',
          fileType: '',
          message: '',
        },
      ];
      this.form = {
        id: null,
        name: null,
        type: 1,
        model: 'WL200',
        banner: null,
        logo: null,
        serial: null,
        guarantee: 1,
        dailyClockCredit: 0,
        isExtraClock: 0,
        extraClockCredit: 0,
        /* 额外打卡时间范围 */
        extraClockTimeRange: [],
        bindingCredit: 0,
        miniTagIds: null,
        miniTagNames: null,
        wecomTagIds: null,
        wecomTagNames: null,
        sceneIds: null,
        sceneNames: null,
        nursingTime: null,
        iotVersion: null,
        iotUpgradeData: null,
        isScanCode: 0,
        isPurchase: 0,
        shoppingAppid: null,
        shoppingPath: null,
        bluetoothConnectingTitle: null,
        bluetoothConnectingContent: null,
        bluetoothConnecting: null,
        bluetoothClosed: null,
        bluetoothClosedTitle: null,
        bluetoothClosedContent: null,
        bluetoothConnectFail: null,
        bluetoothConnectFailTitle: null,
        bluetoothConnectFailContent: null,
        iotVersionUpgrade: null,
        sortNo: 1000,
        status: null,
        manualCodeBinding: null,
        scanCodeBinding: null,
        nurseList: null,
        introduceList: null,
        modeIdsValue: [],
        newModeIdList: [],
      }
      /* 仪器封面 */
      this.bannerFile = {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      }
      /* 仪器logo */
      this.logoFile = {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      }
      /* 序列号图片 */
      this.serialFile = {
        uploadHide: false,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      }
      /* 手写绑定介绍视频/图片 */
      this.manualFile = {
        uploadHide: false,
        fileList: [],
      }
      /* 扫码绑定介绍视频/图片 */
      this.scanFile = {
        uploadHide: false,
        fileList: [],
      }
      /* iot升级数据文件 */
      this.iotUpgradeFile = {
        uploadHide: false,
        fileList: [],
      }
      /* 蓝牙连接文件 */
      this.bluetoothConnectFile = {
        uploadHide: false,
        fileList: [],
      }
      /* 蓝牙连接失败文件 */
      this.bluetoothConnectFailFile = {
        uploadHide: false,
        fileList: [],
      }
      /* 蓝牙断开连接文件 */
      this.bluetoothClosedFile = {
        uploadHide: false,
        fileList: [],
      }
      /* 模式 */
      this.mode = {
        modeSortVisible: false,
        modeIdsValueTemp: [],
        modeIdsOptions: [],
        sortMode: [],
      };
      this.newModeOptionList = [];
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        id: null,
        name: null,
        type: null,
      };
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    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 = '添加仪器列'
      /* 所有模式选项 */
      this.mode.modeIdsOptions = [];
      listAllMode().then((response) => {
        if (response.code != 200) {
          this.$message.error('模式获取失败')
        }
        this.mode.modeIdsOptions = response.data
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getInstrument(id).then((response) => {
        this.form = response.data
        // 仪器封面回显
        this.bannerFile = {
          uploadHide: true,
          dialogImageUrl: this.form.banner,
          dialogVisible: false,
          disabled: false,
          fileList: [{name: '', url: this.form.banner}],
        }
        /* 仪器logo */
        this.logoFile = {
          uploadHide: true,
          dialogImageUrl: this.form.logo,
          dialogVisible: false,
          disabled: false,
          fileList: [{name: '', url: this.form.logo}],
        }
        /* 序列号图片 */
        this.serialFile = {
          uploadHide: true,
          dialogImageUrl: this.form.serial,
          dialogVisible: false,
          disabled: false,
          fileList: [{name: '', url: this.form.serial}],
        }
        /* 手写绑定介绍视频/图片 */
        if (this.form.manualCodeBinding != null) {
          this.manualFile = {
            uploadHide: true,
            fileList: [
              {name: '手写绑定介绍视频/图片', url: this.form.manualCodeBinding},
            ],
          }
        }
        /* 扫码绑定介绍视频/图片 */
        if (this.form.scanCodeBinding != null) {
          this.scanFile = {
            uploadHide: true,
            fileList: [
              {name: '扫码绑定介绍视频/图片', url: this.form.scanCodeBinding},
            ],
          }
        }
        /* iot升级数据文件 */
        if (this.form.iotUpgradeData != null) {
          this.iotUpgradeFile = {
            uploadHide: true,
            fileList: [
              {name: 'iot升级数据文件', url: this.form.iotUpgradeData},
            ],
          }
        }

        /* 蓝牙连接文件 */
        if (this.form.bluetoothConnecting != null) {
          this.bluetoothConnectFile = {
            uploadHide: true,
            fileList: [
              {name: '蓝牙连接文件', url: this.form.bluetoothConnecting},
            ],
          }
        }
        /* 蓝牙连接失败文件 */
        if (this.form.bluetoothConnectFail != null) {
          this.bluetoothConnectFailFile = {
            uploadHide: true,
            fileList: [
              {name: '蓝牙连接失败文件', url: this.form.bluetoothConnectFail},
            ],
          }
        }
        /* 蓝牙断开连接文件 */
        if (this.form.bluetoothClosed != null) {
          this.bluetoothClosedFile = {
            uploadHide: false,
            fileList: [
              {name: '蓝牙断开连接文件', url: this.form.bluetoothClosed},
            ],
          }
        }
        // 额外打卡时间
        if (this.form.isExtraClock == 1) {
          this.form.extraClockTimeRange = response.data.extraClockTimeRange;
        }
        this.open = true
        this.title = '修改仪器列'

        /* 首次护理管理视频 */
        if (response.data.nurseList != null) {
          this.nurseIndex = response.data.nurseList.length;
          this.nurseList = response.data.nurseList;
        }

        /* 仪器介绍视频 */
        if (response.data.introduceList != null) {
          this.introduceIndex = response.data.introduceList.length;
          this.introduceList = response.data.introduceList;
        }

        /* 所有模式选项 */
        this.mode.modeIdsOptions = [];
        listAllMode().then((response) => {
          if (response.code != 200) {
            this.$message.error('模式获取失败')
          }
          this.mode.modeIdsOptions = response.data;

          /* 带new标识选项回显 */
          if (this.form.modeIdsValue != null && this.form.modeIdsValue.length > 0) {
            let temp = [];
            for (let i = 0; i < this.form.modeIdsValue.length; i++) {
              let filterModeArr = this.mode.modeIdsOptions.filter((item) => item.id == this.form.modeIdsValue[i])
              temp.push(filterModeArr[0]);
            }
            this.newModeOptionList = temp;
          }
        })
      })
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form.modeIdsValue);
      this.form.nurseList = this.nurseList;
      this.form.introduceList = this.introduceList;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateInstrument(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addInstrument(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id
      this.$modal
        .confirm('是否确认隐藏仪器列编号为"' + ids + '"的数据项？')
        .then(function () {
          return delInstrument(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('操作成功');
        })
        .catch(() => {
        })
    },
    /* 文件上传失败 */
    uploadError() {
      this.$message.error('文件上传失败')
    },
    /** 仪器封面操作 */
    bannerPicturePreview(file) {
      this.bannerFile.dialogImageUrl = file.url
      this.bannerFile.dialogVisible = true
    },
    bannerUploadRemove(file) {
      this.bannerFile.fileList = []
      this.bannerFile.uploadHide = this.bannerFile.fileList.length >= 1
    },
    bannerUploadChange(file, fileList) {
      this.bannerFile.fileList = fileList
      this.bannerFile.uploadHide = this.bannerFile.fileList.length >= 1
    },
    bannerUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.banner = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /** logo 操作 */
    logoPicturePreview(file) {
      this.logoFile.dialogImageUrl = file.url
      this.logoFile.dialogVisible = true
    },
    logoUploadRemove(file) {
      this.logoFile.fileList = []
      this.logoFile.uploadHide = this.logoFile.fileList.length >= 1
    },
    logoUploadChange(file, fileList) {
      this.logoFile.fileList = fileList
      this.logoFile.uploadHide = this.logoFile.fileList.length >= 1
    },
    logoUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.logo = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /** 序列号图片 操作 */
    serialPicturePreview(file) {
      this.serialFile.dialogImageUrl = file.url
      this.serialFile.dialogVisible = true
    },
    serialUploadRemove(file) {
      this.serialFile.fileList = []
      this.serialFile.uploadHide = this.serialFile.fileList.length >= 1
    },
    serialUploadChange(file, fileList) {
      this.serialFile.fileList = fileList
      this.serialFile.uploadHide = this.serialFile.fileList.length >= 1
    },
    serialUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.serial = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /** 手写绑定介绍视频/图片 操作 */
    manualUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    manualUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.manualCodeBinding = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /** 扫码绑定介绍视频/图片 操作 */
    scanUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    scanUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.scanCodeBinding = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /*  iot升级数据文件 */
    iotUpgradeUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    iotUpgradeUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.iotUpgradeData = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /*  蓝牙连接图片 */
    bluetoothConnectUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    bluetoothConnectUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.bluetoothConnecting = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /*  蓝牙断开连接图片 */
    bluetoothFailUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    bluetoothFailUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.bluetoothConnectFail = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /*  蓝牙断开连接图片 */
    bluetoothClosedUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    bluetoothClosedUploadSuccess(response, file) {
      if (response.code == 200) {
        this.form.bluetoothClosed = response.data.url
      } else {
        this.$message.error('图片插入失败')
      }
    },
    /* 是否开启额外打卡奖励 */
    isExtraClockChange() {
      if (this.form.isExtraClock == 0) {
        this.form.extraClockCredit = 0
        this.form.extraClockTimeRange = []
      }
    },
    /* 仪器类型切换 */
    typeChange() {
      // 非IOT仪器
      if (this.form.type == 1) {
        this.form.model = 'WL200';
        this.form.nursingTime = null;
        this.form.iotVersion = null;
        this.form.iotUpgradeData = null;
        this.form.bluetoothConnecting = null;
        this.form.bluetoothConnectingTitle = null;
        this.form.bluetoothConnectingContent = null;
        this.form.bluetoothConnectFail = null;
        this.form.bluetoothConnectFailTitle = null;
        this.form.bluetoothConnectFailContent = null;
        this.form.bluetoothClosed = null;
        this.form.bluetoothClosedTitle = null;
        this.form.bluetoothClosedContent = null;
        this.form.iotVersionUpgrade = null;
      }
    },
    /* 是否购买切换 */
    isPurchaseChang() {
      if (this.form.isPurchase == 0) {
        this.form.shoppingAppid = null
        this.form.shoppingPath = null
      }
    },
    /* 设置小程序可见标签 */
    editMiniProgramTags(row) {
      /* 小程序可见标签 */
      this.miniProgramTag.instrumentId = null;
      this.miniProgramTag.selectTagList = null;
      // 小程序标签树
      getMiniProgramTagTree().then((Response) => {
        this.miniProgramTag.optionTree = Response.data
        this.miniProgramTag.visible = true
        if (row.miniTagIds != null && row.miniTagIds.length > 0) {
          this.miniProgramTag.selectTagList = row.miniTagIds
            .split(',')
            .map(Number)
        }
        this.miniProgramTag.instrumentId = row.id
        listInstrumentTag({
          instrumentId: row.id,
          type: 1
        }).then((res) => {
          if (res.code == 200 && res.data != null && res.data.length > 0) {
            this.miniProgramTag.selectTagList = res.data.map(obj => obj.tagId);
          }
        })
      })
    },
    /* 设置企微可见标签 */
    editWecomTags(row) {
      this.wecomTag.instrumentId = null;
      this.wecomTag.selectTagList = null;
      // 外部标签树
      getWecomTagTree().then((response) => {
        this.wecomTag.optionTree = response.data
        this.wecomTag.visible = true
        if (row.wecomTagIds != null && row.wecomTagIds.length > 0) {
          this.wecomTag.selectTagList = row.wecomTagIds.split(',').map(Number)
        }
        this.wecomTag.instrumentId = row.id
        listInstrumentTag({
          instrumentId: row.id,
          type: 2
        }).then((res) => {
          if (res.code == 200 && res.data != null && res.data.length > 0) {
            this.wecomTag.selectTagList = res.data.map(obj => obj.tagId);
          }
        })
      })
    },
    /* 保存小程序标签 */
    submitMiniProgramTagList() {
      if (this.miniProgramTag.selectTagList == null || this.miniProgramTag.selectTagList.length == 0) {
        this.$message.warning(`请选择小程序标签`);
        return;
      }
      addInstrumentTag({
        instrumentId: this.miniProgramTag.instrumentId,
        tagIdList: this.miniProgramTag.selectTagList,
        type: 1
      }).then((response) => {
        this.$modal.msgSuccess('操作成功')
        this.miniProgramTag.visible = false
        this.getList()
      })
    },
    /* 保存外部标签 */
    submitWecomTagList() {
      if (this.wecomTag.selectTagList == null || this.wecomTag.selectTagList.length == 0) {
        this.$message.warning(`请选择外部标签`);
        return;
      }
      addInstrumentTag({
        instrumentId: this.wecomTag.instrumentId,
        tagIdList: this.wecomTag.selectTagList,
        type: 2
      }).then((response) => {
        this.$modal.msgSuccess('操作成功')
        this.wecomTag.visible = false
        this.getList()
      })
    },

    /* 初次护理弹窗 */
    addNurse() {
      this.nurseList.push({
        file: '',
        fileType: '',
        message: '',
      })
    },
    handleNurseDelete(item) {
      this.nurseList.splice(item.$index, 1)
      console.log('handleNurseDelete', item)
    },
    addNurseFile(index) {
      this.nurseIndex = index
      this.$refs.nurseFile.value = ''
      this.$refs.nurseFile.click()
    },
    async nurseFileChange(e) {
      // 图片选中
      let files = e.target.files
      if (files.length) {
        let data = await this.commonFileUpload(files[0])
        console.log('data', data)
        this.nurseList[this.nurseIndex].file = data.url
        let type = files[0].type
        let isImage = this.imageFileType.some((item) => type.includes(item))
        if (isImage) {
          this.nurseList[this.nurseIndex].fileType = 'image'
        } else {
          this.nurseList[this.nurseIndex].fileType = 'video'
        }

        this.nurseList = JSON.parse(JSON.stringify(this.nurseList))
      }
    },
    /* 仪器介绍 */
    addIntroduce() {
      this.introduceList.push({
        file: '',
        fileType: '',
        message: '',
      })
    },
    handleIntroduceDelete(item) {
      this.introduceList.splice(item.$index, 1)
      console.log('handleIntroduceDelete', item)
    },
    addIntroduceFile(index) {
      this.introduceIndex = index
      this.$refs.introduceFile.value = ''
      this.$refs.introduceFile.click()
    },
    async introduceFileChange(e) {
      let files = e.target.files
      // 图片选中
      if (files.length) {
        let data = await this.commonFileUpload(files[0])
        this.introduceList[this.introduceIndex].file = data.url
        let type = files[0].type
        let isImage = this.imageFileType.some((item) => type.includes(item))
        if (isImage) {
          this.introduceList[this.introduceIndex].fileType = 'image'
        } else {
          this.introduceList[this.introduceIndex].fileType = 'video'
        }

        this.introduceList = JSON.parse(JSON.stringify(this.introduceList))
      }
    },
    /* 文件上传函数 */
    async commonFileUpload(file) {
      this.loading = true
      let formData = new FormData()
      formData.append('file', file)
      let res = await upload(formData)

      this.loading = false
      if (res.code === 200) {
        return res.data
      }
      return false
    },

    getSplitList(data) {
      if (data) {
        return data.split(',')
      }
      return []
    },

    /* 正品控名称配置 */
    addInstrumentNameline() {
      this.instrumentName.nameForm.push({
        id: null,
        instrumentId: this.instrumentName.instrumentId,
        productName: ''
      })
    },
    editInstrumentNameVisible(row) {
      this.instrumentName.instrumentId = row.id;
      // 查询现有的正品控名称
      listRelate({
        instrumentId: row.id
      }).then((response) => {
        if (response.data != null && response.data.length > 0) {
          this.instrumentName.nameForm = response.data;
        } else {
          this.instrumentName.nameForm = [{
            id: null,
            instrumentId: this.instrumentName.instrumentId,
            productName: ''
          }];
        }
        this.instrumentName.visible = true;
      })
    },
    delInstrumentName(item) {
      // 获取 id，删除关联的正品控名称
      if (item.row.id != null) {
        // 执行删除
        delRelate(item.row.id).then((response) => {
          this.$modal.msgSuccess('删除成功');
        })
      }
      this.instrumentName.nameForm.splice(item.$index, 1)
      if (this.instrumentName.nameForm.length == 0) {
        this.addInstrumentNameline()
      }
    },
    saveInstrumentName(item) {
      console.log(item)
      if (item.id != null) {
        updateRelate(item).then((response) => {
          this.$modal.msgSuccess('修改成功');
        })
      } else {
        addRelate(item).then((response) => {
          this.$modal.msgSuccess('新增成功');
        })
      }
    },

    /* 仪器说明书 */
    addInstrumentInstructionLine() {
      this.instrumentInstructions.instructionList.push({
        id: null,
        fileList: [],
        instrumentId: this.instrumentInstructions.instrumentId,
        name: null,
        link: null,
      })
    },
    editInstrumentInstructionVisible(row) {
      this.instrumentInstructions.instrumentId = row.id;
      // 查询现有的仪器说明书
      listInstructions({
        instrumentId: row.id
      }).then((response) => {
        if (response.data != null && response.data.length > 0) {
          this.instrumentInstructions.instructionList = response.data;
          for (let i = 0; i < response.data.length; i++) {
            this.instrumentInstructions.instructionList[i].fileList = [{
              name: response.data[i].name + ".pdf",
              url: response.data[i].url,
            }];
          }
        } else {
          this.instrumentInstructions.instructionList = [{
            id: null,
            fileList: [],
            instrumentId: this.instrumentInstructions.instrumentId,
            name: null,
            link: null,
          }];
        }
        this.instrumentInstructions.visible = true;
      })
    },
    delInstrumentInstruction(item) {
      // 获取 id，删除关联的仪器说明书
      if (item.row.id != null) {
        // 执行删除
        delInstructions(item.row.id).then((response) => {
          this.$modal.msgSuccess('删除成功');
        })
      }
      this.instrumentInstructions.instructionList.splice(item.$index, 1)
      if (this.instrumentInstructions.instructionList.length == 0) {
        this.addInstrumentInstructionLine();
      }
    },
    saveInstrumentInstruction(item) {
      if (item.instrumentId == null) {
        this.$modal.msgError('参数异常');
        return;
      }
      if (item.name == null) {
        this.$modal.msgError('请输入说明书名称');
        return;
      }
      if (item.link == null) {
        this.$modal.msgError('请上传说明书');
        return;
      }
      if (item.id != null) {
        updateInstructions(item).then((response) => {
          this.$modal.msgSuccess('修改成功');
        })
      } else {
        addInstructions(item).then((response) => {
          this.$modal.msgSuccess('新增成功');
        })
      }
    },
    instructionUploadExceed(files, fileList) {
      this.$message.warning(`您已上传了文件，如需更换，请先删除原上传的文件`)
    },
    instructionUploadSuccess(response, file, fileList, index) {
      if (response.code == 200) {
        this.instrumentInstructions.instructionList[index].link = response.data.url;
      } else {
        this.$message.error('图片插入失败')
      }
    },
    viewInstrumentInstruction(item) {
      window.open(item.link, '_blank');
    },
    /* 模式 */
    openModeIdDialog() {
      this.mode.modeIdsValueTemp = [];
      this.mode.sortMode = [];
      if (this.form.modeIdsValue.length > 1) {
        for (let i = 0; i < this.form.modeIdsValue.length; i++) {
          let filterModeArr = this.mode.modeIdsOptions.filter((item) => item.id == this.form.modeIdsValue[i])
          this.mode.modeIdsValueTemp.push(filterModeArr[0]);
        }
        this.mode.modeSortVisible = true;
      }
    },
    handleCloseMode() {
      this.mode.modeIdsValueTemp = [];
      this.mode.sortMode = [];
      this.mode.modeSortVisible = false;
    },
    handleSaveMode() {
      let newSort = [];
      for (let i = 0; i < this.mode.modeIdsValueTemp.length; i++) {
        newSort.push(this.mode.modeIdsValueTemp[i].id)
      }
      this.form.modeIdsValue = newSort;
      this.handleCloseMode()
    },
    modeIdsValueChang() {
      let temp = [];
      if (this.form.modeIdsValue.length > 0) {
        for (let i = 0; i < this.form.modeIdsValue.length; i++) {
          let filterModeArr = this.mode.modeIdsOptions.filter((item) => item.id == this.form.modeIdsValue[i])
          temp.push(filterModeArr[0]);
        }
      }
      this.newModeOptionList = temp;
    },


  },
}
</script>

<style lang="scss" scoped>
::v-deep .hide .el-upload--picture-card {
  display: none;
}

#nurseFile,
#introduceFile {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -100px;
}

video {
  object-fit: fill;
}

.itemTag {
  margin-top: 20px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
