trace-admin/src/views/production/setting/miniProConfig.vue

<template>
  <div class="app-container setting-main">
    <div class="app-container-search main-radius">
      <h1 style="margin: 0;">小程序显示配置</h1>
    </div>
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title">当前批次基本信息</div>
      <el-row class="setting-content">
        <el-col :span="6"><div>批次号：{{ harvestBatchConfig.harvestBatchId }}</div></el-col>
        <el-col :span="6"><div>所属商户：{{ harvestBatchConfig.belongBusinessName }}</div></el-col>
        <el-col :span="6"><div>商品名称：{{ harvestBatchConfig.goodsName }}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <div>当前所选语言：{{ languageType.name }}</div>
          <div style="color: red">*请注意, 每种语言需有对应配置, 否则小程序将无法正常显示</div>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="24" style="line-height: 40px;">
          <span style="margin-right: 20px;">小程序显示模板:</span>
          <el-select v-model="harvestBatchConfig.templateId" placeholder="请选择小程序显示模板">
            <el-option
              v-for="template in uniTemplateOptions"
              :key="template.id"
              :label="template.templateName"
              :value="template.id"
            />
          </el-select>
        </el-col>
      </el-row>
    </div>

    <!-- ///////////////////////////////////////// 商品信息 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">商品信息</div>
        <div class="">
          <el-button class="mr-10" @click="openImportGoodsInfo">导入商品信息</el-button>
        </div>
      </div>
      <div class="setting-title flex-jcenter">
        <div class="mr-6">
          <el-input v-model="goodsInfo.linkName" />
        </div>
        <div>
          <span class="fs-12 mr-6" >扫码展示</span>
          <el-switch v-model="goodsInfo.scanShow" :active-value="true" :inactive-value="false"></el-switch>
        </div>
      </div>
      <operateInfo
        :operateDetails.sync="goodsInfo.operateDetails"
        :typeList="typeList"
        :type="'goods'"
      />
    </div>

    <!-- ///////////////////////////////////////// 产地信息 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container" v-loading="envDataLoading">
      <div class="setting-title flex-jcenter">
        <div class="">产地信息</div>
        <div class="">
        </div>
      </div>
      <div class="setting-title flex-jcenter">
        <div class="mr-6">
          <el-select v-model="currentLandInfoId" placeholder="请选择地块" @change="handleLandChange">
            <el-option
              v-for="landInfo in landInfos"
              :key="landInfo.value"
              :label="landInfo.label"
              :value="landInfo.value"
            />
          </el-select>
        </div>
        <div>
          <el-button class="mr-10" @click="openSelectEnvType">选择想要展示的环境信息</el-button>
        </div>
      </div>
      <div v-if="showECharts" id="envDataECharts" style="width: 100%; height: 500px;">
      </div>
      <div slot="empty" v-if="!showECharts">
        <EmptyTable />
      </div>

      <div class="setting-title flex-jcenter">
        <div style="font-size: 20px; margin-left: 10px;">监控列表</div>
      </div>
      <el-tabs @tab-click="handleMonitorChange" tab-position="left" style="height: 600px;" v-if="showMonitorList">
        <el-tab-pane
          :label="item.monitorPoints"
          v-for="item in deviceInfo.monitorObj[currentLandInfoId]"
          :key="item.monitorCode"
        >
        <!--
          <video :src="item.url" ></video>-->
          <Monitor v-if="currentMonitorCode == item.monitorCode" :monitorUrl="item.url" :playerId="item.monitorCode" @refresh="refreshMonitorList"/>
        </el-tab-pane>
      </el-tabs>
      <div slot="empty" v-if="!showMonitorList">
        <EmptyTable />
      </div>
    </div>

    <!-- ///////////////////////////////////////// 农事活动 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">
          <span class="mr-6">农事活动</span>
        </div>
        <el-button @click="openSelectPlan">选择地块计划</el-button>
      </div>
      <el-collapse>
        <el-collapse-item v-for="(item, index) in farmingPlans" :key="index" :name="index">
          <template #title>
            <div class="info-setting-title">
              <span style="display: flex; width: 190px;">
                <el-input v-model="item.linkName" @click.native.stop="" />
              </span>
              <div style="flex: 1;"></div>
              <div style="display: flex;align-items: center;">
                <div>
                  <span class="fs-12 mr-6" >扫码展示</span>
                  <el-switch v-model="item.scanShow" @change="changePlanScanShow($event, index)"  @click.native.stop="" :active-value="true" :inactive-value="false"></el-switch>
                </div>
                <el-button slot="reference" type="text" class="mlr-10" @click="farmingPlans.splice(index, 1)" @click.native.stop="">删除</el-button>
              </div>
            </div>
          </template>
          <div style="margin-top: 10px;">
            <el-form ref="form" label-width="80px">
              <el-row :gutter="40">
                <el-col :span="5">
                  <el-form-item label="地块编码:">
                    <el-input disabled v-model="item.operateDetails[0].content"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="计划编号:">
                    <el-input disabled v-model="item.operateDetails[1].content"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="种植时间:">
                    <el-input disabled v-model="item.operateDetails[2].content"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="采收时间:">
                    <el-input disabled v-model="item.operateDetails[3].content"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="说明:">
                    <el-input v-model="item.operateDetails[4].content"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table :data="item.tableData" style="width: 100%">
              <el-table-column prop="jobType" label="任务类型">
                <template slot-scope="{ row }">
                  <el-input v-model="row.jobType" placeholder="请输入任务类型"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inputsName" label="农资名称">
                <template slot-scope="{ row }">
                  <el-input v-model="row.inputsName" placeholder="请输入农资名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inputsBatchId" label="农资批次编号">
                <template slot-scope="{ row }">
                  <div class="flex-acenter">
                    <el-tooltip class="item" effect="dark" :content="row.inputsBatchId" placement="top">
                      <span class="more-width-full">{{ row.inputsBatchId }}</span>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="jobDate" label="作业日期">
                <template slot-scope="{ row }">
                  <div class="flex-acenter">
                    <!-- <span>{{ row.jobDate }}</span> -->
                    <el-input v-model="row.jobDate" placeholder="请输入作业日期"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="jobWorker" label="作业员工">
                <template slot-scope="{ row }">
                  <div class="flex-acenter">
                    <!-- <span>{{ row.jobWorker }}</span> -->
                    <el-input v-model="row.jobWorker" placeholder="请输入作业员工"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="图片">
                <template v-slot="{ row }">
                  <div class="flex-acenter">
                    <div v-if="row.jobImage" @click="openPreviewImage(row.jobImage)">查看</div>
                    <div v-if="!row.jobImage">-</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="视频">
                <template v-slot="{ row }">
                  <div class="flex-acenter">
                    <div v-if="row.jobVideo" @click="openPreviewVideo(row.jobVideo)">查看</div>
                    <div v-if="!row.jobVideo">-</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="说明">
                <template v-slot="{ row }">
                  <div class="flex-acenter">
                    <el-input v-model="row.remarks" placeholder="请输入"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="扫码展示">
                <template v-slot="{ row }">
                  <el-switch v-model="row.scanShow"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template v-slot="{ $index }">
                  <el-button @click="item.tableData.splice($index, 1) && item.farmingJobs.splice($index, 1)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <EmptyTable />
              </div>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div v-if="farmingPlans && farmingPlans.length == 0">
        <EmptyTable />
      </div>
    </div>

    <!-- ///////////////////////////////////////// 商品认证 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">商品认证</div>
        <div class="">
          <el-button class="mr-10" @click="openImportGoodsVerify">导入商品认证</el-button>
        </div>
      </div>
      <el-table :data="goodsVerifys" style="width: 100%">
        <el-table-column prop="verifyName" label="认证名称">
          <template v-slot="{ row }">
            <el-input v-model="row.verifyName" placeholder="请输入认证名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="verifyAgencies" label="认证机构">
          <template v-slot="{ row }">
            <el-input v-model="row.verifyAgencies" placeholder="请输入认证机构"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="verifyDate" label="有效期">
          <template v-slot="{ row }">
            <el-input v-model="row.verifyDate" placeholder="请输入有效期"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="verifyDataUrl" label="认证资料" >
          <template v-slot="{ row }">
            <template v-if="row.verifyDataUrl != '--'">
              <el-image
                style="width: 60px; height: 60px;margin: 5px;"
                v-for="(item, index) in row.verifyDataUrl"
                :key="index"
                :src="item"
                :preview-src-list="row.verifyDataUrl"
                fit="fill"></el-image>
            </template>
            <template v-else>
              <span>{{row.verifyDataUrl}}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="扫码展示">
          <template v-slot="{ row }">
            <el-switch v-model="row.scanShow" :active-value="true" :inactive-value="false"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{$index}">
            <!--
            <el-popconfirm title="确定删除吗？" @confirm="deleteVerify($index)">
              <el-button slot="reference" type="text" size="small">删除</el-button>
            </el-popconfirm>
            -->
            <el-button slot="reference" type="text" size="small" @click="deleteVerify($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ///////////////////////////////////////// 检验检疫 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">
          <span class="mr-6">检验检疫</span>
        </div>
        <el-button @click="openSelectInspection" >选择检验检疫</el-button>
      </div>
      <el-collapse>
        <el-collapse-item v-for="(item, index) in inspections" :key="index" :name="index">
          <template #title>
            <div class="info-setting-title">
              <span style="display: flex; width: 190px;">
                <el-input v-model="item.linkName" @click.native.stop=""  />
              </span>
              <div style="display: flex;align-items: center;">
                <div>
                  <span class="fs-12 mr-6" >扫码展示</span>
                  <el-switch v-model="item.scanShow" @change="changeInspectionScanShow($event, index)" @click.native.stop="" :active-value="true" :inactive-value="false"></el-switch>
                </div>
                <el-button slot="reference" type="text" class="mlr-10" @click="inspections.splice(index, 1)" @click.native.stop="">删除</el-button>
              </div>
            </div>
          </template>
          <div style="margin-top: 10px;">
            <operateInfo
              :operateDetails.sync="item.operateDetails"
              :typeList="typeList"
            />
            <el-table :data="item.tableData" style="width: 100%; margin: 10px 0px;">
              <el-table-column prop="inspectionItem" label="检验项目">
                <template v-slot="{ row }">
                  <el-input v-model="row.inspectionItem" placeholder="请输入检验项目"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionUnit" label="单位">
                <template v-slot="{ row }">
                  <el-input v-model="row.inspectionUnit" placeholder="请输入单位"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionRequire" label="技术要求">
                <template v-slot="{ row }">
                  <el-input v-model="row.inspectionRequire" placeholder="请输入技术要求"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionResult" label="检测结果">
                <template v-slot="{ row }">
                  <el-input v-model="row.inspectionResult" placeholder="请输入检测结果"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionConclusion" label="单项结论">
                <template v-slot="{ row }">
                  <el-input v-model="row.inspectionConclusion" placeholder="请输入单项结论"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="扫码展示">
                <template v-slot="{ row }">
                  <el-switch v-model="row.scanShow"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template v-slot="{ $index }">
                  <el-button @click="item.tableData.splice($index, 1) && item.inspectionItems.splice($index, 1)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <EmptyTable />
              </div>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div v-if="inspections.length == 0">
        <EmptyTable />
      </div>
    </div>

    <!-- ///////////////////////////////////////// 环节信息 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">环节信息</div>
        <div class="">
           <el-button class="" @click="linksExport">溯源环节导出</el-button>
           <el-button class="mr-10" @click="linksImport">溯源环节导入</el-button>
           <el-select
             v-model="templateId"
             class="mr-10"
             placeholder="选择模板">
             <el-option :value="item.templateId" :label="item.templateName" v-for="(item, index) in templateList" :key="index"></el-option>
           </el-select>
           <el-button type="info" plain :disabled="!templateId" @click="importModel">导入模板</el-button>
           <el-button class="mr-10" type="primary" @click="saveModel">保存为模板</el-button>
        </div>
      </div>
      <el-collapse>
        <el-collapse-item v-for="(item, index) in linkInfos" :key="index" :name="index">
          <template #title>
            <div class="info-setting-title">
              <span style="display: flex; width: 190px;">
                <el-input v-model="item.linkName" @click.native.stop=""  />
              </span>
              <div style="display: flex;align-items: center; margin-right: 10px;">
                <div>
                  <span class="fs-12 mr-6" >扫码展示</span>
                  <el-switch v-model="item.scanShow" :active-value="true" :inactive-value="false" @click.native.stop=""></el-switch>
                </div>
                <el-button slot="reference" type="text" class="mlr-10" @click="linkInfos.splice(index, 1)" @click.native.stop="">删除</el-button>
                <div class="flex-col flex-allcenter">
                  <i class="el-icon-caret-top operate-icon" @click="tempSerial(linkInfos, index)" @click.stop="" :class="[index!=0?'operate-active':'']"></i>
                  <i class="el-icon-caret-bottom operate-icon" @click="downtempSerial(linkInfos, index)" @click.stop="" :class="[linkInfos.length != 1 && linkInfos.length - 1 != index ?'operate-active':'']"></i>
                </div>
              </div>
            </div>
          </template>
          <div style="margin-top: 10px;">
            <operateInfo
              :operateDetails.sync="item.operateDetails"
              :typeList="typeList"
              :type="'links'"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
      <div slot="empty" v-if="linkInfos && linkInfos.length == 0">
        <EmptyTable />
      </div>
      <div class="setting-btn-area" @click="addLink">
        <i style="font-size: 14px;" class="el-icon-plus"></i>
        <div class="buttonText">添加环节</div>
      </div>
    </div>

    <!-- ///////////////////////////////////////// 企业信息 ///////////////////////////////////////// -->
    <div class="app-container-search main-bgcolor main-radius setting-container">
      <div class="setting-title flex-jcenter">
        <div class="">企业信息</div>
        <div class="">
          <el-button class="mr-10" @click="openImportBusinessInfo">导入企业信息</el-button>
        </div>
      </div>
      <div class="setting-title flex-jcenter" v-if="businessInfo">
        <div class="mr-6">
          <el-input v-model="businessInfo.linkName" />
        </div>
        <div>
          <span class="fs-12 mr-6" >扫码展示</span>
          <el-switch v-model="businessInfo.scanShow" :active-value="true" :inactive-value="false"></el-switch>
          <el-button slot="reference" type="text" class="mlr-10" @click="businessInfo = null">删除</el-button>
        </div>
      </div>
      <operateInfo
        v-if="businessInfo"
        :operateDetails.sync="businessInfo.operateDetails"
        :typeList="typeList"
      />
    </div>

    <div class="setting-footer-btn">
      <el-button @click="$router.go(-1);">取消</el-button>
      <el-button type="primary" @click="submitSave">保存</el-button>
    </div>

    <!-- 选择商品/企业信息弹窗 -->
    <el-dialog
      v-if="selectOperateVisible"
      title="导入信息"
      :visible.sync="selectOperateVisible"
      width="600px" append-to-body
    >
      <SelectOperateView :tableData="selectOperateTableData" :typeList="typeList" :selectedOperateDetails.sync="selectedOperateDetails"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectOperateVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitImport">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择环境数据类型弹窗 -->
    <el-dialog class="add-dialog" title="环境类型" v-if="selectEnvTypeVisible" :visible.sync="selectEnvTypeVisible" width="900px" append-to-body>
       <Transfer
        ref="envTypeTransfer"
        :data="canSelectEnvTypeOptions"
        :vModel="envTypeCheckedIdList"
        :renderContent="renderEnvTypeLabel"
        :titles="['可选', '已选']"
        @change="handleSelectEnvTypeChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSelectEnvType">确 定</el-button>
        <el-button @click="selectEnvTypeVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择认证信息弹窗 -->
    <el-dialog
      v-if="selectVerifyVisible"
      title="认证信息"
      :visible.sync="selectVerifyVisible"
      width="900px" append-to-body
    >
      <SelectVerifyView :tableData="selectVerifyTableData" :selectedGoodsVerifys.sync="selectedGoodsVerifys"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectVerifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGoodsVerifyImport">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择检验检疫弹窗 -->
    <el-dialog
      v-if="selectInspectionVisible"
      title="检验检疫信息"
      :visible.sync="selectInspectionVisible"
      width="900px" append-to-body
    >
      <SelectInspectionView :tableData="selectInspectionTableData" :selectedInspection.sync="selectedInspection"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectInspectionVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInspectionImport">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 溯源环节上传 -->
    <el-dialog
      title="溯源环节上传"
      :visible.sync="templateImportVisible"
      width="600px"
    >
      <el-upload
        class="upload-demo"
        drag
        :limit="fileLimit"
        :auto-upload="false"
        :before-upload="handleBeforeUpload"
        :on-exceed="handleExceed"
        :on-change="handleChange"
        :file-list="fileList"
        :action="uploadFileUrl">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传json文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>

    <!-- 环节保存为模板 -->
    <el-dialog
      title="保存为模板"
      :visible.sync="templateVisible"
      width="600px"
    >
      <el-form
        ref="templateForm"
       :model="templateForm"
       :rules="templateRules"
       label-position="top"
       label-width="100px">
        <el-form-item label="模板名称" prop="linkName">
          <el-input v-model="templateForm.linkName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="templateVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSaveTemp">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 选择计划弹窗 -->
    <el-dialog class="add-dialog" title="地块计划信息列表" v-if="selectPlanVisible" :visible.sync="selectPlanVisible" width="1200px" append-to-body>
       <Transfer
        ref="transfer"
        :data="planOptions"
        :vModel="inputCheckedIdList"
        :renderContent="renderTransferLabel"
        :titles="['可选', '已选']"
        @change="handleSelectChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTransferForm">确 定</el-button>
        <el-button @click="selectPlanVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog class="add-dialog" title="查看图片" :visible.sync="previewImageVisible" width="600px" append-to-body>
      <ImageUpload v-model="imageList" :disabled="true"></ImageUpload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewImageVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog class="add-dialog" title="查看视频" :visible.sync="previewVideoVisible" width="600px" append-to-body>
      <VideoUpload v-model="videoList" :value="videoList" :disabled="true"></VideoUpload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewVideoVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import * as echarts from 'echarts';
  import { Loading } from 'element-ui';
  import { getByGoodsId } from '@/api/basic/goodsInfo';
  import { getBusinessInfo } from '@/api/basic/businessInfo';
  import { getGoodsVerifyByGoodsId } from '@/api/basic/goodsVerify';
  import { getHarvestBatchConfig, updateHarvestBatchConfig } from '@/api/production/harvestBatch';
  import { getTempListGoodsId , copyToTemplate , getTemplateDetail } from '@/api/configure/traceTemplate';
  import { exportLinkConfig } from '@/api/product/harvestBatch';
  import { getDictDataListByType } from '@/api/system/dict/data';
  import { getLandPlanByGoodsId, getLandFarmingConfig } from '@/api/product/landPlan';
  import { getInspectionByHarvestBatchId } from '@/api/production/inspection';
  import { getAvailableEnvType, getEnvTypeConfigGroupByLandId } from '@/api/iot/envType';
  import { getAVGEnvDatasByTypeIds } from '@/api/iot/envData';
  import { getBusinessNamesByLandId } from '@/api/product/landInfo';
  import { getMonitorPreviewURLByLandId } from '@/api/iot/deviceInfo';
  import { getLanguageType } from "@/api/system/languageType";
  import { getUniTemplateOptions } from '@/api/configure/uniTemplate';
  import operateInfo from '@/components/Customer/operateInfo2';
  import SelectOperateView from './selectOperateView';
  import SelectVerifyView from './selectVerifyView';
  import SelectInspectionView from './selectInspectionView';
  import EmptyTable from '@/components/EmptyTable';
  import Transfer from '@/components/Customer/Transfer';
  import ImageUpload from '@/components/ImageUpload';
  import VideoUpload from '@/components/VideoUpload';
  import Monitor from '@/components/Monitor';

  const getXDayAgo = (dayNum) => {
    const dates = [];
    // 获取当前日期
    const now = new Date();
    // 循环获取最近 dayNum 天的日期
    for (let i = dayNum - 1; i >= 0; i--) {
      // 获取当前日期的时间戳
      const timestamp = now.getTime();

      // 计算 i 天前的时间戳
      const dayTimestamp = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const iDayAgoTimestamp = timestamp - i * dayTimestamp;

      // 转换为日期对象
      const date = new Date(iDayAgoTimestamp);

      // 格式化日期为 "yyyy-MM-dd" 的字符串并存入数组
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      dates.push(year + "-" + month + "-" + day);
    }
    return dates;
  }

  export default {
    components: {
      operateInfo,
      SelectOperateView,
      SelectVerifyView,
      SelectInspectionView,
      EmptyTable,
      Transfer,
      ImageUpload,
      VideoUpload,
      Monitor,
    },
    data() {
      return {
        languageTypeId: null,
        languageType: {},
        uniTemplateOptions: [],
        // 采收批次配置信息
        harvestBatchConfig: {},
        businessInfo: null,
        // businessInfo: {
        //   linkName: '企业信息',
        //   scanShow: true,
        // },
        goodsInfo: {
          linkName: '商品信息',
          scanShow: true,
        },
        goodsVerifys: [],
        linkInfos: [],
        farmingPlans: [],
        inspections: [],
        typeList: [],// 操作明细类型
        // 设备信息
        deviceInfo: {
          srcEnvTypes: {},
          envTypes: {}, // 当前的环境类型 { landId:[envTypeList] }
          envDatasObj: {}, // 显示的环境数据 { typeId:[envDatas] }
          monitorObj: {}, // 监控集合 { landId:[monitorList] }
        },
        landInfos: [],
        currentLandInfoId: null,
        selectEnvTypeVisible: false,
        canSelectEnvTypeOptions: [], // 可选的环境类型集合
        envTypeCheckedIdList: [],
        envDataLoading: false,
        showECharts: false, // 是否显示图表
        showMonitorList: false,
        // 图表实例对象
        echartsInstance: null,
        // 图表配置信息
        eChartsOption: {
          title: {
            text: '环境数据信息',
          },
          tooltip: {
            trigger: 'axis',
            show: true
          },
          legend: {
            left: '25%',
            top: '1%',
            data: [],
          },
          // x轴
          xAxis: {
            type: 'category',
            data: getXDayAgo(7), // 每格的下标
          },
          // y轴
          yAxis: {},
          series: [
            {
              data: [],
              type: 'line',
              smooth: true
            }
          ]
        },
        currentMonitorCode: null,

        // 显示选择操作明细窗口
        selectOperateVisible: false,
        importType: 'goodsInfo',
        selectOperateTableData: [],
        selectedOperateDetails: [],
        // 认证信息窗口
        selectVerifyVisible: false,
        selectVerifyTableData: [],
        selectedGoodsVerifys: [],
        // 选择检验信息窗口
        selectInspectionVisible: false,
        selectInspectionTableData: [],
        selectedInspection: [],

        // 环节模板列表
        templateList: [],
        // 当前选择的模板id
        templateId:'',
        // 环节导入弹窗
        templateImportVisible: false,
        // 模板保存弹窗
        templateVisible: false,
        // 模板保存表单
        templateForm: {},
        // 模板保存校验规则 rules
        templateRules: {
          linkName: [
            { required: true, message: '请输入环节名称', trigger: 'change' }
          ],
        },
        // 上传文件参数
        fileList: [],
        fileSize: 0.5,
        fileLimit: 1,
        fileType: ['json'],
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址

        // 查看图片弹窗
        previewImageVisible: false,
        // 查看视频弹窗
        previewVideoVisible: false,
        // 选择计划弹窗
        selectPlanVisible: false,
        // 计划选项列表
        planOptions: [],
        // 已选中的地块列表【临时】，只在弹窗时作为临时存放用
        inputCheckedIdList: [],

        imageList: [],
        videoList: [],
        openImage: false,
        openVideo: false,
      }
    },

    created() {
      const { query: { id, typeId } } = this.$route;
      this.languageTypeId = typeId;
      this.getHarvestBatchConfig(id, typeId);
      this.initDate();
    },

    methods: {
      async initDate() {
        const typeParams = {
          page: 1,
          pageSize: 100,
          type: 'operate_detail_type',
        };
        const { data } = await getDictDataListByType(typeParams);
        this.typeList = data;
        // 请求语言类型
        const res = await getLanguageType(this.languageTypeId);
        if (!res.data) {
          this.$message.error('所选语言类型不存在或已删除');
          return;
        }
        this.languageType = res.data;
        getUniTemplateOptions().then(({ data: options }) => {
          this.uniTemplateOptions = options;
        });
      },

      getHarvestBatchConfig(id, languageTypeId) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getHarvestBatchConfig(id, languageTypeId).then(({ data, data: { belongBusinessId, goodsId, businessInfo, goodsInfo, goodsVerifys, linkInfos, farmingPlans, inspections, } }) => {
          this.harvestBatchConfig = {
            ...data,
            id,
          }
          // 企业信息
          if(businessInfo !== null) {
            const operateDetails = businessInfo.operateDetails?.map(detail => {
              if(detail.type == 7 || detail.type == 10) {
                detail.content = JSON.parse(detail.content);
                detail.mapContent = detail.content;
              }
              return detail;
            });
            this.businessInfo = {
              ...businessInfo,
              operateDetails,
            };
          }
          // 商品信息
          if(goodsInfo !== null) {
            const operateDetails = goodsInfo.operateDetails?.map(detail => {
              if(detail.type == 7 || detail.type == 10) {
                detail.content = JSON.parse(detail.content);
                detail.mapContent = detail.content;
              }
              return detail;
            });
            this.goodsInfo = {
              ...goodsInfo,
              operateDetails,
            };
          }
          // 商品认证
          this.goodsVerifys = goodsVerifys.map(verify => {
            const { operateDetails } = verify;
            return {
              ...verify,
              verifyName: operateDetails[0].content,
              verifyAgencies: operateDetails[1].content,
              verifyDate: operateDetails[2].content,
              verifyDataUrl: operateDetails[3].content.split(','),
            };
          });
          // 环节
          this.linkInfos = linkInfos.map(item => {
            const { operateDetails } = item;
            operateDetails.map(items=>{
              if(items.type == 7 || items.type == 10) {
                items.content = JSON.parse(items.content);
                items.mapContent = items.content;
              }
            });
            return {
              ...item,
              isExpand: false,
              operateDetails,
            }
          });
          // 农事计划
          this.farmingPlans = farmingPlans.map((item, index)=>{
            item.isExpand = false;
            if(index == 0) item.isExpand = true;
            // item.scanShow = true;
            item.tableData = [];
            item.farmingJobs?.map((job, index) => {
              job.indexKey = index;
              // job.scanShow = true;
              item.tableData.push({
                jobType: job.operateDetails[0].content,
                inputsName: job.operateDetails[1].content,
                inputsBatchId: job.operateDetails[2].content,
                jobDate: job.operateDetails[3].content,
                jobWorker: job.operateDetails[4].content,
                jobImage: job.operateDetails[5].content,
                jobVideo: job.operateDetails[6].content,
                remarks: job.operateDetails[7].content,
                scanShow: job.scanShow,
                indexKey: index,
              });
            });
            return item;
          });

          // 检验检疫
          this.inspections = inspections.map((item, index)=>{
            item.isExpand = false;
            if(index == 0) item.isExpand = true;
            item.operateDetails?.map(detail => {
              if(detail.type == 7 || detail.type == 10) {
                detail.content = JSON.parse(detail.content);
                detail.mapContent = detail.content;
              }
            });
            item.tableData = [];
            item.inspectionItems?.map((iItem, index) => {
              iItem.indexKey = index;
              item.tableData.push({
                inspectionItem: iItem.operateDetails[0].content,
                inspectionUnit: iItem.operateDetails[1].content,
                inspectionRequire: iItem.operateDetails[2].content,
                inspectionResult: iItem.operateDetails[3].content,
                inspectionConclusion: iItem.operateDetails[4].content,
                scanShow: iItem.scanShow,
                indexKey: index,
              });
            });
            return item;
          });
          loading.close();
          // 查询模板
          this.getTraceTemplate(goodsId);
          // 查询地块列表
          this.getLandInfoList(belongBusinessId);
        }).catch(() => {
          loading.close();
        });
      },

      // 获得环节模板下拉列表
      getTraceTemplate(goodsId) {
        getTempListGoodsId({ goodsId }).then(({ data }) => {
          this.templateList = data;
        });
      },

      // 打开导入商品信息的窗口
      openImportGoodsInfo() {
        if(this.harvestBatchConfig.goodsId === undefined) {
          return;
        }
        // 查询商品信息
        getByGoodsId({ goodsId: this.harvestBatchConfig.goodsId }).then(({ data }) => {
          const { id, goodsName, goodsType, unitName, shelfLife, goodsImgUrl } = data;
          this.goodsInfo.operateObjId = id;
          this.importType = 'goodsInfo';
          this.selectOperateTableData = [
            {
              title: '商品名称',
              type: 3,
              content: goodsName,
            },
            {
              title: '分类',
              type: 3,
              content: goodsType,
            },
            {
              title: '单位',
              type: 3,
              content: unitName,
            },
            {
              title: '保质期',
              type: 3,
              content: shelfLife + ' 天',
            },
            {
              title: '图片',
              type: 1,
              content: goodsImgUrl,
            },
          ]
          this.selectOperateVisible = true;
        });
      },

      // 打开导入企业信息的窗口
      openImportBusinessInfo() {
        if(this.harvestBatchConfig.belongBusinessId === undefined) {
          return;
        }
        // 查询企业信息
        getBusinessInfo(this.harvestBatchConfig.belongBusinessId).then(({ data }) => {
          const { id, businessName, area, companiesName, businessCode, legalName, legalIdCard } = data;
          if (this.businessInfo == null) {
            this.businessInfo = {
              linkName: '企业信息',
              scanShow: true,
            };
          }
          this.businessInfo.operateObjId = id;
          this.importType = 'businessInfo';
          this.selectOperateTableData = [
            {
              title: '商户名称',
              type: 3,
              content: businessName,
            },
            {
              title: '所属行政区',
              type: 3,
              content: area,
            },
            {
              title: '企业名称',
              type: 3,
              content: companiesName,
            },
            {
              title: '统一社会信用代码',
              type: 3,
              content: businessCode,
            },
            {
              title: '法人名称',
              type: 3,
              content: legalName,
            },
            {
              title: '法人身份证',
              type: 3,
              content: legalIdCard,
            },
          ]
          this.selectOperateVisible = true;
        });
      },

      // 确认导入商品/企业信息
      submitImport() {
        this[this.importType].operateDetails = this.selectedOperateDetails.map(detail => detail);
        this.selectOperateVisible = false;
        this.selectedOperateDetails = [];
      },

      // 打开导入商品认证的窗口
      openImportGoodsVerify() {
        if(this.harvestBatchConfig.goodsId === undefined) {
          return;
        }
        // 查询认证信息
        getGoodsVerifyByGoodsId(this.harvestBatchConfig.goodsId).then(({ data }) => {
          this.selectVerifyTableData = data.map(({ id, verifyName, verifyAgencies, verifyIsForver, verifyStartTime, verifyEndTime, verifyDataUrl }) => {
            return {
              verifyName,
              verifyAgencies,
              verifyDataUrl: verifyDataUrl.split(','),
              verifyDate: verifyIsForver ? `${verifyStartTime} ~ 长期` : `${verifyStartTime} ~ ${verifyEndTime}`,
              scanShow: true,
              operateObjId: id,
            }
          });
          this.selectVerifyVisible = true;
        });
      },

      submitGoodsVerifyImport() {
        this.goodsVerifys = this.selectedGoodsVerifys.map(detail => detail);
        this.selectVerifyVisible = false;
        this.selectedGoodsVerifys = [];
      },

      // 删除商品认证
      deleteVerify(index) {
        this.goodsVerifys.splice(index, 1);
      },

      // 查询地块列表
      getLandInfoList(belongBusinessId) {
        getBusinessNamesByLandId({ belongBusinessId }).then(({ data }) => {
          this.landInfos = data.map(item => {
            return {
              label: item.landName,
              value: item.landId,
            }
          });
          // 默认选中第一个
          this.currentLandInfoId = data[0]?.landId;
          // 查询环境类型配置
          this.getEnvTypeConfig(belongBusinessId);
          // 查询监控列表
          this.getMonitorList();
        });
      },

      // 地块改变
      handleLandChange(value) {
        const envTypes = this.deviceInfo.envTypes[value];
        // this.deviceInfo.envTypes[this.currentLandInfoId]
        if(envTypes && envTypes.length > 0) {
          // 获取环境数据
          this.gatAVGEnvDatas(envTypes.map(item => item.id).join(','));
        } else {
          this.showECharts = false;
          // 销毁原来的实例
          this.echartsInstance?.dispose();
          this.echartsInstance = null;
        }

        // 重置监控列表的显示
        this.showMonitorList = false;
        // 获得监控列表
        this.getMonitorList();
      },

      // 获得环境类型配置信息
      getEnvTypeConfig(businessInfoId) {
        getEnvTypeConfigGroupByLandId({ businessInfoId }).then(({ data }) => {
          data.map(item => {
            this.deviceInfo.envTypes[item.landId] = item.envTypes;
            this.deviceInfo.srcEnvTypes[item.landId] = item.envTypes;// 保存一份未更改之前的类型数据
          });
          if(this.deviceInfo.envTypes[this.currentLandInfoId] && this.deviceInfo.envTypes[this.currentLandInfoId].length > 0) {
            // 获得第一页的环境数据
            this.gatAVGEnvDatas(this.deviceInfo.envTypes[this.currentLandInfoId].map(item => item.id).join(','));
          }
        });
      },

      // 打开选择环境类型的窗口
      openSelectEnvType() {
        if(this.currentLandInfoId == null) {
          this.$modal.msgError('请先选择地块');
          return;
        }
        // 获得可选的环境类型
        getAvailableEnvType({ businessInfoId: this.harvestBatchConfig.belongBusinessId }).then(({ data }) => {
          // 穿梭框可选列表
          this.canSelectEnvTypeOptions = data.map(item => {
            return {
              ...item,
              key: item.id,
              label: item.envTypeName, // 用于搜索
            }
          });
          // 默认选中的数据
          this.envTypeCheckedIdList = this.deviceInfo.envTypes[this.currentLandInfoId]?.map(item => item.id) || [];

          this.selectEnvTypeVisible = true;
        });
      },

      // 渲染选择环境类型穿梭框的选择列表
      renderEnvTypeLabel(h, option) {
        return <div style="display:flex;align-item: center;">
          <span title={ option.envTypeName } style="display: inline-block;min-width: 180px;max-width: 180px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{ option.envTypeName }</span>
          <span style='color: #e6ebf5;display: inline-block;margin:0 5px;'>|</span>
          <span style="display: inline-block;min-width: 80px;max-width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{ option.unit }</span>
        </div>;
      },

      /**
       * 选择环境类型的穿梭框改变
       * @param {*} value 已选中的值[数组]
       * @param {*} direction 移动方向 left，right
       * @param {*} movedKeys 移动的key数组
       */
      handleSelectEnvTypeChange(value) {
        this.envTypeCheckedIdList = value;
      },

      // 确认选择环境类型
      submitSelectEnvType() {
        this.selectEnvTypeVisible = false;
        const srcSelectedIds = this.deviceInfo.envTypes[this.currentLandInfoId]?.map(item => item.id);
        if(this.envTypeCheckedIdList.length === 0) {
          // 清空环境数据
          this.deviceInfo.envDatasObj = {};
          // 将当前选择的地块的环境类型清空
          if(this.deviceInfo.envTypes[this.currentLandInfoId]) {
            this.deviceInfo.envTypes[this.currentLandInfoId] = [];
          }
        } else {
          // 将环境类型更新为用户选择的集合
          this.deviceInfo.envTypes[this.currentLandInfoId] = this.canSelectEnvTypeOptions.filter(option => this.envTypeCheckedIdList.indexOf(option.id) != -1);
          let isDifferent = false;
          if(!srcSelectedIds || srcSelectedIds.length != this.deviceInfo.envTypes[this.currentLandInfoId].length) {
            isDifferent = true;
          } else {
            // 对比每个id
            isDifferent = this.deviceInfo.envTypes[this.currentLandInfoId].filter(item => srcSelectedIds.indexOf(item.id) == -1).length > 0;
          }
          // 获取环境数据
          if(isDifferent) this.gatAVGEnvDatas(this.envTypeCheckedIdList.join(','));
        }
      },

      // 获得环境数据
      gatAVGEnvDatas(typeIds) {
        // 环境数据的请求时间可能较长，所以这里加个遮罩
        this.envDataLoading = true;
        // 根据选择环境类型id 请求环境数据, 不传天数默认7天
        const params = {
          landId: this.currentLandInfoId,
          typeIds,
        }
        getAVGEnvDatasByTypeIds(params).then(({ data }) => {
          this.deviceInfo.envDatasObj = {};
          typeIds.split(',').map(id => {
            this.deviceInfo.envDatasObj[id] = []; // 初始化所选的每种环境数据的数据值
          });
          data.map(item => {
            this.deviceInfo.envDatasObj[item.envTypeId].push(item);
          });
          this.envDataLoading = false;
          this.testEnvDatasObj();
          this.echartsInstance?.dispose();// 销毁原来的实例
          this.echartsInstance = null;
          if(this.showECharts){
            // 如果显示，则开始渲染
            this.rendECharts();
          }
        });
      },

      //检验环境数据是否合法，并改变是否显示图表的状态
      testEnvDatasObj() {
        const envTypes = this.deviceInfo.envTypes[this.currentLandInfoId];
        if(!envTypes) {
          this.showECharts = false;
          return;
        }
        for(let i = 0; i < envTypes.length; i++) {
          if(this.deviceInfo.envDatasObj[envTypes[i].id]) {
            this.showECharts = true;
            return;
          }
        }
        this.showECharts = false;
      },

      // 渲染图表
      rendECharts() {
        // 设置
        this.eChartsOption.legend.data = this.deviceInfo.envTypes[this.currentLandInfoId].map(item => item.envTypeName);
        // 设置数值
        this.eChartsOption.series = this.deviceInfo.envTypes[this.currentLandInfoId].map(item => {
          // 设置每种类型的数值
          const data = [];
          const { data: dateDatas } = this.eChartsOption.xAxis;
          const envDatasObj = this.deviceInfo.envDatasObj[item.id];
          // 可能存在空值的情况
          if(envDatasObj) {
            dateDatas.map((date, index) => {
              envDatasObj.map(env => {
                const envDate = new Date(env.createTime);
                if(this.parseTime(envDate).substr(0, 10) == date) {
                  data.push(env.value);
                }
              });
              if(data.length != index + 1) {
                data.push('0');// 如果取不到，这里直接补位
              }
            });
          } else {
            dateDatas.map(() => {
              data.push('0');
            });
          }
          return {
            name: item.envTypeName,
            data,
            type: 'line',
            smooth: true
          }
        });
        // 延时加载图表，避免dom未刷新获取不到
        setTimeout(() => {
          // 初始化图表
          const chartDom = document.getElementById('envDataECharts');
          this.echartsInstance = echarts.init(chartDom);
          this.echartsInstance.setOption(this.eChartsOption);
        }, 50);
      },

      // 获得监控列表
      getMonitorList() {
        if(!this.deviceInfo.monitorObj[this.currentLandInfoId]) {
          // hls
          getMonitorPreviewURLByLandId({ landId: this.currentLandInfoId, type: 'wss' }).then(({ data }) => {
            this.deviceInfo.monitorObj[this.currentLandInfoId] = data;
            if(data.length > 0) {
              this.showMonitorList = true;
            }
            this.currentMonitorCode = data[0]?.monitorCode;
          });
        } else {
          // 修改当前监控列表到当前地块
          if(this.deviceInfo.monitorObj[this.currentLandInfoId].length > 0) {
            this.showMonitorList = true;
          }
          this.currentMonitorCode = this.deviceInfo.monitorObj[this.currentLandInfoId][0]?.monitorCode;
        }
      },

       // 重新刷新监控列表
       refreshMonitorList() {
        getMonitorPreviewURLByLandId({ landId: this.currentLandInfoId, type: 'wss' }).then(({ data }) => {
          this.deviceInfo.monitorObj = {};
          this.deviceInfo.monitorObj[this.currentLandInfoId] = data;
          // this.$set(this.deviceInfo.monitorObj, this.currentLandInfoId, data);
          if(data.length > 0) {
            this.showMonitorList = true;
          }
        });
      },

      handleMonitorChange({ index }) {
        this.currentMonitorCode = this.deviceInfo.monitorObj[this.currentLandInfoId][index].monitorCode;
      },

      addLink() {
        this.linkInfos.push({
          isExpand: false,
          linkName: '新建环节',
          operateDetails: [],
          scanShow: true,
        });
      },

      //向上移动  list是一个数组，index是当前的索引值
      tempSerial(list, index) {
        if(list.length == 1 ) return;
        if (index != 0) {
          list[index] = list.splice(index - 1, 1, list[index])[0]
        }
        // else {
        //   list.push(list.shift())
        // }
      },

      //向下移动  list是一个数组，index是当前的索引值
      downtempSerial(list, index) {
        if(list.length == 1 && list.length-1 == index) return;
        if (index != list.length - 1) {
          list[index] = list.splice(index + 1, 1, list[index])[0]
        }
        // else {
        //   list.unshift(list.splice(index, 1)[0])
        // }
      },

      // 环节导出
      async linksExport() {
        let rest = await exportLinkConfig({id: this.$route.query.id});
        this.$download.json(JSON.stringify(rest),'环节信息.json');
      },

      // 环节导入
      linksImport(){
        this.templateImportVisible = true;
      },

      // 导入模板
      async importModel() {
        const { data } = await getTemplateDetail({templateId: this.templateId});
        data.map((item, index)=>{
          item.isExpand = false;
          if(index == 0) item.isExpand = true;
          item.id = null;
          item.isChainState = 0;
          item.chainState = 0;
          item.operateDetails = JSON.parse(JSON.stringify( item.traceLinkItems ));
          item.operateDetails && item.operateDetails.map(items=>{
            if(items.type == 7){
              items.content = JSON.parse(items.content);
              items.mapContent = items.content;
            }
          });
        });
        this.linkInfos = this.linkInfos.concat(data);
      },

      // 保存为模板
      saveModel(){
        this.templateVisible = true;
      },

      // 验证links是否可提交
      checkSubmit(){
        let isName = false;//环节名称是否存在空值
        // let isId = false;//环节是否存在id，有则更新，无则创建
        let isContent = false;//类似是否存在空值
        let isTitle = false;//类型为5或6时，为无标类型，标题可为空，其他类型，标题不能为空。
        let isDate = false;//环节内数据不能为空
        const list = this.linkInfos;
        if(list.length > 0){
          list.map((item,index)=>{
            item.sort = index+1;
            if(item.linkName == '') isName = true;
            // if(item.id) isId = true;
            if(item.operateDetails.length==0) isDate = true;
            item.operateDetails.length && item.operateDetails.map(items=>{
              if( !items.type ) isContent = true;
              if( items.type != 5 && items.type != 6 && !items.title ) isTitle = true;
              //地图
              if(items.type == '7') items.content = JSON.stringify(items.mapContent);
            });
          });
        }else{
          this.$message.error("环节数据不能为空");
          return false;
        }
        if(isName){
          this.$message.error("环节名称不能为空");
          return false;
        }
        if(isContent){
          this.$message.error("环节数据类型不能为空");
          return false;
        }
        if(isTitle){
          this.$message.error("环节数据标题不能为空");
          return false;
        }
        if(isDate){
          this.$message.error("环节内数据不能为空");
          return false;
        }
        return true;
      },

      // 提交模板保存
      submitSaveTemp(){
        this.$refs['templateForm'].validate(async (valid) => {
          if (valid) {
            let state = await this.checkSubmit();
            console.log('保存模板-状态是否符合', state);
            if(state){
              let links = JSON.parse(JSON.stringify(this.linkInfos));
              links.map(item=>{
                item.linkItems = item.operateDetails;
              });
              let form = {
                belongBusinessId: this.harvestBatchConfig.belongBusinessId,
                goodsId: this.harvestBatchConfig.goodsId,
                links,
                templateName: this.templateForm.linkName,
              };
              let res = await copyToTemplate(form);
              if(res.data){
                this.$message.success("保存模板成功");
                this.templateVisible = false;
                this.templateForm = {};
              }
              console.log('保存模板结果', res);
            }
          }
        });
      },
      // ------------------------ 导入模板相关事件 ------------------------
      // 导入模板本质不经过接口，前端直接读取文件内容，覆盖本地模板
      // 上传前校检格式和大小
      handleBeforeUpload(file) {
        // 校检文件类型
        if (this.fileType) {
          let fileExtension = "";
          if (file.name.lastIndexOf(".") > -1) {
            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          }
          const isTypeOk = this.fileType.some((type) => {
            if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            return false;
          });
          if (!isTypeOk) {
            this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
            return false;
          }
        }
        // 校检文件大小
        if (this.fileSize) {
          const isLt = file.size / 1024 / 1024 < this.fileSize;
          if (!isLt) {
            this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
            return false;
          }
        }
        return true;
      },

      // 文件个数超出
      handleExceed() {
        this.$modal.msgError(`上传文件数量不能超过 ${this.fileLimit} 个!`);
      },

      // 模板 文件改变
      handleChange(file, fileList){
        if(fileList.length > 0) {
          let files = fileList[0].raw;
          let reader = new FileReader();
          reader.readAsText(files,'UTF-8');
          let that = this;
          reader.onload = function(e) {
            let val = JSON.parse(e.target.result);
            val.map((item, index) => {
              item.isExpand = false;
              if(index == 0) item.isExpand = true;
              item.chainState = 0;
              item.isChainState = 0;
              item.operateDetails.length > 0 && item.operateDetails.map(items => {
                if(items.type == 7) {
                  items.content = JSON.parse(items.content);
                  items.mapContent = items.content;
                }
              });
            });
            that.templateImportVisible = false;
            that.linkInfos = val;
          }
        }
      },

      // 打开选择地块计划弹窗
      openSelectPlan() {
        getLandPlanByGoodsId({ goodsId: this.harvestBatchConfig.goodsId }).then(({ data }) => {
          this.planOptions = data.map(item => {
            return {
              ...item,
              key: item.id,
              label: item.landName,
            };
          });
          this.selectPlanVisible = true;
        });
      },

      // 渲染选择计划穿梭框的选择列表
      renderTransferLabel(h, option) {
        return <div style="display:flex;align-item: center;">
        <span title={ option.landId } style="display: inline-block;min-width: 80px;max-width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{ option.landId }</span>
        <span style='color: #e6ebf5;display: inline-block;margin:0 5px;'>|</span>
        <span>{ option.landName }</span>
        <span style='color: #e6ebf5;display: inline-block;margin:0 5px;'>|</span>
        <span title={ option.landPlanId } style="display: inline-block;min-width: 40px;max-width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{ option.landPlanId }</span>
        <span style='color: #e6ebf5;display: inline-block;margin:0 5px;'>|</span>
        <span>{ this.parseTime(option.planStartTime, '{y}-{m}-{d}') }</span>
        <span style='color: #e6ebf5;display: inline-block;margin:0 5px;'>|</span>
        <span>{ this.parseTime(option.planEndTime, '{y}-{m}-{d}') }</span>
        </div>;
      },

      /**
       *
       * @param {*} value 已选中的值[数组]
       * @param {*} direction 移动方向 left，right
       * @param {*} movedKeys 移动的key数组
       */
      handleSelectChange(value) {
        this.inputCheckedIdList = value;
      },

      // 修改农事计划的扫码展示
      changePlanScanShow(value, index){
        this.farmingPlans[index].scanShow = value;
      },

      // 查看视频
      openPreviewVideo(list) {
        this.videoList = list;
        this.previewVideoVisible = true;
      },

      // 查看图片
      openPreviewImage(list){
        this.imageList = list;
        this.previewImageVisible = true;
      },

      // 确认选择农事计划
      async submitTransferForm() {
        const { data } = await getLandFarmingConfig({
          goodsId: this.harvestBatchConfig.goodsId,
          ids: this.inputCheckedIdList.join(','),
        });
        this.selectPlanVisible = false;
        this.farmingPlans = data.map((item, index)=>{
          item.isExpand = false;
          if(index == 0) item.isExpand = true;
          item.scanShow = true;
          item.tableData = [];
          item.farmingJobs.map((job, index) => {
            job.indexKey = index;
            job.scanShow = true;
            item.tableData.push({
              jobType: job.operateDetails[0].content,
              inputsName: job.operateDetails[1].content,
              inputsBatchId: job.operateDetails[2].content,
              jobDate: job.operateDetails[3].content,
              jobWorker: job.operateDetails[4].content,
              jobImage: job.operateDetails[5].content,
              jobVideo: job.operateDetails[6].content,
              remarks: job.operateDetails[7].content,
              scanShow: true,
              indexKey: index,
            });
          });
          return item;
        });
      },

      // 修改计划的展开状态
      changePlanExpand(index) {
        this.farmingPlans = this.farmingPlans.map((plan, i) => {
          return {
            ...plan,
            isExpand: index == i ? !plan.isExpand : plan.isExpand,
          }
        });
      },

      // 修改检验检疫的展开状态
      changeInspectionExpand(index) {
        this.inspections = this.inspections.map((inspection, i) => {
          return {
            ...inspection,
            isExpand: index == i ? !inspection.isExpand : inspection.isExpand,
          }
        });
      },

      // 修改检验检疫的是否展示
      changeInspectionScanShow(value, index) {
        this.inspections[index].scanShow = value;
      },

      // 打开选择检验检疫的窗口
      openSelectInspection() {
        if(this.harvestBatchConfig.harvestBatchId === undefined) {
          return;
        }
        // 查询检验检疫信息
        getInspectionByHarvestBatchId(this.harvestBatchConfig.harvestBatchId).then(({ data }) => {
            this.selectInspectionTableData = data.map(item => {
              return {
                ...item,
                inspectionImgUrl: item.inspectionImgUrl?item.inspectionImgUrl.split(','):'--',
                inspectionVideoUrl: item.inspectionVideoUrl?item.inspectionVideoUrl:'--',
              }
            });

            this.selectInspectionVisible = true;
        });
      },

      // 选择想要配置的检验检疫
      submitInspectionImport() {
        this.inspections = this.selectedInspection.map((inspection, index) => {
          const operateDetails = [
            {
              title: "入库批次",
              type: 3,
              content: inspection.harvestBatchId,
              scanShow: true,
            },
            {
              title: "生产时间",
              type: 3,
              content: this.parseTime(inspection.harvestTime),
              scanShow: true,
            },
            {
              title: "执行标准",
              type: 3,
              content: inspection.inspectionStandard,
              scanShow: true,
            },
            {
              title: "检验结果",
              type: 3,
              content: inspection.inspectionResult,
              scanShow: true,
            },
            {
              title: "自检检测项目",
              type: 3,
              content: inspection.inspectionOwnItem,
              scanShow: true,
            },
            {
              title: "检测人",
              type: 3,
              content: inspection.inspectionUser,
              scanShow: true,
            },
            {
              title: "委托检测项目",
              type: 3,
              content: inspection.inspectionEntrustItem,
              scanShow: true,
            },
            {
              title: "检测机构",
              type: 3,
              content: inspection.inspectionOrganization,
              scanShow: true,
            },
            {
              title: "检测日期",
              type: 3,
              content: this.parseTime(inspection.inspectionDate),
              scanShow: true,
            },
            {
              title: "签发日期",
              type: 3,
              content: this.parseTime(inspection.issuanceDate),
              scanShow: true,
            },
            {
              title: "检测图片",
              type: 1,
              content: inspection.inspectionImgUrl == '--' ? '' : inspection.inspectionImgUrl.join(','),
              scanShow: true,
            },
            {
              title: "检测视频",
              type: 2,
              content: inspection.inspectionVideoUrl == '--' ? '' : inspection.inspectionVideoUrl,
              scanShow: true,
            },
          ];

          const tableData = [];
          const inspectionItems = inspection.inspectionItems?.map((item, iIndex) => {
            const itemOperateDetails = [
              {
                title: "检验项目",
                type: 3,
                content: item.inspectionItem,
                scanShow: true,
              },
              {
                title: "单位",
                type: 3,
                content: item.inspectionUnit,
                scanShow: true,
              },
              {
                title: "技术要求",
                type: 3,
                content: item.inspectionRequire,
                scanShow: true,
              },
              {
                title: "检测结果",
                type: 3,
                content: item.inspectionResult,
                scanShow: true,
              },
              {
                title: "单项结论",
                type: 3,
                content: item.inspectionConclusion,
                scanShow: true,
              },
            ];

            tableData.push({
              ...item,
              scanShow: true,
            });
            return {
              operateObjId: item.id,
              scanShow: true,
              linkName: '检验项目',
              sort: iIndex,
              operateDetails: itemOperateDetails,
            };
          });
          return {
            operateObjId: inspection.id,
            scanShow: true,
            isExpand: index === 0,
            linkName: '检验检疫',
            sort: index,
            operateDetails,
            tableData,
            inspectionItems,
          };
        });
        this.selectInspectionVisible = false;
        this.selectedInspection = [];
      },

      // 保存
      submitSave() {
        const { id, templateId } = this.harvestBatchConfig;
        const { id: languageTypeId } = this.languageType;
        if (!languageTypeId) {
          this.$message.error('未找到语言类型');
          return false;
        }
        if (!templateId) {
          this.$message.error('请选择模板');
          return false;
        }

        const goodsInfo = {
          ...this.goodsInfo,
          operateDetails: this.goodsInfo.operateDetails?.filter(item => item.type !== '').map((item, index) => {
            if(item.type == 7 || item.type == 10){//地图
              item.content = JSON.stringify(item.mapContent);
            }
            item.sort = index;
            return item;
          }),
        }

        let businessInfo = null;
        if (this.businessInfo) {
            businessInfo = {
            ...this.businessInfo,
            operateDetails: this.businessInfo.operateDetails?.filter(item => item.type !== '').map((item, index) => {
              if(item.type == 7 || item.type == 10){//地图
                item.content = JSON.stringify(item.mapContent);
              }
              item.sort = index;
              return item;
            }),
          }
        }

        const linkInfos = this.linkInfos.map(link => {
          return {
            ...link,
            operateDetails: link.operateDetails?.filter(item => item.type !== '').map((item, index) => {
              if(item.type == 7 || item.type == 10){//地图
                item.content = JSON.stringify(item.mapContent);
              }
              item.sort = index;
              return item;
            })
          }
        });

        if(!goodsInfo.linkName || !goodsInfo.operateDetails || goodsInfo.operateDetails.length === 0){
          this.$message.error('商品信息不能为空');
          return false;
        }
        // if(!businessInfo.linkName || !businessInfo.operateDetails || businessInfo.operateDetails.length === 0){
        //   this.$message.error('企业信息不能为空');
        //   return false;
        // }

        const goodsVerifys = this.goodsVerifys.map((item, index) => {
          const operateDetails = item.operateDetails || [
            {
              title: "认证名称",
              type: 3,
              content: item.verifyName,
            },
            {
              title: "认证机构",
              type: 3,
              content: item.verifyAgencies,
            },
            {
              title: "有效期",
              type: 3,
              content: item.verifyDate,
            },
            {
              title: "认证资料",
              type: 1,
              content: item.verifyDataUrl && item.verifyDataUrl.join(','),
            },
          ];
          operateDetails.map((detail, i) => {
            if (detail.title === "认证名称") {
              detail.content = item.verifyName;
            }
            if (detail.title === "认证机构") {
              detail.content = item.verifyAgencies;
            }
            if (detail.title === "有效期") {
              detail.content = item.verifyDate;
            }
            detail.sort = i;
          });

          return {
            ...item,
            linkName: '商品认证',
            sort: index,
            operateDetails,
          };
        });

        const inspections = this.inspections.map((inspection, index) => {
          const operateDetails = inspection.operateDetails?.filter(item => item.type !== '').map(item => {
            if(item.type == 7 || item.type == 10){//地图
              item.content = JSON.stringify(item.mapContent);
            }
            return item;
          });
          const { tableData, } = inspection;
          const inspectionItems = inspection.inspectionItems?.map((item, iIndex) => {
            item.operateDetails.map((detail, i) => {
              if (detail.title === "检验项目") {
                detail.content = tableData[iIndex].inspectionItem;
              }
              if (detail.title === "单位") {
                detail.content = tableData[iIndex].inspectionUnit;
              }
              if (detail.title === "技术要求") {
                detail.content = tableData[iIndex].inspectionRequire;
              }
              if (detail.title === "检测结果") {
                detail.content = tableData[iIndex].inspectionResult;
              }
              if (detail.title === "单项结论") {
                detail.content = tableData[iIndex].inspectionConclusion;
              }
              detail.sort = i;
            })
            return {
              ...item,
              scanShow: inspection.tableData[iIndex].scanShow,
            };
          }) || [];
          return {
            ...inspection,
            sort: index,
            operateDetails,
            inspectionItems,
          };
        });

        const farmingPlans = this.farmingPlans.map((plan, index) => {
          const { tableData, } = plan;
          const farmingJobs = plan.farmingJobs?.map((item, iIndex) => {
            item.operateDetails.map((detail, i) => {
              if (detail.title === '说明') {
                detail.content = tableData[iIndex].remarks;
              }
              if (detail.title === "任务类型") {
                detail.content = tableData[iIndex].jobType;
              }
              if (detail.title === "投入品名称") {
                detail.content = tableData[iIndex].inputsName;
              }
              if (detail.title === "作业日期") {
                detail.content = tableData[iIndex].jobDate;
              }
              if (detail.title === "作业员工") {
                detail.content = tableData[iIndex].jobWorker;
              }
              detail.sort = i;
            });
            return {
              ...item,
              scanShow: tableData[iIndex].scanShow,
            };
          });
          return {
            ...plan,
            sort: index,
            farmingJobs,
          };
        });

        const envTypeConfigs = [];
        this.landInfos?.map((land, index) => {
          this.deviceInfo.envTypes[land.value]?.map(item => {
            const { configId, id, } = item;
            const srcEnvTypes = this.deviceInfo.srcEnvTypes[land.value]?.filter(src => src.id == id);
            envTypeConfigs.push({
              id: configId || srcEnvTypes ? srcEnvTypes[0]?.configId : null,
              landId: land.value,
              envTypeId: id,
            });
          });
        });

        const params = {
          id,
          languageTypeId,
          templateId,
          businessInfo,
          goodsInfo,
          goodsVerifys,
          linkInfos,
          farmingPlans,
          inspections,
          envTypeConfigs,
        };

        const loading = Loading.service({ text: '加载中...', target: '.setting-main' });
        updateHarvestBatchConfig(params).then(({}) => {
          this.$message.info('保存成功');
          // 重新查询
          this.getHarvestBatchConfig(id, languageTypeId);
        }).finally(() => {
          loading.close();
        });
      },
    },
  };
</script>

<style>
</style>