<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:mode:add']"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="modeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="仪器类型" align="center" prop="instrumentType" >
        <template slot-scope="scope">
          <span v-show="scope.row.instrumentType == 1">非iot仪器</span>
          <span v-show="scope.row.instrumentType == 2">iot仪器</span>
        </template>
      </el-table-column>
      <el-table-column label="仪器型号" align="center" prop="instrumentModel" />
      <el-table-column label="模式类型" align="center" prop="modeType" />
      <el-table-column label="模式分类" align="center" prop="modeClass" />
      <el-table-column label="模式名称" align="center" prop="modeName" />
      <el-table-column label="模式时长(分钟)" align="center" prop="modeTime" width="180" />
      <el-table-column label="模式封面图片" align="center" prop="modeBanner" >
        <template slot-scope="scope">
          <el-image :src="scope.row.modeBanner" style="width: 60px;height: 80px" :preview-src-list="[scope.row.modeBanner]">
            <div slot="placeholder" class="image-slot"><span class="dot"></span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="解锁小程序标签" align="center" prop="lockWechatTag" />
      <el-table-column label="解锁外部标签" align="center" prop="lockCompanyTag" />
      <el-table-column label="备注 " align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:mode:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:mode:remove']"
          >删除</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="添加弹出视频/图片" :visible.sync="openSourceOpen" width="500px" append-to-body :before-close="closeOpenSource">
      <el-form ref="openSourceForm" :model="openSourceForm"  label-width="80px">
        <el-form-item label="弹出标题" prop="openTitle">
          <el-input v-model="openSourceForm.openTitle" placeholder="请输入弹出标题" />
        </el-form-item>
        <el-form-item label="弹出视频/图片" prop="openSourceUrl" label-width="100px">
          <el-upload
            class="upload-demo"
            ref="uploadOpenSource"
            :action="upload.url"
            :on-remove="handleOpenSourceRemove"
            :on-success="handleOpenSourceFileSuccess"
            :headers="upload.headers"
            :file-list="fileOpenSourceList"
            :before-upload="limitFileType"
            accept=".jpeg,.jpg,.png,.svg,.mp4,.avi,.mov,.rmvb,.rm,.flv,.3gp,.GIF,.gif"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频/图片文件，且不超过50M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="提示内容" prop="openTitle">
          <el-input v-model="openSourceForm.openContent" placeholder="请输入提示内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOpenSource">确 定</el-button>
        <el-button @click="closeOpenSource">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改模式列表对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body :before-close="closeOpen">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span ="12">
            <el-form-item label="仪器类型" prop="instrumentType">
              <el-select v-model="form.instrumentType" @change="setModeTitle">
                <el-option label="非iot仪器" :value="1" :key="1"></el-option>
                <el-option label="iot仪器" :value="2" :key="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span ="12">
            <el-form-item label="仪器型号" prop="instrumentModel" v-if="form.instrumentType == 2">
              <el-select v-model="form.instrumentModel" @change="setModeType">
                <el-option
                  v-for="dict in dict.type.instrument_model"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span ="12">
            <el-form-item label="模式类型" prop="modeType" v-if="form.instrumentModel == 'FR200'">
              <el-select v-model="form.modeType">
                <el-option
                  v-for="dict in dict.type.instrument_model_type_fr200"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模式类型" prop="modeType" v-if="form.instrumentModel == 'WL200'">
              <el-select v-model="form.modeType">
                <el-option
                  v-for="dict in dict.type.instrument_model_type_wl200"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模式类型" prop="modeType" v-if="form.instrumentModel == 'M01'">
              <el-select v-model="form.modeType">
                <el-option
                  v-for="dict in dict.type.instrument_model_type_m01"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span ="12">
            <el-form-item label="模式分类" prop="modeClass" v-if="form.instrumentModel == 'FR200'">
              <el-select v-model="form.modeClass">
                <el-option
                  v-for="dict in dict.type.instrument_model_class_fr200"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模式分类" prop="modeClass" v-if="form.instrumentModel == 'WL200'">
              <el-select v-model="form.modeClass">
                <el-option
                  v-for="dict in dict.type.instrument_model_class_wl200"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span ="12">
            <el-form-item label="舱体模式" prop="isCabinMode" v-if="form.instrumentModel == 'WL200' & form.modeType != '10'">
              <el-select v-model="form.isCabinMode">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span ="12">
            <el-form-item label="自定义组合" prop="isCustomMode" v-if="(form.modeType != '10'&&form.instrumentType==2)" label-width="100px">
              <el-select v-model="form.isCustomMode">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="模式名称" prop="modeName">
          <el-input v-model="form.modeName" placeholder="请输入模式名称" maxlength="10"/>
        </el-form-item>
        <el-form-item label="模式描述" prop="modeDesc">
          <el-input v-model="form.modeDesc" placeholder="请输入模式描述" maxlength="10"/>
        </el-form-item>
        <el-form-item label="模式时长" prop="modeTime" v-if="form.instrumentType == 2">
          <el-input v-model="form.modeTime" placeholder="请输入模式时间"/>
        </el-form-item>
        <el-form-item label="模式封面" prop="modeBanner">
          <el-upload
            :action="upload.url"
            :headers="upload.headers"
            :file-list="bannerList"
            list-type="picture-card"
            :on-preview="handlePreviewFile"
            :on-success="handleBannerFileSuccess"
            :before-upload="limitImageFileType"
            :on-remove="handleRemoveBanner"
            accept=".jpeg,.jpg,.png,.svg">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png图片</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item :label="modeVideoTitle" prop="modeVideo" label-width="100px">
          <el-upload
            class="upload-demo"
            :action="upload.url"
            :before-upload="limitVideFileType"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleFileSuccess"
            :headers="upload.headers"
            :file-list="fileList"
            accept=".mp4,.avi,.mov,.rmvb,.rm,.flv,.3gp"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过50M</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.instrumentType == 2" label="弹出视频窗" prop="openSource"  label-width="100px">
          <el-button type="primary" @click="showOpenSource">添加弹窗</el-button>
          <el-table :data="openSourceData" style="width: 100%"  max-height="250">
            <el-table-column prop="openTitle" label="弹窗标题" width="150" />
            <el-table-column prop="openSourceName" label="弹出视频/图片" width="120" >
              <template slot-scope="scope">
                <template
                  v-if="scope.row.openSourceSuffix === 'gif'
                      || scope.row.openSourceSuffix === 'GIF'
                      || scope.row.openSourceSuffix === 'png'
                      || scope.row.openSourceSuffix === 'PNG'
                      || scope.row.openSourceSuffix === 'jpeg'
                      || scope.row.openSourceSuffix === 'JPEG'
                      || scope.row.openSourceSuffix === 'jpg'
                      || scope.row.openSourceSuffix === 'JPG'
                      || scope.row.openSourceSuffix === 'svg'
                      || scope.row.openSourceSuffix === 'SVG'
                   ">
                  <ImagePreview :src="scope.row.openSourceUrl" />
                </template>
                <template v-else>
                  <div style="width: 80px; height: 80px">
                    <video style="width: 100%; height: 100%" :src="scope.row.openSourceUrl"></video>
                  </div>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="openSourceSuffix" label="类型" width="120" />
            <el-table-column prop="openContent" label="提示内容" width="120" />
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDelOpenSource(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="启动/暂停图片GIF" required  label-width="130px" v-if="form.instrumentType == 2">
          <el-button type="primary" @click="addService">添加</el-button>
            <div v-for="(item,index) of serviceData">
              <el-row style="margin-top: 10px">
                <el-col :span ="12">
                  <el-form-item label="护理时间范围" prop="startTimeArray" label-width="110px">
                    <el-time-picker
                      is-range
                      v-model="item.startTimeArray"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span ="12">
                  <el-form-item style="margin-left: 55%">
                     <el-button type="primary" @click="delService(item)">删除</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span ="12">
                  <el-form-item label="启动图片GIF" prop="modeBanner" label-width="110px">
                    <el-upload
                      :action="upload.url+'/else'"
                      :headers="upload.headers"
                      :data="{index:index,condition:index+'_start'}"
                      :file-list="item.startSourceArray"
                      list-type="picture-card"
                      :on-preview="handlePreviewFile"
                      :on-success="uploadServiceSuccess"
                      :before-upload="limitGifFileType"
                      accept=".GIF,.gif"
                     >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                </el-col>
                <el-col :span ="12">
                  <el-form-item label="暂停图片GIF" prop="modeBanner" label-width="110px">
                    <el-upload
                      :action="upload.url+'/else'"
                      :headers="upload.headers"
                      :data="{index:index,condition:index+'_stop'}"
                      :file-list="item.stopSourceArray"
                      list-type="picture-card"
                      :on-preview="handlePreviewFile"
                      :on-success="uploadServiceSuccess"
                      :before-upload="limitGifFileType"
                      accept=".GIF,.gif"
                      >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
        </el-form-item>
        <el-form-item v-if="form.instrumentType == 2" label="模式组合" required label-width="120px">
          <el-button type="primary" @click="addCombine">添加</el-button>
          <div v-for="(item,index) of combineData">
            <el-divider content-position="left">组合{{index+1}}</el-divider>
            <el-form-item label="模式名称" prop="modeName" label-width="110px" style="margin-top: 10px">
              <el-row>
                <el-col :span ="12">
                  <el-select v-model="item.modeId">
                    <el-option
                      v-for="mode in combineModeList"
                      :key="mode.id"
                      :label="mode.modeName"
                      :value="mode.id"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span ="12">
                  <el-form-item style="margin-left: 38%">
                    <el-button type="primary" @click="delCombine(item)">删除</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="时间(分)" prop="modeName" label-width="110px" style="margin-top: 10px">
              <el-input-number v-model="item.combine" controls-position="right" :min="1" />
            </el-form-item>


            <el-form-item label="使用技术" prop="technologyInfo"  label-width="110px" style="margin-top: 10px">
              <el-select
                v-model="item.technologyArray"
                placeholder="请选择技术"
                clearable
                multiple
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.instrument_technology"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="模式功效" prop="effectContent"  label-width="110px" style="margin-top: 10px">
              <el-input v-model="item.effectContent" placeholder="请输入模式功效" maxlength="50"/>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="解锁小程序标签" prop="showWechatTagId" label-width="120px">
          <treeselect v-model="form.lockWechatTagArray" :options="chatTagOptions" :multiple="true" :show-count="true" placeholder="请选择小程序标签" :disable-branch-nodes="true" />
        </el-form-item>
        <el-form-item label="解锁外部标签" prop="showCompanyTagId" label-width="120px">
          <treeselect v-model="form.lockCompanyTagArray" :options="tagOptions" :multiple="true" :show-count="true" placeholder="请选择外部标签" :disable-branch-nodes="true" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">重 置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMode, getMode, delMode, addMode, updateMode,listModeAll } from "@/api/system/mode";
import { listSource, getSource, delSource, addSource, updateSource } from "@/api/system/modeOpenSource";



import {getToken} from "@/utils/auth";
import { tagTreeSelect } from "@/api/system/wechatTab";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Mode",
  components: { Treeselect },
  dicts: ['instrument_model','instrument_model_type_fr200','instrument_model_type_wl200','instrument_model_type_m01','instrument_model_class_fr200','instrument_model_class_wl200','instrument_technology'],
  data() {
    return {
      combineModeList:[],
      // 查询参数
      combineModeQueryParams: {
        instrumentType: 2,
        instrumentModel: 'WL200',
        modeName: null,
        isCustomMode:0,
        modeType: null,
        modeClass: null,
        status: null,
      },
      //组合数据
      combineData:[],
      // 时间选择范围
      serviceData: [],
      fileOpenSourceList: [],
      // 弹出视频数据
      openSourceData: [],
      // 弹出视频表单
      openSourceForm: {},
      // 弹窗视频遮罩层
      openSourceOpen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      modeVideoTitle: '模式视频',
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tagOptions: [],
      chatTagOptions: [],
      // 模式列表表格数据
      modeList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 封面list
      fileList: [],
      bannerList:[],
      // 上传参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        instrumentType: null,
        instrumentModel: null,
        modeName: null,
        modeDesc: null,
        modeBanner: null,
        isCustomMode:null,
        modeVideo: null,
        modeType: null,
        modeClass: null,
        isCabinMode: null,
        modeTime: null,
        preparationVideo: null,
        beganVideo: null,
        pauseVideo: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        instrumentType: [
          { required: true, message: "仪器类型不能为空", trigger: "blur" }
        ],
        instrumentModel: [
          { required: true, message: "仪器型号不能为空", trigger: "blur" }
        ],
        modeType: [
          { required: true, message: "模式类型不能为空", trigger: "blur" }
        ],
        modeClass: [
          { required: true, message: "模式分类不能为空", trigger: "blur" }
        ],
        isCabinMode: [
          { required: true, message: "舱体模式不能为空", trigger: "blur" }
        ],
        isCustomMode: [
          { required: true, message: "自定义组合不能为空", trigger: "change" }
        ],
        modeName: [
          { required: true, message: "模式名称不能为空", trigger: "blur" }
        ],
        modeVideo: [
          { required: true, message: "模式视频不能为空", trigger: "blur" }
        ],
        modeTime: [
          { required: true, message: "模式时长不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getDeptTree();

  },
  methods: {
    getCombineList(){
      listModeAll(this.combineModeQueryParams).then(response => {
        this.combineModeList = response.data;
      });
    },
    /** 查询模式列表列表 */
    getList() {
      this.loading = true;
      listMode(this.queryParams).then(response => {
        this.modeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // 查询组合数据
      this.getCombineList();
    },
    setModeType(){
      this.form.modeType = null;
      this.form.modeClass = null;
      this.form.isCabinMode = null;
    },
    setModeTitle(){
      if (this.form.instrumentType == 1) {
        this.modeVideoTitle = '模式视频';
      } else {
        this.modeVideoTitle = '准备页视频';
      }
    },
    closeOpen(){
      this.fileList = [];
      this.bannerList = [];
      this.open = false;
    },
    // 取消按钮
    cancel() {
      // this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        instrumentType: null,
        instrumentModel: null,
        modeName: null,
        modeDesc: null,
        modeBanner: null,
        modeVideo: null,
        modeType: null,
        modeClass: null,
        isCabinMode: null,
        modeTime: null,
        preparationVideo: null,
        beganVideo: null,
        pauseVideo: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
      this.bannerList = [];
      this.fileList = [];
      this.serviceData = [];
      this.combineData = [];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加模式";
      this.form.instrumentType = 1;
      this.openSourceData = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      this.bannerList = [];
      this.fileList = [];
      getMode(id).then(response => {
        this.form = response.data;
        this.form.modeType = String(this.form.modeType)
        this.form.modeClass = String(this.form.modeClass)
        this.open = true;
        this.title = "修改模式";
        this.fileList.push({
          name: this.handleFileInfo(this.form.modeVideo),
          url: this.form.modeVideo
        })
        this.bannerList.push({
          name: this.handleFileInfo(this.form.modeBanner),
          url: this.form.modeBanner
        })
        // 设置弹出资源
        this.openSourceData = this.form.openSourceData;
        // 设置服务资源
        this.serviceData = this.form.serviceData;

        this.serviceData.forEach(function(item,index){
          item.startSourceArray = [{url:item.startSource}];
          item.stopSourceArray = [{url:item.stopSource}];
        })
        // 设置组合数据
        this.combineData = this.form.combineData;
        // 组合查询数据剔除自身
        this.combineModeList = this.combineModeList.filter(x => x.id != id);
        console.log('组合数据=>',this.combineModeList)
      });
    },
    handleFileInfo(url) {
      if (url) {
        const filePath = url.substring(0, url.lastIndexOf("/"));
        // 获取文件名（包括扩展名）
        const fileNameWithExtension = url.substr(filePath.length + 1);
        return fileNameWithExtension
      }
    },
    /** 提交按钮 */
    submitForm() {
      // 处理弹出资源
      this.form.openSourceData = this.openSourceData;
      console.log('服务实体===》',this.serviceData)
      // 服务实体类
      this.form.serviceData = this.serviceData;
      let flag = false;
      if (this.form.serviceData.length > 0) {
        this.form.serviceData.forEach(data => {
          if(!data.startTimeArray) {
            flag = true;
          }
        })
      }
      if (flag) {
        this.$message.error("服务时间不能为空");
        return;
      }
      // 组合实体
      this.form.combineData = this.combineData;
      let technologyFlag = false;
      let effectContent = false;
      if (this.form.combineData.length>0){
        this.form.combineData.forEach(data => {
          if (!data.technologyArray) {
            technologyFlag = true;
          }
          if (!data.effectContent) {
            effectContent = true;
          }
        })
      }
      if (technologyFlag) {
        this.$message.error("使用技术不能为空");
        return;
      }
      if (effectContent) {
        this.$message.error("模式功效不能为空");
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateMode(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMode(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除模式列表编号为"' + ids + '"的数据项？').then(function() {
        return delMode(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 查询标签下拉树结构 */
    getDeptTree() {
      tagTreeSelect({type: 2}).then(response => {
        this.tagOptions = response.data;
      });
      tagTreeSelect({type: 1}).then(response => {
        this.chatTagOptions = response.data;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/mode/export', {
        ...this.queryParams
      }, `mode_${new Date().getTime()}.xlsx`)
    },
    handleRemove(file, fileList) {
      console.log('调用了')
      this.fileList = [];
    },
    handleRemoveBanner(file, fileList) {
      // console.log('调用了删除')
      this.bannerList = [];
    },
    handlePreview(file) {
      console.log(file);
    },
    limitGifFileType(file) {
      const imageType = ['image/gif', 'image/GIF']
      let isVideo = imageType.includes(file.type)
      // 检验文件格式
      if (!isVideo) {
        this.$message.error(`图片格式错误!`)
        return false
      }
      // 校检文件大小
      let fileSize = 5;
      if (fileSize) {
        let isLt = file.size / 1024 / 1024 < fileSize
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${fileSize} MB!`)
          return false
        }
      }
      return true;

    },
    limitFileType(file) {
      const imageType = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg', ['image/jpeg', 'image/jpg', 'image/png', 'image/svg', 'video/mp4','video/avi','video/mov','video/rmvb','video/rm','video/flv','video/3gp']]
      let isVideo = imageType.includes(file.type)
      // 检验文件格式
      if (!isVideo) {
        this.$message.error(`文件格式错误!`)
        return false
      }
      return true;
    },
    limitImageFileType(file) {
      const imageType = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg']
      let isVideo = imageType.includes(file.type)
      // 检验文件格式
      if (!isVideo) {
        this.$message.error(`图片格式错误!`)
        return false
      }
      // 校检文件大小
      let fileSize = 5;
      if (fileSize) {
        let isLt = file.size / 1024 / 1024 < fileSize
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${fileSize} MB!`)
          return false
        }
      }
      return true;
    },
    limitVideFileType(file) {
      const videoType = ['video/mp4','video/avi','video/mov','video/rmvb','video/rm','video/flv','video/3gp']
      let isVideo = videoType.includes(file.type)
      // 检验文件格式
      if (!isVideo) {
        this.$message.error(`视频格式错误!`)
        return false
      }
      // 校检文件大小
      let fileSize = 50;
      let isLt = file.size / 1024 / 1024 < fileSize
      if (!isLt) {
        this.$message.error(`上传文件大小不能超过 ${fileSize} MB!`)
        return false
      }
      return true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList, item) {
      console.log('上传后的结果==>',JSON.stringify(response))
      if(response.code == '200') {
        this.fileList = [];
        this.fileList.push({
          name: response.data.name,
          url: response.data.url,
        })
        this.form.modeVideo = response.data.url;
      }
    },
    // 封面上传成功处理
    handleBannerFileSuccess(response, file, fileList, item) {
      console.log('上传后的结果==>',JSON.stringify(response))
      if(response.code == '200') {
        this.bannerList = [];
        this.form.modeBanner = response.data.url;
        this.bannerList.push({name:response.data.name,url:response.data.url});
      }
    },
    handlePreviewFile(file){
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 展示弹出弹窗
    showOpenSource(){
      this.openSourceOpen = true;
    },
    // 关闭弹出弹窗
    closeOpenSource(){
      this.openSourceOpen = false;
      this.openSourceForm = {};
      this.$refs.uploadOpenSource.clearFiles();
    },
    // 增加弹出弹窗
    addOpenSource(){
      if (!this.openSourceForm.openTitle) {
        this.$modal.msgError("弹出标题不能为空");
        return ;
      }
      if (!this.openSourceForm.openContent) {
        this.$modal.msgError("弹出内容不能为空");
        return ;
      }
      if (!this.openSourceForm.openSourceUrl) {
        this.$modal.msgError("弹出图片/视频不能为空");
        return ;
      }
      this.openSourceForm.timeFlag = new Date().getTime();
      this.openSourceData.push(this.openSourceForm);
      this.openSourceOpen = false;
      this.openSourceForm = {};
      this.$refs.uploadOpenSource.clearFiles();
    },
    // 删除弹出弹窗
    handleDelOpenSource(row){
      this.openSourceData = this.openSourceData.filter(x => x.timeFlag != row.timeFlag);
    },
    handleOpenSourceRemove(){
      this.fileOpenSourceList = [];
    },
    handleOpenSourceFileSuccess(response, file, fileList, item){
      if(response.code == '200') {
        const url = response.data.url;;
        const filePath = url.substring(0, url.lastIndexOf("/"));
        // 获取文件名（包括扩展名）
        const fileNameWithExtension = url.substr(filePath.length + 1);
        this.fileOpenSourceList = [];
        this.openSourceForm.openSourceUrl = response.data.url;
        // 处理文件后缀名
        this.openSourceForm.openSourceName = fileNameWithExtension;
        // 获取文件后缀
        this.openSourceForm.openSourceSuffix = url.substring(url.lastIndexOf(".")+1,url.length);

        this.fileOpenSourceList.push({name:response.data.name,url:response.data.url});
      }
    },
    // 添加服务内容
    addService(){
      const year = new Date().getFullYear().toString(); // 四位数表示的年份
      const months = (new Date().getMonth() + 1).toString().padStart(2, '0'); // 补零后的两位数表示的月份
      const day = new Date().getDate().toString().padStart(2, '0'); // 补零后的两位数表示的日期
      let hour = 0;
      let min = 0;
      let startTimeArray = [];
      if(this.form.modeTime) {
        if(this.form.modeTime > 60) {
          hour = this.form.modeTime / 60 ;
          min = this.form.modeTime % 60 ;
        } else {
          min = this.form.modeTime;
        }
       startTimeArray = [new Date(year, months, day, 0, 0), new Date(year, months, day, hour, min)];
      } else {
        this.$message.error('模式时长不能为空');
        return ;
      }

      this.serviceData.push({
        timeFlag : new Date().getTime(),
        startTimeArray: startTimeArray,
        startSourceArray: [],
        stopSourceArray: [],
        });
    },
    // 删除服务内容
    delService(row){
      if (row.timeFlag) {
        this.serviceData = this.serviceData.filter(x => x.timeFlag != row.timeFlag);
      } else {
        this.serviceData = this.serviceData.filter(x => x.id != row.id);
      }
    },
    handleRemoveService(file){
      console.log(file);
    },
    // 统一上传操作
    uploadServiceSuccess(response, file, fileList, item){
      if(response.code == '200') {
         if(response.data.condition){
           // 回显处理数据
           const indexArray = response.data.condition.split('_');
           const index = indexArray[0];
           const flag = indexArray[1];
           if ('start' == flag) {
             this.serviceData[index].classHide = true;
             this.serviceData[index].startSourceArray = [];
             this.serviceData[index].startSource =  response.data.url;
             this.serviceData[index].startSourceArray.push({name:response.data.name,url:response.data.url})
           } else {
             this.serviceData[index].classHide = true;
             this.serviceData[index].stopSourceArray = [];
             this.serviceData[index].stopSource =  response.data.url;
             this.serviceData[index].stopSourceArray.push({name:response.data.name,url:response.data.url})

           }
         }
         console.log('上传成功后服务内容===》',this.serviceData)
      }
    },
    // 增加组合
    addCombine(){
      this.combineData.push({
        timeFlag : new Date().getTime(),
        modeId: null,
        combine: 1,
        technologyArray: [],
        effectContent: null
      })
    },
    // 删除服务内容
    delCombine(row){
      if (row.timeFlag) {
        this.combineData = this.combineData.filter(x => x.timeFlag != row.timeFlag);
      } else {
        this.combineData = this.combineData.filter(x => x.id != row.id);
      }
    },
  }
};
</script>
