<template>
  <div>
    <!-- 筛选条件 -->
    <div class="screen-container">
      <el-form ref="screenForm" :model="screenForm" label-width="50px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="18" :sm="12" :lg="12">
            <el-form-item label="标题" prop="keyword">
              <el-input v-model="screenForm.keyword" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6">
            <el-form-item label="">
              <el-button size="small" @click="resetScreenForm">清空</el-button>
              <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="main-content">
      <div class="main-left">
        <el-button icon="el-icon-plus" type="primary" plain style="width: 100%;" @click="openAddGroupForm('add')">新建分组</el-button>
        <div class="list">
          <div class="item" :class="activeGroup === '' ? 'active':''" @click="changeGroup('')">
            <div class="title">所有分组</div>
          </div>
          <div class="item" :class="activeGroup === item.marketingGroupId ? 'active':''" v-for="(item, index) in groupList" :key="index" @click="changeGroup(item.marketingGroupId)">
            <div class="title">{{item.groupName}}</div>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-more icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="['edit', item]">修改名称</el-dropdown-item>
                <el-dropdown-item :command="['del', item]">删除分组</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="main-right">
        <el-radio-group v-model="activeType" size="small" @change="getList">
          <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.label">{{item.text}}</el-radio-button>
        </el-radio-group>
        <el-divider></el-divider>
        <div class="btn-group">
          <div class="left">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="openMainForm('add')">新建素材</el-button>
            <div class="tips" v-show="activeType === 2">图片支持png、jpg、jpeg格式，大小不超过2M</div>
            <div class="tips" v-show="activeType === 3">视频支持MP4格式，大小不超过10M</div>
            <div class="tips" v-show="activeType === 6">文件支持excel/word/ppt/pdf，大小不超过20M</div>
          </div>
          <div>
            <el-button size="small" type="primary" plain @click="clickMove">移至分组</el-button>
          </div>
        </div>

        <div class="list-container" v-if="dataList && dataList.length > 0">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="8" :lg="6" style="margin-bottom: 20px" v-for="(item, index) in dataList" :key="index">
              <el-card class="box-card">
                <div slot="header" class="header">
                  <el-checkbox v-model="item.selected"></el-checkbox>
                  <div>
                    <el-button icon="el-icon-edit" size="small" circle @click="openMainForm('edit', item.marketingMaterialsId)"></el-button>
                    <el-button icon="el-icon-delete" size="small" circle @click="deleteMaterial(item.marketingMaterialsId)"></el-button>
                  </div>
                </div>
                <div class="body">
                  <div class="title ellipsis">{{item.title}}</div>
                  <div class="info">
                    <div class="ellipsis">{{item.createName}}</div>
                    <div>{{item.createTime | dateToMinFilter}}</div>
                  </div>
                  <div class="content" v-if="activeType === 1 || activeType === 5">
                    <el-popover placement="top-start" width="200" trigger="hover" :content="item.content">
                      <div class="text" slot="reference">{{item.content}}</div>
                    </el-popover>
                  </div>
                  <div v-if="activeType === 2 || activeType === 4">
                    <el-image class="img" fit="cover" :src="item.fileUrl" :preview-src-list="[item.fileUrl]"></el-image>
                  </div>
                  <div v-if="activeType === 3">
                    <video class="video" :src="item.fileUrl" controls></video>
                  </div>
                  <div class="file" v-if="activeType === 6">
                    <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'">
                    <el-button type="text" icon="el-icon-download" @click="downloadFiles(item.fileUrl)">下载</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="empty" v-else>
          <img src="@/assets/common/empty.png" alt="">
          <div>暂无数据</div>
        </div>

        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[12, 24, 36, 60]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="listTotal">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增编辑分组 -->
    <el-dialog :title="addGroupFormType == 'add' ? '新建分组':'编辑分组'" :visible.sync="addGroupFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addGroupForm" :model="addGroupForm" :rules="addGroupFormRules" label-position="left" label-width="80px">
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="addGroupForm.name" autocomplete="off" placeholder="请输入分组名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddGroupForm">取 消</el-button>
        <el-button type="primary" @click="submitAddGroupForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 移至分组 -->
    <el-dialog title="移至分组" :visible.sync="moveGroupFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="moveGroupForm" :model="moveGroupForm" :rules="moveGroupFormRules" label-position="left" label-width="80px">
        <el-form-item label="选择分组" prop="group">
          <el-select v-model="moveGroupForm.group" placeholder="选择分组">
            <el-option :label="item.groupName" :value="item.marketingGroupId" v-for="item in groupList" :key="item.marketingGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMoveGroupForm">取 消</el-button>
        <el-button type="primary" @click="submitMoveGroupForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增编辑素材 -->
    <el-dialog :title="mainFormType == 'add' ? '新建素材':'编辑素材'" :visible.sync="mainFormVisible" :show-close="false" width="60%" :close-on-click-modal="false">
      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-position="right" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="mainForm.title" autocomplete="off" placeholder="请输入标题" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content" v-if="activeType === 1 || activeType === 5">
          <el-input type="textarea" :rows="8" v-model="mainForm.content" autocomplete="off" placeholder="请输入内容" maxlength="1600" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="URL" prop="webUrl" v-if="activeType === 4">
          <el-input v-model="mainForm.webUrl" autocomplete="off" placeholder="请输入URL"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="webRemark" v-if="activeType === 4">
          <el-input type="textarea" :rows="2" v-model="mainForm.webRemark" autocomplete="off" placeholder="请输入摘要" maxlength="150" show-word-limit></el-input>
        </el-form-item>

        <el-form-item :label="uploadLabelTips[0]" prop="fileUrl" v-if="activeType !== 1 && activeType !== 5">
          <el-upload
            drag
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="uploadBefore">
            <img v-if="(activeType === 2 || activeType === 4) && mainForm.fileUrl" :src="mainForm.fileUrl">
            <div v-else-if="activeType === 6 && mainForm.fileUrl">
              <img class="file" src="@/assets/common/word.png" v-if="checkFileType(mainForm.fileUrl) == 'word'">
              <img class="file" src="@/assets/common/excel.png" v-if="checkFileType(mainForm.fileUrl) == 'excel'">
              <img class="file" src="@/assets/common/ppt.png" v-if="checkFileType(mainForm.fileUrl) == 'ppt'">
              <img class="file" src="@/assets/common/pdf.png" v-if="checkFileType(mainForm.fileUrl) == 'pdf'">
            </div>
            <video v-else-if="activeType === 3 && mainForm.fileUrl" class="video" :src="mainForm.fileUrl" 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>
        </el-form-item>

        <!-- <el-form-item label="" v-if="activeType === 4 || (activeType === 6 && checkFileType(mainForm.fileUrl) == 'pdf')"> -->
        <el-form-item label="" v-if="false">
          <div>
            <el-checkbox v-model="mainForm.isUseDynamic">启用为动态素材</el-checkbox>
            <el-popover
              class="question"
              placement="right"
              width="260"
              trigger="hover"
              content="启用动态素材后, 可以跟踪客户的查看记录，向关联的员工发送提醒。并支持对查看素材的客户自动打标签。">
              <i class="el-icon-question" slot="reference" style="color: #409EFF"></i>
            </el-popover>
          </div>
          <div v-show="mainForm.isUseDynamic" style="margin-left: 25px">
            <div><el-checkbox v-model="mainForm.isNotice_xw">行为通知（当客户点击智能素材时，发送智能素材的员工将会收到消息提醒）</el-checkbox></div>
            <div><el-checkbox v-model="mainForm.isNotice_dt">动态通知（当客户点击智能素材时，将会在客户动态增加浏览记录）</el-checkbox></div>
            <div><el-checkbox v-model="mainForm.isNotice_kh">客户标签（自动给打开智能素材的客户打标签）</el-checkbox></div>
            <div v-show="mainForm.isNotice_kh" style="margin-left: 25px">
              <div><el-button size="small" icon="el-icon-plus" @click="openAddTagDialog">添加标签</el-button></div>
              <div class="tags">
                <el-tag v-for="(it, idx) in mainForm.tags" :key="idx" style="margin-right: 6px; margin-top: 6px;">{{it.name}}</el-tag>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMainForm">取 消</el-button>
        <el-button type="primary" @click="submitMainForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加标签 -->
    <el-dialog title="添加标签" :visible.sync="addTagVisible" :show-close="false" width="500px" :close-on-click-modal="false">
      
      <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="addTagVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddTag">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { 
  getGroupList, addGroup, editGroup, deleteGroup, 
  getMaterialList, addMaterial, editMaterial, deleteMaterial, moveGroup, getMaterialDetail, getTagList
} from "@/api/marketing";

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: {'x-token': getToken()},
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      screenForm: {
        keyword: '',
      },
      activeGroup: '',
      groupList: [],

      editGroupId:  null,
      addGroupFormType: 'add',
      addGroupFormVisible: false,
      addGroupForm: {
        name: '',
      },
      addGroupFormRules: {
        name: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ],
      },

      moveGroupFormVisible: false,
      moveGroupForm: {
        group: '',
      },
      moveGroupFormRules: {
        group: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ],
      },

      typeList: [
        {label: 1, text: '文本'},
        {label: 2, text: '图片'},
        {label: 3, text: '视频'},
        {label: 4, text: '网页'},
        {label: 5, text: '小程序'},
        {label: 6, text: '文件'},
      ],
      activeType: 1,

      editId:  null,
      mainFormType: 'add',
      mainFormVisible: false,
      mainForm: {
        groupId: '',
        title: '',
        content: '',
        webUrl: '',
        webRemark: '',
        appid: '',
        page: '',
        fileUrl: '',
        isUseDynamic: false,
        isNotice_xw: false,
        isNotice_dt: false,
        isNotice_kh: false,
        tags: [],
      },
      mainFormRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        webUrl: [
          { required: true, message: '请输入URL', trigger: 'blur' }
        ],
        webRemark: [
          { required: true, message: '请输入摘要', trigger: 'blur' }
        ],
        appid: [
          { required: true, message: '请输入appid', trigger: 'blur' }
        ],
        page: [
          { required: true, message: '请输入page', trigger: 'blur' }
        ],
        fileUrl: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
      },

      tagList: [],
      addTagVisible: false,
    }
  },

  computed: {
    uploadLabelTips() {
      const MAP = {
        1: ['', ''],
        2: ['图片', '支持png、jpg、jpeg格式，大小不超过2M'],
        3: ['视频', '支持MP4格式，大小不超过10M'],
        4: ['封面图', '支持png、jpg、jpeg格式，大小不超过2M'],
        5: ['', ''],
        6: ['文件', '支持EXCEL/WORD/PPT/PDF，大小不超过20M'],
      }
      return MAP[this.activeType];
    }
  },

  created() {
    this.getGroupList();
    this.getList();
  },

  methods: {
    // 获取分组列表
    getGroupList() {
      getGroupList().then(res => {
        this.groupList = res.data;
      })
    },

    // 获取素材列表
    getList() {
      this.dataList = [];
      this.listLoading = true;

      let params = {
        title: this.screenForm.keyword,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        type: this.activeType,
        groupId: this.activeGroup
      }

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

        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      }).catch(res => {
        this.dataList = [];
      })
      
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1;
      this.getList();
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields();
      this.currentPage = 1;
      this.getList();
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getList();
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },

    // 点击 新建/编辑分组
    openAddGroupForm(type, item) {
      this.addGroupFormType = type;
      this.addGroupFormVisible = true;
      if(type == 'edit') {
        this.editGroupId = item.marketingGroupId;
        this.addGroupForm.name = item.groupName;
      }
    },

    // 取消 新建/编辑分组
    cancelAddGroupForm(){
      this.addGroupFormVisible = false;
      this.addGroupForm.name = '';
    },

    // 提交 新建/编辑分组
    submitAddGroupForm() {
      this.$refs.addGroupForm.validate((valid) => {
        if (valid) {
          let params = {
            groupName: this.addGroupForm.name
          }
          if(this.addGroupFormType == 'edit') {
            params.groupId = this.editGroupId;
            editGroup(params).then(res => {
              this.cancelAddGroupForm();
              this.getGroupList();
              this.$successMsg('编辑成功');
            })
          } else {
            addGroup(params).then(res => {
              this.cancelAddGroupForm();
              this.getGroupList();
              this.$successMsg('新增成功');
            })
          }
        }
      })
    },

    // 切换分组
    changeGroup(id) {
      this.activeGroup = id;
      this.getList();
    },

    // 操作分组
    handleCommand(command) {
      let type = command[0],
          item = command[1];
      if(type == 'del') {
        this.$confirm('此操作将删除该分组, 是否继续?', '删除分组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteGroup({groupId: item.marketingGroupId}).then(res => {
            this.$successMsg('删除成功');
            this.getGroupList();
          })
        }).catch(() => {});
      }
      if(type == 'edit') {
        this.openAddGroupForm('edit', item);
      }
    },

    // 点击 移至分组
    clickMove() {
      let selectedlist = [];
      this.dataList.forEach(item => {
        if(item.selected) {
          selectedlist.push(item.marketingMaterialsId);
        }
      });
      if(selectedlist.length < 1) {
        return this.$errorMsg('至少选择一个素材');
      }
      this.moveGroupFormVisible = true;
    },

    // 取消 移至分组
    cancelMoveGroupForm(){
      this.moveGroupFormVisible = false;
      this.$refs.moveGroupForm.resetFields();
    },

    // 提交 移至分组
    submitMoveGroupForm() {
      this.$refs.moveGroupForm.validate((valid) => {
        if (valid) {
          let selectedlist = [];
          this.dataList.forEach(item => {
            if(item.selected) {
              selectedlist.push(item.marketingMaterialsId);
            }
          });
          let params = {
            marketingMaterialsId: selectedlist.join(','),
            newGroupId: this.moveGroupForm.group
          }
          moveGroup(params).then(res => {
            this.cancelMoveGroupForm();
            this.getList();
            this.$successMsg('移组成功');
          })
        }
      })
    },

    // 检查文件类型
    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 '';
      }
		},

    // 下载文件
    downloadFiles(url) {
      window.open(url);
    },

    // 删除素材
    deleteMaterial(id) {
      this.$confirm('此操作将删除该素材, 是否继续?', '删除素材', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMaterial({marketingMaterialsId: id}).then(res => {
          this.$successMsg('删除成功');
          this.getList();
        })
      }).catch(() => {});
    },

    // 点击 新建/编辑素材
    openMainForm(type, id) {
      if(type == 'add' && !this.activeGroup) {
        return this.$errorMsg('请选择分组');
      }
      this.mainFormType = type;
      this.mainFormVisible = true;
      if(type == 'edit') {
        this.editId = id;
        getMaterialDetail({marketingMaterialsId: id}).then(res => {
          let data = res.data;
          this.mainForm.groupId = data.marketingGroupId;
          this.mainForm.title = data.title;
          this.mainForm.content = data.content;
          this.mainForm.fileUrl = data.fileUrl;
          this.mainForm.webUrl = data.url;
          this.mainForm.webRemark = data.abstractText;
          this.mainForm.isUseDynamic = data.dynamic;
          this.mainForm.isNotice_xw = data.dynamicBehavior;
          this.mainForm.isNotice_dt = data.dynamicNotice;
          this.mainForm.isNotice_kh = data.dynamicTitle;
          this.mainForm.tags = data.tag || [];
          this.mainForm.appid = data.appid;
          this.mainForm.page = data.page;
        })
      }
    },

    // 取消 新建/编辑素材
    cancelMainForm(){
      this.mainFormVisible = false;
      this.$refs.mainForm.resetFields();
      this.mainForm.isUseDynamic = false;
      this.mainForm.isNotice_xw = false;
      this.mainForm.isNotice_dt = false;
      this.mainForm.isNotice_kh = false;
      this.mainForm.tags = [];
    },

    // 提交 新建/编辑素材
    submitMainForm() {
      this.$refs.mainForm.validate((valid) => {
        if (valid) {
          let params = {
            type: this.activeType,
            title: this.mainForm.title,
          }
          if(this.activeType === 1 || this.activeType === 5) {
            params.content = this.mainForm.content;
          }else if(this.activeType === 2 || this.activeType === 3) {
            params.fileUrl = this.mainForm.fileUrl;
          }else if(this.activeType === 4) {
            params.url = this.mainForm.webUrl;
            params.abstractText = this.mainForm.webRemark;
            params.fileUrl = this.mainForm.fileUrl;
            params.dynamic = this.mainForm.isUseDynamic ? 1 : 0;
            params.dynamicBehavior = this.mainForm.isNotice_xw ? 1 : 0;
            params.dynamicNotice = this.mainForm.isNotice_dt ? 1 : 0;
            params.dynamicTitle = this.mainForm.isNotice_kh ? 1 : 0;
            if(this.mainForm.isNotice_kh) {
              params.tag = this.mainForm.tags;
            }
          }else if(this.activeType === 6) {
            params.fileUrl = this.mainForm.fileUrl;
            if(this.checkFileType(this.mainForm.fileUrl) == 'pdf') {
              params.dynamic = this.mainForm.isUseDynamic ? 1 : 0;
              params.dynamicBehavior = this.mainForm.isNotice_xw ? 1 : 0;
              params.dynamicNotice = this.mainForm.isNotice_dt ? 1 : 0;
              params.dynamicTitle = this.mainForm.isNotice_kh ? 1 : 0;
              if(this.mainForm.isNotice_kh) {
                params.tag = this.mainForm.tags;
              }
            }
          }
          if(this.mainFormType == 'edit') {
            params.marketingMaterialsId = this.editId;
            params.marketingGroupId = this.mainForm.groupId;
            editMaterial(params).then(res => {
              this.cancelMainForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          } else {
            params.marketingGroupId = this.activeGroup;
            addMaterial(params).then(res => {
              this.cancelMainForm();
              this.getList();
              this.$successMsg('新增成功');
            })
          }
        }
      })
    },

    // 获取标签列表
    getTagList() {
      getTagList().then(res => {
        res.data.forEach(item => {
          item.checked = false;
        });
        this.tagList = res.data || [];
      })
    },

    // 点击 添加标签
    openAddTagDialog() {
      this.getTagList();
      this.addTagVisible = true;
    },

    // 选择标签
    clickTag(pidx, cidx) {
      let tagGroup = this.tagList[pidx];
      tagGroup.tags[cidx].checked = !tagGroup.tags[cidx].checked;

      this.$set(this.tagList, pidx, tagGroup);
    },

    // 提交 添加标签
    submitAddTag() {
      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.mainForm.tags = checkedlist;
      this.addTagVisible = false;
    },

    // 数组去重
    delRepeat(arr1, arr2) {
      let allArr = arr1.concat(arr2); // 两个数组对象合并
      let newArr = []; // 存放去重后数据的新数组
      for(let i=0; i<allArr.length; i++){  // 循环allArr数组对象的内容
        let flag = true;  // 建立标记，判断数据是否重复，true为不重复
        for(let j=0; j<newArr.length; j++){  // 循环新数组的内容
          if(allArr[i].tagId == newArr[j].tagId){ // 让allArr数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
            flag = false;
          }
        }
        if(flag){ // 判断是否重复
          newArr.push(allArr[i]); // 不重复的放入新数组。  新数组的内容会继续进行上边的循环。
        }
      }
      return newArr;
    },

    // 图片 - 上传成功
    uploadSuccess(res, file) {
      this.mainForm.fileUrl = 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.activeType === 2 || this.activeType === 4) && imgList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
        return false;
      }
      if(this.activeType === 3 && videoList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传mp4文件!');
        return false;
      }
      if(this.activeType === 6 && fileList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传excel/word/ppt/pdf文件!');
        return false;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .main-content {
    display: flex;
    height: auto;
    .main-left {
      margin-right: 20px;
      padding: 10px;
      width: 210px;
      overflow-y: auto;
      border: 1px solid #eaeaea;
      border-radius: 5px;
      .list {
        margin-top: 10px;
        .item {
          display: flex;
          padding: 10px;
          cursor: pointer;
          color: #333;
          &.active {
            color: #377cfd;
            font-weight: 600;
            background-color: #f5f7fa;
          }
          .title {
            flex: 1;
            min-width: 0;
            padding-right: 10px;
            font-size: 14px;
          }
          .icon-more {
            transform: rotate(90deg);
          }
        }
      }
    }
    .main-right {
      flex: 1;
      height: auto;
      ::v-deep .el-divider--horizontal {
        margin: 10px 0;
      }
      .btn-group {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .tips {
            font-size: 14px;
            margin-left: 10px;
          }
        }
      }
      .list-container {
        margin-top: 20px;
        .box-card {
          ::v-deep .el-card__header {
            padding: 10px 10px 10px 20px;
          }
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .body {
            .info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: #666;
              margin: 10px 0;
            }
            .content {
              max-width: 100%;
              height: 168px;
              overflow-y: hidden;
              background-color: #fafafa;
              word-break: break-all;
              border-radius: 2px;
              padding: 8px;
              font-size: 14px;
              line-height: 19px;
              .text {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 8;
                -webkit-box-orient: vertical;
              }
            }
            .img {
              width: 100%;
              height: 168px;
              display: block;
            }
            .video {
              width: 100%;
              height: 168px;
              display: block;
            }
            .file {
              display: flex;
              justify-content: space-between;
              align-items: center;
              img {
                width: 40px;
                height: 40px;
                display: block;
              }
            }
          }
        }
      }
      .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        img {
          width: 280px;
        }
        div {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  ::v-deep .el-upload-dragger {
    width: 200px;
    height: 200px;
    img {
      width: 200px;
      height: 200px;
      &.file {
        padding: 50px;
      }
    }
    video {
      width: 200px;
      height: 200px;
    }
  }
  ::v-deep .el-upload__tip {
    margin-top: 0;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .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;
      }
    }
  }
</style>