帮我优化下面的代码，优化代码结构，增加注释，提取函数处理
<template>
  <div class="article-edit" v-loading="loading">
    <el-form :inline="true" :model="form" ref="form" label-width="auto" label-position="left">
      <div class="flex-mian">
          <div class="custom-card article-left">
            <div class="card-headerBody-wrap">
              <div class="card-header">
                <el-form-item
                  label="标题"
                  prop="title"
                  label-width="60px"
                  :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]"
                >
                  <el-input
                    type="textarea"
                    v-model.trim="form.title"
                    :autosize="{ minRows: 4, maxRows: 10}"
                    :disabled="isFromShardingLibrary"
                    placeholder="请输入标题"
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item>
                <el-form-item label="摘要" prop="smallText" label-width="60px">
                  <span slot="label" style="margin-left:10px">摘要</span>
                  <el-input
                    type="textarea"
                    v-model.trim="form.smallText"
                    :autosize="{ minRows: 4, maxRows: 10}"
                    :disabled="isFromShardingLibrary"
                    placeholder="请输入摘要"
                    maxlength="200"
                    show-word-limit
                  />
                </el-form-item>
                <div v-if="appId === '0000'">
                  <el-form-item
                    label="作者"
                    label-width="60px"
                    prop="author"
                    :rules="[{required: !isDraft, message: '如搜不到作者，需向中台申请开通', trigger: 'change'}]">
                    <!-- staffCheck 1为审核通过 2为审核不通过 -->
                    <SelectAuthor
                      @change="handleAuthorChange"
                      :authorName.sync="form.author"
                      :disabled="isFromShardingLibrary || form.staffCheck === 1 || form.staffCheck === 2"
                      ref="selectAuthorRef"
                    ></SelectAuthor>
                  </el-form-item>
                  <el-form-item
                    label="头像"
                    label-width="186px"
                    prop="dataSourceUrl"
                    :rules="[{required: !isDraft, message: '请上传头像', trigger: 'change'}]">
                    <ImagePopover
                      messageName="headImage"
                      @uploadBtnClick="uploadBtnClick"
                      @iframeBtnClick="onIframeBtnClick"
                      :disabled="isFromShardingLibrary">
                      <upload-avatar
                        ref="headImageRef"
                        :isNeedCheck="false"
                        v-model="form.dataSourceUrl"
                        :disabled="uploadDisabled"
                        :circle="true"
                      ></upload-avatar>
                    </ImagePopover>
                  </el-form-item>
                  <div v-if="appId === '0000' && !isGeZhi" class='makeAuthorBtn'>
                    <el-button type="text" @click="$router.push({name: 'account-setting'})">找不到作者，点我申请</el-button>
                  </div>
                </div>
                <div class="el-form--inline" v-else>
                    <el-form-item
                      label="作者："
                      prop="author"
                      :rules="[{required: true, message: '请输入作者', trigger: 'blur'}]"
                    >
                    <el-input
                      v-model.trim="form.author"
                      placeholder="请输入作者"
                      :disabled="form.staffCheck === 1 || form.staffCheck === 2"
                    />
                    </el-form-item>
                  <el-form-item
                    label="头像"
                    label-width="186px"
                    prop="dataSourceUrl"
                    :rules="[{required: true, message: '请上传头像', trigger: 'change'}]"
                  >
                    <span
                      slot="error"
                      slot-scope="scope"
                      class="el-form--inline__error"
                    >{{scope.error}}</span>
                    <ImagePopover
                      messageName="headImage"
                      @uploadBtnClick="uploadBtnClick"
                      @iframeBtnClick="onIframeBtnClick"
                      :disabled="isFromShardingLibrary">
                        <upload-avatar
                          ref="headImageRef"
                          :isNeedCheck="false"
                          v-model="form.dataSourceUrl"
                          :disabled="uploadDisabled"
                          :circle="true"
                          topOffset="-24px"
                        ></upload-avatar>
                    </ImagePopover>
                  </el-form-item>
                </div>
                <div class="cover-stars">封面图(默认上传主封面图,各平面有个性需要则上传自定义封面图)</div>
                <el-form-item
                  label="主封面"
                  label-width="186px"
                  prop="themeImgs"
                  class="theme-img"
                  :rules="[{required: !isDraft, message: '请上传封面', trigger: 'change'}]"
                >
                  <ImagePopover
                    messageName="backgroundImage"
                    @uploadBtnClick="uploadBtnClick"
                    @iframeBtnClick="onIframeBtnClick"
                    :disabled="isFromShardingLibrary"
                    :count="themeImgsCount">
                    <upload-multiple-imgs
                      ref="backgroundImageRef"
                      :limit="8"
                      :minWidth="150"
                      :minHeight="100"
                      :imageStr="form.themeImgs"
                      @imageChange="imageChange"
                      :disabled="uploadDisabled"
                      :disabledBtns="isFromShardingLibrary">
                      <div slot="reference" style="width: 160px">
                        <img src="@/assets/upload.png" alt="">
                        <div>上传图片</div>
                      </div>
                    </upload-multiple-imgs>
                  </ImagePopover>
                </el-form-item>
                <el-form-item
                  label="自定义封面图"
                  prop="definefImgs"
                  label-width="120px"
                  class="theme-img"
                >
                  <template slot="label">
                    <span>自定义封面图 </span>
                    <el-tooltip content="提示：好车主APP自定义封面图按照提示尺寸(224*274、702*374、702*702)上传" placement="right">
                      <i class="el-icon-question mini"></i>
                    </el-tooltip>
                  </template>
                  <ImagePopover
                    messageName="customImage1"
                    @uploadBtnClick="uploadBtnClick"
                    @iframeBtnClick="onIframeBtnClick"
                    :disabled="isFromShardingLibrary"
                    showCustomTips>
                    <UploadImg
                      ref="customImage1Ref"
                      :isNeedCheck="false"
                      imgType="typeOne"
                      :disabled="uploadDisabled"
                      v-model="definedImg1"
                      :disabledDelBtn="isFromShardingLibrary"
                    ></UploadImg>
                  </ImagePopover>
                  <ImagePopover
                    messageName="customImage2"
                    @uploadBtnClick="uploadBtnClick"
                    @iframeBtnClick="onIframeBtnClick"
                    :disabled="isFromShardingLibrary"
                    showCustomTips>
                    <UploadImg
                      ref="customImage2Ref"
                      :isNeedCheck="false"
                      imgType="typeTwo"
                      :disabled="uploadDisabled"
                      v-model="definedImg2"
                      :disabledDelBtn="isFromShardingLibrary"
                    ></UploadImg>
                  </ImagePopover>
                  <ImagePopover
                    messageName="customImage3"
                    @uploadBtnClick="uploadBtnClick"
                    @iframeBtnClick="onIframeBtnClick"
                    :disabled="isFromShardingLibrary"
                    showCustomTips>
                    <UploadImg
                      ref="customImage3Ref"
                      :isNeedCheck="false"
                      imgType="typeThree"
                      :disabled="uploadDisabled"
                      v-model="definedImg3"
                      :disabledDelBtn="isFromShardingLibrary"
                    ></UploadImg>
                  </ImagePopover>
                </el-form-item>
              </div>
            </div>
          </div>
          <div class="custom-card article-center">
            <div class="card-headerBody-wrap">
              <div class="card-body">
                <el-form-item
                  prop="content"
                  label="内容"
                  class="article-edit-item"
                  :rules="[{required: !isDraft, message: '请输入内容', trigger: 'blur'}]">
                  <UEditor v-model="form.content"></UEditor>
                </el-form-item>
              </div>
              <div class="card-footer">
              <div class="text-center">
                <el-button @click="back">取消</el-button>
                <el-button
                  type="primary"
                  @click="saveBefore(false)"
                  :loading="saveLoading">
                  提交{{ saveLoading ? '中' : '' }}
                </el-button>
                <el-button
                  type="primary"
                  @click="handleTodistribution"
                  v-if="appId === '0000' && !isNew && !isDraft && !draftBtn && !hiddenBtns && !isGeZhi && !isGezhiSystem"
                >分发</el-button>
                <el-button
                  v-if="appId === '0000' && (isNew || isDraft || draftBtn)"
                  type="primary"
                  @click="saveBefore(true)"
                  :loading="draftLoading"
                >存入草稿</el-button>
                <template v-if="!isNew && !isGeZhi && !isGezhiSystem">
                  <template v-if="form.downloadPermission === 1 && !hiddenBtns">
                    <el-button @click="download" v-if="!isNew && !isDraft && !draftBtn">下载</el-button>
                  </template>
                  <el-popover
                    v-if="form.downloadPermission !== 1 && !hiddenBtns"
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    content="由于版权问题，该文章无法下载"
                  >
                    <el-button
                      slot="reference"
                      style="margin-left: 10px"
                      class="download-hover"
                      v-hasCtrl="['content-article-download-button']"
                    >
                      <i class="el-icon-download"></i>下载
                    </el-button>
                  </el-popover>
                </template>
                <el-button @click="handlePreviewClick">预览</el-button>
              </div>
            </div>
            </div>
        </div>
        <div :class="['padding-left-0', 'article-right', this.isSwitchOpen?'right-open':'right-close']">
          <el-card shadow="never" style="height: 100%;">
            <div v-if="active === 'h5'">
              <h5-preview :params="h5Params"></h5-preview>
            </div>
            <el-tabs
              v-model="activeName"
              class="tabTop"
              forceRender>
              <el-tab-pane
                label="配置"
                name="0"
              ></el-tab-pane>
              <el-tab-pane
                v-if="appId === '0000'"
                label="标签配置"
                name="2"
              ></el-tab-pane>
              <el-tab-pane
                name="1">
                <span slot="label">
                  实时预览
                  <el-tooltip
                    content="实时预览只是预览效果，实际效果见各APP"
                    placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
              </el-tab-pane>
            </el-tabs>
            <keep-alive>
            <div class="article-attr" v-if="active === 'attr'">
              <div v-show="activeName==='0'">
                <div class="label-top">
                  <el-form-item
                    label="时效性"
                    v-if="appId === '0000'"
                    prop='isLapseContro'
                    :rules="[{required: !isDraft, validator: this.handlerValidate, trigger: ['blur', 'change']}]"
                  >
                    <!-- <span slot="label">
                      <span style="margin-right:20px">时效性：</span> -->
                    <el-radio-group
                      v-model="form.isLapseContro"
                      @change="lapseTimeValidate">
                      <el-radio :label="0">是</el-radio>
                      <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                    <!-- </span> -->
                    <el-date-picker
                      v-model="form.lapseTime"
                      type="datetime"
                      align="right"
                      :disabled="form.isLapseContro === 1 || form.isLapseContro === ''"
                      :picker-options="pickerOptions"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择失效时间"
                    ></el-date-picker>
                  </el-form-item>
                </div>
                <div class="label-top">
                  <el-form-item label="是否推荐：" v-if="appId === '0004'">
                    <template slot="label">
                      <span style="margin-right:20px">是否推荐：</span>
                      <el-radio v-model="form.recommendType" :label="1">是</el-radio>
                      <el-radio v-model="form.recommendType" :label="0">否</el-radio>
                    </template>
                  </el-form-item>
                </div>
                <div class="label-top">
                  <el-form-item
                    label="分类"
                    prop="cateListTmp"
                    :rules="[{ type: 'array', required: !isDraft, message: '请选择文章分类', trigger: 'change'}]"
                  >
                    <select-category
                      v-model="form.cateListTmp"
                      :cateType="0"
                      :disabled="isFromShardingLibrary"
                      @change="handleCateChange"
                      ref="selectCateRef"
                      checkStrictly
                      filterable
                      clearable
                    ></select-category>
                  </el-form-item>
                </div>
                <!-- 好伙伴渠道多一个副分类 -->
                <div class="label-top" v-if="appId === '0004'">
                  <el-form-item label="副分类">
                    <select-category v-model="minorCateListTmp" :cateType="0" filterable clearable></select-category>
                  </el-form-item>
                </div>
                <div class="label-top" v-if="appId === '0000'">
                  <el-form-item
                    label="是否营销内容 "
                    prop="isMarketing"
                    :rules="[{ required: !isDraft, message: '请选择是否营销内容', trigger: 'change' }]">
                    <template slot="label">
                      <span>是否营销内容 </span>
                      <i style="cursor: pointer" class="el-icon-question mini" @click="marketVisible = true"></i>
                    </template>
                    <el-radio-group
                      style="margin-left: 20px"
                      v-model="form.isMarketing"
                      :disabled="isFromShardingLibrary">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div class="label-top">
                  <SceneSelect ref="SceneSelectRef" v-model="form.sceneIds" :disabled="isFromShardingLibrary"></SceneSelect>
                </div>
                <div class="label-top input-width" v-if="appId !== '0004'">
                  <el-form-item
                    label="内容投放的地区"
                    prop="district"
                    :rules="[{ required: !isDraft, message: '请选择内容投放的地区', trigger: 'change'}]">
                    <ContentDistrict
                      v-model="form.district"
                      @change="handleDistrictChange"
                      :disabled="isFromShardingLibrary"
                    ></ContentDistrict>
                  </el-form-item>
                </div>
                <div class="label-top">
                  <el-form-item
                    label="关联非车产品"
                    :rules="mpcodeRules"
                    prop="appsProductsDTO.productCode">
                    <el-input
                      v-model.trim="form.appsProductsDTO.productCode"
                      style="width: 336px;"
                      :disabled="isFromShardingLibrary"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="label-top input-width">
                  <!-- 渠道标签 -->
                  <el-form-item label="标签：" v-if="appId !== '0000'">
                    <el-input class="my-input" disabled></el-input>
                    <el-button @click="showTagPop" type="primary" size="small">点击添加</el-button>
                    <ul v-if="labelContentList.length > 0">
                      <li v-for="(item, index) in labelContentList" :key="index">
                        <el-tag type="warning" closable @close="tagClose(item)">{{item.labelName}}</el-tag>
                      </li>
                    </ul>
                </el-form-item>
                <!-- 中台标签 -->
                <SelectLabel v-model="labelContentList"  v-else></SelectLabel>
                </div>
                <div class="bottom-btn" @click="goAddAdvert" v-if="!isGeZhi">配置底部广告</div>
                <div class="show-more" v-show="!this.isShowMore" @click="viewMore">展开更多信息<i class="el-icon-arrow-down"></i></div>
                <div v-show="this.isShowMore">
                  <div class="label-top">
                  <el-form-item label="音频: (点击列表可下载文件)" label-width="227px">
                    <UploadFileShard
                      ref="UploadFileShardRef"
                      v-model="form.audios"
                      accept=".mp3, .wav"
                    ></UploadFileShard>
                  </el-form-item>
                </div>
                <div class="label-top">
                  <el-form-item
                    prop="fileArticleList"
                    :rules="attachmentRules"
                    label="附件: (点击列表可下载文件)"
                    label-width="227px">
                    <el-upload
                      :multiple="true"
                      :headers="headers"
                      class="upload-demo"
                      action="/apps_content/obs/file/article/fileUpload"
                      :limit="10"
                      :on-preview="onPreview"
                      :before-upload="beforeUpload"
                      :on-remove="handleRemove"
                      :on-exceed="handleExceed"
                      :on-success="handleSuccess"
                      accept=".pdf, .ppt, .pptx, .xlsx, xls, .doc, .docx"
                      :file-list="fileList"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip" v-if="fileList.length>0">点击列表下载文件</div>
                    </el-upload>
                  </el-form-item>
                </div>
                <!-- 易核个性化字段 -->
                <template v-if="appId === '100035'">
                  <div class="label-top">
                    <el-form-item
                      label="机构："
                      prop="departmentList"
                      :rules="[{required: true, message: '请选择机构', trigger: 'blur'}]"
                    >
                      <el-select
                        class="department"
                        v-model="form.departmentList"
                        multiple
                        placeholder="请选择机构"
                      >
                        <el-option
                          v-for="(item, index) in defartmentOptionsTemp"
                          :key="index"
                          :label="item.departmentChineseName"
                          :value="item.departmentCode"
                        ></el-option>
                        <div
                          style="text-align: center;"
                          v-if="(departmentTotal !== 1 && departmentInfo.pageNum !== departmentTotal)"
                        >
                          <span class="text" @click="departmentNext">查看更多</span>
                        </div>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item
                      label="业务类型："
                      prop="businessTypeList"
                      :rules="[{required: true, message: '请选择业务类型', trigger: 'blur'}]"
                    >
                      <el-select v-model="form.businessTypeList" multiple placeholder="请选择业务类型">
                        <el-option
                          v-for="(item, index) in businessTypeOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item
                      label="上线时间："
                      prop="onDate"
                      :rules="[{required: true, message: '请输入上线时间', trigger: 'blur'}]"
                    >
                      <el-date-picker
                        v-model="form.onDate"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择日期时间"
                      ></el-date-picker>
                    </el-form-item>
                  </div>
                </template>
                <!-- 好伙伴个性化字段 -->
                <template v-if="appId === '0004'">
                  <!-- 好伙伴定时上线 -->
                    <div class="label-top">
                      <el-form-item
                        prop="isAutoOnline"
                      >
                        <span slot="label">
                          <span style="margin-right:20px">是否自动上线</span>
                          <el-radio-group
                            v-model="isAutoOnline"
                            @change="changeAutdoOnline"
                          >
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                          </el-radio-group>
                        </span>
                      </el-form-item>
                    </div>
                    <div class="label-top">
                      <el-form-item label="开始展示时间："
                        v-if="isAutoOnline === 1"
                        prop="autoOnDate"
                        :rules="[{ validator: validatorShowTime, trigger: 'change'}]"
                      >
                        <el-date-picker
                          v-model="form.autoOnDate"
                          type="datetime"
                          placeholder="选择日期时间"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </div>
                    <div class="label-top">
                      <el-form-item label="结束展示时间："
                        v-if="isAutoOnline === 1"
                        prop="autoOffDate"
                        :rules="[{ validator: validatorShowEndTime, trigger: 'change'}]"
                      >
                        <el-date-picker
                          v-model="form.autoOffDate"
                          type="datetime"
                          placeholder="选择日期时间"
                          format="yyyy-MM-dd HH:mm:ss"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </div>

                    <div class="label-top">
                      <el-form-item>
                        <span slot="label">
                          <span style="margin-right:40px">可见范围</span>
                          <el-radio-group v-model="form.pushType">
                            <el-radio :label="2">按筛选</el-radio>
                            <el-radio :label="3">DPP分群</el-radio>
                          </el-radio-group>
                        </span>
                      </el-form-item>
                    </div>

                <div class="label-top" v-show="form.pushType ===3">
                    <el-form-item
                      label="用户分群："
                      prop="dpp.ugIds"
                      :rules="[{ type: 'array', required: form.pushType ===3, message: '请选择用户分群', trigger: 'change'}]"
                      >
                      <SelectDPP
                        :labelList.sync="form.dpp.ugNames"
                        :valList.sync="form.dpp.ugIds"
                      />
                    </el-form-item>
                  </div>
                <div v-show="form.pushType ===2">
                  <div class="label-top">
                    <el-form-item
                      label="管辖机构："
                      prop="departmentAndTenment.departmentCodes"
                      :rules="[{ type: 'array', required: form.pushType ===2, message: '请选择管辖机构', trigger: 'change'}]"
                      v-if="isShowOrgBranch">
                      <OrgBranch
                        :label.sync="form.departmentAndTenment.departmentNames"
                        :value.sync="form.departmentAndTenment.departmentCodes"
                        :isNew="isNew"
                        :relevanceType="form.relevanceType"
                        @hidden="isShowOrgBranch = false"
                        :parent="vm"
                      ></OrgBranch>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item
                      prop="departmentAndTenment.tenementCodes"
                      :rules="[{ type: 'array', required: form.pushType ===2, message: '请选择网点', trigger: 'change'}]">
                      <span slot="label">
                        网点
                        <el-tooltip :enterable="false" content="注意：搜索结果最多只展示50个" placement="top">
                          <i class="el-icon-warning"></i>
                        </el-tooltip>：
                      </span>
                      <SelectBranch
                        :codes="form.departmentAndTenment.departmentCodes"
                        :valList.sync="form.departmentAndTenment.tenementCodes"
                        :labelList.sync="form.departmentAndTenment.tenementNames"
                        :isNew="isNew"
                        :relevanceType="form.relevanceType"
                        :partData="partData"
                      ></SelectBranch>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item label="功能包：">
                      <selectRole
                        :codes="form.departmentAndTenment.roleCodes"
                        :valList.sync="form.departmentAndTenment.roleCodes"
                        :labelList.sync="form.departmentAndTenment.roleNames"
                        :isNew="isNew"
                      ></selectRole>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item label="所属区域：">
                      <OrgBranchCity
                        :label.sync="form.departmentAndTenment.cityNames"
                        :value.sync="form.departmentAndTenment.cityCodes"
                        :parentCity.sync="form.departmentAndTenment.parentCity"
                        :isNew="isNew"
                        :relevanceType="form.relevanceType"
                        @hidden="isShowOrgBranch = false"
                        :parent="vm"
                      ></OrgBranchCity>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item label="网点类型：">
                      <!-- <selectMultiple
                        :codes="form.departmentAndTenment.tenementTypes"
                        :valList.sync="form.departmentAndTenment.tenementTypes"
                        :labelList.sync="form.departmentAndTenment.tenementTypeNames"
                        :isNew="isNew"
                      ></selectMultiple> -->
                      <TreeMultiple
                      :valList.sync="form.departmentAndTenment.tenementTypes"
                      :labelList.sync="form.departmentAndTenment.tenementTypeNames"
                      :isNew="isNew"
                      >
                      </TreeMultiple>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item label="主营品牌：">
                      <SelectBrand
                        v-model="form.departmentAndTenment.brandCode"
                        :nameList.sync="form.departmentAndTenment.brandName"
                      ></SelectBrand>
                    </el-form-item>
                  </div>
                  <div class="label-top">
                    <el-form-item>
                      <template slot="label">
                        集团：
                        <el-tooltip content="选择集团后，内容将推送至该集团下辖网点" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </template>
                      <SelectTenementGroup
                        v-model="form.departmentAndTenment.tenementGroup"
                        :nameList.sync="form.departmentAndTenment.tenementGroupName"
                      ></SelectTenementGroup>
                    </el-form-item>
                  </div>
                </div>
                </template>
                <div class="label-top" v-hasCtrl="['content-article-visualReadCnt-button']">
                  <el-form-item label="阅读数：">
                    <div class="flex-nowrap">
                      <span class="dialog-btns">{{ form.readCnt }}</span>
                      <span class="num-span">+</span>
                      <el-input-number
                        v-model="form.visualReadCnt"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                      ></el-input-number>
                    </div>
                  </el-form-item>
                </div>
                <div class="label-top" v-hasCtrl="['content-article-visualPraiseCnt-button']">
                  <el-form-item label="点赞数：">
                    <div class="flex-nowrap">
                      <span class="dialog-btns">{{ form.praiseCnt }}</span>
                      <span class="num-span">+</span>
                      <el-input-number
                        v-model="form.visualPraiseCnt"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                      ></el-input-number>
                    </div>
                  </el-form-item>
                </div>
                <template v-if="appId === '0000'">
                  <div class="label-top">
                    <el-form-item label="">
                      <template slot="label">
                        <span> 定时上线 </span>
                        <el-tooltip content="如APP有定时上线功能，该内容分发到APP后台后，将按此时间定时上线" placement="top">
                          <i class="el-icon-question mini"></i>
                        </el-tooltip>
                      </template>
                      <SetTimeOnline v-model="form.fixedOnDate"></SetTimeOnline>
                    </el-form-item>
                  </div>
                  <!-- <el-divider></el-divider> -->
                  <div class="label-top">
                    <h5 style="font-size:16px;font-weight:normal;">绑定圈子</h5>
                    <el-form-item
                      label="绑定圈子："
                    >
                      <el-select
                      v-model="form.circleIdList"
                      clearable
                      filterable
                      multiple
                      placeholder="请选择绑定圈子"
                      >
                        <el-option
                          v-for="item in options_circle"
                          :key="item.circle_id"
                          :label="item.circle_title"
                          :value="item.circle_id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="排序(1-50)："
                      v-if="form.circleIdList && form.circleIdList.length > 0"
                      prop="circleSort"
                      :rules="[{ required: true, message: '请选择排序', trigger: 'change'}]">
                      <div class="flex-nowrap">
                        <el-input-number
                          v-model="form.circleSort"
                          controls-position="right"
                          style="width: 100%"
                          :min="1"
                          :max="50"
                          :step="1"
                          step-strictly
                        ></el-input-number>
                      </div>
                  </el-form-item>
                  <el-form-item label="展示时间："
                    v-if="form.circleIdList && form.circleIdList.length > 0"
                    prop="circleStartTime"
                    :rules="[{ required: true, message: '请选择展示时间', trigger: 'change'}]">
                    <custom-date-picker
                      ref="datePicker"
                      :startDate.sync="form.circleStartTime"
                      :endDate.sync="form.circleEndTime"
                      type="datetimerange"
                    ></custom-date-picker>
                  </el-form-item>
                  </div>
                  <H5-product
                    @selectProduct="selectProduct"
                    :id="form.productId"
                    :appType="form.productAppType"
                    @remove-product="removeProduct"
                  ></H5-product>
                </template>
                <div class="bottom-btn" @click="extensionReading">配置拓展阅读</div>
                </div>
                <div class="show-more" v-show="this.isShowMore" @click="viewMore">收起<i class="el-icon-arrow-up"></i></div>
              </div>
              <RightPreview
                v-show="activeName==='1'"
                :params="h5Params"
              ></RightPreview>
              <div v-if="appId === '0000'">
                <TagConfig
                  v-show="activeName==='2'"
                  :formItemData="formItemData"
                  v-model="form"
                  :isDraft="isDraft"
                ></TagConfig>
              </div>
            </div>
          </keep-alive>
          </el-card>
          <!-- 右侧的隐藏按钮 -->
          <div class="switch" @click="hanleSwitch">
           <!-- <i :class="this.isSwitchOpen ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i> -->
           <!-- <i  class="el-icon-arrow-right"></i> -->
           <img v-if="this.isSwitchOpen" src="@/assets/close-img2x.png" alt="">
           <img v-else src="@/assets/open-img2x.png" alt="">
          </div>
        </div>
      </div>
    </el-form>
    <el-dialog
      title="文章分发"
      :visible.sync="dialogFormVisible"
      width="30%">
      <el-form :model="form" label-width="auto">
        <el-form-item label="分发渠道：">
          <select-application
            ref="dialogAppIds"
            v-model="form.region"
            multiple
          ></select-application>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="batchDispense" :loading="batchLoading">确 定</el-button>
      </div>
    </el-dialog>
    <tag-dialog
      ref="tagPop"
      v-model="labelContentList"
      :maxLength="20"
      :type-limit="[0, 1]"
    ></tag-dialog>
    <!-- 同质化弹窗 -->
    <el-dialog
      :visible.sync="sameContentDialog"
      center width="30%">
      <p style="text-align: center;">内容中心已有该文章，建议使用现有的。</p>
      <p style="text-align: center;">（点击查看后，本内容将会保存为草稿）</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookUp">查看</el-button>
        <el-button type="info" @click="setUp" :disabled="saveLoading">仍要上传</el-button>
      </div>
    </el-dialog>
    <el-dialog
      destroy-on-close
      :visible.sync="marketVisible"
      title="营销内容定义"
      width="600px"
      @closed="marketVisible = false">
      <p>①内容具备营销目的：营销内容会明确表达销售或营利的意图，例如介绍产品特点、价格、购买方式等。非营销内容更注重提供信息、分享经验、传达观点等，并不强调销售目的</p>
      <p>②包含广告形式：营销内容通常具备明确的产品展示、品牌标识等。非营销内容更多是以故事、分享、教程等形式呈现，目的在于提供娱乐或知识价值</p>
      <p>③具备推广手段：营销内容通常配合推广手段，如优惠券、购买链接等，鼓励用户购买或参与活动。非营销内容通常不包含这些推广手段，更注重与用户的互动、建立关系或提供娱乐价值</p>
      <div class="btn-center">
        <el-button type="primary" @click="marketVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <LapseTipDialog
      v-model="isShowLapseTipDialog"
    ></LapseTipDialog>
    <H5PreviewDialog
      ref="showH5Preview"
      :params="h5Params"
    ></H5PreviewDialog>
    <DistributionDialog
      ref="distributionDialogRef"
    ></DistributionDialog>
    <ForRepositoryDialog
      ref="forRepositoryDialogRef"
    ></ForRepositoryDialog>
    <ExtensionReading
      :id="$route.params.id || ''"
      :visible.sync="extensionReadingVisible"
      :contentList.sync="form.contentList"
    ></ExtensionReading>
    <TextComplianceDialog
      ref="TextComplianceDialogRef"
      isArticle
    ></TextComplianceDialog>
    <PopoverIFrameDialog
      :url="iframeUrl"
      :visible.sync="iFrameVisible"
      @message="onMessage"
    ></PopoverIFrameDialog>
  </div>
