<template>
  <div class="detail-container">
    <el-page-header @back="goBack" sendText="添加规则"></el-page-header>

    <el-card shadow="never" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>基础配置</span>
      </div>
      <el-form
        ref="bascForm"
        :model="bascForm"
        :rules="bascFormRules"
        label-position="right"
        label-width="110px"
        style="overflow-y: scroll; padding-right: 20px"
      >
        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="bascForm.taskName"
            autocomplete="off"
            placeholder="请输入任务名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="触发条件" prop="type">
          <el-radio-group v-model="bascForm.type">
            <el-radio label="1">客户添加时间</el-radio>
            <el-radio label="2">标签</el-radio>
            <!-- <el-radio label="3">客户生日</el-radio> -->
          </el-radio-group>
        </el-form-item>

        <el-form-item label="开启推送" prop="status">
          <el-radio-group v-model="bascForm.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="选择标签"
          prop="selectLabel"
          v-if="bascForm.type == 2"
        >
          <el-button type="primary" @click="selectLabelFn">添加标签</el-button>
          <!-- <el-tag v-if="bascForm.tag[0].name" style="margin-left: 20px">{{
            bascForm.tag[0].name
          }}</el-tag> -->
          <div class="tags">
            <el-tag
              v-for="(it, idx) in bascForm.tags"
              :key="idx"
              style="margin-right: 6px; margin-top: 6px"
              >{{ it.name }}</el-tag
            >
          </div>
        </el-form-item>

        <el-form-item label="推送时间" prop="pushType">
          <el-radio-group v-model="bascForm.pushType">
            <el-radio label="1">当天</el-radio>
            <el-radio label="2">自定义</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="" prop="pushMin" v-if="bascForm.pushType == 1">
          <div style="display:flex">
            <span> 客户添加企业员工 </span>

           <div>
              <el-input
              v-model="bascForm.pushMin"
              autocomplete="off"
              placeholder=""
              style="width:100%"
            ></el-input>
            <div style="color: red">请输入大于0的正整数</div>
           </div>

            <span> 分钟后提醒员工发送 </span>
          </div>
        </el-form-item>

        <el-form-item label="" prop="pushDay" v-if="bascForm.pushType == 2">
          <div style="display:flex">
          
              <span> 客户添加企业员工 </span>
           
        <div>
          
              <el-input
                v-model="bascForm.pushDay"
                autocomplete="off"
                placeholder=""
              ></el-input>
              <div style="color: red">请输入大于0的正整数</div>
        </div>
           
         
              <span> 天的 </span>
           
          
             <div>
                <el-time-picker
                v-model="bascForm.pushDayMin"
                value-format="HH:mm"
                :picker-options="{
                  format: 'HH:mm',
                }"
                placeholder="任意时间点"
              >
              </el-time-picker>
              <div style="color: red">推送时间不能为空</div>
             </div>
          
           
              <span> 分钟后提醒员工发送 </span>
           
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>编辑发送内容</span>
      </div>
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        label-position="right"
        label-width="110px"
        style="overflow-y: scroll; padding-right: 20px"
      >
        <el-form-item label="推送类型" prop="sendType">
          <el-radio-group v-model="editForm.sendType" @change="swtichTab">
            <el-radio
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.label"
              >{{ item.text }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="发送内容"
          prop="sendText"
          v-if="editForm.sendType === 1||editForm.sendType === 5"
        >
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="请输入文字内容"
              v-model="editForm.sendText"
              maxlength="300"
              show-word-limit
              disabled
            >
            </el-input>
          </el-col>
          <el-col :span="12" style="padding: 118px 0 0 10px">
            <el-button type="primary" @click="selectSourceMaterial"
              >从素材库选择</el-button
            >
          </el-col>
        </el-form-item>

        <el-form-item
          label="网页标题"
          prop="sendUrlName"
          v-if="editForm.sendType == 4"
        >
          <el-col :span="12">
            <el-input
              placeholder="请输入网页标题"
              v-model="editForm.sendUrlName"
            >
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="文件标题"
          prop="sendFileName"
          v-if="editForm.sendType == 6"
        >
          <el-col :span="12">
            <el-input
              placeholder="请输入文件标题"
              v-model="editForm.sendFileName"
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="网页地址"
          prop="sendUrl"
          v-if="editForm.sendType == 4"
        >
          <el-col :span="12">
            <el-input placeholder="请输入网页地址" v-model="editForm.sendUrl">
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="标题"
          prop="sendUrlName"
          v-if="
            editForm.sendType == 2 ||
            editForm.sendType == 3 
            
          "
        >
          <el-col :span="12">
            <el-input
              :rows="1"
              placeholder="请输入标题"
              v-model="editForm.sendUrlName"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-col>
        </el-form-item>

        <!-- <el-form-item
          label="appid"
          prop="sendAppid"
          v-if="editForm.sendType == 5"
        >
          <el-col :span="12">
            <el-input
              placeholder="请输入小程序sendAppid"
              v-model="editForm.sendAppid"
            >
            </el-input>
          </el-col>
        </el-form-item> -->

        <!-- <el-form-item label="路径" prop="sendUrl" v-if="editForm.sendType == 5">
          <el-col :span="12">
            <el-input
              placeholder="请输入页面路径,并以.html结尾"
              v-model="editForm.sendUrl"
            >
            </el-input>
          </el-col>
        </el-form-item> -->

        <!-- <el-form-item
          label="标题"
          prop="sendUrlName"
          v-if="editForm.sendType == 5"
        >
          <el-col :span="12">
            <el-input
              :rows="1"
              placeholder="请输入标题"
              v-model="editForm.sendUrlName"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-col>
        </el-form-item> -->

        <el-form-item
          :label="uploadLabelTips[0]"
          prop="sendFile"
          v-if="editForm.sendType !== 1&&editForm.sendType !== 5"
          
        >
          <div style="display:flex;">
 <el-upload
              disabled
              drag
              :action="baseURL + 'common/upload'"
              :headers="myHeaders"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore"
              
            >
              <img
                v-if="
                  (editForm.sendType === 2 ||
                    editForm.sendType === 4)&&
                  editForm.sendFile"
                :src="editForm.sendFile"
                style="width: 100%; height: 100%"
              />
              <div v-else-if="editForm.sendType === 6 && editForm.sendFile">
                <img
                  class="file"
                  src="@/assets/common/word.png"
                  v-if="checkFileType(editForm.sendFile) == 'word'"
                />
                <img
                  class="file"
                  src="@/assets/common/excel.png"
                  v-if="checkFileType(editForm.sendFile) == 'excel'"
                />
                <img
                  class="file"
                  src="@/assets/common/ppt.png"
                  v-if="checkFileType(editForm.sendFile) == 'ppt'"
                />
                <img
                  class="file"
                  src="@/assets/common/pdf.png"
                  v-if="checkFileType(editForm.sendFile) == 'pdf'"
                />
              </div>
              <video
                v-else-if="editForm.sendType === 3 && editForm.sendFile"
                class="video"
                :src="editForm.sendFile"
                controls
              ></video>
              <div v-else>
                <!-- <i class="el-icon-upload"></i> -->
                <div class="el-upload__text" >
                  <!-- 将文件拖到此处，或<em>点击上传</em> -->
                  请点击从素材库选择
                </div>
              </div>
              <div class="el-upload__tip" slot="tip">
                {{ uploadLabelTips[1] }}
              </div>
            </el-upload>
         

         <div>
            <el-button
              type="primary"
              style="margin:135px 0 0 20px;"
              @click="selectSourceMaterial"
              >从素材库选择</el-button
            ></div>
          </div>
           
         
        </el-form-item>

        <el-form-item
          label=""
          prop="sendText"
          v-if="editForm.sendType == 2 || editForm.sendType == 3"
        >
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="附加文字信息(选填)"
              v-model="editForm.sendText"
              maxlength="300"
              show-word-limit
            >
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="网页描述"
          prop="sendText"
          v-if="editForm.sendType == 4"
        >
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="7"
              placeholder="附加文字信息(必填)"
              v-model="editForm.sendText"
              maxlength="300"
              show-word-limit
            >
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button type="primary" @click="submitForm" :loading="formLoading">{{
          formLoading ? "提交中 ..." : "提 交"
        }}</el-button>
        <el-popconfirm
          title="确定关闭吗？"
          @onConfirm="goBack"
          style="margin-left: 10px"
        >
          <el-button slot="reference">关 闭</el-button>
        </el-popconfirm>
      </div>
    </div>

    <!-- 选择标签弹窗 -->
    <el-dialog
      title="选择标签"
      :visible.sync="isLabelShow"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <!-- <el-form
        ref="addChildForm"
        :model="addChildForm"
        :rules="addChildFormRules"
        label-position="left"
      >
       
        <el-form-item
          :label="item"
          prop=""
          v-for="(item, index) in tagGroupNameList"
          :key="index"
        >
          <div style="margin-left: 88px">
            <el-tag
              :color="curTagIndex==index ?'#ecf5ff':'#fff'"
              style="margin:0 20px 20px 0"
              v-for="(item, index) in tagList"
              :key="index"
              @click="selectTag(item,index)"
              >{{ item.name }}</el-tag
            >
         
          </div>
        </el-form-item>

        <el-form-item label="标签小类名称" prop="">
          <div style="margin-left: 88px">
            <el-tag
              style="margin:0 20px 20px 0"
              v-for="(item, index) in tagList"
              :key="index"
              >{{ item }}</el-tag
            >
          </div>
        </el-form-item>
      </el-form> -->

      <div class="tag-list">
        <div class="group" v-for="(item, index) in tagList" :key="index">
          <div class="title">{{ item.tagGroupName }}</div>
          <div class="tags">
            <el-tag
              v-for="(it, idx) in item.tags"
              :key="idx"
              :type="it.checked ? '' : 'info'"
              :effect="it.checked ? 'dark' : 'plain'"
              size="medium"
              @click="clickTag(index, idx)"
              >{{ it.name }}</el-tag
            >
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddChildForm">取 消</el-button>
        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择素材 -->
    <el-dialog
      title="选择素材"
      :visible.sync="sourceMaterialVisible"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="sourceMaterial"
        :model="sourceMaterial"
        :rules="sourceMaterialRules"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :xs="8" :sm="8" :lg="8">
            <el-form-item label="标题" prop="title">
              <el-input
                placeholder="请输入标题"
                v-model="sourceMaterial.title"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :lg="8">
            <el-form-item label="分组" prop="title">
              <el-select v-model="ground" placeholder="请选择" >
                <el-option
                  v-for="item in sourceMaterial.ground"
                  :key="item.marketingGroupId"
                  :label="item.groupName"
                  :value="item.groupName"
                  @click.native="getMaterialListFn(item)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :lg="8">
            <el-button type="primary" @click="queryFn">查询</el-button>
            <el-button @click="ResetFn">重置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" v-for="(item, index) in dataList" :key="index">
            <el-card class="box-card" style="margin-right: 20px">
              <div class="body" @click="checkMeterial(item, index)">
                <!-- <div class="info">
                    <div class="ellipsis">{{item.createName}}</div>
                    <div>{{item.createTime | dateToMinFilter}}</div>
                  </div> -->
                <div
                  class="content"
                  v-if="editForm.sendType === 1"
                  style="text-align: center"
                >
                 
                    <div class="text" slot="reference">{{ item.content }}</div>
                 
                </div>
                <div
                  v-if="
                    editForm.sendType === 2 ||
                    editForm.sendType === 4 
                   
                  "
                  style="text-align:center"
                >
                  <el-image
                    class="img"
                    fit="cover"
                    :src="item.fileUrl"
                    style="height: 186px"
                  ></el-image>
                </div>
                <div v-if="editForm.sendType === 3">
                  <video
                    class="video"
                    :src="item.fileUrl"
                    controls
                    style="width: 100%; height: 170px"
                  ></video>
                </div>
                <div
                  class="file"
                  v-if="editForm.sendType === 6"
                  style="text-align: center"
                >
                  <img
                    src="@/assets/common/word.png"
                    v-if="checkFileType(item.fileUrl) == 'word'"
                  />
                  <img
                    src="@/assets/common/excel.png"
                    v-if="checkFileType(item.fileUrl) == 'excel'"
                  />
                  <img
                    src="@/assets/common/ppt.png"
                    v-if="checkFileType(item.fileUrl) == 'ppt'"
                  />
                  <img
                    src="@/assets/common/pdf.png"
                    v-if="checkFileType(item.fileUrl) == 'pdf'"
                  />
                </div>
                <div
                  class="title ellipsis"
                  style="text-align: center"
                  v-if="editForm.sendType !== 1"
                >
                  {{ item.title }}
                </div>
                <div class="maskbody" v-if="curIndex == index">
                  <i class="el-icon-circle-check"></i>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelsourceMaterial">取 消</el-button>
        <el-button type="primary" @click="submitsourceMaterial"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialList, getTagList,getGroupList } from "@/api/marketing";
