hz_crm_web/src/views/rai_manage/activityManage/components/addActivity.vue

<template>
  <div class="container-addAct">
    <el-card class="card-top">
      <div class="top-box">
        <div>
          <el-select
            placeholder="请选择行业"
            :disabled="!isShowSelect"
            @change="clearTopIndustry"
            @clear="clearTopIndustry"
            clearable
            v-model="optionFormregion"
            style="width: 360px; margin-right: 30px"
          >
            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.PermissionName" :value="item.PermissionName"></el-option>
          </el-select>
          <el-select placeholder="请选择活动类型" :disabled="!isShowSelect" clearable v-model="cactivityType" @change="activityTypeDetail" style="width: 360px">
            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
          </el-select>
        </div>
        <div>
          <el-button v-if="isShowSelect" type="primary" @click="templateBtn">活动内容输入模板</el-button>
        </div>
      </div>
    </el-card>

    <el-card style="margin-top: 30px">
      <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="content"></froala>
      <div style="margin-top: 25px" v-if="optionFormregion">
        <template v-if="cactivityType == 1">
          <el-radio style="margin: 0 0 20px 30px" v-model="subjectRadio" label="1">单主题标签：</el-radio>
          <el-radio v-model="subjectRadio" label="2">多主题标签：</el-radio>
        </template>
        <div style="display: flex; align-items: center">
          <span style="width: 98px; flex-shrink: 0">
            主题标签：
            <el-tooltip placement="top-start">
              <div slot="content">
                1、小程序内默认显示产业名称，也可勾选【小程序内显示标的名称】更改显示<br />2、若该活动暂无相关联产业，请联系内容组添加，或勾选并填写【临时标签】用于小程序内展示<br />
                3、选择产业和关联标的后，即完成对活动的标签定义；可同时勾选并填写【临时标签】，小程序内将显示临时标签名称
              </div>
              <i class="el-icon-info" />
            </el-tooltip>
          </span>
          <el-cascader
            key="multipleTrue"
            style="margin-right: 10px"
            v-model="industryCascade"
            :disabled="selectDisabled"
            @change="propertyChange"
            placeholder="请选择产业名称"
            :show-all-levels="false"
            :options="industryArr"
            :props="{ ...defaultProps, multiple: true }"
            filterable
          >
          </el-cascader>
          <template v-if="isShowAddIcon">
            <img v-if="!optionFormregion.includes('策略') && !selectDisabled" src="~@/assets/img/set_m/add_ico.png" style="margin: 0 30px 0 0" @click="addIndustryDlg = true" />
            <img v-if="!optionFormregion.includes('策略') && selectDisabled" src="~@/assets/img/set_m/slide.png" style="margin: 0 30px 0 0" />
          </template>
          <el-select v-model="markValue" :disabled="selectDisabled" @focus="markSelectFocus" multiple placeholder="请选择关联标的">
            <el-option v-for="item in markOptions" :key="item.IndustrialSubjectId" :value="item.IndustrialSubjectId" :label="item.SubjectName"> </el-option>
          </el-select>
          <template v-if="isShowAddIcon">
            <img v-if="!optionFormregion.includes('策略') && !selectDisabled" src="~@/assets/img/set_m/add_ico.png" style="margin: 0 10px" @click="isAddMarketDlg" />
            <img v-if="!optionFormregion.includes('策略') && selectDisabled" src="~@/assets/img/set_m/slide.png" style="margin: 0 10px" />
          </template>
          <el-checkbox style="margin-left: 20px" v-model="isMark">小程序内显示标的名称</el-checkbox>
          <div style="display: flex; align-items: center; margin-left: 40px">
            <el-checkbox v-model="radioTemporary">临时标签</el-checkbox>
            <el-input style="width: 350px; margin: 0 20px" v-model="valTemporary" @focus="radioTemporary = true" placeholder="请输入标签名称" type="text"></el-input>
            <div class="editsty" style="flex-shrink: 0" @click="dialogVisibleSubject = true">查询标的</div>
          </div>
        </div>
        <!-- 复选 模块 -->
        <div style="margin-top: 20px">
          <research-deduct ref="researchSelect" :cactivityType="cactivityType" :optionFormregion="optionFormregion" />
        </div>
        <div style="margin: 20px 0 0 98px" class="add-delete" v-for="(item, index) in addSubjectLabel" :key="index">
          <template v-if="subjectRadio == 2">
            <el-cascader
              v-model="item.IndustrialManagementIdS"
              :disabled="item.forbidden"
              @change="propertyChange"
              placeholder="请选择产业名称"
              :show-all-levels="false"
              :options="industryArr"
              :props="{ ...defaultProps, multiple: true }"
              filterable
            >
            </el-cascader>
            <el-select style="margin: 0 10px" v-model="item.IndustrialSubjectIdS" :disabled="item.forbidden" @focus="markSelectFocusAdd(index, item)" multiple placeholder="请选择关联标的">
              <el-option v-for="val in item.markOptions" :key="val.IndustrialSubjectId" :value="val.IndustrialSubjectId" :label="val.SubjectName"> </el-option>
            </el-select>
            <el-checkbox style="margin: 0 0 0 10px" v-model="item.isMark">小程序内显示标的名称</el-checkbox>
            <div style="display: flex; align-items: center; margin-left: 40px">
              <el-checkbox v-model="item.temporary" @change="temporaryChangeHandler(item)">临时标签</el-checkbox>
              <el-input
                style="width: 350px; margin: 0 20px"
                v-model="item.temporaryText"
                @focus="
                  item.forbidden = true;
                  item.temporary = true;
                "
                placeholder="请输入标签名称"
                type="text"
              ></el-input>
            </div>
            <img @click="deleteSubject(index, item)" src="~@/assets/img/icons/delete-Item.png" />
            <el-checkbox style="margin-left: 30px" v-model="item.subscribe">可预约纪要</el-checkbox>
          </template>
        </div>
        <div style="margin: 20px 0 0 30px; display: flex; align-items: center" v-if="subjectRadio == 2">
          <img @click="addLabelClick" class="editsty" src="~@/assets/img/set_m/add_ico.png" style="margin: 0 10px" />
          <span @click="addLabelClick" class="editsty"> 添加主题标签</span>
        </div>
      </div>
      <div style="margin-top: 15px" v-if="showType !== '1' && showType !== '9' && subjectRadio != 2">
        <div class="radio-input" style="margin-bottom: 15px; height: 35px">
          <span style="width: 98px"> 参会人数限制： </span>
          <template v-if="showType != 3">
            <el-radio v-model="radio" label="1">不限制</el-radio>
            <el-radio v-model="radio" label="2">限制</el-radio>
          </template>
          <el-input placeholder="输入人数上限" v-if="radio == 2 || showType !== '2'" class="astrict-inpt" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="astrict" />
        </div>
        <div v-if="radio == 2 || showType !== '2'">
          <div class="checkbox-box">
            <span style="width: 98px; flex-shrink: 0">
              活动可见：
              <el-tooltip :content="checkboxTooltip('活动可见')" placement="top-start">
                <i class="el-icon-info" />
              </el-tooltip>
            </span>
            <div>
              <div class="is-visible">
                <el-radio-group v-model="radioVisibleActivity">
                  <el-radio :label="1">仅本组客户可见</el-radio>
                  <el-radio :label="2">全部客户可见</el-radio>
                </el-radio-group>
                <el-checkbox v-model="decisionChecked">仅决策人可见</el-checkbox>
              </div>
              <div style="display: flex">
                <span style="width: 70px; flex-shrink: 0" class="text-right"> 套餐类型： </span>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" :disabled="checkAllIs">
                  全选
                  <el-tooltip :content="checkboxTooltip('全选')" placement="top-start">
                    <i class="el-icon-info" />
                  </el-tooltip>
                </el-checkbox>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in cities" :label="item.CustomerTypeId" :key="item.CustomerTypeId" :disabled="forbidden.includes(String(item.CustomerTypeId))">
                    {{ item.CustomerName }}
                    <el-tooltip :content="item.Explain" placement="top-start" v-if="item.Explain">
                      <i class="el-icon-info" />
                    </el-tooltip>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="checkbox-box" style="margin-top: 20px">
                <span class="text-right"> 管理规模： </span>
                <el-checkbox-group v-model="checkScaleList">
                  <el-checkbox :disabled="scaleIsDisabled.includes('3')" label="3">100亿以上</el-checkbox>
                  <el-checkbox :disabled="scaleIsDisabled.includes('2')" label="2">50～100亿</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template v-if="activeIsState == 3">
        <div class="audio-content">
          <span class="text">会议音频：</span>
          <el-button v-if="addEditVideo.length > 0" size="small" type="primary" @click="errorUpload">上传会议音频</el-button>
          <el-upload
            v-else
            class="upload-demo"
            action=""
            :http-request="handleUploadAudio"
            accept="audio/*"
            :on-remove="handleRemoveAudio"
            :before-remove="beforeRemoveAudio"
            :limit="1"
            :file-list="fileListAudio"
          >
            <el-button size="small" type="primary">上传会议音频</el-button>
          </el-upload>
        </div>
        <div class="audio-content" style="margin-top: 10px">
          <span class="text">会议视频：</span>
          <el-button v-if="fileListAudio.length" size="small" type="primary" @click="errorUpload">上传会议视频</el-button>
          <el-upload
            v-else
            class="upload-demo"
            action=""
            accept=".mp4"
            :http-request="handleUpload"
            :before-upload="handelBeforeUploadVideo"
            :before-remove="beforeRemoveAudio"
            :on-remove="handleRemoveVideo"
            :file-list="addEditVideo"
            :disabled="startUpload"
            :limit="1"
          >
            <el-button size="small" type="primary" :loading="startUpload">上传会议视频</el-button>
          </el-upload>
          <el-progress type="circle" :percentage="percentage" width="40" style="margin-left: 10px" v-if="startUpload"></el-progress>
        </div>
        <div class="audio-content cover-content" style="margin-top: 10px" v-if="(fileListAudio.length || addEditVideo.length) && defaultImage">
          <span class="text" style="width: 70px; text-align: right">封面：</span>
          <div class="img-content">
            <img :src="defaultImage" alt="" />
            <div class="modify" @click="modifyImgHandler">修改</div>
          </div>
        </div>
      </template>
      <div style="text-align: center; margin-top: 30px">
        <el-button type="primary" @click="submitForm('保存')">保存</el-button>
        <el-button v-if="isShow" type="primary" @click="submitForm('发布')">发布</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </div>
    </el-card>
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :title="activityTypeName"
      :visible.sync="dialogVisible"
      customClass="customWidth"
      :before-close="handleClose"
    >
      <div id="dialog" v-html="copyText"></div>
      <div style="margin-bottom: 60px">
        <div class="content-template" v-if="activityTypeName == '公司调研电话会'">
          <div @click="contentTemplate('1')" :class="contentTemplateTitle == '1' ? 'active' : ''">进门财经模板</div>
          <div @click="contentTemplate('2')" :class="contentTemplateTitle == '2' ? 'active' : ''">zoom模板</div>
        </div>
        <div v-html="templatePText" v-if="contentTemplateTitle == '1'"></div>
        <div v-html="ZoomTemplateP" v-else></div>
        <p v-if="cactivityType == 1" class="no-cv" style="color: #f00">注：多个活动同时输入时，请用分割线隔开</p>
        <p v-else class="no-cv" style="color: #f00">注：每次只能输入一场活动信息{{ cactivityType == 6 ? "，多篇相关报告时，用分号“；”隔开" : "" }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button id="copy_text" type="primary" v-if="contentTemplateTitle == '1'" :data-clipboard-text="copyTxt" @click="handleCopyFun">复制模版</el-button>
        <el-button id="copy_text" type="primary" v-else :data-clipboard-text="zoomTemplate" @click="handleCopyFun">复制模版</el-button>
      </span>
    </el-dialog>
    <add-industry-mark
      :optionFormregion="optionFormregion.includes('研选') ? '研选' : optionFormregion"
      :addIndustryDlg.sync="addIndustryDlg"
      :addMarkDlg.sync="addMarkDlg"
      @commitIndustryDlg="commitIndustryDlg"
      @commitMarkDlg="commitMarkDlg"
      :addMarkUpVal="addMarkUpVal"
      :source="3"
    />
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center title="查询标的" :visible.sync="dialogVisibleSubject" width="500px" :before-close="handleCloseSubject">
      <div>
        <el-select style="width: 100%" v-model="addSubjectName" remote :remote-method="remoteMethod" clearable filterable @change="searchInfo" placeholder="请输入标的名称">
          <el-option v-for="item in addSubjectOptions" :key="item.IndustrialSubjectId" :label="item.SubjectName" :value="item.SubjectName"> </el-option>
        </el-select>
      </div>
      <p class="subject-text" v-if="isShowSubject">暂无数据</p>
      <template v-else>
        <p class="subject-text" v-for="(item, index) in nameSubjectOptions" :key="index">{{ item.Name }} : {{ item.value }}</p>
      </template>
      <p style="padding-bottom: 50px"></p>
    </el-dialog>
    <modify-img-dlg :modifyImgVisible.sync="modifyImgVisible" :videoAndVoiceList.sync="videoAndVoiceList" />
  </div>
</template>

<script>
import { raiInterface, customInterence, getOSSSign, resourceVoiceupload } from "@/api/api.js";
import VueFroala from "vue-froala-wysiwyg";
import Clipboard from "clipboard";
import AddIndustryMark from "../../components/addIndustryMark.vue";
import richTextMixins from "../../components/apply/RichTextMixins";
import MD5 from "js-md5";
import ResearchDeduct from "./addComopnents/ResearchDeduct.vue";
import ModifyImgDlg from "./addComopnents/modifyImgDlg.vue";

export default {
  name: "",
  components: { AddIndustryMark, ResearchDeduct, ModifyImgDlg },
  props: {},
  data() {
    return {
      cactivityType: "",
      content: "", //内容
      optionFormregion: "", //行业选择
      radio: "1", //单选按钮
      isOptionRef: false,
      chartPermissionList: [], //行业的数组
      cactivityTypeList: [], //活动类型
      dialogVisible: false, //弹框
      astrict: "", //人数限制
      copyTxt: "1", //复制的模版
      templatePText: "",
      checkedCities: [], //
      checkedCitiesTwo: "",
      cities: [], //
      isIndeterminate: false, //是否
      checkAll: false,
      showType: "9",
      activityTypeName: "纪要内容模板",
      isShow: true,
      isShowSelect: true,
      forbidden: [],
      checkAllIs: false,
      contentTemplateTitle: "1",
      zoomTemplate: "",
      zoomTemplateP: "",
      industryArr: [], //所有的行业
      industryCascade: "", //所有行业及联的选择
      markValue: "", //添加标的
      markOptions: [], ///添加标的的数组
      addMarkUpVal: {
        industrialName: "",
        industrialId: "",
      }, //弹框里的
      radioTemporary: false, //临时标签
      valTemporary: "", //临时标签的输入框
      selectDisabled: false, //临时标签的输入后全部禁用
      defaultProps: {
        label: "PermissionName",
        children: "List",
        value: "ChartPermissionId",
      },
      addIndustryDlg: false,
      addMarkDlg: false,
      subjectRadio: "1",
      addSubjectLabel: [],
      dialogVisibleSubject: false,
      addSubjectName: "",
      addSubjectOptions: "",
      nameSubjectOptions: [],
      isShowSubject: false,
      ListSubject: [],
      checkScaleList: [], //选择规模
      scaleIsDisabled: "", //选择规模 禁用
      isMark: false,
      radioVisibleActivity: 2,
      decisionChecked: false,
      fileListAudio: [],
      baseApi: process.env.API_ROOT,
      activeIsState: "",
      addEditVideo: [],
      startUpload: false, //开始上传
      percentage: 0,
      isShowAddIcon: true, //主题标签的添加的iocn 是否显示
      modifyImgVisible: false,
      defaultImage: "",
      shareImg:'',
      videoAndVoiceList: [],
    };
  },
  computed: {},
  mixins: [richTextMixins],
  watch: {
    radio: {
      handler(newVal) {
        if (newVal == 1) {
          this.astrict = "";
        }
        if (this.$route.query.id) return;
        this.isCheckAllType(this.cactivityType == 3 && newVal == 2 ? true : false);
      },
    },
    radioTemporary() {
      if (this.radioTemporary) {
        this.selectDisabled = true;
      } else {
        this.valTemporary = "";
        this.selectDisabled = false;
      }
    },
    subjectRadio() {
      this.addSubjectLabel = [];
    },
    cactivityType: {
      handler(newval) {
        if (this.$route.query.id) return;
        this.isCheckAllType(newval === 4 ? true : false);
      },
    },
  },
  created() {},
  mounted() {
    this.chartPermission();
    this.getActivityType();
    this.customerTypelist();
    this.getIndustry();
    if (this.$route.query.id) {
      this.getDetail();
    }
    if (this.$route.query.isShow == 1) {
      this.isShow = false;
    }
    if (this.$route.query.isShow >= 0) {
      this.isShowSelect = false;
    }
  },
  methods: {
    // 上传音频
    async handleUploadAudio(e) {
      const loading = this.$loading({
        lock: true,
        text: "上传音频中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let form = new FormData();
      form.append("file", e.file);
      const res = await resourceVoiceupload(form);
      if (res.Ret === 200) {
        this.getVideoAndImg(1);
        let obj = {
          name: res.Data.ResourceName,
          url: res.Data.ResourceUrl,
          PlaySeconds: res.Data.PlaySeconds,
        };
        this.fileListAudio = [obj];
        loading.close();
      }
    },
    //删除新增的主题标签
    deleteSubject(index, item) {
      this.addSubjectLabel.splice(index, 1);
    },
    markSelectFocusAdd(index, item) {
      item.markOptions = [];
      item.IndustrialSubjectIdS = [];
      let arr = [];
      arr = item.IndustrialManagementIdS.map((key) => {
        return key[1];
      });
      raiInterface
        .getindustrialSubjectlistIds({
          IndustrialManagementIdStr: arr.join(","),
        })
        .then((res) => {
          if (res.Ret === 200) {
            item.markOptions = res.Data.List || [];
          }
        });
    },
    addLabelClick() {
      if (this.addSubjectLabel.length) {
        let index = this.addSubjectLabel.length - 1;
        this.addSubjectLabel.push({
          IndustrialManagementIdS: this.addSubjectLabel[index].IndustrialManagementIdS,
          IndustrialSubjectIdS: this.addSubjectLabel[index].IndustrialSubjectIdS,
          markOptions: this.addSubjectLabel[index].markOptions,
          isMark: this.addSubjectLabel[index].isMark,
          forbidden: this.addSubjectLabel[index].forbidden,
          temporary: this.addSubjectLabel[index].temporary,
          temporaryText: this.addSubjectLabel[index].temporaryText,
          subscribe: this.addSubjectLabel[index].subscribe,
        });
      } else {
        this.addSubjectLabel = [
          {
            IndustrialManagementIdS: this.industryCascade,
            IndustrialSubjectIdS: this.markValue,
            markOptions: this.markOptions,
            isMark: this.isMark,
            forbidden: this.selectDisabled,
            temporary: this.radioTemporary,
            temporaryText: this.valTemporary,
            subscribe: this.$refs.researchSelect.isCanAppointmentMinutes,
          },
        ];
      }
    },
    propertyChange() {
      if (this.subjectRadio == 2) return;
      this.markOptions = [];
      this.markValue = "";
    },
    //添加后的 临时标签
    temporaryChangeHandler(item) {
      item.forbidden = item.temporary;
      !item.forbidden ? (item.temporaryText = "") : "";
    },
    //编辑进来的详情
    getDetail() {
      raiInterface.activityDetail({ ActivityId: Number(this.$route.query.id) }).then((res) => {
        if (res.Ret !== 200) return;
        const { Data } = res;
        this.defaultImage = Data.BackgroundImg
        this.shareImg = Data.ShareImg
        this.activeIsState = Data.ActiveState;
        this.cactivityType = Data.ActivityTypeId;
        this.optionFormregion = Data.ChartPermissionName;
        this.checkedCities = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").map((item) => Number(item)) : [];
        this.astrict = Data.LimitPeopleNum == "0" ? "" : Data.LimitPeopleNum;
        this.showType = Data.ShowType;
        this.content = Data.Body;
        this.checkScaleList = Data.Scale ? Data.Scale.split(",") : [];
        this.scaleIsDisabled = Data.Scale;
        this.radioVisibleActivity = Data.VisibleRange > 0 ? Data.VisibleRange : 1;
        this.decisionChecked = Data.IsMakerShow == 1 ? true : false;
        let checkedCount = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",").length : "";
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        this.isMark = Data.IsShowSubjectName == 1 ? true : false;
        this.valTemporary = Data.TemporaryLabel;
        this.radioTemporary = this.valTemporary ? true : false;
        // 复选框模块
        this.$nextTick(() => {
          let RefPage = this.$refs.researchSelect;
          RefPage.isCanAppointmentMinutes = Data.IsCanAppointmentMinutes == 1 ? true : false;
          RefPage.isYidongConduct = Data.IsYidongConduct == 1 ? true : false;
          RefPage.isExternalLabel = Data.IsExternalLabel == 1 ? true : false;
          RefPage.isCanOutboundCall = Data.IsCanOutboundCall == 1 ? true : false;
          RefPage.isDeduct = Data.IsResearchPoints == 1 ? true : false;
          RefPage.provideEmail = Data.IsNeedEmail == 1 ? true : false;
          RefPage.isBClass = Data.IsBClass == 1 ? true : false;
          RefPage.SiginupDeadline = Data.SiginupDeadline;
          RefPage.PointsSet = Data.PointsSet;
          RefPage.institutionName = Data.PointsSet.CompanyName;
        });
        this.addEditVideo = Data.VideoDetail
          ? [Data.VideoDetail].map((item) => {
              return { name: item.VideoName, PlaySeconds: item.VideoDuration, url: item.VideoUrl };
            })
          : [];
        this.fileListAudio = Data.VoiceList
          ? Data.VoiceList.map((item) => {
              return { name: item.Name, PlaySeconds: item.PlaySeconds, url: item.Url };
            })
          : [];
        if (Data.PublishStatus == 1) {
          this.forbidden = Data.CustomerTypeIds ? Data.CustomerTypeIds.split(",") : [];
          this.checkAllIs = this.forbidden.length >= 1;
        }
        if (this.astrict > 0 && this.showType == 2) {
          this.radio = "2";
        }
        this.valTemporary = res.Data.TemporaryLabel;
        this.radioTemporary = this.valTemporary ? true : false;
        this.industryCascade = res.Data.ListIndustrial ? res.Data.ListIndustrial.map((item) => [item.ChartPermissionId, item.IndustrialManagementId]) : "";

        this.markValue = res.Data.ListSubject ? res.Data.ListSubject.map((item) => item.IndustrialSubjectId) : "";
        if (this.markValue) {
          this.markSelectFocus();
        }
      });
    },
    //提交发布活保存前的校验
    submitForm(type) {
      if (this.checkedCities) {
        this.checkedCitiesTwo = this.checkedCities.join(",");
      }
      if (!this.radioTemporary && !this.industryCascade.length) return this.$message.error("请选择产业!");
      if (this.radioTemporary && !this.valTemporary) return this.$message.error("请输入临时标签！");
      let arr = [];
      if (this.industryCascade.length) {
        arr = this.industryCascade.map((item) => {
          return item[1];
        });
      }
      if (this.showType == "3" || this.radio == "2") {
        if (!this.astrict) return this.$message.error("请在输入框输入人数上限!");
      }
      if (!this.cactivityType || !this.optionFormregion) return this.$message.error("请选择行业或活动类型");
      if (this.subjectRadio == 2) {
        let labelArr = this.addSubjectLabel.map((item) => {
          let labelArrList = [];
          item.IndustrialManagementIdS.forEach((val) => {
            labelArrList.push(val[1]);
          });
          return {
            IndustrialManagementIdS: labelArrList.join(","),
            IndustrialSubjectIdS: item.IndustrialSubjectIdS.join(","),
            IsShowSubjectName: item.isMark ? 1 : 0,
            TemporaryLabel: item.temporary ? item.temporaryText : "",
            IsCanAppointmentMinutes: item.subscribe ? 1 : 0,
          };
        });
        this.ListSubject = [
          {
            IndustrialManagementIdS: arr.length ? arr.join(",") : "",
            IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
            IsShowSubjectName: this.isMark ? 1 : 0,
            TemporaryLabel: this.radioTemporary ? this.valTemporary : "",
            IsCanAppointmentMinutes: this.$refs.researchSelect.isCanAppointmentMinutes ? 1 : 0,
          },
          ...labelArr,
        ];
      } else {
        this.ListSubject = [
          {
            IndustrialManagementIdS: arr.length ? arr.join(",") : "",
            IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
            IsShowSubjectName: this.isMark ? 1 : 0,
            TemporaryLabel: this.radioTemporary ? this.valTemporary : "",
            IsCanAppointmentMinutes: this.$refs.researchSelect.isCanAppointmentMinutes ? 1 : 0,
          },
        ];
      }
      let VoiceList = this.fileListAudio.map((item) => {
        return {
          Name: item.name,
          PlaySeconds: item.PlaySeconds.toString(),
          Url: item.url,
        };
      });
      let VideoDetail = this.addEditVideo.map((item) => {
        return {
          VideoName: item.name,
          VideoDuration: item.PlaySeconds.toString(),
          VideoUrl: item.url,
        };
      });
      this.saveTheRelease(type, arr, VoiceList, VideoDetail[0]);
    },
    //保存或发布
    async saveTheRelease(type, arr, VoiceList, VideoDetail) {
      let RefPage = this.$refs.researchSelect;
      let PointsSet = RefPage.PointsSet;
      const res = await raiInterface.preserveAndPublishAdd({
        DoType: type == "发布" ? 1 : 0,
        ActivityId: Number(this.$route.query.id) || 0,
        ActivityTypeId: Number(this.cactivityType),
        Body: this.content,
        PermissionName: this.optionFormregion,
        CustomerTypeIds: this.checkedCitiesTwo,
        IsAllCustomerType: this.checkAll ? 1 : 0,
        LimitPeopleNum: Number(this.astrict) || 0,
        IndustrialManagementIdS: arr.length ? arr.join(",") : "",
        IndustrialSubjectIdS: this.markValue.length ? this.markValue.join(",") : "",
        List: this.ListSubject,
        Scale: this.checkScaleList.length ? this.checkScaleList.join(",") : "",
        LabelType: Number(this.subjectRadio),
        IsShowSubjectName: this.isMark ? 1 : 0,
        IsMakerShow: this.decisionChecked ? 1 : 0,
        VisibleRange: this.radioVisibleActivity,
        VoiceList,
        VideoDetail,
        IsYidongConduct: RefPage.isYidongConduct ? 1 : 0,
        IsExternalLabel: RefPage.isExternalLabel ? 1 : 0,
        IsCanOutboundCall: RefPage.isCanOutboundCall ? 1 : 0,
        IsResearchPoints: RefPage.isDeduct ? 1 : 0,
        IsNeedEmail: RefPage.provideEmail ? 1 : 0,
        IsBClass: RefPage.isBClass ? 1 : 0,
        SiginupDeadline: RefPage.SiginupDeadline,
        PointsSet,
        BackgroundImg:this.defaultImage,
        ShareImg:this.shareImg,
      });

      if (res.Ret !== 200) return;
      this.$message.success("操作成功！");
      this.$router.back();
    },
    //获取行业
    chartPermission() {
      raiInterface.chartPermissionList().then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //获取活动类型
    getActivityType() {
      raiInterface.getActivityType().then((res) => {
        if (res.Ret === 200) {
          this.isShowAddIcon = res.Data.IsShowAddIcon;
          this.cactivityTypeList = res.Data.List;
        }
      });
    },
    //获取活动类型详情
    activityTypeDetail(e) {
      this.radio = "1"; //单选按钮
      this.astrict = ""; //人数限制
      this.contentTemplateTitle = "1";
      this.subjectRadio = "1";
      this.checkedCities = [];
      this.$refs.researchSelect.isBClass = false;
      this.radioVisibleActivity = this.cactivityType == 7 ? 1 : 2;
      if (!this.cactivityType) return;
      raiInterface
        .activityTypeDetail({
          ActivityTypeId: this.cactivityType - 0,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.copyTxt = res.Data.Template;
            this.templatePText = res.Data.TemplateP;
            this.zoomTemplate = res.Data.ZoomTemplate;
            this.ZoomTemplateP = res.Data.ZoomTemplateP;
            this.showType = res.Data.ShowType;
            this.activityTypeName = res.Data.ActivityTypeName;
          }
        });
    },
    // 操作：点击了复制按钮
    handleCopyFun() {
      let clipboard = new Clipboard("#copy_text");
      clipboard.on("success", (e) => {
        this.$message({
          type: "success",
          message: "复制成功!",
        });
        this.dialogVisible = false;
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$Message.info("该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    },
    //点击了复制模版
    templateBtn() {
      if (!this.cactivityType) return this.$message.error("请选择活动类型");
      this.dialogVisible = true;
    },
    //获取多选的客户列表
    customerTypelist() {
      raiInterface.customerTypelist().then((res) => {
        if (res.Ret === 200) {
          this.cities = res.Data.List;
        }
      });
    },
    // 子组件来的事件 产业
    commitIndustryDlg(data, type = "") {
      this.getIndustry();
      this.industryCascade.push([Number(data.ChartPermissionId), Number(data.NewId)]);
    },
    // 子组件来的事件 标的
    commitMarkDlg(data) {
      let arr = this.industryCascade.flat(Infinity);
      raiInterface
        .getindustrialSubjectlistIds({
          IndustrialManagementIdStr: arr[1],
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.markOptions = res.Data.List || [];
          }
        });
      this.markValue = data.split(",").map((item) => Number(item));
    },
    /* 获取全部的行业 */
    getIndustry() {
      raiInterface.getListIndustrial().then((res) => {
        if (res.Ret === 200) {
          this.industryArr = res.Data.List || [];
        }
      });
    },
    //top 行业清除的事件
    clearTopIndustry() {
      this.industryCascade = [];
      this.radioTemporary = false;
      this.valTemporary = "";
      this.markValue = "";
      this.radioVisibleActivity = 2;
    },
    //添加标的的点击事件
    isAddMarketDlg() {
      let arr = this.industryCascade.flat(Infinity);
      this.industryArr.forEach((item) => {
        if (item.ChartPermissionId == arr[0]) {
          this.addMarkUpVal.industrialId = arr[1];
          item.List.forEach((key) => {
            if (key.ChartPermissionId == arr[1]) {
              this.addMarkUpVal.industrialName = key.PermissionName;
            }
          });
        }
      });
      if (this.industryCascade.length == 1) {
        this.addMarkDlg = true;
      } else if (this.industryCascade.length > 1) {
        this.$message.error("已选多个产业，无法添加标的");
      } else {
        this.$message.error("请先选择产业");
      }
    },
    //点击添加标的的下拉选择框
    markSelectFocus() {
      if (!this.industryCascade.length) {
        this.$message.error("请先选择产业");
      } else {
        let arr = [];
        arr = this.industryCascade.map((item) => {
          return item[1];
        });
        raiInterface
          .getindustrialSubjectlistIds({
            IndustrialManagementIdStr: arr.join(","),
          })
          .then((res) => {
            if (res.Ret === 200) {
              this.markOptions = res.Data.List || [];
            }
          });
      }
    },
    handleCheckAllChange(val) {
      if (val) {
        let newCodeList = this.cities.map((item) => item.CustomerTypeId);
        this.checkedCities = newCodeList;
      } else {
        this.checkedCities = [];
      }
      this.checkedCitiesTwo = this.checkedCities.join(",");
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    cancelBtn() {
      this.$router.back();
    },
    contentTemplate(type) {
      this.contentTemplateTitle = type;
    },
    handleCloseSubject() {
      this.nameSubjectOptions = [];
      this.addSubjectName = "";
      this.addSubjectOptions = [];
      this.dialogVisibleSubject = false;
    },
    async remoteMethod(query) {
      if (query !== "") {
        const res = await raiInterface.industrialSubjectSearch({
          KeyWord: query,
        });
        if (res.Ret === 200) {
          this.addSubjectOptions = res.Data.List || [];
        }
      }
    },
    async searchInfo(val) {
      if (val !== "") {
        const res = await raiInterface.industrialSubjectSearchInfo({
          KeyWord: val,
        });
        if (res.Ret === 200) {
          this.isShowSubject = res.Data.List ? false : true;
          let arrList = [];
          arrList = res.Data.List
            ? res.Data.List.map((item) => {
                let arr = [];
                item.List.forEach((key) => {
                  arr.push(key.Name);
                });
                return {
                  ...item,
                  value: arr.join(","),
                };
              })
            : [];
          this.nameSubjectOptions = arrList;
        }
      } else {
        this.nameSubjectOptions = [];
      }
    },
    //套餐类型的 提升文本
    checkboxTooltip(val) {
      let str = "";
      switch (val) {
        case "全选":
          str = "所有客户均可看到该活动（冻结、流失客户也可看到，但会提示无权限参会）";
          break;
        case "活动可见":
          str = "套餐类型和管理规模两项下，均有勾选时，只要满足其中之一的条件，客户就可见此活动。例如：勾选了大套餐客户和100亿以上，则大套餐客户和100亿以上规模的客户都可以看到此活动";
          break;
      }
      return str;
    },
    //删除上传
    handleRemoveAudio(file, fileList) {
      this.fileListAudio = [];
    },
    //删除上传前得确认
    beforeRemoveAudio(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //删除视频的上传
    handleRemoveVideo(file, fileList) {
      this.addEditVideo = [];
    },
    //获取视频时长的promise
    handleGetDuration(file) {
      return new Promise((resolve, reject) => {
        const fileUrl = URL.createObjectURL(file);
        const audioEl = new Audio(fileUrl);
        audioEl.addEventListener("loadedmetadata", (e) => {
          resolve(audioEl.duration);
        });
      });
    },

    //上传视频判断格式
    handelBeforeUploadVideo(e) {
      if (e.type != "video/mp4") {
        this.$message.warning("上传失败，上传视频格式不正确");
        return false;
      }
    },

    // 上传视频
    async handleUpload(e) {
      const duration = await this.handleGetDuration(e.file);
      this.addEditVideo.push({
        name: e.file.name,
        PlaySeconds: duration + "",
        url: "",
      });
      const res = await getOSSSign();

      if (res.Ret === 200) {
        let accessKeyId = res.Data.AccessKeyId;
        let accessKeySecret = res.Data.AccessKeySecret;
        let stsToken = res.Data.SecurityToken;
        this.handleUploadToOSS(e.file, accessKeyId, accessKeySecret, stsToken);
      }
    },
    //上传到阿里云
    async handleUploadToOSS(file, accessKeyId, accessKeySecret, stsToken) {
      this.startUpload = true;
      const ALOSSINS = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "oss-cn-shanghai",
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: accessKeyId,
        accessKeySecret: accessKeySecret,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: stsToken,
        // 填写Bucket名称，例如examplebucket。
        bucket: "hzchart",
        endpoint: "hzstatic.hzinsights.com",
        cname: true,
        timeout: 600000,
      });
      // 生成文件名
      const t = new Date().getTime().toString();
      const temName = `static/yb/video/${MD5(t)}.${file.name.split(".")[1]}`;
      console.log(temName);

      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          console.log(p);
          this.percentage = parseInt(p * 100);
        },
        // 设置并发上传的分片数量。
        parallel: 10,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024 * 10, // 10MB
      };
      try {
        const res = await ALOSSINS.multipartUpload(temName, file, { ...options });
        console.log("上传结果", res);
        if (res.res.status === 200) {
          this.getVideoAndImg(2);
          let VideoUrl = "https://hzstatic.hzinsights.com/" + res.name;
          this.addEditVideo[0].url = VideoUrl;
          this.startUpload = false;
          this.percentage = 0;
        }
      } catch (error) {
        this.$message.warning("上传失败，请刷新重试");
        this.startUpload = false;
        this.percentage = 0;
      }
    },
    errorUpload() {
      this.$message.error("音频文件和视频文件，仅支•持•上•传一个");
    },
    // 公司线下调研 调研电话会 的选择
    isCheckAllType(newval) {
      if (newval) {
        let newCodeList = [];
        this.cities.forEach((item) => {
          if (![5, 6, 7].includes(item.CustomerTypeId)) {
            newCodeList.push(item.CustomerTypeId);
          }
        });
        this.checkedCities = newCodeList;
        this.checkedCitiesTwo = this.checkedCities.join(",");
        this.isIndeterminate = true;
        this.checkAll = false;
      } else {
        this.checkedCities = [];
        this.checkedCitiesTwo = "";
        this.checkAll = false;
      }
    },
    // 点击修改图片的弹框
    modifyImgHandler() {
      let type = this.addEditVideo.length > 0 ? 2 : 1;
      this.getVideoAndImg(type, "修改");
      this.modifyImgVisible = true;
    },
    // video_and_voiceImgActivityVideo（）
    async getVideoAndImg(type, isOne = "") {
      const res = await raiInterface.video_and_voiceImgActivityVideo({
        FileType: type,
        ActivityId: Number(this.$route.query.id),
      });
      if (res.Ret === 200) {
        isOne == "修改" ? "" : (this.defaultImage = res.Data.List[0].ImgUrl);
        this.videoAndVoiceList = res.Data.List;
      }
    },
  },
};
</script>
<style lang="scss">
.container-addAct {
  .content-template {
    display: flex;
    div {
      margin-right: 20px;
      padding-bottom: 4px;
    }
    .active {
      border-bottom: 4px solid #409eff;
    }
    margin-bottom: 20px;
  }
  .customWidth {
    width: 550px !important;
  }
  .top-box {
    display: flex;
    justify-content: space-between;
  }
  .fr-second-toolbar {
    display: none;
  }
  #dialog {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #333;
    font-size: 14px;
    div {
      margin-bottom: 40px;
    }
  }
  .no-cv {
    margin-top: 30px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .text-right {
    display: inline-block;
    text-align: right;
  }
  .radio-input {
    display: flex;
    align-items: center;
    .el-input__inner {
      box-sizing: border-box;
      line-height: 30px;
      width: 112px;
      height: 28px !important;
      background: #ffffff;
      border: 1px solid #aab4cc;
      border-radius: 4px;
    }
  }
  .astrict-inpt {
    box-sizing: border-box;
    line-height: 30px;
    width: 112px;
    height: 28px !important;
    background: #ffffff;
    input {
      padding: 10px;
    }
  }
  .checkbox-box {
    display: flex;
    margin-bottom: 10px;
    .el-checkbox {
      margin-left: 5px;
      margin-right: 30px;
    }
  }
  .subject-text {
    padding-top: 20px;
  }
  .is-visible {
    margin-bottom: 20px;
    .el-checkbox {
      margin-left: 20px;
    }
  }
  .audio-content {
    display: flex;
    align-items: center;
    .test {
      flex-shrink: 0;
    }
    .upload-demo {
      display: flex;
      .el-upload-list {
        margin-left: 20px;
      }
    }
  }
  .cover-content {
    align-items: stretch;
    vertical-align: bottom;
    .img-content {
      position: relative;
      height: 200px;
      width: 200px;
      border: 1px solid #ccc;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .modify {
      position: absolute;
      bottom: 0;
      right: -50px;
      height: 20px;
      cursor: pointer;
      color: #409eff;
    }
  }

  .el-upload-list__item.is-success.focusing .el-icon-close-tip {
    display: none !important;
  }
}
.fr-visible {
  display: none !important;
}
.add-delete {
  display: flex;
  align-items: center;
  img {
    width: 18px;
  }
}
</style>