</template>

<script>
import moment from 'moment'
import UEditor from '@/modules/index/components/ueditor'
import UploadAvatar from '@/modules/index/components/upload-avatar'
import SelectCategory from '@/modules/index/components/select-category'
// import MessageUser from '@/modules/index/components/message-user'
import OrgBranch from '@/modules/index/components/org-branch'
import SelectBranch from '@/modules/index/components/select-branch'
import UploadMultipleImgs from '@/modules/index/components/upload-multiple-imgs/articleUpload'
// import FileItem from '@/modules/index/components/file-item'
import SelectApplication from '@/modules/index/components/select-application'
import SceneSelect from '@/modules/index/components/select-scene'
import CustomDatePicker from '@/modules/index/components/custom-date-picker'
import DistributionDialog from '@/modules/index/components/distribution-dialog/forMy'
import ForRepositoryDialog from '@/modules/index/components/distribution-dialog/forRepository'
import {
  getArticleDetailAPI,
  queryProductNum,
  addArticleAPI,
  updateArticleAPI,
  addMessageApi,
  batchDispenseApi,
  aiticleDownload,
  findBusinessType,
  findDepartmentInfo,
  checkDuplicationArticle,
  updateProductLapseApi,
  getProductApi,
  deleteArticleApi
} from '@/modules/index/api'
import { modifyRepositoryApi } from '@/modules/index/api/shardingLibrary'
import { queryAllLabelListApi } from '@/modules/index/api/tagConfigList'
import { getCircleList } from '@/modules/index/api/question'
import { isNeedUp } from '@/modules/index/api/evalution'
import { getChannel } from '@/modules/index/api/distribution'
import { draftDetail, draftDelete } from '@/modules/index/api/draft'
import {
  pageLabels,
  tagAddOrEditApi
} from '@/modules/index/api/tag'
// import TagChoose from '@/modules/index/components/tag-choose'
import tagDialog from '@/modules/index/components/tag/editTagInfo.vue'
import LapseTipDialog from '@/modules/index/components/lapseTipDialog/index.vue'
import SelectLabel from '@/modules/index/components/select-label/index.vue'
import UploadFileShard from '@/modules/index/components/upload-file-shard'
// import ProductObject from '@/modules/index/components/product-object'
import SelectAuthor from '@/modules/index/components/select-author'
import { contentToHide, contentToShow, findCardInfoList } from '@/modules/index/components/ueditor/adCard'
import SetTimeOnline from '@/modules/index/components/setTime-online-date'
import ContentDistrict from '@/modules/index/components/content-district'
import TextComplianceDialog from '@/modules/index/components/text-compliance-dialog'
import advertStore from '@/store/modules/advert'
import { startHeartbeat, stopHeartbeat } from '@/utils/heartbeat'
import { deepCloneNew } from '@/utils/clone'
import { replaceToInnerUrl, contentToInnerUrl, contentToOuterUrl } from '@/utils/replaceUrl'
import { checkHasOuterUrl } from '@/utils/check'
import { isAuditFunc } from '@/utils/articleAndVideo'
import UploadImg from '@/modules/index/components/upload-img'
import ImagePopover from '@/modules/index/components/image-popover'
import PopoverIFrameDialog from '@/modules/index/components/image-popover/PopoverIFrameDialog.vue'
import {
  setWidthAndHeight,
  getImageInfoFromUrl
} from '@/utils/getImageInfo'
import { isGezhiSystem } from '@/utils/env'
import { getImageHeaders } from '@/utils/getImageHeaders'
import {
  extractImageSrc,
  extractVideoPoster,
  extractImageDimensions
} from '@/utils/extractImageSrc'
import H5PreviewDialog from './components/H5PreviewDialog'
import H5Product from './components/H5Product'
import h5Preview from './components/h5-preview'
import RightPreview from './components/NewPreview'
import TagConfig from './components/TagConfig.vue'
// import selectMultiple from './components/select-multiple'
import selectRole from './components/select-role'
import OrgBranchCity from './components/org-branchCity'
import ExtensionReading from './components/extension-reading'
import SelectBrand from './components/SelectBrand'
import SelectTenementGroup from './components/SelectTenementGroup'
import SelectDPP from './components/select-dpp'
import TreeMultiple from './components/tree-multiple'