import { getToken } from "@/utils/auth";

export default {
  props: ["listItem"],
  data() {
    return {
     
  deepCloneListItem:[], // 深拷贝后的listItem
      checkedGroupId:"", // 点击素材分组获取到的id
      switchTab: false, // 开启切换
      curTagIndex: 0,
      tagColor: false,
      tagGroupNameList: [], // 大类标签列表
      tagList: [], // 小类标签列表
      checkMask: false,
      curIndex: 0,
      checkFileUrl: "", // 素材勾选文本
      checkFileUrl: "", // 素材勾选图片 网页 短视频 文件
      checkMarktingMateriaLsId: "", // 素材勾选id
      currentPage: 1, // 页号
      pageSize: 10, //页大小
      dataList: null, // 素材列表
      sourceMaterialVisible: false, // 选择素材弹窗
      sourceMaterial: {
        ground: [
          // {
          //   value: "第一组",
          //   label: "第一组",
          // },
          // {
          //   value: "家电",
          //   label: "家电",
          // },
        ],
      }, // 素材表单
      ground: "", // 素材分组
      sourceMaterialRules: {}, // 素材校验
      typeList: [
        { label: 1, text: "文本" },
        { label: 2, text: "图片" },
        { label: 3, text: "短视频" },
        { label: 4, text: "网页" },
        { label: 5, text: "小程序" },
        { label: 6, text: "文件" },
      ],
      sendType: 1,

      addChildForm: {},
      addChildFormRules: [],

      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { "x-token": getToken() },
      formLoading: false,
      isLabelShow: false, // 选择标签弹窗
      // 基础配置
      bascForm: {
        taskName: "", // 任务名称
        type: "1", // 触发条件  客户添加时间  标签  客户生日
        status: "1", // 开启推送
        pushType: "1", // 推送时间 当天 自定义
        pushMin: "", // 几分钟后提醒发送
        pushDay: "", // 几天后提醒
        // time1: new Date(2022, 4, 6, 18, 40),
        pushDayMin: "", // 几点发送 格式(3:00)
        selectLabel: "", // 选择标签
        tags: [],
      },
      // 基础配置校验
      bascFormRules: {
        taskName: [
          { required: true, message: "请填写任务名称", trigger: "blur" },
        ],
        triggerCondition: [
          { required: true, message: "请选择触发条件", trigger: "blur" },
        ],
        startPush: [
          { required: true, message: "请选择开启推送", trigger: "blur" },
        ],
        pushType: [
          { required: true, message: "请填写推送时间", trigger: "blur" },
        ],
        pushMin: [
          {
            required: true,
            message: "请填写几分钟后提醒推送",
            trigger: "blur",
          },
        ],
        pushDay: [
          { required: true, message: "请填写几天后提醒", trigger: "blur" },
        ],
        pushDayMin: [
          { required: true, message: "请填写几点发送", trigger: "blur" },
        ],
      },
      editForm: {
        // 编辑发送内容
        sendText: "", //  发送内容 网页描述
        sendType: 1, // 推送类型   1 : 文本
        sendUrlName: "", // 网页标题 小程序标题
        sendUrl: "", // 网页地址 小程序路径
        sendFileName: "", // 文件标题
        sendFile: "", // 发送图片/视频/文件
        sendAppid: "", // 小程序sendAppid
        marketingMaterialsId: "", // 关联素材id
      
      },
      editFormRules: {
        // 编辑发送内容校验
        sendType: [
          { required: true, message: "请选择推送类型", trigger: "blur" },
        ],
        sendText: [
          { required: true, message: "请填写发送内容", trigger: "blur" },
        ],
        sendFile: [
          { required: true, message: "请填写上传文件", trigger: "blur" },
        ],
        sendUrlName: [
          { required: true, message: "请填写网页标题", trigger: "blur" },
        ],
        sendUrl: [
          { required: true, message: "请填写网页地址", trigger: "blur" },
        ],
       
        // sendText: [
        //   { required: true, message: "请填写网页描述", trigger: "blur" },
        // ],
        sendFileName: [
          { required: true, message: "请填写标题", trigger: "blur" },
        ],
        sendUrlName: [
          { required: true, message: "请填写标题", trigger: "blur" },
        ],
        sendAppid: [
          { required: true, message: "请填写小程序sendAppid", trigger: "blur" },
        ],
        sendUrl: [
          { required: true, message: "请填写页面路径", trigger: "blur" },
        ],
      },
      fileList: [
        {
          name: "food.pdf",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  created() {
    if (this.listItem) {
      console.log("点击编辑传递的数据", this.listItem);
    //  this.deepCloneListItem= this.deepClone(this.listItem)
    //  console.log( this.deepCloneListItem)
    this.deepCloneListItem = JSON.parse(JSON.stringify(this.listItem))
     
      
      this.bascForm = this.listItem;
      this.bascForm.type = String(this.listItem.type);
      this.bascForm.status = String(this.listItem.status);
      this.bascForm.pushType = String(this.listItem.pushType);
      console.log(this.listItem.tags);
      if (this.listItem.tags !== undefined) {
        this.bascForm.tags = this.listItem.tags;
      }

      // console.log(typeof this.bascForm.sendType)

      this.editForm = this.listItem;

      // console.log(this.bascForm, this.editForm);

    }
    this.getList();
    this.getTagList();
    this.getGroupList()
  },
  updated(){
    console.log('updated',this.listItem)
    
  },

  computed: {
    uploadLabelTips() {
      const MAP = {
        1: ["", ""],
        2: ["图片", "支持png、jpg、jpeg格式，大小不超过2M"],
        3: ["短视频", "支持MP4格式，大小不超过10M"],
        4: ["封面图", "支持png、jpg、jpeg格式，大小不超过1M"],
        5: ["封面图", "支持EXCEL/WORD/PPT/PDF，大小不超过20M"],
        6: ["文件", "支持png、jpg、jpeg格式，大小不超过2M"],
      };
      return MAP[this.editForm.sendType];
    },
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
      };
    },
  },
  methods: {
    // 深拷贝
//     deepClone(obj) {
//   var _obj = JSON.stringify(obj),
//     objClone = JSON.parse(_obj);
//   return objClone;
// },
    // 查询
    queryFn(){
      if(this.sourceMaterial.title!==""||this.ground!==""){
           const params= {
          groupId:this.checkedGroupId,
           pageNum: this.currentPage,
        pageSize: this.pageSize,
        type: this.editForm.sendType,
        title:this.sourceMaterial.title
        }
        getMaterialList(params).then(it=>{
          console.log('点击素材分组获取素材列表',it)
           it.data.records.forEach((item) => {
            item.selected = false;
          });

          this.dataList = it.data.records;
          console.log(this.dataList);
        }).catch(it=>{
          this.dataList=[]
        })
      }
      

    },
    // 重置
    ResetFn(){
      this.getList()
      this.sourceMaterial.title=""
      this.ground=""
      this.dataList=[]

    },
    // 点击素材分组获取素材列表
    getMaterialListFn(item){
          // console.log(this.sourceMaterial.ground,this.ground)
          this.checkedGroupId=item.marketingGroupId

       
    },
    // 获取所有素材分组
    getGroupList(){
       
        getGroupList().then(res=>{
          console.log('获取所有素材分组',res)
          this.sourceMaterial.ground=res.data
        //  const groupNameList= res.data.map(item=>{
        //     return item.groupName
        //   })

        })
    },
    // 切换类型
    swtichTab() {
      this.bascForm.taskName=""
      this.editForm.sendText = "";
      this.editForm.sendUrlName = "";
      this.editForm.sendUrl = "";
      this.editForm.sendFileName = "";
      this.editForm.sendFile = "";
      this.editForm.sendAppid = "";
       this.$refs.editForm.clearValidate();
       console.log('点击切换',this.editForm)
    },
    // 选择标签
    clickTag(pidx, cidx) {
      let tagGroup = this.tagList[pidx];
      tagGroup.tags[cidx].checked = !tagGroup.tags[cidx].checked;

      this.$set(this.tagList, pidx, tagGroup);
    },
    // 选择标签
    selectTag(item, index) {
      console.log(item, index);
      this.bascForm.tag[0] = item;
      this.curTagIndex = index;

      console.log(this.bascForm.tag[0]);
    },
    // 获取标签组列表
    getTagList() {
      getTagList().then((res) => {
        console.log(res);

        this.tagList = res.data || [];
        console.log(this.tagList);

        // this.tagGroupNameList = res.data.map((item) => {
        //   return item.tagGroupName;
        // });
        // console.log(this.tagGroupNameList);
        // const tagList = res.data.map((item) => {
        //   return item.tags;
        // });
        // console.log(tagList);
        // this.tagList = tagList[0];

        // console.log(this.tagList);
      });
    },

    // 勾选素材
    checkMeterial(item, index) {
      console.log(item, index);
      console.log("确定勾选");
      this.curIndex = index;
      //  this.editForm.sendFile = item.fileUrl;
      //  this.editForm.sendText=item.content
      //  this.editForm.marketingMaterialsId=item.marketingMaterialsId

      // 发送图片 短视频 文件
      this.checkFileUrl = item.fileUrl;
      // 发送内容
      this.checkContent = item.content;
      // 小程序 appid
      this.editForm.sendAppid = item.appid;
      // 小程序 路径
      this.editForm.sendUrl = item.page;
      // 网页地址
      this.editForm.sendUrl=item.url
      // 文件标题
      this.editForm.sendFileName = item.title;
      // 标题
      this.editForm.sendUrlName = item.title;
      // 网页地址
      // this.editForm.sendUrl = item.fileUrl;
      // 网页描述
      // this.editForm.sendText = item.content;
      // 素材id
      this.editForm.marketingMaterialsId = item.marketingMaterialsId;
      // 是否开启切换
      this.switchTab = true;
    },

    // 从素材库选择
    selectSourceMaterial() {
      this.sourceMaterialVisible = !this.sourceMaterialVisible;
      this.getList();
    },
    // 获取素材列表
    getList() {
      this.dataList = [];
      this.listLoading = true;

      let params = {
        title: "",
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        type: this.editForm.sendType,
        groupId: "",
      };

      getMaterialList(params)
        .then((res) => {
          console.log(res);
          // 给数组每个对象添加一个属性，默认为false
          res.data.records.forEach((item) => {
            item.selected = false;
          });

          this.dataList = res.data.records;
          console.log(this.dataList);
          // if(this.dataList[0].type==5){
          //       this.editForm.sendAppid=this.dataList[0].appid
          // this.editForm.sendUrl=this.dataList[0].page
          // this.editForm.sendFileName=this.dataList[0].title
          // }

          // this.listTotal = res.data.total;
          // this.listLoading = false;
        })
        .catch((res) => {
          this.dataList = [];
        });
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return "";
      const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
      const wordList = ["doc", "docx", "dot", "wps", "wpt"];
      const excelList = ["xls", "xlsx", "xlt", "et", "ett"];
      const pptList = ["ppt", "pptx", "dps", "dpt", "pot", "pps"];
      const pdfList = ["pdf"];

      if (wordList.indexOf(fileSuffix) >= 0) {
        return "word";
      } else if (excelList.indexOf(fileSuffix) >= 0) {
        return "excel";
      } else if (pptList.indexOf(fileSuffix) >= 0) {
        return "ppt";
      } else if (pdfList.indexOf(fileSuffix) >= 0) {
        return "pdf";
      } else {
        return "";
      }
    },
    // 取消素材
    cancelsourceMaterial() {
      console.log("取消");
      this.sourceMaterialVisible = false;
     
      console.log(this.listItem)
      if(this.listItem){
           this.editForm = this.listItem;
      }
      
    },
    // 确定素材
    submitsourceMaterial() {
      console.log("确定素材");
      this.sourceMaterialVisible = false;

      // 发送图片,短视频,文件
      this.editForm.sendFile = this.checkFileUrl;
      console.log(this.editForm.sendFile);
      // 发送内容
      this.editForm.sendText = this.checkContent;
    },
    // 图片 - 上传成功
    uploadSuccess(res, file) {
      this.editForm.sendFile = res.data.url;
    },
    // 图片 - 上传前
    uploadBefore(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const imgList = ["jpg", "jpeg", "png"];
      const videoList = ["mp4"];
      const fileList = [
        "doc",
        "docx",
        "dot",
        "wps",
        "wpt",
        "xls",
        "xlsx",
        "xlt",
        "et",
        "ett",
        "ppt",
        "pptx",
        "dps",
        "dpt",
        "pot",
        "pps",
        "pdf",
      ];

      if (
        (this.editForm.sendType === 2 ||
          this.editForm.sendType === 4 ||
          this.editForm.sendType === 5) &&
        imgList.indexOf(fileSuffix) === -1
      ) {
        this.$errorMsg("只支持上传jpg/jpeg/png文件!");
        return false;
      }
      if (
        this.editForm.sendType === 3 &&
        videoList.indexOf(fileSuffix) === -1
      ) {
        this.$errorMsg("只支持上传mp4文件!");
        return false;
      }
      if (this.editForm.sendType === 6 && fileList.indexOf(fileSuffix) === -1) {
        this.$errorMsg("只支持上传excel/word/ppt/pdf文件!");
        return false;
      }
    },
    // 检查文件类型
    checkFileType(url) {
      if (!url) return "";
      const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
      const wordList = ["doc", "docx", "dot", "wps", "wpt"];
      const excelList = ["xls", "xlsx", "xlt", "et", "ett"];
      const pptList = ["ppt", "pptx", "dps", "dpt", "pot", "pps"];
      const pdfList = ["pdf"];

      if (wordList.indexOf(fileSuffix) >= 0) {
        return "word";
      } else if (excelList.indexOf(fileSuffix) >= 0) {
        return "excel";
      } else if (pptList.indexOf(fileSuffix) >= 0) {
        return "ppt";
      } else if (pdfList.indexOf(fileSuffix) >= 0) {
        return "pdf";
      } else {
        return "";
      }
    },
    // 返回主页
    goBack() {
      //  this.$refs.bascForm.validate((valid) => {
      //     if (valid) {
      //       this.$refs.editForm.validate((valid) => {
      //         if (valid) {
                
      //           this.$emit("backListFormDetail");
      //         }
      //       });
      //     } else {
      //     }
      //   });

        
 this.$emit("backListFormDetail",this.deepCloneListItem);

     
      //  this.$router.go(-2);
    },
    // 提交
    submitForm() {
      if (this.listItem) {
        console.log('1118')
           this.$refs.bascForm.validate((valid) => {
          if (valid) {
            this.$refs.editForm.validate((valid) => {
              if (valid) {
                
                this.$emit("backListFormDetail",{
                  ...this.bascForm,
                  ...this.editForm,
                });
              }
            });
          } else {
          }
        });
        // this.$emit("backListFormDetail");
        
      } else {
        this.$refs.bascForm.validate((valid) => {
          if (valid) {
            this.$refs.editForm.validate((valid) => {
              if (valid) {
                this.$emit("sopRuleAdd", {
                  ...this.bascForm,
                  ...this.editForm,
                });
                // this.$emit("backListFormDetail",{
                //    ...this.bascForm,
                //   ...this.editForm,
                // });
              }
            });
          } else {
          }
        });
      }
    },

    // 显示添加标签
    selectLabelFn() {
      console.log("添加标签");
      this.isLabelShow = true;
    },
    // 提交选择标签弹窗
    submitAddChildForm() {
      console.log("提交选择标签");
      // this.customerServiceShow = false;
      let checkedlist = [];
      this.tagList.forEach((item) => {
        item.tags.forEach((it) => {
          if (it.checked) {
            checkedlist.push(it);
          }
        });
      });

      // this.mainForm.tags = this.delRepeat(this.mainForm.tags, checkedlist);
      this.bascForm.tags = checkedlist;
      console.log(this.bascForm.tags);
      this.isLabelShow = false;
    },
    // 取消选择标签弹窗
    cancelAddChildForm() {
      this.isLabelShow = false;
      // this.$refs.addChildForm.resetFields();
    },

    // 文件  - 上传成功
    // uploadSuccess3(res, file) {
    //   this.editForm.cover = res.data.url;
    // },
    // 文件  - 上传前
    // beforeUpload3(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    //   const whiteList = ["excel", "word", "ppt", "txt", "zip", "pdf"];
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$errorMsg("文件只能是execel/word/ppt/txt/zip/pdf格式,且不超过10M");
    //     return false;
    //   }
    // },
    // 图片  - 上传成功
    // uploadSuccess(res, file) {
    //   this.editForm.imgUrl = res.data.url;
    // },
    // 图片  - 上传前
    // beforeUpload(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    //   const whiteList = ["jpg", "jpeg", "png"];
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$errorMsg("只支持上传JPG/PNG文件,且不超过2M!");
    //     return false;
    //   }
    // },
    // 短视频 - 上传成功
    // uploadSuccess1(res, file) {
    //   this.editForm.videoUrl = res.data.url;
    // },

    // 短视频 - 上传前
    // beforeUpload1(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    //   const whiteList = ["mp4"];
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$errorMsg("只支持上传mp4格式!");
    //     return false;
    //   }
    // },
    // 图片  - 上传成功
    // uploadSuccess2(res, file) {
    //   this.editForm.cover = res.data.url;
    // },
    // 图片  - 上传前
    // beforeUpload2(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    //   const whiteList = ["jpg", "jpeg", "png"];
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$errorMsg("只支持上传JPG/PNG文件,且不超过1M!");
    //     return false;
    //   }
    // },
    // 文件列表移除文件时
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // 点击文件列表中已上传的文件
    // handlePreview(file) {
    //   console.log(file);
    // },
    // 文件超出个数限制时
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
    //       files.length + fileList.length
    //     } 个文件`
    //   );
    // },
    // 删除文件之前
    //   beforeRemove(file, fileList) {
    //     return this.$confirm(`确定移除 ${file.name}？`);
    //   },
    // },
    // 文件  - 上传成功
    // uploadSuccess3(res, file) {
    //   this.editForm.cover = res.data.url;
    // },
    // 文件  - 上传前
    // beforeUpload3(file) {
    //   const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
    //   const whiteList = ["excel", "word", "ppt", "txt", "zip", "pdf"];
    //   if (whiteList.indexOf(fileSuffix) === -1) {
    //     this.$errorMsg("文件只能是execel/word/ppt/txt/zip/pdf格式,且不超过10M");
    //     return false;
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.body {
  position: relative;

  .maskbody {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #377cfd;
    font-weight: 700;
    // opacity: 0.5;
    background-color: hsla(0, 0%, 100%, 0.5);
  }
}

.page-footer {
  height: 70px;
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background: #fff;
    padding: 15px 40px;
    box-sizing: border-box;
    transition: all 0.28s;
    text-align: right;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
    &.hideSidebar {
      margin-left: 54px;
      width: calc(100vw - 54px);
    }
    &.openSidebar {
      margin-left: 210px;
      width: calc(100vw - 210px);
    }
  }
}
.tag-list {
  .group {
    border-bottom: 1px dashed #eaeaea;
    padding: 10px 0;
    &:first-child {
      padding-top: 0;
    }
    &:last-child {
      border: none;
    }
  }
  .tags {
    margin-top: 10px;
    span {
      margin-right: 6px;
      margin-bottom: 6px;
      cursor: pointer;
    }
  }
}
.el-upload__text{
  text-align: center;
  padding-top: 61px;
}
</style>