<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px">
      <el-form-item label="采集项名称" prop="collectionName">
        <el-input
          v-model="queryParams.collectionName"
          placeholder="请输入采集项名称"
          clearable
          size="mini"
          clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="采集项类型" prop="collectionType">
        <el-select
          size="mini"
          v-model="queryParams.collectionType"
          clearable
          placeholder="请选择采集项类型">
          <el-option
            v-for="item in collectionTypeOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="回答类型" prop="answerType">
        <el-select
          size="mini"
          v-model="queryParams.answerType"
          clearable
          placeholder="请选择回答类型">
          <el-option
            v-for="item in answerTypeOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="客户类型" prop="collectionName">-->
      <!--        <el-select size="mini" v-model="value" placeholder="请选择客户类型">-->
      <!--          <el-option-->
      <!--            v-for="item in storeOptions"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </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="['sfa:collectionItem:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['sfa:collectionItem:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['sfa:collectionItem:softRemove']"
          >删除</el-button
        >
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          plain-->
      <!--          icon="el-icon-download"-->
      <!--          size="mini"-->
      <!--          @click="handleExport"-->
      <!--          v-hasPermi="['sfa:collectionItem:export']"-->
      <!--        >导出</el-button>-->
      <!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="collectionItemList"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--      <el-table-column label="采集项ID" align="center" prop="collectionId" />-->
      <el-table-column label="采集项编号" align="center" prop="collectionCode" width="90" />
      <el-table-column
        label="采集项名称"
        align="center"
        prop="collectionName"
        width="300"
        :show-overflow-tooltip="true" />
      <el-table-column label="采集项类型" align="center">
        <template slot-scope="scope">
          <span>{{ collectionTypeFormat(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回答类型" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ answerTypeFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否必填" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ isMustFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否有效" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ isValidFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否支持图片" align="center" prop="isPicture" width="98">
        <template slot-scope="scope">
          <span>{{ isPictureFormat(scope.row, scope.column) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="允许相册选择图片" align="center" prop="pictureSource" width="98">
        <template slot-scope="scope">
          <span v-if="scope.row.pictureSource == '1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['sfa:collectionItem:edit']"
            >编辑</el-button
          >
          <el-button size="mini" type="text" icon="el-icon-view" @click="previewFn(scope.row)"
            >预览</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            class="text-danger"
            @click="handleDelete(scope.row)"
            v-hasPermi="['sfa:collectionItem:softRemove']"
            >删除</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="60%" append-to-body>
      <el-form class="collectionForm" ref="form" :model="form" :rules="rules" label-width="125px">
        <el-row>
          <el-col :span="12" v-if="form.collectionId != null">
            <el-form-item label="采集项编号" prop="collectionCode">
              <el-input
                size="mini"
                v-model="form.collectionCode"
                disabled
                placeholder="请输入采集项编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集项名称" prop="collectionName">
              <el-input
                size="mini"
                clearable
                v-model="form.collectionName"
                placeholder="请输入采集项名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联采集项" prop="relevancyItemName">
              <div @click="openRelevancy">
                <el-input
                  size="mini"
                  readonly
                  v-model="form.relevancyItemName"
                  placeholder="请选择关联采集项" /><span style="cursor: pointer" @click="clearfn"
                  >&nbsp;清空</span
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集项类型" prop="collectionType">
              <el-select
                size="mini"
                clearable
                v-model="form.collectionType"
                placeholder="请选择采集项类型">
                <el-option
                  v-for="item in collectionTypeOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否必填" prop="isMust" style="height: 37px">
              <el-radio-group size="mini" v-model="form.isMust" @change="isMustChange">
                <el-radio
                  :label="item.dictValue"
                  :key="index"
                  v-for="(item, index) in isNotOptions"
                  >{{ item.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否有效" prop="isValid" style="height: 37px">
              <el-radio-group size="mini" v-model="form.isValid">
                <el-radio
                  :label="item.dictValue"
                  :key="index"
                  v-for="(item, index) in isNotOptions"
                  >{{ item.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否支持图片" prop="isPicture" style="height: 37px">
              <el-radio-group
                size="mini"
                v-model="form.isPicture"
                @change="isPictureChange"
                :disabled="form.answerType == 'sm'">
                <el-radio
                  :label="item.dictValue"
                  :key="index"
                  v-for="(item, index) in isNotOptions"
                  >{{ item.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片是否必填" prop="isMustPicture" style="height: 37px">
              <el-radio-group
                size="mini"
                v-model="form.isMustPicture"
                @change="isMustPictureChange"
                :disabled="form.answerType == 'sm'">
                <el-radio
                  :label="item.dictValue"
                  :key="index"
                  v-for="(item, index) in isNotOptions"
                  >{{ item.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="允许相册选择图片" prop="pictureSource" style="height: 37px">
              <el-radio-group size="mini" v-model="form.pictureSource">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="联系电话" prop="contactPhone" style="height: 37px">
          <el-input
            size="mini"
            clearable
            v-model="form.contactPhone"
            placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="示例说明照片" prop="examplePhoto">
          <images-upload v-model="form.examplePhoto"></images-upload>
        </el-form-item>
        <!--        <el-form-item label="是否开启项目"   prop="closeProject" style="height: 37px;">-->
        <!--          <el-radio-group size="mini" v-model="form.closeProject" >-->
        <!--            <el-radio label="0" >开启</el-radio>-->
        <!--            <el-radio label="1" >关闭</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <el-form-item
          label="回显历史"
          v-show="form.answerType == 'wb'"
          prop="showHistory"
          style="height: 37px">
          <el-radio-group size="mini" v-model="form.showHistory">
            <el-radio label="1">回显</el-radio>
            <el-radio label="0">不回显</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回答类型" prop="answerType">
          <el-select
            size="mini"
            clearable
            v-model="form.answerType"
            placeholder="请选择回答类型"
            @change="answerTypeChange">
            <el-option
              v-for="item in answerTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
          <div class="tips">请先选择回答类型，不同回答类型设置不同属性</div>
        </el-form-item>
        <div v-for="(item, index) in form.collectionOptionList" :key="index">
          <div v-show="form.answerType == 'dx' || form.answerType == 'duox'">
            <div v-show="index == 0">
              <el-form-item
                label="选项"
                :prop="'collectionOptionList.' + index + '.collectionOption'"
                :rules="rules.collectionOption">
                <el-input
                  size="mini"
                  clearable
                  v-model="item.collectionOption"
                  placeholder="请输入内容" />
                <span class="el-icon-circle-plus-outline addBtn" @click="addFn"></span>
                <span
                  class="el-icon-remove-outline addBtn"
                  @click="reduceFn(index)"
                  style="margin-right: 10px"
                  v-show="form.collectionOptionList.length > 1"></span>
                <span
                  v-show="form.answerType == 'dx' && title == '修改采集项'"
                  style="margin-right: 10px"
                  class="el-icon-plus addBtn"
                  @click="addBelowFn(item)"
                  ><b style="font-size: 14px; font-weight: normal">&nbsp;维护下级</b></span
                >
                &nbsp;&nbsp;
                <p>
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.closeProject"
                    active-text="项目开"
                    inactive-text="项目关"
                    active-value="0"
                    inactive-value="1"></el-switch>
                  &nbsp;&nbsp;
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.closeProcess"
                    active-text="流程开"
                    inactive-text="流程关"
                    active-value="0"
                    inactive-value="1"></el-switch>
                  &nbsp;&nbsp;
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.frequencyReset"
                    active-text="频次不重置"
                    inactive-text="频次重置"
                    active-value="0"
                    inactive-value="1"></el-switch>
                </p>
              </el-form-item>
            </div>
            <div v-show="index != 0">
              <el-form-item
                label=""
                :prop="'collectionOptionList.' + index + '.collectionOption'"
                :rules="rules.collectionOption">
                <el-input
                  size="mini"
                  clearable
                  v-model="item.collectionOption"
                  placeholder="请输入内容" />
                <span class="el-icon-circle-plus-outline addBtn" @click="addFn"></span>
                <span
                  class="el-icon-remove-outline addBtn"
                  @click="reduceFn(index)"
                  style="margin-right: 10px"
                  v-show="form.collectionOptionList.length > 1"></span>
                <span
                  v-show="form.answerType == 'dx' && title == '修改采集项'"
                  style="margin-right: 10px"
                  class="el-icon-plus addBtn"
                  @click="addBelowFn(item)"
                  ><b style="font-size: 14px; font-weight: normal">&nbsp;维护下级</b></span
                >
                <!--                <el-radio-group size="mini" v-model="item.closeProject" >-->
                <!--                  <el-radio label="0" >开启</el-radio>-->
                <!--                  <el-radio label="1" >关闭</el-radio>-->
                <!--                </el-radio-group>-->
                &nbsp;&nbsp;
                <p>
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.closeProject"
                    active-text="项目开"
                    inactive-text="项目关"
                    active-value="0"
                    inactive-value="1"></el-switch>
                  &nbsp;&nbsp;
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.closeProcess"
                    active-text="流程开"
                    inactive-text="流程关"
                    active-value="0"
                    inactive-value="1"></el-switch>
                  &nbsp;&nbsp;
                  <el-switch
                    size="mini"
                    v-show="form.answerType == 'dx'"
                    v-model="item.frequencyReset"
                    active-text="频次不重置"
                    inactive-text="频次重置"
                    active-value="0"
                    inactive-value="1"></el-switch>
                </p>
              </el-form-item>
            </div>
          </div>
          <div
            v-show="
              form.answerType == 'wb' ||
              form.answerType == 'sz' ||
              form.answerType == 'tel' ||
              form.answerType == 'date' ||
              form.answerType == 'sm'
            ">
            <el-form-item
              class="mobile-input"
              label="备注"
              :prop="'collectionOptionList.' + index + '.collectionOption'"
              :rules="rules.collectionOption">
              <el-input
                size="mini"
                clearable
                v-model="item.collectionOption"
                placeholder="请输入内容"
                type="textarea"
                :rows="4"
                @input="formatter(index)"
                resize="none" />
            </el-form-item>
          </div>
        </div>
      </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="preview" width="60%" append-to-body>
      <el-form class="previewFormItem" ref="previewForm" :model="previewForm" label-width="110px">
        <el-form-item>
          <div>
            <span class="font-red" v-if="previewForm.isMust == 0">*</span
            >{{ previewForm.collectionName }}
            <icon :answerType="previewForm.answerType"></icon>
          </div>
        </el-form-item>
        <el-form-item label="" v-show="previewForm.answerType == 'dx'">
          <el-radio-group v-model="previewForm.values">
            <el-radio
              :label="itemc.collectionOptionId"
              v-for="(itemc, indexc) in previewForm.collectionOptionList"
              :key="indexc"
              >{{ itemc.collectionOption }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div v-show="previewForm.answerType == 'dx'">
          <div v-for="childItem in previewForm.collectionOptionList" style="padding-left: 40px">
            <div v-show="childItem.collectionOptionId == previewForm.values">
              <div v-for="itemT in childItem.collectionItems">
                <el-form-item>
                  <div>
                    <span class="font-red" v-if="itemT.isMust == 0">*</span
                    >{{ itemT.collectionName }}
                    <icon :answerType="itemT.answerType"></icon>
                  </div>
                </el-form-item>
                <el-form-item label="" v-show="itemT.answerType == 'dx'">
                  <el-radio-group v-model="itemT.values">
                    <el-radio
                      :label="itemTS.collectionOptionId"
                      v-for="(itemTS, index) in itemT.collectionOptionList"
                      :key="index"
                      >{{ itemTS.collectionOption }}</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <div v-show="itemT.answerType == 'dx'">
                  <div v-for="childItemT in itemT.collectionOptionList" style="padding-left: 80px">
                    <div v-show="childItemT.collectionOptionId == itemT.values">
                      <div v-for="itemTT in childItemT.collectionItems">
                        <el-form-item>
                          <div>
                            <span class="font-red" v-if="itemTT.isMust == 0">*</span
                            >{{ itemTT.collectionName }}
                            <icon :answerType="itemTT.answerType"></icon>
                          </div>
                        </el-form-item>
                        <el-form-item label="" v-show="itemTT.answerType == 'dx'">
                          <el-radio-group v-model="itemTT.values">
                            <el-radio
                              :label="itemTTS.collectionOptionId"
                              v-for="(itemTTS, index) in itemTT.collectionOptionList"
                              :key="index"
                              >{{ itemTTS.collectionOption }}</el-radio
                            >
                          </el-radio-group>
                        </el-form-item>
                        <div v-show="itemTT.answerType == 'dx'">
                          <div
                            v-for="childItemT4 in itemTT.collectionOptionList"
                            style="padding-left: 80px">
                            <div v-show="childItemT4.collectionOptionId == itemTT.values">
                              <div v-for="itemTT4 in childItemT4.collectionItems">
                                <el-form-item>
                                  <div>
                                    <span class="font-red" v-if="itemTT4.isMust == 0">*</span
                                    >{{ itemTT4.collectionName }}
                                    <icon :answerType="itemTT4.answerType"></icon>
                                  </div>
                                </el-form-item>
                                <el-form-item label="" v-show="itemTT4.answerType == 'dx'">
                                  <el-radio-group v-model="itemTT4.values">
                                    <el-radio
                                      :label="itemTT4S.collectionOptionId"
                                      v-for="(itemTT4S, indet4) in itemTT4.collectionOptionList"
                                      :key="indet4"
                                      >{{ itemTT4S.collectionOption }}</el-radio
                                    >
                                  </el-radio-group>
                                </el-form-item>
                                <div v-show="itemTT4.answerType == 'dx'">
                                  <div
                                    v-for="childItemT5 in itemTT4.collectionOptionList"
                                    style="padding-left: 80px">
                                    <div v-show="childItemT5.collectionOptionId == itemTT4.values">
                                      <div v-for="itemTT5 in childItemT5.collectionItems">
                                        <el-form-item>
                                          <div>
                                            <span class="font-red" v-if="itemTT5.isMust == 0"
                                              >*</span
                                            >{{ itemTT5.collectionName }}
                                            <icon :answerType="itemTT5.answerType"></icon>
                                          </div>
                                        </el-form-item>
                                        <el-form-item label="" v-show="itemTT5.answerType == 'dx'">
                                          <radio
                                            :radioValF="itemTT5.answer"
                                            :radioOptions="itemTT5.collectionOptionList"></radio>
                                        </el-form-item>
                                        <el-form-item v-show="itemTT5.answerType == 'duox'">
                                          <checkbox
                                            :checkboxValF="itemTT5.answer"
                                            :checkboxOptions="
                                              itemTT5.collectionOptionList
                                            "></checkbox>
                                        </el-form-item>
                                        <el-form-item
                                          class="mobile-input"
                                          v-if="
                                            itemTT5.answerType == 'wb' ||
                                            itemTT5.answerType == 'sz' ||
                                            itemTT5.answerType == 'tel' ||
                                            itemTT5.answerType == 'date' ||
                                            itemTT5.answerType == 'sm'
                                          ">
                                          <div v-if="itemTT5.collectionOptionList.length > 0">
                                            <el-input
                                              size="mini"
                                              disabled
                                              v-model="
                                                itemTT5.collectionOptionList[0].collectionOption
                                              "
                                              type="textarea"
                                              :rows="10"
                                              resize="none" />
                                          </div>
                                        </el-form-item>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <el-form-item v-show="itemTT4.answerType == 'duox'">
                                  <checkbox
                                    :checkboxValF="itemTT4.answer"
                                    :checkboxOptions="itemTT4.collectionOptionList"></checkbox>
                                </el-form-item>
                                <el-form-item
                                  class="mobile-input"
                                  v-if="
                                    itemTT4.answerType == 'wb' ||
                                    itemTT4.answerType == 'sz' ||
                                    itemTT4.answerType == 'tel' ||
                                    itemTT4.answerType == 'date' ||
                                    itemTT4.answerType == 'sm'
                                  ">
                                  <div v-if="itemTT4.collectionOptionList.length > 0">
                                    <el-input
                                      size="mini"
                                      disabled
                                      v-model="itemTT4.collectionOptionList[0].collectionOption"
                                      type="textarea"
                                      :rows="10"
                                      resize="none" />
                                  </div>
                                </el-form-item>
                              </div>
                            </div>
                          </div>
                        </div>
                        <el-form-item v-show="itemTT.answerType == 'duox'">
                          <checkbox
                            :checkboxValF="itemTT.answer"
                            :checkboxOptions="itemTT.collectionOptionList"></checkbox>
                        </el-form-item>
                        <el-form-item
                          class="mobile-input"
                          v-if="
                            itemTT.answerType == 'wb' ||
                            itemTT.answerType == 'sz' ||
                            itemTT.answerType == 'tel' ||
                            itemTT.answerType == 'date' ||
                            itemTT.answerType == 'sm'
                          ">
                          <div v-if="itemTT.collectionOptionList.length > 0">
                            <el-input
                              size="mini"
                              disabled
                              v-model="itemTT.collectionOptionList[0].collectionOption"
                              type="textarea"
                              :rows="10"
                              resize="none" />
                          </div>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <el-form-item v-show="itemT.answerType == 'duox'">
                  <checkbox
                    :checkboxValF="itemT.answer"
                    :checkboxOptions="itemT.collectionOptionList"></checkbox>
                </el-form-item>
                <el-form-item
                  class="mobile-input"
                  v-if="
                    itemT.answerType == 'wb' ||
                    itemT.answerType == 'sz' ||
                    itemT.answerType == 'tel' ||
                    itemT.answerType == 'date' ||
                    itemT.answerType == 'sm'
                  ">
                  <div v-if="itemT.collectionOptionList.length > 0">
                    <el-input
                      size="mini"
                      disabled
                      v-model="itemT.collectionOptionList[0].collectionOption"
                      type="textarea"
                      :rows="10"
                      resize="none" />
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
        <el-form-item v-show="previewForm.answerType == 'duox'">
          <checkbox
            :checkboxValF="previewForm.answer"
            :checkboxOptions="previewForm.collectionOptionList"></checkbox>
        </el-form-item>
        <el-form-item
          class="mobile-input"
          v-if="
            previewForm.answerType == 'wb' ||
            previewForm.answerType == 'sz' ||
            previewForm.answerType == 'tel' ||
            previewForm.answerType == 'date' ||
            previewForm.answerType == 'sm'
          ">
          <div v-if="previewForm.collectionOptionList.length > 0">
            <el-input
              size="mini"
              disabled
              v-model="previewForm.collectionOptionList[0].collectionOption"
              type="textarea"
              :rows="4"
              resize="none" />
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改任务对话框 -->
    <el-dialog :title="title" :visible.sync="belowShow" width="90%" append-to-body>
      <el-row :gutter="10" class="mb8">
        <el-col :span="2">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addCJXVisiableFn"
            v-hasPermi="['sfa:task:add']"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="collectionItemFormList">
        <el-table-column label="采集项编号" align="center" prop="collectionCode" width="100px" />
        <el-table-column label="采集项名称" prop="collectionName" />
        <el-table-column label="采集项类型" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{ collectionTypeFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回答类型" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{ answerTypeFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{ isMustFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否支持图片" align="center" prop="isValid" width="100px">
          <template slot-scope="scope">
            <span>{{ isPictureFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="collectionItemDelete(scope.row)"
              >删除</el-button
            >
            <!--            <el-button-->
            <!--              size="mini"-->
            <!--              type="text"-->
            <!--              icon="el-icon-view"-->
            <!--              @click="previewFnC(scope.row)"-->
            <!--            >预览</el-button>-->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-top"
              @click="updateTaskCollectionItemSortFn(scope.row, scope.$index, 'u')"
              :disabled="scope.$index == 0"
              >上移</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-bottom"
              @click="updateTaskCollectionItemSortFn(scope.row, scope.$index, 'd')"
              :disabled="scope.$index == collectionItemFormList.length - 1"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--            <pagination-->
      <!--              v-show="totalEdit>0"-->
      <!--              :total="totalEdit"-->
      <!--              :page.sync="editForm.pageNum"-->
      <!--              :limit.sync="editForm.pageSize"-->
      <!--              @pagination="listCollectionItemList"-->
      <!--            />-->
      <div slot="footer" class="dialog-footer">
        <!--        <el-button type="primary" @click="editSubmitForm">确 定</el-button>-->
        <!--        <el-button type="primary" @click="addSubmitForm">预览</el-button>-->
        <el-button @click="belowShow = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗中的添加采集项对话框 -->
    <el-dialog title="添加采集项" :visible.sync="addCJXVisible" width="90%" append-to-body>
      <el-form
        ref="addCJXForm"
        :model="addCJXForm"
        :inline="true"
        size="mini"
        v-show="showSearchCJX"
        label-width="90px">
        <el-form-item label="采集项编号" prop="collectionCode">
          <el-input
            v-model="addCJXForm.collectionCode"
            clearable
            placeholder="请输入采集项编号"
            @input="onInput()" />
        </el-form-item>
        <el-form-item label="采集项名称" prop="collectionName">
          <el-input
            v-model="addCJXForm.collectionName"
            clearable
            placeholder="请输入采集项名称"
            @input="onInput()" />
        </el-form-item>
        <el-form-item label="采集项分类" prop="collectionType">
          <el-select
            size="mini"
            v-model="addCJXForm.collectionType"
            clearable
            placeholder="请选择采集项类型"
            @change="onInput()">
            <el-option
              v-for="item in collectionTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="cjxQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryCJX">重置</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"-->
          <!--            :disabled="multipleCJX"-->
          <!--            @click="addCJX"-->
          <!--          >批量添加</el-button>-->
        </el-col>
        <right-toolbar :showSearch.sync="showSearchCJX" @queryTable="cjxQuery"></right-toolbar>
      </el-row>
      <el-table v-loading="loadingCJX" :data="cjxList" @selection-change="handleSelectionChangeCJX">
        <!--        <el-table-column type="selection" width="55" align="center" />-->
        <!--      <el-table-column label="任务id" align="center" prop="taskId" />-->
        <el-table-column label="采集项编号" align="center" prop="collectionCode" />
        <el-table-column label="采集项名称" align="center" prop="collectionName" />
        <el-table-column label="采集项类型" align="center">
          <template slot-scope="scope">
            <span>{{ collectionTypeFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回答类型" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ answerTypeFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用频次" align="center" prop="useFrequency" width="80" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-plus" @click="addCJX(scope.row)"
              >添加</el-button
            >
            <!--            <el-button-->
            <!--              size="mini"-->
            <!--              type="text"-->
            <!--              icon="el-icon-view"-->
            <!--              @click="previewFnC(scope.row)"-->
            <!--            >预览</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalCJX > 0"
        :total="totalCJX"
        :page.sync="addCJXForm.pageNum"
        :limit.sync="addCJXForm.pageSize"
        @pagination="getListCollectionItem" />
    </el-dialog>
    <!-- 编辑弹窗中的添加采集项对话框 -->
    <el-dialog title="选择关联采集项" :visible.sync="relevancyShow" width="90%" append-to-body>
      <el-form
        :model="queryParams1"
        ref="queryForm1"
        :inline="true"
        v-show="showSearch"
        label-width="100px">
        <el-form-item label="采集项名称" prop="collectionName">
          <el-input
            v-model="queryParams1.collectionName"
            placeholder="请输入采集项名称"
            clearable
            size="mini"
            clearable
            @keyup.enter.native="handleQuery1" />
        </el-form-item>
        <el-form-item label="采集项类型" prop="collectionType">
          <el-select
            size="mini"
            v-model="queryParams1.collectionType"
            clearable
            placeholder="请选择采集项类型">
            <el-option
              v-for="item in collectionTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回答类型" prop="answerType">
          <el-select
            size="mini"
            v-model="queryParams1.answerType"
            clearable
            placeholder="请选择回答类型">
            <el-option
              v-for="item in answerTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="collectionItemList1">
        <el-table-column label="采集项编号" align="center" prop="collectionCode" width="90" />
        <el-table-column
          label="采集项名称"
          align="center"
          prop="collectionName"
          width="300"
          :show-overflow-tooltip="true" />
        <el-table-column label="采集项类型" align="center">
          <template slot-scope="scope">
            <span>{{ collectionTypeFormat(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回答类型" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ answerTypeFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ isMustFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否有效" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ isValidFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否支持图片" align="center" prop="isPicture" width="98">
          <template slot-scope="scope">
            <span>{{ isPictureFormat(scope.row, scope.column) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="selectrelevancy(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getList1" />
    </el-dialog>
  </div>
</template>

<script>
import {
  listCollectionItem,
  getCollectionItem,
  delCollectionItem,
  addCollectionItem,
  updateCollectionItem,
  delsoftCollectionItem,
  listCollectionItemList,
  collectionRelated,
  collectionRelatedDelete,
  moveCollection,
} from '@/api/sfa/collectionItem';
import radio from '@/views/components/sfa/radio';
import checkbox from '@/views/components/sfa/checkbox';
import icon from '@/views/components/sfa/icon';
import { addTask, updateTask } from '@/api/sfa/task';
export default {
  name: 'CollectionItem',
  components: { radio, checkbox, icon },
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.form.answerType != 'sm' && value == '') {
        callback(new Error('请输入选项内容'));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: true,
      loadingCJX: false,
      collectionAddList: [],
      editVisible: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      multipleCJX: true,
      showSearchCJX: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采集项表格数据
      collectionItemList: [],
      collectionItemFormList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      preview: false,
      addCJXVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
      },
      editForm: {
        pageNum: 1,
        pageSize: 10,
      },
      totalCJX: 0,
      addCJXForm: {
        pageNum: 1,
        pageSize: 10,
      },
      cjxList: [],
      collectionTypeOptions: [],
      answerTypeOptions: [],
      isNotOptions: [],
      storeOptions: [],
      belowShow: false,
      collectionOptionId: '',
      parentCollectionId: '',
      // 表单参数
      form: {
        // isMust:'0',
        // isPicture:'0',
        showHistory: '0',
        remark: '',
        collectionOptionList: [
          { collectionOption: '', closeProject: '0', closeProcess: '0', frequencyReset: '0' },
        ],
        pictureSource: '0',
      },
      // 表单校验
      rules: {
        collectionCode: [{ required: true, message: '请输入采集项编号', trigger: 'blur' }],
        collectionName: [{ required: true, message: '请输入采集项名称', trigger: 'blur' }],
        collectionType: [{ required: true, message: '请选择采集项类型', trigger: 'change' }],
        isMust: [{ required: true, message: '请选择是否必填', trigger: 'change' }],
        isValid: [{ required: true, message: '请选择是否有效', trigger: 'change' }],
        isPicture: [{ required: true, message: '请选择是否支持图片', trigger: 'change' }],
        isMustPicture: [{ required: true, message: '请选择图片是否必填', trigger: 'change' }],
        closeProject: [{ required: true, message: '请选择是否开启项目', trigger: 'change' }],
        closeProcess: [{ required: true, message: '请选择是否开启流程', trigger: 'change' }],
        frequencyReset: [{ required: true, message: '请选择是否开启流程', trigger: 'change' }],
        answerType: [{ required: true, message: '请选择回答类型', trigger: 'change' }],
        collectionOption: [{ validator: validatePass, trigger: 'blur' }],
        showHistory: [{ required: true, message: '请选择是否回显', trigger: 'change' }],
      },
      previewForm: {},
      relevancyShow: false,
      collectionItemList1: {},
    };
  },
  created() {
    this.getList();
    // 采集项类型
    this.getDicts('sfa_collection_type').then((response) => {
      this.collectionTypeOptions = response.data;
    });
    // 回答类型
    this.getDicts('sfa_collection_answer_type').then((response) => {
      this.answerTypeOptions = response.data;
    });
    // 是否
    this.getDicts('is_not').then((response) => {
      this.isNotOptions = response.data;
    });
  },
  methods: {
    clearfn() {
      this.form.relevancyItemName = '';
      this.form.relevancyItemId = '';
    },
    selectrelevancy(val) {
      this.form.relevancyItemName = val.collectionName;
      this.form.relevancyItemId = val.collectionId;
      this.relevancyShow = false;
    },
    openRelevancy() {
      this.getList1();
      this.relevancyShow = true;
    },
    updateTaskCollectionItemSortFn(row, index, isUPD) {
      let obj = {
        taskCollectionId: row.taskCollectionId,
        upDown: isUPD,
      };
      var arrt = [];
      let msg = '';
      if (isUPD == 'u') {
        let upData = this.collectionItemFormList[index - 1];
        this.collectionItemFormList.splice(index - 1, 1);
        this.collectionItemFormList.splice(index, 0, upData);
        msg = '上移成功';
      } else {
        let downData = this.collectionItemFormList[index + 1];
        this.collectionItemFormList.splice(index + 1, 1);
        this.collectionItemFormList.splice(index, 0, downData);
        msg = '下移成功';
      }
      this.collectionItemFormList.forEach((item) => {
        arrt.push(item.collectionRelatedId);
      });
      moveCollection({ collectionRelatedIds: arrt.join(',') }).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess(msg);
        }
        this.listCollectionItemList();
      });
    },
    previewFnC(row) {
      this.previewForm = [];
      getCollectionItem(row.collectionId).then((response) => {
        this.previewForm.push(response.data);
        this.preview = true;
      });
    },
    listCollectionItemList() {
      this.collectionAddList = [];
      this.editForm.collectionOptionId = this.collectionOptionId;
      listCollectionItemList(this.editForm).then((res) => {
        this.collectionItemFormList = res.rows;
        res.rows.forEach((item) => {
          this.collectionAddList.push(item.collectionId);
        });
        this.getListCollectionItem();
      });
    },
    /** 提交按钮 */
    editSubmitForm(isAdd) {
      let isAddBtn = isAdd || false;
      this.belowShow = false;
      // this.$refs["editForm"].validate(valid => {
      //   if (valid) {
      //     if (this.editForm.taskId != null) {
      //       updateTask(this.editForm).then(response => {
      //         this.$modal.msgSuccess('修改成功');
      //         this.editVisible = false;
      //         this.getList();
      //       });
      //     } else {
      //       addTask(this.editForm).then(response => {
      //         console.log(response)
      //         this.$modal.msgSuccess('新增成功');
      //         this.editVisible = false;
      //         this.getList();
      //       });
      //     }
      //   }
      // });
    },
    /** 采集项重置按钮操作 */
    resetQueryCJX() {
      this.resetForm('addCJXForm');
      this.cjxQuery();
    },
    addCJX(row) {
      let that = this;
      this.$modal
        .confirm('是否确认添加选中信息？')
        .then(function () {
          collectionRelated({
            collectionOptionId: that.collectionOptionId,
            parentCollectionId: that.parentCollectionId,
            collectionId: row.collectionId,
          }).then((res) => {
            console.log(row);
            if (res.code == 200) {
              that.collectionAddList.push(row.collectionId);
              that.$modal.msgSuccess('添加成功');
            }
          });
        })
        .then(() => {
          this.listCollectionItemList();
        });
    },
    // 采集项搜索
    cjxQuery() {
      this.addCJXForm.pageNum = 1;
      this.getListCollectionItem();
    },
    // 删除任务中的采集项
    collectionItemDelete(row) {
      collectionRelatedDelete(row.collectionRelatedId).then((res) => {
        if (res.code == 200) {
          // this.collectionItemFormList.forEach((item,index)=>{
          //   if(item.collectionId == row.collectionId){
          //     this.collectionItemList.splice(index,1);
          //     this.$modal.msgSuccess("删除成功");
          //   }
          // })
          // this.collectionAddList.forEach((item,index)=>{
          //   if(item == row.collectionId){
          //     this.collectionAddList.splice(index,1);
          //   }
          // })
          this.listCollectionItemList();
        }
      });
    },
    getListCollectionItem() {
      this.addCJXForm.itemList = this.collectionAddList;
      this.loadingCJX = true;
      listCollectionItem(this.addCJXForm).then((response) => {
        this.cjxList = response.rows;
        this.totalCJX = response.total;
        this.loadingCJX = false;
      });
    },
    handleSelectionChangeCJX(selection) {
      this.collectionIds = selection.map((item) => item.collectionCode);
      this.collections = selection;
      this.multipleCJX = !selection.length;
    },
    addCJXVisiableFn() {
      this.addCJXVisible = true;
      this.cjxQuery();
    },
    addBelowFn(row) {
      this.belowShow = true;
      this.collectionAddList = [];
      this.collectionOptionId = row.collectionOptionId;
      this.parentCollectionId = row.collectionId;
      this.listCollectionItemList();
    },
    formatter(value) {
      this.form.collectionOptionList[value].collectionOption = this.form.collectionOptionList[
        value
      ].collectionOption.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ''
      );
    },
    /** 查询采集项列表 */
    getList() {
      this.loading = true;
      listCollectionItem(this.queryParams).then((response) => {
        this.collectionItemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getList1() {
      this.loading = true;
      listCollectionItem(this.queryParams1).then((response) => {
        this.collectionItemList1 = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 采集项类型中文转换
    collectionTypeFormat(row) {
      return this.selectDictLabel(this.collectionTypeOptions, row.collectionType);
    },
    // 回答类型中文转换
    answerTypeFormat(row, column) {
      return this.selectDictLabel(this.answerTypeOptions, row.answerType);
    },
    // 是否必填中文转换
    isMustFormat(row, column) {
      return this.selectDictLabel(this.isNotOptions, row.isMust);
    },
    // 是否有效中文转换
    isValidFormat(row, column) {
      return this.selectDictLabel(this.isNotOptions, row.isValid);
    },
    // 是否支持图片中文转换
    isPictureFormat(row, column) {
      return this.selectDictLabel(this.isNotOptions, row.isPicture);
    },
    isMustChange() {
      if (this.form.answerType == 'zp') {
        this.form.isMustPicture = this.form.isMust;
      }
      this.$forceUpdate();
    },
    isMustPictureChange() {
      if (this.form.answerType != 'zp') {
        if (this.form.isPicture == '' || this.form.isPicture == undefined) {
          this.$modal.msgWarning('请先选择是否支持图片项！');
          this.form.isMustPicture = '';
        } else if (this.form.isPicture == '1') {
          this.form.isMustPicture = '1';
        } else {
          if (this.form.isMustPicture == '0') {
            this.form.isPicture = '0';
          }
        }
      } else {
        this.form.isMustPicture = this.form.isMust;
      }

      this.$forceUpdate();
    },
    isPictureChange() {
      if (this.form.answerType != 'zp') {
        if (this.form.isPicture == '1') {
          this.form.isMustPicture = '1';
        }
      } else {
        this.form.isPicture = '0';
      }

      this.$forceUpdate();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm('form');
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.queryParams1.pageNum = 1;
      this.getList1();
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.resetForm('queryForm1');
      this.handleQuery1();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.collectionId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        isMust: '1',
        isPicture: '1',
        isValid: '1',
        isMustPicture: '1',
        pictureSource: '0',
        closeProject: '0',
        showHistory: '0',
        collectionOptionList: [
          { collectionOption: '', closeProject: '0', closeProcess: '0', frequencyReset: '0' },
        ],
      };
      this.resetForm('form');
      this.open = true;
      this.title = '添加采集项';
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = {
        // isMust:'0',
        // isPicture:'0',
        showHistory: '0',
        collectionOptionList: [
          { collectionOption: '', closeProject: '0', closeProcess: '0', frequencyReset: '0' },
        ],
      };
      this.resetForm('form');
      const collectionId = row.collectionId || this.ids;
      getCollectionItem(collectionId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = '修改采集项';
      });
    },
    // 回答类型改变
    answerTypeChange() {
      this.form.remark = '';
      // if(this.form.answerType == 'dx' || this.form.answerType == 'duox'){
      //     this.form.collectionOptionList = [
      //         {collectionOption:''}
      //     ];
      // }else{
      //     this.form.collectionOptionList = [];
      // }
      if (this.form.answerType != 'zp') {
        this.form.collectionOptionList = [
          { collectionOption: '', closeProject: '0', closeProcess: '0', frequencyReset: '0' },
        ];
        this.form.isPicture = '1';
        this.form.isMustPicture = '1';
      } else {
        this.form.collectionOptionList = [];
        this.form.isMustPicture = this.form.isMust;
      }
      this.$forceUpdate();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.collectionCode != null) {
            updateCollectionItem(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.getList();
            });
          } else {
            addCollectionItem(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let that = this;
      const collectionIds = row.collectionId || this.ids.join(',');
      // that.$modal.confirm('是否确认删除采集项编号为"' + collectionIds + '"的数据项？').then(function() {
      that.$modal.confirm('是否确认删除选中信息？').then(function () {
        // return delCollectionItem(collectionIds);
        let obj = {
          collectionIds: collectionIds,
        };
        delsoftCollectionItem(obj).then((response) => {
          that.$modal.msgSuccess('删除成功');
          that.open = false;
          that.getList();
        });
      });
      //     .then(() => {
      //     this.getList();
      //     this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'sfa/collectionItem/export',
        {
          ...this.queryParams,
        },
        `collectionItem_${new Date().getTime()}.xlsx`
      );
    },
    addFn() {
      this.form.collectionOptionList.push({
        collectionOption: '',
        closeProject: '0',
        closeProcess: '0',
        frequencyReset: '0',
      });
    },
    reduceFn(index) {
      this.form.collectionOptionList.splice(index, 1);
    },
    previewFn(row) {
      // this.$router.push({
      //     path: "/task/preview",
      //     query: {}
      // });
      getCollectionItem(row.collectionId).then((response) => {
        console.log(response.data.collectionOptionList);
        this.previewForm = response.data;
        this.preview = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.addBtn {
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  color: #409eff;
}
.font-red {
  color: #ff4949;
  position: absolute;
  left: -8px;
  top: 2px;
}
</style>