export default {
  components: {
    CustomDatePicker,
    UEditor,
    UploadAvatar,
    SelectCategory,
    UploadMultipleImgs,
    // MessageUser,
    // TagChoose,
    tagDialog,
    SelectApplication,
    h5Preview,
    RightPreview,
    TagConfig, // 标签配置
    OrgBranch,
    SelectBranch,
    LapseTipDialog,
    H5Product,
    UploadFileShard,
    H5PreviewDialog,
    // ProductObject,
    DistributionDialog,
    ForRepositoryDialog,
    SelectAuthor,
    SceneSelect,
    SelectLabel,
    SetTimeOnline,
    OrgBranchCity,
    // selectMultiple,
    selectRole,
    ExtensionReading,
    ContentDistrict,
    TextComplianceDialog,
    SelectBrand,
    SelectTenementGroup,
    SelectDPP,
    TreeMultiple,
    UploadImg,
    ImagePopover,
    PopoverIFrameDialog
  },
  data() {
    return {
      loading: this.$route.params.id,
      extensionReadingVisible: false,
      marketVisible: false,
      useStore: false,
      draftBtn: false,
      title: '', // 临时存储标题的值，用于复制内容时，对比标题的值是否有改动
      isUpdate: false,
      radio: true,
      reNewDistributionOption: [],
      reNewAppOption: [],
      reNewAppSelect: [],
      reDistributionSelect: [],
      options_circle: [],
      saveLoading: false, // 保存文章的时候的 loading
      draftLoading: false, // 保存草稿的时候的 loading
      uploadDisabled: true,
      appId: this.$store.getters.appId,
      isNew: !this.$route.params.id,
      isCopy: this.$route.query.isCopy,
      dialogFormVisible: false,
      messageName: '',
      iframeUrl: '',
      iFrameVisible: false,
      draftNow: false, // 点击的是否是存入草稿按钮
      validMassage: '存在未通过的校验项',
      circleIdList: null,
      minorCateListTmp: [],
      form: {
        appIds: [], // 更新渠道
        productAppType: '', // 平台类型 好车主 1 好生活 2
        productIds: '', // 产品id
        title: '',
        aiLabels: [],
        content: '',
        smallText: '',
        author: '',
        originalAuthor: '', // 原创作者
        readCnt: 0,
        // themeImgs: 'http://stg.iobs.pingan.com.cn/download/icore-aops-dmz-stg/portal-icore-apps-content-1626421815270-CDA58B6268194286B08FEB341A7EC32E-13726620#w=324;h=487',
        themeImgs: '', // 封面图
        relName: '',
        dataSource: '',
        praiseCnt: 0,
        commentCnt: 0,
        // dataSourceUrl: 'http://stg.iobs.pingan.com.cn/download/icore-aops-dmz-stg/vQpRVc416893142933602304', // 头像
        dataSourceUrl: '',
        visualCommentCnt: 0,
        visualReadCnt: 0,
        visualPraiseCnt: 0,
        isHomogeneity: null, // 同质化检查结果 0 无同质化  1 多篇相同
        isDisplay: null,
        isPrivate: 0,
        region: null,
        cateList: [],
        cateListTmp: [],
        fileArticleList: [],
        tagList: [],
        labelIdList: [],
        recommendType: 0, // 是否推存（好伙伴）
        district: [], // 地区
        departmentAndTenment: { // 管辖机构和网点（好伙伴）
          tenementCodes: [],
          tenementNames: [],
          departmentNames: [],
          departmentCodes: [],
          roleNames: [],
          roleCodes: [],
          cityCodes: [],
          parentCity: [],
          cityNames: [],
          tenementTypeNames: [],
          tenementTypes: [],
          brandCode: [],
          brandName: [],
          tenementGroup: [],
          tenementGroupName: []
        },
        contentList: [],
        onDate: '',
        businessTypeList: [],
        departmentList: [],
        isLapseContro: 0,
        isLapse: 0, // 编辑/新增传给后端的固定参数
        lapseTime: '', // 失效时间
        sceneIds: [], // 项目类型
        fixedOnDate: '', // 定时上线时间
        draftWithdraw: 0, // 是否是草稿状态
        circleIdList: [],
        circleSort: 1,
        circleStartTime: '',
        circleEndTime: '',
        // nonCarConversion: 0, // 非车转化
        isAudit: false, // 是否需要重新审核
        autoOnDate: '', // 自动上线展示开始时间
        autoOffDate: '', // 自动上线展示结束时间
        pushType: 2, // 推送类型 2.多条件筛选， 3.人群包
        dpp: { // 人群包
          ugIds: [], // 人群包id
          ugNames: []// 人群包名
        },
        isMarketing: null,
        appsProductsDTO: { // 非核心字段
          productCode: ''
        }
      },
      isAutoOnline: 0, // 是否自动上线
      oldForm: {},
      draftFlag: false,
      umList: [],
      roloeList: [],
      productSelectType: 'code',
      productInput: '',
      searchKey: '',
      productOptions: [],
      productInfo: {},
      fileList: [],
      labelContentList: [],
      active: 'attr',
      refresh: false,
      defartmentOptions: [],
      businessTypeOptions: [],
      defartmentOptionsTemp: [],
      departmentInfo: {
        pageNum: 1,
        pageSize: 50,
        departmentLevel: 2
      },
      departmentTotal: 0,
      draftId: '', // 草稿id
      // fileItem:{}
      batchLoading: false,
      sameContentDialog: false, // 同质化提示框
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() + 24 * 60 * 60 * 1000 < new Date()
        }
      },
      isShowLapseTipDialog: false,
      isLapseStatus: 0,
      product: {
        type: '',
        productId: ''
      },
      searchLabel: '',
      seachLabelLoading: false,
      seachLabelOptions: [],
      newLabelName: '',
      validate: { validator: this.handlerValidate, trigger: ['blur', 'change'] },
      lapseTimeCache: '',
      isShowOrgBranch: true,
      partData: [],
      vm: this,
      editTime: null,
      draftWithdrawTemp: null,
      isGeZhi: this.$route.query.system === 'gezhi', // 地址栏携带的参数，表示是否是个智嵌入，需求文档链接 http://docs.paic.com.cn/#/post/45183671
      isGezhiSystem,
      isSwitchOpen: true,
      activeName: '',
      isShowMore: false,
      definedImgDisabled: true,
      definedImg1: '',
      definedImg2: '',
      definedImg3: '',
      headers: getImageHeaders(),
      attachmentRules: [{
        required: false, message: '请上传附件', type: 'array', trigger: 'change'
      }],
      mpcodeRules: [{
        required: false, validator: this.productCodeValidate, trigger: 'blur'
      }],
      formItemData: null
    }
  },
  watch: {
    form: {
      immediate: true,
      deep: true,
      handler(val) {
        const categroyName = this.$refs.selectCateRef.findCategoryNameFromId(val.cateListTmp[val.cateListTmp.length - 1])
        // 对接个智-货仓-非车营销素材库-产品手册，当作者是产品手册，分类是产品手册的时候，附件和关联非车产品必填
        if (val.author === '产品手册' || categroyName === '产品手册') {
          this.setAttachmentRules(true)
        } else {
          this.setAttachmentRules(false)
        }
      }
    },
    'form.isLapseContro': {
      handler(val) {
        if (val === 1) { // 时效性：否
          this.lapseTimeCache = this.form.lapseTime
          this.form.lapseTime = ''
        } else { // 时效性：是
          this.form.lapseTime = this.lapseTimeCache ? this.lapseTimeCache : this.form.lapseTime
        }
      }
    },
    // 副分类下拉框变化时需要更新 minorCate 的值
    minorCateListTmp(val) {
      this.form.minorCate = val && val.length > 0 ? val[val.length - 1] : undefined
    }
  },
  async mounted() {
    advertStore.state.isUpdate && this.getAdvertData()
    this.getCircleList()
    // 设置标签默认值
    await this.setDefaultTagVal()
    if (this.appId === '100035') {
      // 查询易核 相关接口
      this.query100035Info()
    } else {
      this.queryArticleDeatilInfo()
    }
    // 文章编辑初始时间
    this.editTime = new Date().getTime() / 1000
  },
  computed: {
    isDraft() {
      return this.$route.params.from === 'draft' || this.form.draftWithdraw === 1 || this.isCopy
    },
    articleComputed() {
      return {
        title: this.form.title || '-',
        smallText: this.form.smallText,
        content: this.form.content,
        author: this.form.author || '-',
        createDate: this.form.createDate || '2020-10-01 00:00:00',
        productId: this.form.productId,
        productAppType: this.form.productAppType,
        dataSourceUrl: this.form.dataSourceUrl
      }
    },
    h5Params() {
      return {
        article: this.articleComputed
      }
    },
    themeImgsCount() {
      const imagesLength = this.form.themeImgs ? this.form.themeImgs.split(',').length : 0
      return 8 - imagesLength
    },
    // (内容仓库、我的上传、分库内容库跳过来）需要隐藏【分发按钮】和【下载按钮】
    hiddenBtns() {
      return this.$route.params.mes === 'hiddenBtns' || this.$route.query.mes === 'hiddenBtns'
    },
    // 从分库内容库跳过来的，不可编辑内容的标题、摘要、作者、头像、主封面图、自定义封面图、分类、是否营销内容、是否关联项目类型、内容投放地区
    isFromShardingLibrary() {
      return this.$route.query.from === 'shardingLibrary'
    }
  },
  beforeRouteEnter(to, from, next) {
    startHeartbeat() // 编辑页面保持登录态，进入编辑页时开始心跳
    if (!(from.name === 'advertisement-add' || from.name === 'advertisement-edit')) {
      advertStore.commit('SET_IS_UPDATE', false)
      advertStore.commit('SET_EDIT_TIME', null) // 配置时间
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    stopHeartbeat() // 编辑页面保持登录态，退出编辑页时停止心跳
    // if (this.isNew && this.dataChange) {
    //   this.saveDraft(false)
    // }
    next()
  },
  methods: {
    // 赋值标签默认值
    async setDefaultTagVal() {
      if (this.appId !== '0000') {
        return
      }
      // 业务所属方
      this.$set(this.form, 'businessOwner', this.$store.getters.departmentType || 3)
      // 其他标签配置项
      const res = await queryAllLabelListApi({
        applyPosition: '1'
      })
      if (res.code === 0) {
        this.formItemData = res.data || []
        this.formItemData.forEach(item => {
          // 多选
          if (item.isMultipleChoice === '1') {
            this.$set(this.form, item.labelKey, (item.defaultValue && item.defaultValue.split(',')) || [])
          } else {
            this.$set(this.form, item.labelKey, item.defaultValue || '')
          }
        })
      }
    },
    productCodeValidate(rules, value, callback) {
      if (!value) {
        return rules.required ? callback(new Error('请输入关联非车产品')) : callback()
      }
      // if (!/^MP/.test(value)) {
      //   return callback(new Error('请以MP开头'))
      // }
      if (/[\u4e00-\u9fa5]/.test(value)) {
        return callback(new Error('请勿输入中文'))
      }
      callback()
    },
    // 设置附件和关联非车产品是否必填
    setAttachmentRules(flag) {
      this.attachmentRules = [{
        required: flag, message: '请上传附件', type: 'array', trigger: 'change'
      }]
      this.mpcodeRules = [{
        required: flag, validator: this.productCodeValidate, trigger: 'blur'
      }]
    },
    changeAutdoOnline(v) {
      if (v === 0) {
        this.form.autoOnDate = ''
        this.form.autoOffDate = ''
      }
    },
    validatorShowTime(rule, value, callback) {
      const startTime = this.form.autoOnDate
      const endTime = this.form.autoOffDate

      if (!startTime && !endTime) {
        callback('请选择开始或结束展示时间')
        return
      }
      if (startTime && endTime && +moment(startTime) >= +moment(endTime)) {
        callback('开始展示时间必须小于结束展示时间')
        return
      }
      callback()
    },
    validatorShowEndTime(rule, value, callback) {
      this.$refs.form.validateField('autoOnDate')
      callback()
    },
    getAdvertData() {
      this.form = advertStore.state.formData
      this.loading = true
      this.detailDataFormat(this.form, false)
      this.loading = false
    },
    // 获取圈子列表
    getCircleList() {
      getCircleList().then(res => {
        if (res.code === 0) {
          this.options_circle = res.data
        }
      })
    },
    // 回显广告卡片的时候需要替换 content  字段的内容
    queryArticleDeatilInfo() {
      if (!this.isNew && !advertStore.state.isUpdate) {
        if (this.$route.params.from === 'draft') {
          this.getDraftDetail()
        } else {
          this.getArticleDetail()
        }
      }
    },
    getArticleDetail() {
      getArticleDetailAPI({ id: this.$route.params.id, type: '0' }).then(res => {
        advertStore.commit('SET_IS_UPDATE', true)
        this.detailDataFormat(res.data, true)
        this.title = this.form.title
        this.circleIdList = JSON.parse(JSON.stringify(this.form.circleIdList))
      }).finally(() => {
        this.loading = false
      })
    },
    getDraftDetail() {
      draftDetail({ id: this.$route.params.id }).then(res => {
        this.detailDataFormat(res.data.content, true)
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取产品信息
    getProductInfo(id) {
      return new Promise(resolve => {
        const params = {
          productIds: id,
          productAppType: 1
        }
        getProductApi(params).then(res => {
          resolve(res.data[0])
        })
      })
    },
    // flag如果从广告页面回来为false
    detailDataFormat(data, flag) {
      data = this.fixedResponseForEcho(data)
      Object.assign(this.form, data)
      this.draftBtn = this.$route.params.from === 'draft' || this.form.draftWithdraw === 1
      this.form.circleStartTime = this.form.circleStartTime === null ? '' : this.form.circleStartTime
      this.form.circleEndTime = this.form.circleEndTime === null ? '' : this.form.circleEndTime
      this.form.autoOnDate = this.form.autoOnDate ?? ''
      this.form.autoOffDate = this.form.autoOffDate ?? ''
      this.isAutoOnline = (this.form.autoOnDate || this.form.autoOffDate) ? 1 : 0
      // 回显关联非车产品
      this.form.appsProductsDTO = { productCode: data.appsProductsDTO?.productCode || '' }
      // 回显自定义封面
      if (data.customImgs) {
        const customImgsArr = data.customImgs && data.customImgs.split(',')
        this.definedImg1 = customImgsArr[0]
        this.definedImg2 = customImgsArr[1]
        this.definedImg3 = customImgsArr[2]
      }
      // 回显标签配置数据
      if (flag && this.appId === '0000' && this.form.articleLabelList && this.form.articleLabelList.length) {
        this.form.articleLabelList.forEach(item => {
          if (item.labelKey !== 'businessOwner') {
            let findObj = this.formItemData.find(i => i.labelKey === item.labelKey)
            if (findObj && findObj.isMultipleChoice === '1') {
              this.$set(this.form, item.labelKey, (item.optionKey && item.optionKey.split(',')) || [])
            } else {
              this.$set(this.form, item.labelKey, item.optionKey || '')
            }
          } else {
            this.$set(this.form, 'businessOwner', +item.optionKey || 3)
          }
        })
        // delete this.form.articleLabelList
      } else if (flag && this.appId === '0000') {
      // 历史数据articleLabelList没有值，默认为其他
        this.$set(this.form, 'businessOwner', 3)
      }
      // 回显底部广告
      this.form.carProductReq = data.carProductReq || data.productCarDto || {}
      this.form.hshProductReq = data.hshProductReq || data.productHshDto || {}
      this.form.hbsProductReq = data.hbsProductReq || data.productHbsList || []
      delete this.form.productCarDto
      delete this.form.productHshDto
      delete this.form.productHbsList
      this.form.contentList = data.contentList || []
      this.authorChecked = Boolean(data.originalAuthor)
      // 回显机构(易核)
      this.defartmentOptions.forEach((item, index) => {
        this.form.departmentList.forEach(n => {
          if (+item.departmentCode === +n) {
            this.defartmentOptions.unshift(this.defartmentOptions.splice(index, 1)[0])
          }
        })
      })
      this.defartmentOptionsTemp = this.defartmentOptions.slice(0, 10)
      // 回显分类
      if (data.cateList && data.cateList.length > 0 && data.cateList[0] !== 'null') {
        this.form.cateListTmp = [data.cateList[data.cateList.length - 1]]
      }
      // 好伙伴渠道回显副分类
      if (this.appId === '0004' && data.minorCate) {
        this.minorCateListTmp = [data.minorCate]
      }
      // 回显是否营销内容
      this.form.isMarketing = data.isMarketing
      // 回显业务类型
      if (data.businessTypeList && data.businessTypeList.length > 0) {
        const businessTypeList = []
        data.businessTypeList.forEach(n => {
          businessTypeList.push(n)
        })
        this.form.businessTypeList = businessTypeList
      }
      // 回显内容投放地区
      if (this.form.district) {
        if (typeof this.form.district === 'string') {
          this.form.district = JSON.parse(this.form.district)
        }
      } else {
        this.form.district = []
      }
      // 回显封面图
      this.$refs.backgroundImageRef.updataImageUrl(data.themeImgs)
      // 回显附件
      if (this.form.fileArticleList) {
        let arr = []
        this.form.fileArticleList.forEach((value, index) => {
          arr[index] = { name: value.fileName, percentage: 100, ...value }
        })
        this.fileList = arr
      } else {
        this.form.fileArticleList = []
      }
      // 回显标签
      if (this.appId === '0000') {
        this.labelContentList = data.labelIdList ? this.labelIdToNumber(data.labelIdList) : []
      } else {
        this.labelContentList = data.labelIdList ? data.labelIdList : []
      }
      // 回显关联产品
      if (data.productInfo) {
        this.productInfo = data.productInfo
      }
      if (!data.dpp) {
        this.form.dpp = {
          ugIds: [],
          ugNames: []
        }
      }

      if (!data.departmentAndTenment) {
        this.form.departmentAndTenment = {
          tenementCodes: ['all'],
          tenementNames: ['所有'],
          departmentNames: [],
          departmentCodes: [],
          roleNames: ['所有'],
          roleCodes: ['all'],
          cityCodes: ['all'],
          cityNames: ['所有'],
          parentCity: [],
          tenementTypeNames: ['所有'],
          tenementTypes: ['all'],
          brandCode: ['all'],
          brandName: ['所有'],
          tenementGroup: ['all'],
          tenementGroupName: ['所有']
        }
      } else if (data.departmentAndTenment.tenementCodes.length > 0) {
        this.form.departmentAndTenment = data.departmentAndTenment
        this.partData = this.markPartData(data.departmentAndTenment.tenementNames, data.departmentAndTenment.tenementCodes)
      }
      // 深拷贝 对数据进行监听
      this.oldForm = deepCloneNew(this.form)
      if (this.form.content) {
        // 回显广告对象，编辑器里面，使用 call 改变 this 的指向
        contentToShow.call(this)
        this.form.content = contentToInnerUrl(this.form.content)
        // 如果是草稿箱里面的，就不用处理广告卡片，因为草稿保存是原格式，没有处理
        if (this.$route.params.from === 'draft') {
          return
        }
        // 回显 h5 预览
        // this.h5Params.article = res.data.content
        // 回显项目类型
        if (this.form.sceneIds && this.form.sceneIds.length > 0) {
          this.$refs.SceneSelectRef.hasScene = '1'
        } else {
          this.$refs.SceneSelectRef.hasScene = '-1'
        }
        // 回显广告卡片
        let content = this.form.content
        const divReg = /<div style="display: none" data-product-id="\d+"><\/div>/g
        let productIdReg = /data-product-id="(\d+)"/
        let divList = content.match(divReg)
        // 没有广告卡片数据
        if (!divList || divList.length <= 0) {
          return
        }
        let productIdList = divList.map(item => item.match(productIdReg)[1])
        productIdList.forEach(item => {
          this.getProductInfo(item).then(info => {
            if (!info) {
              return
            }
            const str = `<div data-product-id="${item}"><div style="width: 100%; background-color: #fff;"><div
            style="margin-bottom: 20px; border-radius: 2px; border: 1px solid #f5f5f5;
            box-shadow: 0px 0px 2px 2px #d3d3d3; display: flex; border-radius: 10px; justify-content: space-between;
            "><div style="display: flex; justify-content: flex-start;"><img style="margin: 5px; width: 60px;
            height: 60px;" src="${info.smallPic}" /><div style="align-self: center;"><div
            style="font-weight: 400; font-size: 14px;">${info.productName}</div><div
            style="font-size: 12px; color: #9b9b9b;"><span >${info.productDesc}</span></div><div><span
            style="color: #f05a23;">${info.minPrice}</span><span style="font-size: 12px;
            color: #9b9b9b;">${' ' + info.priceUnit}</span></div></div></div><div style="align-self: center;
            height: 60px; display: flex; align-items: center;"><div style="margin-right: 10px; color: #ffffff;
            width: 80px; height: 30px; background: #f05a23; display: flex; align-items: center; justify-content: center;
            border-radius: 20px; font-size: 12px;" onclick="if(window.location.origin !== 'null') { window.location.href='${info.url}'}
            ">查看详情</div></div></div></div></div>`
            this.form.content = this.form.content.replace('<div style="display: none" data-product-id="' + item + '"></div>', str)
          })
        })
      }
    },
    handleMessageChange(val) {
      // 处理
      this.roloeList = val.roleList
      this.userList = val.umList
    },
    handleBlur(e) {
      this.form.content = e
    },
    imageChange(imgStr) {
      console.log('imageChange', imgStr)
      this.form.themeImgs = imgStr
    },
    handleAuthorChange(url, authorName) {
      this.form.dataSourceUrl = url
      // 特殊处理，选择作者为产品手册的时候，把分类改成产品手册
      if (authorName === '产品手册') {
        const isSet = this.$refs.selectCateRef.setCategoryName('产品手册')
        if (isSet) {
          this.$message.info('分类已修改为产品手册')
        }
      }
    },
    productSearch(key, callback) {
      if (!key || key.length <= 0) {
        this.productInfo = {}
        this.form.marketProductCode = ''
        callback([])
        return
      }
      let params = this._generateParams(key)
      queryProductNum(params).then(res => {
        res.data.forEach(item => {
          item.value = item.marketProductName
        })
        this.productOptions = res.data
        callback(this.productOptions)
      })
    },
    query100035Info() {
      this.queryBusinessType()
      this.queryDepartmentInfo()
    },
    queryBusinessType() {
      findBusinessType().then(res => {
        if (res.code === 0) {
          let data = res.data
          if (!this.$store.getters.isSuperAdmin) {
            data = this.filterBusiness(res.data)
          }
          this.businessTypeOptions = data || []
        }
      })
    },
    queryDepartmentInfo() {
      findDepartmentInfo({
        pageNum: this.departmentInfo.pageNum,
        pageSize: this.departmentInfo.pageSize,
        departmentLevel: this.departmentInfo.departmentLevel
      })
        .then(res => {
          if (res.code === 0) {
            let afterData = res.data.data.list
            if (!this.$store.getters.isSuperAdmin && this.$store.getters.departmentCodeList.indexOf('2') === -1) {
              afterData = this.filterSelectData(res.data.data.list)
            }
            const data = afterData || []
            const listLength = data.length
            this.defartmentOptions = data
            if (listLength > 0) {
              // 根据数据总量 手动分页
              this.departmentTotal = listLength % 10 === 0 ? listLength / 10 : Math.ceil(listLength / 10)
            }
            const allListNum = this.defartmentOptions.length
            if (this.departmentInfo.pageNum * 10 > allListNum) {
              this.defartmentOptionsTemp = this.defartmentOptions.slice(0, allListNum)
            } else {
              this.defartmentOptionsTemp = this.defartmentOptions.slice(0, 10 * this.departmentInfo.pageNum)
            }
            this.queryArticleDeatilInfo()
          }
        })
        .catch(() => {
          this.queryArticleDeatilInfo()
        })
    },
    // 当修改了属性里面广告的时候，需要同步修改文章内容里面的数据
    handleChangeContent(obj) {
      const reg = /<div contenteditable="false" class="art-prd" data-prd-type="\w+" data-hcz-prd-code="\w+" data-hsh-prd-code="\w+">[\s\S]*?<\/div><\/div><\/div><\/div><\/div><\/div>/
      const str = `<div contenteditable="false" class="art-prd" data-prd-type="${obj.productCodeType}" data-hcz-prd-code="${obj.hczProductCode || 0}" data-hsh-prd-code="${obj.hshProductCode || 0}"><div style="width: 100%; background-color: #fff;"><div
        style="margin-bottom: 20px; border-radius: 2px; border: 1px solid #f5f5f5;
        box-shadow: 0px 0px 2px 2px #d3d3d3; display: flex; border-radius: 10px; justify-content: space-between;
        padding: 10px;"><div style="display: flex; justify-content: flex-start;"><div style="align-self: center;"><div
        style="font-weight: 400; font-size: 14px; line-height">好车主：${obj.hczProductCode || '无'}</div><div
        style="font-weight: 400; font-size: 14px;">好生活：${obj.hshProductCode || '无'}</div></div></div></div></div></div>`
      this.form.content = this.form.content.replace(reg, str)
    },
    departmentNext() {
      this.departmentInfo.pageNum = this.departmentInfo.pageNum + 1 > this.departmentTotal ? this.departmentTotal : this.departmentInfo.pageNum + 1
      const allListNum = this.defartmentOptions.length
      if (this.departmentInfo.pageNum * 10 > allListNum) {
        this.defartmentOptionsTemp = this.defartmentOptions.slice(0, allListNum)
      } else {
        this.defartmentOptionsTemp = this.defartmentOptions.slice(0, 10 * this.departmentInfo.pageNum)
      }
    },
    // 筛选易核部门数据
    filterSelectData(data) {
      const departmentCodeList = this.$store.getters.departmentCodeList
      if (departmentCodeList && departmentCodeList.length > 0) {
        return data.filter(item => departmentCodeList.indexOf(item.departmentCode) > -1)
      }
      return []
    },
    // 筛选易核业务类型数据
    filterBusiness(data) {
      const businessCodeList = this.$store.getters.businessCodeList
      if (businessCodeList && businessCodeList.length > 0) {
        return data.filter(item => businessCodeList.indexOf(item.id) > -1)
      }
      return []
    },
    // productSearch(key) {
    //   if (!key) {
    //     return
    //   }
    //   let params = this._generateParams(key)
    //   queryProductNum(params).then(res => {
    //     this.productOptions = res.data
    //   })
    // },
    handleProductChange(e) {
      this.form.marketProductCode = e.marketProductCode
      this.productInfo = e
    },
    // 生成查询产品需要的 params
    _generateParams(key) {
      let params = {
        pageNum: 1
      }
      if (this.productSelectType === 'code') {
        params.marketProductCode = key
        return params
      }
      params.marketProductName = key
      return params
    },
    // 作者勾选为产品手册，分类也必须为产品手册 才能提交，返回参数为错误提示信息，或者空字符串，空字符串表示没有问题可以提交
    _checkAuthorAndCate() {
      const authorName = this.form.author
      const categroyName = this.$refs.selectCateRef.findCategoryNameFromId(this.form.cateListTmp[this.form.cateListTmp.length - 1])
      if (authorName === '产品手册' && categroyName !== '产品手册') {
        return '作者勾选为产品手册，分类也必须为产品手册'
      }
      if (authorName !== '产品手册' && categroyName === '产品手册') {
        return '分类勾选为产品手册，作者也必须为产品手册'
      }
      return ''
    },
    saveBefore(isDraft) { // isDraft 是否是草稿按钮
      this.draftNow = isDraft
      if (this.isCopy && (this.form.title === this.title)) {
        this.$alert('请重新修改标题', '提示')
        return
      }
      this.saveAction(isDraft)
    },
    async saveAction(isDraft) {
      this.draftWithdrawTemp = this.form.draftWithdraw // 暂存当前编辑文章是否草稿状态，避免下面的代码覆盖
      if (isDraft) { // 点击草稿按钮
        this.validMassage = '存在未通过的校验项'
        this.form.draftWithdraw = 1 // 保存草稿状态
        this.draftFlag = true
        this.$refs.SceneSelectRef.rules[0].required = false
      } else { // 点击提交按钮
        // 新增或提交草稿需检查同质化
        if (this.isNew || this.draftWithdrawTemp) {
          await this.checkDuplicationHandler()
        }
        this.validMassage = '存在未通过的校验项，请重新编辑后再提交'
        this.form.draftWithdraw = 0 // 保存草稿状态
        this.draftFlag = false
        if (this.activeName === '') {
          this.$refs.SceneSelectRef.rules[0].required = true
        }
      }
      // 如果没有展示该字段的话，获取不到dom，就不显示这段逻辑
      if (this.isShowMore) {
        if (this.$refs.UploadFileShardRef?.fileList?.[0]?.status === 'uploading') {
          this.$message.info('请先等待音频上传完成后再保存')
          return
        }
      }
      // 作者勾选为产品手册，分类也必须为产品手册
      const msg = this._checkAuthorAndCate()
      if (msg) {
        this.$message.error(msg)
        return
      }
      // 检查定时上线的时间是否已经是过去时
      if (this.appId === '0000' && this.form.fixedOnDate && moment(this.form.fixedOnDate) <= moment()) {
        this.$message.warning('定时上线的时间不能小于当前时间')
        return
      }
      // 后端只需要分类的最后一个 id
      this.form.cateList = this.form.cateListTmp && this.form.cateListTmp.slice(-1)
      // this.form.labelIdList = this.labelContentList.map(item => item.labelId) // 0526版 新选择的标签没有labelId只有id, 已有的标签有labelId，而id都是null
      this.form.labelIdList = this.labelContentList && this.labelContentList.length > 0 ? this.labelContentList.map(item => item.labelId) : []
      this.form.type = '0'
      // 先处理数据 后 验证同质化，保证同质化仍要上传数据完整
      // 先检查是否同质化（保存草稿不检查）
      if (!isDraft && this.form.isHomogeneity === 1 && (this.isNew || this.draftWithdrawTemp === 1)) {
        this.form.isDisplay = this.form.isHomogeneity === 1 ? 1 : 0
        this.sameContentDialog = true
        return
      }
      this.save()
    },
    async save() {
      if (this.draftFlag) {
        this.$refs.form.validateField('title', res => {
          if (!res) this.submit()
        })
      } else {
        this._validate().then(() => {
          this.submit()
        })
      }
    },
    async submit() {
      // 避免连续点击两次提交或者存入草稿按钮
      if (this.draftLoading || this.saveLoading) {
        return
      }
      this.showLoading()
      if (this.isNew || this.isCopy) {
        this.$store.commit('isReset/IS_RESET', true)
        this._newArticle()
      } else {
        // 编辑后，保存数据，弹出是否更新弹窗
        let data = {
          id: this.form.id,
          type: 0
        }
        if (this.appId === '0000') {
          getChannel(data).then(res => {
            let date = res.data
            this.reNewAppOption = Object.keys(date.renewApp).map(key => {
              return {
                value: key,
                label: date.renewApp[key]
              }
            })
            // 读取更新渠道，有数据则显示弹窗，无则直接更新
            if (!this.reNewAppOption.length) {
              return this._updateArticle()
            }
            // 2022年0302期 如果读取到的平台中含有 100005 好车主 100023 好生活 则默认传输
            let HCZ = this.reNewAppOption.find(item => item.value === '100005')
            let HSH = this.reNewAppOption.find(item => item.value === '100023')
            this.form.appIds = []
            HCZ && this.form.appIds.push(HCZ.value)
            HSH && this.form.appIds.push(HSH.value)
            this._updateArticle()
            // this.isUpdate = true
          })
        } else {
          this._updateArticle()
        }
      }
    },
    clearUpdateSelect() {
      this.reNewAppSelect = []
      this.reDistributionSelect = []
    },
    closeIsUpdate(status) {
      if (!status) {
        this.isUpdate = false
      }
      if (status && this.radio) {
        this.$refs.forms.validate(valid => {
          if (valid) {
            this.isUpdate = false
            this._updateArticle()
          } else {
            this.$message({
              message: this.validMassage,
              type: 'error'
            })
          }
        })
      } else if (status) {
        this._updateArticle()
      }
    },
    handleErrorTip(obj) {
      const checkArr = [
        { name: 'title', str: '标题' },
        { name: 'themeImgs', str: '主封面' },
        { name: 'author', str: '作者' },
        { name: 'dataSourceUrl', str: '头像' },
        { name: 'content', str: '内容' },
        { name: 'isLapseContro', str: '时效性' },
        { name: 'cateListTmp', str: '分类' },
        { name: 'isMarketing', str: '是否营销内容' },
        { name: 'sceneIds', str: '项目类型' },
        // { name: 'nonCarConversion', str: '非车险转化类内容' },
        { name: 'district', str: '内容投放的地区' },
        { name: 'departmentList', str: '机构' },
        { name: 'businessTypeList', str: '业务类型' },
        { name: 'onDate', str: '上线时间' },
        { name: 'departmentAndTenment.departmentCodes', str: '管辖机构' },
        { name: 'departmentAndTenment.tenementCodes', str: '网点' },
        { name: 'dpp.ugIds', str: '用户分群' },
        { name: 'circleSort', str: '排序' },
        { name: 'dcircleStartTime', str: '展示时间' },
        { name: 'autoOnDate', str: '开始展示时间' },
        { name: 'autoOffDate', str: '结束展示时间' },
        { name: 'appsProductsDTO.productCode', str: '关联非车产品' },
        { name: 'fileArticleList', str: '请上传附件（当作者是产品手册，分类是产品手册的时候，附件必填）' }
      ]
      if (this.appId === '0000') {
        checkArr.push({
          name: 'businessOwner',
          str: '标签配置-业务所属方'
        })
        this.formItemData && this.formItemData.forEach(item => {
          checkArr.push({
            name: item.labelKey,
            str: '标签配置-' + item.labelName
          })
        })
      }
      let tips = '以下信息未填写：'
      const arr = []
      checkArr.forEach(item => {
        if (item.name in obj) {
          arr.push(item.str)
        }
      })
      return tips + arr.join('、')
    },
    _validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid, noValidObj) => {
          if (valid) {
            resolve(valid)
          } else {
            const tips = this.handleErrorTip(noValidObj)
            this.$alert(tips, '')
            reject(valid)
          }
        })
      })
    },
    // 处理自定义封面传参
    getdefinedParamas() {
      const customImgsStr = `${this.definedImg1 || ''},${this.definedImg2 || ''},${this.definedImg3 || ''}`
      const customImgs = customImgsStr === ',,' ? '' : customImgsStr
      return customImgs
    },
    async getNewForm() {
      let form = JSON.parse(JSON.stringify(this.form))
      // // 处理项目类型
      if (this.$refs.SceneSelectRef.hasScene !== '1') {
        form.sceneIds = []
      }
      delete form.isLapseContro // isLapseContro只用于回显，后端不需要此字段
      delete form.cateListTmp // 后端不需要此字段
      delete form.settleAccountsInfo // 内网编辑时，不能传 settleAccountsInfo 给后端
      // 处理 content 中的广告卡片
      if (form.content) {
        // 广告卡片 => <section ...></section>
        form.content = contentToHide(form.content)
        // 替换成外网图片网址
        form.content = contentToOuterUrl(form.content)
        // 使用正则查询出文章中植入的所有广告
        try {
          form.productContentList = await findCardInfoList(form.content)
        } catch (err) {
          console.log(err)
          this.$message.error('文中存在已失效的广告，请重新替换或者删除该广告后才可提交')
          return false
        }
      } else {
        form.content = ''
      }
      // 处理音频
      if (form.audios) {
        try {
          let audio = JSON.parse(form.audios)
          audio[0].provider = form.author
          form.audios = JSON.stringify(audio)
        } catch (err) {
          console.log(err)
        }
      }
      // 编辑时间 草稿和新增
      if (this.isNew || this.isDraft || this.draftWithdrawTemp === 1) {
        let time = advertStore.state.editTime ? advertStore.state.editTime : this.editTime
        let deployTime = Math.round(new Date().getTime() / 1000 - time)
        form.deployTime = deployTime
        // console.log('this.deployTime', deployTime)
      }
      form.district = JSON.stringify(form.district)
      // 个智上传需要传对应的 relevanceType 为个智 id 100041
      if (this.isGeZhi) {
        form.relevanceType = '100041'
      }
      return form
    },
    async _newArticle() {
      let form = await this.getNewForm()
      if (!form) {
        this.hideLoading()
        return
      }
      // 校验富文本内图片视频是否有第三方链接
      if (await checkHasOuterUrl(form.content)) {
        this.$alert('正文图片存在不能被展示的图片，请将图片下载到电脑后重新插入，不要将图片直接复制到正文输出框。')
        this.hideLoading()
        return
      }
      // form.circleStartTime = new Date(form.circleStartTime).getTime()
      // form.circleEndTime = new Date(form.circleEndTime).getTime()
      // 处理预分发弹窗
      let errorFlag = false // 标记是否点击的是右上角关闭弹窗
      if (this.appId === '0000') {
        try {
          form.distributeChannel = await this.$refs.distributionDialogRef.showDialog('article')
        } catch (err) {
          errorFlag = true
        }
      } else {
        form.distributeChannel = []
      }
      // 点击的是右上角关闭弹窗
      if (errorFlag) {
        this.hideLoading()
        return
      }
      const customImgs = this.getdefinedParamas()
      form.customImgs = customImgs
      // 将所有图片处理成一个对象
      let imageUrls = {} // 图片所在类型 0 头像 1 封面图 2 正文
      // 头像
      form.dataSourceUrl && (imageUrls['0'] = [extractImageDimensions(form.dataSourceUrl)])
      // 主封面
      let coverArr = [] // 封面数组集合，包括主封面、自定义封面...等
      if (form.themeImgs) {
        coverArr = form.themeImgs.split(',')
      }
      // 自定义封面
      this.definedImg1 && coverArr.push(this.definedImg1)
      this.definedImg2 && coverArr.push(this.definedImg2)
      this.definedImg3 && coverArr.push(this.definedImg3)
      imageUrls['1'] = coverArr.map(item => extractImageDimensions(item))
      // 正文里面的图片， 包括图片，以及视频封面
      let contentArr = []
      if (form.content) {
        contentArr = contentArr.concat(extractImageSrc(form.content), extractVideoPoster(form.content))
        imageUrls['2'] = contentArr.map(item => extractImageDimensions(item))
      }
      form.imageUrls = imageUrls
      if (this.appId === '0000') {
        form.articleLabelList = []
        form.articleLabelList.push({
          labelKey: 'businessOwner',
          optionKey: form.businessOwner || 3
        })
        this.formItemData.forEach(item => {
          form.articleLabelList.push({
            labelKey: item.labelKey,
            optionKey: item.isMultipleChoice === '1' ? ((form[item.labelKey] && form[item.labelKey].join(',')) || '') : (form[item.labelKey] || '')
          })
          delete form[item.labelKey]
        })
      }
      addArticleAPI(form)
        .then(async res => {
          const id = res.data.id
          const needEdit = await this.$refs.TextComplianceDialogRef.check(id)
          // 新增时，点击需要调整，删除文章并终止流程
          if (needEdit) {
            deleteArticleApi({
              idList: [id]
            })
            return
          }
          if (this.isGeZhi) {
            this.postMessage(this.draftNow ? 'draft' : 'submit')
            this.$message.success(this.draftNow ? '存入草稿成功' : '提交成功')
            if (this.draftNow) { // 点击的是存入草稿按钮
              this.$route.params.id = id
              this.isNew = false
            }
            this.getArticleDetail()
            return
          }
          // 文章新增添加通知关联人
          this.$route.params.id = id
          this._addMessageTips()
          setTimeout(() => { // 20210805版本，新增完后！延时2秒转跳，等待后端es更新！
            this.toArticleList()
            this.isShow('我的上传-文章录入')
          }, 2000)
          setTimeout(() => {
            this.$store.dispatch('message/unreadMesNum') // 获取未读消息数（显示消息铃铛状态）
          }, 500)
        })
        .finally(() => {
          this.hideLoading()
        })
    },
    isShow(name) {
      if (
        this.appId === '0000'
        && this.$route.params.comeFrom === '我的上传-文章'
        && this.$route.params.functionName === '我的上传-文章录入') { // 20210902版(我的上传-新增文章,距离上次提交在一周之内，就不弹出评价框)
        this.isShowEvalutionBox(name)
      }
    },
    async _updateArticle() {
      this.$store.commit('isReset/IS_RESET', true)
      let form = await this.getNewForm()
      if (!form) {
        this.hideLoading()
        return
      }
      // 校验富文本内图片视频是否有第三方链接
      if (await checkHasOuterUrl(form.content)) {
        this.$alert('正文图片存在不能被展示的图片，请将图片下载到电脑后重新插入，不要将图片直接复制到正文输出框。')
        this.hideLoading()
        return
      }
      // 判断是否需要进行审核和是否走AI打标
      isAuditFunc(form, this.oldForm, 'article')
      const customImgs = this.getdefinedParamas()
      form.customImgs = customImgs
      // 将所有图片处理成一个对象
      let imageUrls = {} // 图片所在类型 0 头像 1 封面图 2 正文
      // 头像
      form.dataSourceUrl && (imageUrls['0'] = [extractImageDimensions(form.dataSourceUrl)])
      // 主封面
      let coverArr = [] // 封面数组集合，包括主封面、自定义封面...等
      if (form.themeImgs) {
        coverArr = form.themeImgs.split(',')
      }
      // 自定义封面
      this.definedImg1 && coverArr.push(this.definedImg1)
      this.definedImg2 && coverArr.push(this.definedImg2)
      this.definedImg3 && coverArr.push(this.definedImg3)
      imageUrls['1'] = coverArr.map(item => extractImageDimensions(item))
      // 正文里面的图片， 包括图片，以及视频封面
      let contentArr = []
      if (form.content) {
        contentArr = contentArr.concat(extractImageSrc(form.content), extractVideoPoster(form.content))
        imageUrls['2'] = contentArr.map(item => extractImageDimensions(item))
      }
      form.imageUrls = imageUrls
      const isDepartment = !!(this.$route.query.repositoryId) // 是否是机构广告进来的
      // 机构进来的需要弹出选择分发平台的框
      if (isDepartment) {
        try {
          form.distributeChannel = await this.$refs.forRepositoryDialogRef.showDialog()
        } catch (err) {
          this.hideLoading()
          return
        }
      }
      if (this.appId === '0000') {
        if (form.articleLabelList && form.articleLabelList.length) {
          let findIndex = form.articleLabelList.findIndex(i => i.labelKey === 'businessOwner')
          if (findIndex !== -1) {
            form.articleLabelList[findIndex].optionKey = form.businessOwner || 3
          } else {
            form.articleLabelList.push({
              labelKey: 'businessOwner',
              optionKey: form.businessOwner || 3
            })
          }
          this.formItemData.forEach(item => {
            let index = form.articleLabelList.findIndex(i => i.labelKey === item.labelKey)
            if (index !== -1) {
              // 如果找到相同的key，则更新
              form.articleLabelList[index].optionKey = (item.isMultipleChoice === '1' ? ((form[item.labelKey] && form[item.labelKey].join(',')) || '') : (form[item.labelKey] || ''))
            } else {
              // 如果没有找到相同的key
              form.articleLabelList.push({
                labelKey: item.labelKey,
                optionKey: item.isMultipleChoice === '1' ? ((form[item.labelKey] && form[item.labelKey].join(',')) || '') : (form[item.labelKey] || '')
              })
            }
            delete form[item.labelKey]
          })
        } else {
          form.articleLabelList = []
          form.articleLabelList.push({
            labelKey: 'businessOwner',
            optionKey: form.businessOwner || 3
          })
          this.formItemData.forEach(item => {
            form.articleLabelList.push({
              labelKey: item.labelKey,
              optionKey: item.isMultipleChoice === '1' ? ((form[item.labelKey] && form[item.labelKey].join(',')) || '') : (form[item.labelKey] || '')
            })
            delete form[item.labelKey]
          })
        }
      }
      delete form.businessOwner
      const api = isDepartment ? modifyRepositoryApi : updateArticleAPI // 分库编辑使用分库的编辑接口，普通编辑，使用普通的编辑接口
      api(form)
        .then(async () => {
          // 编辑的时候，需要重新审核的文章才弹窗
          if (form.isAudit) {
            const needEdit = await this.$refs.TextComplianceDialogRef.check(form.id)
            // 点击需要调整，终止流程
            if (needEdit) {
              return
            }
          }
          if (this.isGeZhi) {
            this.postMessage(this.draftNow ? 'draft' : 'submit')
            return
          }
          this._addMessageTips()
          this.toArticleList()
          setTimeout(() => {
            this.$store.dispatch('message/unreadMesNum') // 获取未读消息数（显示消息铃铛状态）
          }, 500)
        })
        .finally(() => {
          this.hideLoading()
        })
    },
    showLoading() {
      if (this.draftFlag) {
        this.draftLoading = true
      } else {
        this.saveLoading = true
      }
    },
    hideLoading() {
      if (this.draftFlag) {
        this.draftLoading = false
      } else {
        this.saveLoading = false
      }
    },
    toArticleList() {
      // 有可能是点击的同质化弹窗里面的查看而保存为草稿的，这时需要跳转到内容仓库
      if (sessionStorage.getItem('title')) {
        this.$router.push({ name: 'content-storehouse' })
      } else {
        this.$router.back()
      }
      // this.$router.push({ name: 'article-content' })
    },
    back() {
      if (this.isGeZhi) {
        this.postMessage('cancel')
        return
      }
      this.$router.back()
    },
    // 添加变更消息提醒人
    _addMessageTips() {
      if ((this.userList && this.userList.length > 0) || (this.roloeList && this.roloeList.length > 0)) {
        if (this.userList && this.userList.length === 0) {
          this.userList = null
        }
        if (this.roloeList && this.roloeList.length === 0) {
          this.roloeList = null
        }
        addMessageApi({
          articleId: this.$route.params.id,
          ums: this.userList || null,
          // roleNames: this.roloeList || null
          groupIds: this.roloeList || null
        }).then(() => {
          // 更新消息数据状态
          this.$message({
            message: '消息提醒关联成功',
            type: 'success'
          })
        })
      }
    },
    handleExceed() {
      this.$message.warning('当前限制上传 10 个附件')
    },
    // 附件上传前
    beforeUpload(file) {
      if (file.size > 20 * 1024 * 1024) {
        this.$message.warning('只允许上传小于20M的文件')
        return false
      }
      for (let i = 0; i < this.form.fileArticleList.length; i++) {
        if (this.form.fileArticleList[i].fileName === file.name) {
          this.$message.warning('有重名文件，请检查')
          return false
        }
      }
    },
    // 附件上传成功
    handleSuccess(res, file, fileList) {
      if (res.code === 0 && res.data.fileKey.length && res.data.fileUrl.length && res.data.fileName.length) {
        console.log('this.form.fileArticleList----1', this.form.fileArticleList)
        if (!this.form.fileArticleList) {
          this.form.fileArticleList = []
        }
        let obj = {
          fileKey: res.data.fileKey,
          fileName: res.data.fileName,
          fileUrl: res.data.fileUrl
        }
        this.form.fileArticleList.push(obj)
        console.log('this.form.fileArticleList----2', this.form.fileArticleList)
        let arr = []
        this.form.fileArticleList.forEach((value, index) => {
          arr[index] = { name: value.fileName, percentage: 100, ...value }
        })
        this.fileList = arr
        console.log('this.fileList----', this.fileList)
      } else {
        fileList.pop()
        console.log('删除')
        this.$message.error('上传失败，请重试')
      }
    },
    // 点击附件列表
    onPreview(file) {
      if (file.fileUrl) {
        this.downloadFile(file.fileUrl, file.fileName)
      }
    },
    downloadFile(fileUrl, fileName) {
      return fetch(fileUrl).then(res => res.blob().then(blob => {
        let a = document.createElement('a')
        let urla = window.URL.createObjectURL(blob)
        a.href = urla
        a.download = fileName
        a.click()
        window.URL.revokeObjectURL(fileUrl)
      }))
    },
    // 附件移除
    handleRemove(file, fileList) {
      let arr = []
      fileList.forEach((item, index) => {
        arr[index] = {
          fileUrl: item.fileUrl,
          fileName: item.fileName,
          fileKey: item.fileKey
        }
      })
      this.form.fileArticleList = arr
    },
    saveInfo(data) {
      this.form.tagList = data
    },
    showTagPop() {
      this.$refs.tagPop.showPop()
    },
    handleTodistribution() {
      const authorName = this.form.author
      const categroyName = this.$refs.selectCateRef.findCategoryNameFromId(this.form.cateListTmp[this.form.cateListTmp.length - 1])
      if (authorName === '产品手册' && categroyName === '产品手册') {
        this.$message.error('作者和分类为产品手册的文章不支持分发')
        return
      }
      if (this.isLapseStatus === 1) {
        // 内容失去时效
        this.isShowLapseTipDialog = true
        return
      }
      this.dialogFormVisible = true
    },
    batchDispense() {
      this.batchLoading = true
      this._validate().then(() => {
        batchDispenseApi({
          idList: [this.$route.params.id],
          appIds: this.form.region
        }).then(() => {
          this.$message.success('文章分发成功')
          this.batchLoading = false
          this.dialogFormVisible = false
          this.form.region = []
          this.isShow('文章应用管理-文章分发')
          // 分发文章后需要更新文章信息
          // updateArticleAPI(this.form)
        }).finally(() => {
          this.batchLoading = false
        })
      })
    },
    download() {
      aiticleDownload({
        idStr: [this.$route.params.id],
        type: 2,
        title: this.form.title
      })
    },
    tagClose(data) {
      data.check = false
      const formatTag = this.labelContentList.filter(item => {
        return item.labelId !== data.labelId
      })
      this.labelContentList = formatTag
      if (this.searchLabel.indexOf(data) > -1) {
        let index = this.searchLabel.indexOf(data)
        this.searchLabel.splice(index, 1)
      }
    },
    _setImageFormMessage(messageName, list) {
      if (!list || !list[0]) {
        return
      }
      if (messageName === 'headImage') {
        this.$set(this.form, 'dataSourceUrl', list[0])
        return
      }
      if (messageName === 'backgroundImage') {
        if (this.form.themeImgs && this.form.themeImgs.split(',').length > 0) {
          const images = this.form.themeImgs.split(',').concat(list)
          this.form.themeImgs = images.join(',')
        } else {
          this.form.themeImgs = list.join(',')
        }
        this.$refs.backgroundImageRef.updataImageUrl(this.form.themeImgs)
        return
      }
      const map = new Map([
        ['customImage1', {
          definedImg: 'definedImg1',
          width: 224,
          height: 274
        }],
        ['customImage2', {
          definedImg: 'definedImg2',
          width: 702,
          height: 374
        }],
        ['customImage3', {
          definedImg: 'definedImg3',
          width: 702,
          height: 702
        }]
      ])
      const customImg = map.get(messageName)
      if (customImg) {
        getImageInfoFromUrl(replaceToInnerUrl(list[0])).then(info => {
          if (info.width !== customImg.width || info.height !== customImg.height) {
            this.$message.error(`请选择尺寸为${customImg.width}*${customImg.height}的图片`)
            return
          }
          const setInfoUrl = setWidthAndHeight(list[0], info.width, info.height)
          this[customImg.definedImg] = setInfoUrl
        })
      }
    },
    // 本地图片按钮点击
    uploadBtnClick(messageName) {
      const refName = messageName + 'Ref'
      this.uploadDisabled = false
      setTimeout(() => {
        this.$refs[refName].$children[0].$refs['upload-inner'].handleClick()
        this.uploadDisabled = true
      }, 100)
    },
    // 产险素材库按钮点击
    onIframeBtnClick(messageName, url) {
      console.log(url)
      this.messageName = messageName
      this.iframeUrl = url
      this.iFrameVisible = true
    },
    // 接收到 iframe 的 message 消息
    onMessage(list) {
      console.log(list)
      this._setImageFormMessage(this.messageName, list)
    },
    // 查看
    lookUp() {
      // 保存草稿 自动搜索该篇文章
      this.sameContentDialog = false
      this.form.draftWithdraw = 1
      this.form.isDisplay = 0
      this.form.isHomogeneity = 0
      this.draftFlag = true
      sessionStorage.setItem('title', this.form.title)
      sessionStorage.setItem('myTabName', 'article')
      this.save()
    },
    // 仍要上传
    setUp() {
      // 检查音频是否上传完成
      if (this.$refs.UploadFileShardRef?.fileList?.[0]?.status === 'uploading') {
        this.$message.info('请先等待音频上传完成后再保存')
        return
      }
      this.save()
    },
    // 检查同质化
    async checkDuplicationHandler() {
      try {
        let res = await checkDuplicationArticle({ title: this.form.title })
        const { data = {} } = res
        if (res.code === 0) {
          this.form.isHomogeneity = data.code
          this.form.isDisplay = data.code === 1 ? 1 : 0
        }
      } catch {
        this.form.isHomogeneity = 0
      }
    },
    deleteDraft() {
      draftDelete({ id: this.$route.params.id || this.draftId }).then(res => {
        if (res.code === 0) {
          console.log(res, '草稿删除成功')
        }
      })
    },
    lapseTimeValidate() {
      // 单独验证‘是否有时效性’字段
      this.$nextTick(() => {
        this.$refs.form.validateField('lapseTime')
      })
    },
    // 根据返回的lapseTime（时效性时间）字段，用于回显--‘是否有时效性’选择的状态（0317版）
    fixedResponseForEcho(data) {
      this.isLapseStatus = data.isLapse // 保存时效状态
      if (!data.lapseTime) {
        data.lapseTime = ''
        data.isLapseContro = 1
      } else {
        data.isLapseContro = 0
      }
      return data
    },
    // 加入productId和productAppType
    selectProduct(data) {
      Object.assign(this.form, data)
    },
    // 下线产品
    removeProduct(productId) {
      const obj = {
        isLapse: 1,
        contentId: this.$route.params.id,
        productId,
        contentType: '1',
        updateBy: this.form.updateBy || 'umright'
      }
      updateProductLapseApi(obj)
    },
    handlePreviewClick() {
      this.$refs.showH5Preview.visible = true
    },
    pageLabels(query) {
      let params = {
        labelName: query,
        pageSize: 300
      }
      pageLabels(params).then((res) => {
        let formatList = res.data.list.map((item) => {
          return { id: item.id, labelName: item.labelName, labelId: item.id }
        })
        this.seachLabelOptions = formatList
        this.seachLabelLoading = false
        if (formatList.length === 0) {
          this.newLabelName = query
        }
      })
    },
    remoteMethod(query) {
      this.seachLabelLoading = true
      this.pageLabels(query)
    },
    remoteMethodSearchAll() {
      this.seachLabelLoading = true
      this.pageLabels()
    },
    handlerSelectChange(list) {
      if (this.labelContentList.length >= 20) {
        return
      }
      list.forEach((item) => {
        let result = this.labelContentList.every((checkedItem) => { return checkedItem.labelId !== item.labelId })
        if (result) {
          this.labelContentList.push(item)
        }
      })
      if (this.labelContentList.length >= 20) {
        this.$message.warning('可配置的标签最多为20个,请调整后添加')
      }
    },
    // 分类改变
    handleCateChange(categoryId, categoryName) {
      // 特殊处理，选择分类为产品手册的时候，把作者改成产品手册
      if (categoryName === '产品手册') {
        const isSet = this.$refs.selectAuthorRef.setAuthorName('产品手册')
        if (isSet) {
          this.$message.info('作者已修改为产品手册')
        }
      }
    },
    createNewLabel() {
      if (this.labelContentList.length >= 20) {
        this.$message.warning('可配置的标签最多为20个,请调整后添加')
        return
      }
      let params = {
        type: 3,
        labelName: this.newLabelName,
        level: 1
      }
      tagAddOrEditApi(params).then((res) => {
        if (res.code === 0) {
          this.$message.success('新建标签成功')
          let labelItem = {
            id: res.data[0].id,
            labelName: res.data[0].labelName,
            labelId: res.data[0].id
          }
          this.labelContentList.push(labelItem)
        } else {
          this.$message.error('新建标签失败')
        }
        this.newLabelName = ''
      })
    },
    labelIdToNumber(data) {
      data.forEach((item) => {
        item.labelId = Number(item.labelId)
      })
      return data
    },
    handlerCreateLabel() {
      if (!this.newLabelName) {
        this.$message.warning('请输入标签名')
        return
      }
      this.createNewLabel()
    },
    handlerValidate(rule, val, callback) {
      if (!this.isDraft && !val && val !== 0) {
        callback(new Error('请选择时效性'))
      } else if (!this.isDraft && val !== 1 && !this.form.lapseTime) {
        callback(new Error('请选择失效时间'))
      } else {
        callback()
      }
    },
    markPartData(keys, values) {
      let array = []
      keys.forEach((key, index) => {
        let data = {}
        data.tenementName = keys[index]
        data.tenementCode = values[index]
        array.push(data)
      })
      return array
    },
    isShowEvalutionBox(functionName) { // 20210902版--目前只做了 我的上传-文章新增和我的上传-视频新增 (需求：在没有使用过评价框评价过的前提下，距离上次提交在一周之内，就不弹出评价框,否则就弹出！)
      let params = {
        function: functionName
      }
      isNeedUp(params).then((result) => { // 后端判断时间是否在一周之内
        if (result.data === 1) { // 为1就弹出评价框
          this.$store.commit('evalution/SET_ISSHOW_BOX', { // 弹出
            hidden_Function: true,
            isShow_box: true,
            function_Name: functionName
          })
        }
      })
    },
    // 去广告配置
    goAddAdvert() {
      // 添加和草稿配置时间
      if (this.isNew || this.isDraft) {
        advertStore.commit('SET_EDIT_TIME', this.editTime)
      }
      // 需转成外网后，再存到vuex里面，不然会点击配置底部广告后，回来的时候 oldForm 会是内网地址，导致isAudit判断错误
      this.form.content = contentToOuterUrl(this.form.content)
      advertStore.commit('SET_FORM_DATA', this.form)
      this.$router.push({
        name: 'advertisement-add',
        query: {
          typeName: 'article',
          recordId: this.$route.params.id || '',
          repositoryId: this.$route.query.repositoryId || ''
        }
      })
    },
    // 配置拓展阅读
    extensionReading() {
      this.extensionReadingVisible = true
    },
    // 从非全国切换到全国选项时，需清掉校验状态
    handleDistrictChange() {
      this.$refs.form.clearValidate('district')
    },
    // 嵌入到个智页面，新增和编辑提交后使用 postmessage 通信
    postMessage(type) {
      const obj = {
        pageType: this.isNew ? 'add' : 'edit', // add | edit
        btnType: type // cancel | draft | submit
      }
      window.parent.postMessage(obj, '*')
    },
    hanleSwitch() {
      this.isSwitchOpen = !this.isSwitchOpen
    },
    viewMore() {
      this.isShowMore = !this.isShowMore
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/variables.less';
@import './less/ArticleEdit.less';
/deep/ .el-upload.el-upload--text{
  border-radius: 100%;
  background-color: #F2F3F5
}
.btn-center {
  text-align: center;
  margin-top: 20px;
}
.tabTop {
  margin-bottom: 24px;
}
/deep/ .tabTop .el-tabs__nav {
  width: 100%;
  display: flex;
}
/deep/ .tabTop .el-tabs__item {
  font-size: 16px;
  text-align: center;
  flex: 1;
  padding-top: 12px;
  padding-bottom: 12px;
}
</style>