<template>
  <div id="home">
    <div class="top">
      <span class="title">
        <img
          src="../../assets/images/leftbar_icon_home_blue.png"
          alt=""
        />首页管理
      </span>
      <div>
        <el-button size="mini" type="primary" @click="fun()" v-show="!a"
          >编辑</el-button
        >
        <el-button size="mini" type="primary" @click="submit()" v-show="a"
          >保存</el-button
        >
        <el-button size="mini" type="primary" @click="remove()" v-show="a"
          >取消</el-button
        >
      </div>
    </div>
    <div class="contain">
      <div class="front" style="height: 180px; width: 100%" v-if="!a">
        <!-- 横幅 -->
        <el-image
          style="width: 100%; height: 180px"
          :src="homeFormfirst.bannerurl"
        >
        </el-image>
      </div>
      <!-- 上传图片 -->
      <el-upload
        v-else
        class="avatar-uploader front"
        :action="joggle"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforebannerAvatarUpload"
      >
        <img
          v-if="homeForm.bannerurl"
          :src="homeForm.bannerurl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <div class="back" v-show="a">
          <p>点击我更改banner</p>
        </div>
      </el-upload>
      <!-- 轮播图 -->
      <div class="carousel front">
        <!-- 轮播图图片部分 -->
        <div class="left">
          <div class="input_video">
            <!-- 视频播放器 -->
            <video-player
              v-show="isshowvideo"
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></video-player>
          </div>
          <img :src="homeFormfirst.tableData.url" alt="" v-show="isshowimage" />
        </div>
        <!-- 轮播图文字部分 -->
        <div class="right">
          <h3>{{ homeFormfirst.tableData.title }}</h3>
          <p class="description">
            {{ homeFormfirst.tableData.description }}
          </p>
        </div>
        <div class="back" v-show="a" @click="changecarousel()">
          <p>点击我更改视频图片文字描述</p>
        </div>
      </div>
      <!-- 虚拟仿真教学 -->
      <div class="category">
        <h3 class="front">
          <!-- 类标题 -->
          {{ homeFormfirst.titleone }}
          <div class="back" v-show="a" @click="changetitle()">
            <p>点击我更改标题</p>
          </div>
        </h3>
        <!-- 分类前三个 -->
        <div class="box1">
          <!-- 渲染输出数组 -->
          <div
            class="front"
            v-for="(value, index) in homeFormfirst.links"
            :key="value.id"
          >
            <!-- 分类内容 -->
            <img :src="value.icon" alt="" />
            <p>{{ value.title }}</p>
            <p>{{ value.englishTitle }}</p>
            <div class="back" v-show="a" @click="changelink(index)">
              <p>点击我更改banner</p>
            </div>
          </div>
        </div>
        <!-- 分类后三个 -->
        <div class="box2">
          <div
            class="front"
            v-for="(value, index) in homeFormfirst.linksone"
            :key="value.id"
          >
            <img :src="value.icon" alt="" />
            <p>{{ value.title }}</p>
            <p>{{ value.englishTitle }}</p>
            <div class="back" v-show="a" @click="changelinktwo(index)">
              <p>点击我更改banner</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 新闻公告 -->
      <div class="article">
        <h3 class="front">
          <!-- 新闻公告标题 -->
          {{ homeFormfirst.titletwo }}
          <div class="back" v-show="a" @click="changearticle()">
            <p>点击更改标题</p>
          </div>
        </h3>
        <!-- 栏目标题 -->
        <div class="articlelink">
          <h3 class="front">
            {{ homeFormfirst.linkcolumn }}
            <div class="back" v-show="a" @click="changecolumn()">
              <p>点击更改栏目链接</p>
            </div>
          </h3>
          <h3 class="front">
            {{ homeFormfirst.linkcolumntwo }}
            <div class="back" v-show="a" @click="changecolumntwo()">
              <p>点击更改栏目链接</p>
            </div>
          </h3>
        </div>
        <!-- 栏目内容 -->
        <div class="articledetails">
          <!-- 图片 -->
          <img :src="homeFormfirst.linkcolumnarticletop.bgImgUrl" alt="" />
          <div>
            <!-- 标题 -->
            <span>{{ homeFormfirst.linkcolumnarticletop.title }}</span>
            <!-- 文本 -->
            <p
              class="textContent"
              v-html="homeFormfirst.linkcolumnarticletop.textContent"
            ></p>
            <!-- 时间 -->
            <span class="timebottom">{{
              homeFormfirst.linkcolumnarticletop.createTime
            }}</span>
          </div>
        </div>
        <!-- 栏目底部走马灯 -->
        <div class="articledetailsitem">
          <div
            v-for="value in homeFormfirst.linkcolumnarticlebottom"
            :key="value.id"
          >
            <img :src="value.bgImgUrl" alt="" />
            <p>{{ value.title }}</p>
            <p class="time">{{ value.createTime }}</p>
          </div>
        </div>
      </div>
      <!-- 底部button -->
      <div class="bottom front">
        <div class="link">
          <div class="con">
            <div class="visit">
              <div class="visittotal">
                <img src="../../assets/images/icon_msg_.png" alt="" /><span>
                  访问统计</span
                >
              </div>
              <p>近日访问:<span>24,666</span></p>
              <p>历史访问:<span>400万</span></p>
            </div>
            <div class="friendlink">
              <div class="visittotal">
                <img src="../../assets/images/icon.png" alt="" />
                <span> 友情链接</span>
              </div>
              <el-menu
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#f3f3f3"
                text-color="#2d2d2d"
              >
                <el-submenu
                  :index="value.id"
                  v-for="value in Datachild"
                  :key="value.id"
                >
                  <template slot="title">{{ value.classifyName }}</template>
                  <el-menu-item
                    :index="value.id"
                    v-for="value in value.friendshipLink"
                    :key="value.id"
                  >
                    <span @click="ply(value.linkUrl)">{{
                      value.title
                    }}</span></el-menu-item
                  >
                </el-submenu>
                <el-menu-item
                  v-for="value in Data"
                  :index="value.id"
                  :key="value.id"
                >
                  <a @click="ply(value.linkUrl)">{{
                    value.title
                  }}</a></el-menu-item
                >
              </el-menu>
            </div>
          </div>
        </div>
        <div class="back" v-show="a" @click="changefriendlink()">
          <p>点击我更改友情链接</p>
        </div>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="项目滑动内容"
      :visible.sync="dialogFormVisible"
      width="60%"
    >
      <div v-if="carouseemptyimg" class="emptybox">
        <img class="empty" src="../../assets/images/无数据.png" alt="" />
        <p @click="addcarousel()">还没有项目哦~点我添加项目</p>
      </div>

      <div v-else>
        <el-table
          ref="multipleTable"
          :data="homeForm.tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          align="center"
        >
          <el-table-column label="编号" width="60" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="视频图片" width="120" align="center">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.isImg == 0"
                :src="scope.row.url"
              ></el-image>

              <video class="carousevideo" v-else :src="scope.row.url"></video>
            </template>
          </el-table-column>
          <el-table-column label="标题" width="120" align="center">
            <template slot-scope="scope">
              <span :title="scope.row.title">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排序值" width="120" align="center">
            <template slot-scope="scope"
              ><i
                class="el-icon-bottom"
                @click="bottom(scope.$index, scope.row)"
                v-if="scope.$index != homeForm.tableData.length - 1"
              ></i
              ><i
                class="el-icon-top"
                @click="top(scope.$index)"
                v-if="scope.$index != 0"
              ></i
            ></template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              &emsp;
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              &emsp;<el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="scope.row.isOpen"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <div id="add">
          <i class="el-icon-circle-plus-outline" @click="addcarousel()"></i>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="okone()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="修改项目" :visible.sync="dialogeditcarousel" width="60%">
      <el-form :model="homeForm.editcarousel" :rules="rules">
        <el-form-item label="栏目图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="joggle"
            v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
            :show-file-list="false"
            :on-success="handleeditcarousel"
            :before-upload="beforeAvatareditUpload"
          >
            <img
              v-if="imageshow"
              :src="homeForm.editcarousel.url"
              class="avatar"
            />

            <video
              class="avatar"
              controls="controls"
              v-else-if="videoshow"
              :src="homeForm.editcarousel.url"
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          id="carouseltitle"
          prop="title"
          label="标题名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="homeForm.editcarousel.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item 
         prop="description"
          label="内容"
          :label-width="formLabelWidth"
          type="textarea"
        >
            <!-- 富文本编辑器 -->
            <quill-editor
              ref="text"
               v-model="homeForm.editcarousel.description"
              class="myQuillEditor"
              :options="editorOption"
            />
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogeditcarousel = false">取 消</el-button>
        <el-button type="primary" @click="editCarousel()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加项目" :visible.sync="dialogcarousel" width="60%">
      <el-form :model="homeForm.addcarousel" :rules="rules" ref="addcarousel">
        <el-form-item label="文件选择" :label-width="formLabelWidth" prop="url">
          <!-- action：必选参数，，上传的地址 -->
          <!-- data：上传时附带的额外参数
          drag:是否启动拖拽上传
          on-success:文件上传成功的钩子
          before-upload：上传文件之前的钩子，参数为上传的文件，若返回false或者返回promise且被reject，则停止上传 
          
          
          -->
          <el-upload
            class="avatar-uploader"
            :action="joggle"
            :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
            :show-file-list="false"
            :on-success="handlecarousel"
            :on-error="error"
            :on-progress="uploading"
            :before-upload="beforeAvatarUpload"
            :drag="true"
          >
          <!-- 如果文件上传成功，则显示视频封面，失败则显示出错 -->
            <img
              v-if="imageshow"
              :src="homeForm.addcarousel.url"
              class="avatar"
            />
            <!-- 视频组件 -->
            <video
              class="avatar"
              controls="controls"
              v-else-if="videoshow"
              :src="homeForm.addcarousel.url"
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <img src="" alt="">
          </el-upload>
        </el-form-item>

        <el-form-item
          id="carouseltitle"
          prop="title"
          label="标题名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="homeForm.addcarousel.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="description"
          label="内容"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            v-model="homeForm.addcarousel.description"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcarousel = false">取 消</el-button>
        <el-button type="primary" @click="Carouseltrue('addcarousel')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="更改标题" :visible.sync="dialogtitleone" width="60%">
      <el-form :model="homeForm" :rules="rules" ref="titleone">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="titleone"
        >
          <el-input v-model="homeForm.titleone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogtitleone = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('titleone')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="更改标题" :visible.sync="dialogtitletwo" width="60%">
      <el-form :model="homeForm" :rules="rules" ref="titletwo">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="titletwo"
        >
          <el-input v-model="homeForm.titletwo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogtitletwo = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('titletwo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink0" width="60%">
      <el-form :model="homeForm.links0" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links0.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
        >
          <el-input
            v-model="homeForm.links0.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links0.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links0.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links0.linkColumnId"
            @change="handleChangecolumn0"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links0.linkType == 0"
        >
          <el-select
            v-model="homeForm.links0.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option0"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links0.linkType == 1"
        >
          <el-input
            v-model="homeForm.links0.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(0)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(0)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink1" width="60%">
      <el-form :model="homeForm.links1" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links1.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
        >
          <el-input
            v-model="homeForm.links1.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links1.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links1.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links1.linkColumnId"
            @change="handleChangecolumn1"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links1.linkType == 0"
        >
          <el-select
            v-model="homeForm.links1.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links1.linkType == 1"
        >
          <el-input
            v-model="homeForm.links1.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(1)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(1)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink2" width="60%">
      <el-form :model="homeForm.links2" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links2.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
          id="englishTitle"
        >
          <el-input
            v-model="homeForm.links2.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links2.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links2.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links2.linkColumnId"
            @change="handleChangecolumn2"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links2.linkType == 0"
        >
          <el-select
            v-model="homeForm.links2.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links2.linkType == 1"
        >
          <el-input
            v-model="homeForm.links2.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(2)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(2)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink3" width="60%">
      <el-form :model="homeForm.links3" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links3.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
        >
          <el-input
            v-model="homeForm.links3.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links3.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links3.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links3.linkColumnId"
            @change="handleChangecolumn3"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links3.linkType == 0"
        >
          <el-select
            v-model="homeForm.links3.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links3.linkType == 1"
        >
          <el-input
            v-model="homeForm.links3.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(3)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(3)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink4" width="60%">
      <el-form :model="homeForm.links4" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links4.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
        >
          <el-input
            v-model="homeForm.links4.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links4.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links4.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links4.linkColumnId"
            @change="handleChangecolumn4"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links4.linkType == 0"
        >
          <el-select
            v-model="homeForm.links4.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links4.linkType == 1"
        >
          <el-input
            v-model="homeForm.links4.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(4)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(4)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加模块链接" :visible.sync="dialoglink5" width="60%">
      <el-form :model="homeForm.links5" :rules="rules" ref="ruleForm">
        <el-form-item
          label="标题名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="homeForm.links5.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="英文标题"
          :label-width="formLabelWidth"
          prop="englishTitle"
        >
          <el-input
            v-model="homeForm.links5.englishTitle"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="linkType"
          label="连接类型"
          :label-width="formLabelWidth"
          prop="linkType"
        >
          <el-radio-group v-model="homeForm.links5.linkType">
            <el-radio :label="0">站内链接</el-radio>
            <el-radio :label="1">站外链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="站内链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links5.linkType == 0"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.links5.linkColumnId"
            @change="handleChangecolumn5"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          class="article"
          label="文章"
          :label-width="formLabelWidth"
          v-if="homeForm.links5.linkType == 0"
        >
          <el-select
            v-model="homeForm.links5.linkArticleId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in option5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="站外链接"
          :label-width="formLabelWidth"
          v-if="homeForm.links5.linkType == 1"
        >
          <el-input
            v-model="homeForm.links5.linkUrl"
            placeholder="请输入链接"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelmoudlelink(5)">取 消</el-button>
        <el-button type="primary" @click="moudlelink(5)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="链接栏目" :visible.sync="dialoglinkcolumn" width="60%">
      <el-form :model="homeForm" :rules="rules" ref="linkcolumn">
        <el-form-item
          prop="linkcolumn"
          label="站内链接"
          :label-width="formLabelWidth"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.linkcolumn"
            @change="handlecolumnChangeone"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoglinkcolumn = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('linkcolumn')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="链接栏目" :visible.sync="dialoglinkcolumntwo" width="60%">
      <el-form :model="homeForm" :rules="rules" ref="linkcolumntwo">
        <el-form-item
          prop="linkcolumntwo"
          label="站内链接"
          :label-width="formLabelWidth"
        >
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="homeForm.linkcolumntwo"
            @change="handlecolumnChangetwo"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoglinkcolumntwo = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('linkcolumntwo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加种类" :visible.sync="dialogaddclassify" width="60%">
      <el-form
        :model="homeFormlink.addclassify"
        :rules="rules"
        ref="addclassify"
      >
        <el-form-item
          prop="classifyName"
          label="分类"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="homeFormlink.addclassify.classifyName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddclassify = false">取 消</el-button>
        <el-button type="primary" @click="classifytrue('addclassify')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加友情链接" :visible.sync="dialogaddlink" width="60%">
      <el-form :model="homeFormlink.addlink" :rules="rules" ref="addlink">
        <el-form-item prop="title" label="连接名" :label-width="formLabelWidth">
          <el-input
            v-model="homeFormlink.addlink.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="classifyId"
          label="连接分类"
          :label-width="formLabelWidth"
          class="classifyId"
        >
          <el-select
            v-model="homeFormlink.addlink.classifyId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in optionslink"
              :key="item.id"
              :label="item.classifyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="linkUrl"
          label="连接网址"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="homeFormlink.addlink.linkUrl"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddlink = false">取 消</el-button>
        <el-button type="primary" @click="classifytrue('addlink')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="修改种类" :visible.sync="dialogeditclassify" width="60%">
      <el-form :model="homeFormlink" :rules="rules" ref="editclassify">
        <el-form-item
          prop="editclassify"
          label="分类"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="homeFormlink.editclassify"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogeditclassify = false">取 消</el-button>
        <el-button type="primary" @click="classifytrue('editclassify')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="友情链接管理"
      :visible.sync="dialogfriendlink"
      width="60%"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="链接管理" name="first">
          <el-table
            ref="multipleTable"
            :data="homeFormlink.frinedlinktableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            align="center"
            class="linktable"
          >
            <el-table-column label="编号" width="60" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="标题" width="180" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.title"
                  placeholder="请输入标题"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="分类" width="200" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.classifyId"
                  placeholder="请选择分类"
                >
                  <el-option
                    v-for="item in scope.row.options"
                    :key="item.id"
                    :label="item.classifyName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="网址" width="200" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.linkUrl"
                  placeholder="请输入网址"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isShow"
                  active-value="0"
                  inactive-value="1"
                >
                </el-switch>
                <el-button
                  type="danger"
                  size="mini"
                  class="move"
                  @click="linkDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
        <el-tab-pane label="分类管理" name="second">
          <el-table
            ref="multipleTable"
            :data="homeFormlink.frinedlinkmange"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="编号" width="60" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="分类" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.classifyName }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="620" align="center">
              <template slot-scope="scope">
                <span
                  class="classEdit"
                  @click="classEdit(scope.$index, scope.row)"
                  style="color: skyblue"
                  >修改</span
                >
                <span
                  class="classDelete"
                  @click="classDelete(scope.$index, scope.row)"
                  style="color: red"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <div id="add">
          <i class="el-icon-circle-plus-outline" @click="linkmange()"></i>
        </div>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancellink()">取 消</el-button>
        <el-button type="primary" @click="linkclassify()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import { joggle } from "@/apis/request.js";
import { getHomebanner } from "@/apis/request.js";
import { getHomecolumn } from "@/apis/request.js";
import { postHomebanner } from "@/apis/request.js";
import { getHomecarouse } from "@/apis/request.js";
import { addHomecarouse } from "@/apis/request.js";
import { Homecarouseedit } from "@/apis/request.js";
import { getHomeheadline } from "@/apis/request.js";
import { allColumn } from "@/apis/request.js";
import { addHomeheadline } from "@/apis/request.js";
import { getColumnarticle } from "@/apis/request.js";
import { getColumnallarticle } from "@/apis/request.js";
import { getHomeclassify } from "@/apis/request.js";
import { getHomefriendlink } from "@/apis/request.js";
import { deleteHomeclassify } from "@/apis/request.js";
import { deleteHomelink } from "@/apis/request.js";
import { editHomelinks } from "@/apis/request.js";
import { getHomelinks } from "@/apis/request.js";
import { getHomelink } from "@/apis/request.js";
import { returnColumn } from "@/apis/request.js";
import { modifyHomefriendlink } from "@/apis/request.js";
import { modifyHomeclassify } from "@/apis/request.js";
import { Homecarousesort } from "@/apis/request.js";
import { addHomepage } from "@/apis/request.js";
import { deleteHomecarouse } from "@/apis/request.js";
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      titleMaxLength: 60,//字数限制
      Datachild: [],
      Data: [],
      joggle,
      editindex: 0,
      carouseemptyimg: false,
      isImg: 0,
      option0: [],
      option1: [],
      option2: [],
      option3: [],
      option4: [],
      option5: [],
      optionslink: [],
      tableDataclone: [],
      deletearr: [],
      deleteobj: [],
      links0clone: {},
      links1clone: {},
      links2clone: {},
      links3clone: {},
      links4clone: {},
      links5clone: {},
      defaultParams: {
        label: "columnName",
        value: "id",
        children: "children",
      },
      options: [],
      addhomeForm: {
        bgImgId: 2,
        carouselIds: "1,2,3,4",
        headline1Id: 1,
        linkIds: "1,2,3,4",
        headline2Id: 2,
        columnIds: "1,2,3,4",
        friendshipLinkIds: "1,2,3,4",
      },
      activeName: "first",
      homeForm: {
        bannerurl: "",
        bgImgId: 0,
        editindex: 0,
        tableData: [
          {
            index: 1,
            title: "四川大学1",
            value1: true,
            url:
              "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          },
          {
            index: 2,
            title: "四川大学2",
            value1: true,
            imageUrl:
              "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          },
          {
            index: 3,
            title: "四川大学3",
            value1: true,
            imageUrl: "",
          },
        ],
        carouselIds: "",
        links0: {},
        links1: {},
        links2: {},
        links3: {},
        links4: {},
        links5: {},
        columnIds: [],
        frinedlinktableData: [
          {
            index: 1,
            title: "",
            class: "",
            value: true,
            address: "https://123",
            classifyId: 0,
            options: [
              {
                value: "1",
                label: "2",
              },
            ],
          },
        ],
        frinedlinkmange: [],
        titleone: "",
        headline1Id: 0,
        headline2Id: 0,
        titletwo: "",
        linkcolumn: [],
        linkcolumntwo: [],
        columnarticletop: {},
        columnarticlebottom: {},
        addclassify: "",
        addclassifyid: 0,
        editclassify: "",
        addlink: {
          title: "",
          classifyId: 0,
          options: [],
          linkUrl: "",
        },
        addcarousel: {
          url: "",
          title: "",
          description: "",
          isImg: 0,
        },
        editcarousel: {
          url:
            "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          title: "",
          description: "",
          isImg: 0,
        },
      },
      frinedlinkmangeclone: [],
      frinedlinktableDataclone: [],
      linkcolumn: 0,
      linkcolumntwo: 0,
      homeFormlink: {
        frinedlinkmange: [],
        frinedlinktableData: [],
        editclassify: {},
        addclassify: { classifyName: "" },
        addlink: {
          title: "",
          classifyId: 0,
          isShow: "0",
          linkUrl: "",
        },
      },
      homeFormfirst: {
        bannerurl: "",
        tableData: [
          {
            index: 1,
            title: "四川大学1",
            value1: true,
            imageUrl:
              "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          },
        ],
        frinedlinktableData: [
          {
            index: 1,
            title: "四川大学",
            class: "",
            value: true,
            address: "https://123",
            options: [
              {
                value: "选项1",
                label: "黄金糕",
              },
              {
                value: "选项2",
                label: "双皮奶",
              },
            ],
          },
          {
            index: 1,
            title: "四川大学",
            class: "",
            value: true,
            address: "https://123",
            options: [
              {
                value: "选项1",
                label: "黄金糕",
              },
              {
                value: "选项2",
                label: "双皮奶",
              },
            ],
          },
        ],
        frinedlinkmange: [
          {
            index: 1,
            title: "四川大学",
            value: true,
          },
          {
            index: 1,
            title: "四川大学",
            value: true,
          },
        ],
        titleone: "",
        titletwo: "",
        links: [],
        linkcolumn: [],
        linkcolumntwo: [],
        formlink: {
          title: "",
          linkclass: "",
          out: "",
          in: [],
          options: [
            {
              value: "zhinan",
              label: "指南",
              children: [
                {
                  value: "shejiyuanze",
                  label: "设计原则",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                    },
                    {
                      value: "fankui",
                      label: "反馈",
                    },
                    {
                      value: "xiaolv",
                      label: "效率",
                    },
                    {
                      value: "kekong",
                      label: "可控",
                    },
                  ],
                },
                {
                  value: "daohang",
                  label: "导航",
                  children: [
                    {
                      value: "cexiangdaohang",
                      label: "侧向导航",
                    },
                    {
                      value: "dingbudaohang",
                      label: "顶部导航",
                    },
                  ],
                },
              ],
            },
            {
              value: "ziyuan",
              label: "资源",
              children: [
                {
                  value: "axure",
                  label: "Axure Components",
                },
                {
                  value: "sketch",
                  label: "Sketch Templates",
                },
                {
                  value: "jiaohu",
                  label: "组件交互文档",
                },
              ],
            },
          ],
        },
        addcarousel: {
          url: "",
          title: "",
          description: "",
        },
        editcarousel: {
          imageUrl:
            "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          title: "",
          content: "",
        },
        linkcolumnarticletop: {},
        linkcolumnarticlebottom: [],
      },
      imageshow: false,
      videoshow: false,
      isshowimage: false,
      isshowvideo: false,
      dialogFormVisible: false,
      dialogcarousel: false,
      dialogeditcarousel: false,
      dialogtitleone: false,
      dialogtitletwo: false,
      dialoglink0: false,
      dialoglink1: false,
      dialoglink2: false,
      dialoglink3: false,
      dialoglink4: false,
      dialoglink5: false,
      dialogfriendlink: false,
      dialoglinkcolumn: false,
      dialoglinkcolumntwo: false,
      dialogaddclassify: false,
      dialogeditclassify: false,
      dialogaddlink: false,
      editorOption: false,
      formLabelWidth: "90px",
      a: false,
      changeCount: 0, // 判断表单数据是否改变过
      isPopup: false, // 判断提交事件不再弹出离开提示
      url: "1.jpeg",
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        url: [
          { required: true, message: "文件未上传或上传有误", trigger: "blur" },
        ],
        englishTitle: [
          { required: true, message: "请输入英文标题", trigger: "blur" },
        ],
        titleone: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
        ],
        titletwo: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
        ],
        linkcolumn: [
          { required: true, message: "请输入站内连接栏目", trigger: "blur" },
        ],
        linkType: [
          {
            required: true,
            message: "请至少选择一链接类型",
            trigger: "change",
          },
        ],
        addclassify: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        classifyName: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        editclassify: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        classifyId: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        linkUrl: [{ required: true, message: "请输入网址", trigger: "blur" }],
        linkColumnId: [
          { required: true, message: "请选择站内链接", trigger: "change" },
        ],
      },
    };
    //  console.log(that.homeForm)
  },
  methods: {
    ply(a) {
      location.href = a;
    },
    linkDelete(index) {
      this.homeFormlink.frinedlinktableData.splice(index, 1);
    },
    moudlelink(index) {
      if (index == 0) {
        this.dialoglink0 = false;
        this.links0clone = JSON.parse(JSON.stringify(this.homeForm.links0));
        console.log(this.homeForm.links0, 0);
      }
      if (index == 1) {
        this.dialoglink1 = false;
        this.links1clone = JSON.parse(JSON.stringify(this.homeForm.links1));
      }
      if (index == 2) {
        this.dialoglink2 = false;
        this.links2clone = JSON.parse(JSON.stringify(this.homeForm.links2));
      }
      if (index == 3) {
        this.dialoglink3 = false;
        this.links3clone = JSON.parse(JSON.stringify(this.homeForm.links3));
      }
      if (index == 4) {
        this.dialoglink4 = false;
        this.links4clone = JSON.parse(JSON.stringify(this.homeForm.links4));
      }
      if (index == 5) {
        this.dialoglink5 = false;
        this.links5clone = JSON.parse(JSON.stringify(this.homeForm.links5));
      }
    },
    cancelmoudlelink(index) {
      if (index == 0) {
        this.dialoglink0 = false;
        this.homeForm.links0 = JSON.parse(JSON.stringify(this.links0clone));
      }
      if (index == 1) {
        this.dialoglink1 = false;
        this.homeForm.links1 = JSON.parse(JSON.stringify(this.links1clone));
      }
      if (index == 2) {
        this.dialoglink2 = false;
        this.homeForm.links2 = JSON.parse(JSON.stringify(this.links2clone));
      }
      if (index == 3) {
        this.dialoglink3 = false;
        this.homeForm.links3 = JSON.parse(JSON.stringify(this.links3clone));
      }
      if (index == 4) {
        this.dialoglink4 = false;
        this.homeForm.links4 = JSON.parse(JSON.stringify(this.links4clone));
      }
      if (index == 5) {
        this.dialoglink5 = false;
        this.homeForm.links5 = JSON.parse(JSON.stringify(this.links5clone));
      }
    },
    cancelmoudlelinktwo(index) {
      if (index == 0) {
        this.dialoglink3 = false;
        this.homeForm.links3 = JSON.parse(JSON.stringify(this.links3clone));
      }
      if (index == 1) {
        this.dialoglink4 = false;
        this.homeForm.links4 = JSON.parse(JSON.stringify(this.links4clone));
      }
      if (index == 2) {
        this.dialoglink5 = false;
        this.homeForm.links5 = JSON.parse(JSON.stringify(this.links5clone));
      }
    },
    error(){
    },
    uploading(){
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    common() {
      allColumn().then((res) => {
        this.options = this.getTreeData(res);
        console.log(this.options);
      });
    },
    editCarousel() {
      // if(this.homeForm.editcarousel.description.)
      this.dialogeditcarousel = false;
      this.homeForm.tableData[
        this.editindex
      ].url = this.homeForm.editcarousel.url;
      this.homeForm.tableData[
        this.editindex
      ].title = this.homeForm.editcarousel.title;
      this.homeForm.tableData[
        this.editindex
      ].description = this.homeForm.editcarousel.description;
      this.homeForm.tableData[
        this.editindex
      ].isImg = this.homeForm.editcarousel.isImg;
      this.homeForm.tableData.splice(1, 0);
    },
    fun() {
      this.a = true;
    },
    remove() {
      this.a = false;
      this.changeCount = 0;
      this.initRequest();
    },
    handleChangecolumn0(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links0.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option0 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option0.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    handleChangecolumn1(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links1.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option1 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option1.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    handleChangecolumn2(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links2.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option2 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option2.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    handleChangecolumn3(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links3.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option3 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option3.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    handleChangecolumn4(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links4.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option4 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option4.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    handleChangecolumn5(value) {
      let index = value.length - 1;
      let id = value[index];
      this.homeForm.links5.linkColumnId = id;
      getColumnallarticle(id).then((res) => {
        this.option5 = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        this.option5.unshift({
          value: 0,
          label: "无",
        });
        console.log(res, 666);
      });
    },
    changecolumn() {
      this.dialoglinkcolumn = true;
    },
    changecolumntwo() {
      this.dialoglinkcolumntwo = true;
    },
    submitForm(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "titleone") {
            addHomeheadline({
              title: that.homeForm.titleone,
            }).then((res) => {
              this.homeForm.headline1Id = res.id;
            });
          }
          if (formName == "titletwo") {
            addHomeheadline({
              title: that.homeForm.titletwo,
            }).then((res) => {
              this.homeForm.headline2Id = res.id;
            });
          }
          if (formName == "linkcolumn") {
            this.homeForm.columnIds[0] = this.linkcolumn;
          }
          if (formName == "linkcolumntwo") {
            this.homeForm.columnIds[1] = this.linkcolumntwo;
          }

          that.dialogtitleone = false;
          that.dialogtitletwo = false;
          that.dialoglinkcolumn = false;
          that.dialoglinkcolumntwo = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleEdit(index, row) {
      console.log(row);
      if (
        row.url.indexOf("jpeg") > -1 ||
        row.url.indexOf("jpg") > -1 ||
        row.url.indexOf("png") > -1
      ) {
        this.imageshow = true;
        this.videoshow = false;
      }
      if (
        row.url.indexOf("mp4") > -1 ||
        row.url.indexOf("ogg") > -1 ||
        row.url.indexOf("avi") > -1 ||
        row.url.indexOf("wmv") > -1
      ) {
        this.videoshow = true;
        this.imageshow = false;
      }
      this.editindex = index;
      this.homeForm.editcarousel.url = row.url;
      this.homeForm.editcarousel.title = row.title;
      this.homeForm.editcarousel.description = row.description;
      this.homeForm.editcarousel.isImg = row.isImg;
      this.dialogeditcarousel = true;
    },
    handleDelete(index, row) {
      console.log(index, row, "o");
      this.homeForm.tableData.splice(index, 1);
      if (this.homeForm.tableData == "") {
        this.carouseemptyimg = true;
      }
      this.deleteobj.push(row);
      console.log(this.deleteobj, 9);
    },
    okone() {
      this.dialogFormVisible = false;
      this.tableDataclone = JSON.parse(JSON.stringify(this.homeForm.tableData));
      console.log(this.tableDataclone, 6);
    },
    cancel() {
      this.dialogFormVisible = false;
      this.homeForm.tableData = JSON.parse(JSON.stringify(this.tableDataclone));
      console.log(this.homeForm.tableData, 5);
    },
    open(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteHomecarouse(id).then((res) => {
            console.log(res, "1");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelect(){

    },
    bottom(index) {
      var temp = {};
      temp = this.homeForm.tableData[index];
      this.homeForm.tableData[index] = this.homeForm.tableData[index + 1];
      this.homeForm.tableData[index + 1] = temp;
      this.homeForm.tableData.splice(1, 0);
      console.log(index);
    },
    top(index) {
      var temp = {};
      temp = this.homeForm.tableData[index];
      this.homeForm.tableData[index] = this.homeForm.tableData[index - 1];
      this.homeForm.tableData[index - 1] = temp;
      this.homeForm.tableData.splice(1, 0);
      console.log(index);
    },
    addcarousel() {
      this.dialogcarousel = true;
    },
    // 提交事件
    submit() {
      this.a = false;
      this.changeCount = 0;
      var that = this;
      // console.log(this.homeForm.frinedlinktableData,'py');
      //    let linkids= this.homeFormlink.frinedlinktableData.map(res=>{
      //     return res.id
      // })
      //  let classify= this.homeFormlink.frinedlinkmange.map(res=>{
      //    return res.id
      //  })
      // console.log(linkids,classify,0)
      let linkArr = [
        that.homeForm.links0,
        that.homeForm.links1,
        that.homeForm.links2,
        that.homeForm.links3,
        that.homeForm.links4,
        that.homeForm.links5,
      ];

      this.isPopup = true;
      this.addhomeForm.bgImgId = this.homeForm.bgImgId;
      this.addhomeForm.headline1Id = this.homeForm.headline1Id;
      this.addhomeForm.headline2Id = this.homeForm.headline2Id;
      this.homeForm.carouselIds = this.homeForm.tableData.map((res) => {
        return res.id;
      });

      Homecarouseedit(this.homeForm.tableData).then((res) => {
        console.log(res, "ply2");
        Homecarousesort(this.homeForm.carouselIds).then((res) => {
          console.log(res, "ply1");
        });
      });
      this.addhomeForm.carouselIds = this.homeForm.carouselIds.join(",");
      this.addhomeForm.columnIds = this.homeForm.columnIds.join(",");
      editHomelinks(linkArr).then((res) => {
        console.log(res, "m");
      });
      addHomepage({
        bgImgId: this.addhomeForm.bgImgId,
        carouselIds: this.addhomeForm.carouselIds,
        headline1Id: this.addhomeForm.headline1Id,
        headline2Id: this.addhomeForm.headline2Id,
        columnIds: this.addhomeForm.columnIds,
      }).then((res) => {
        console.log(res, "ply3");
        this.initRequest();
        this.$message({
          showClose: true,
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    changecarousel() {
      this.dialogFormVisible = true;
    },
    changetitle() {
      this.dialogtitleone = true;
    },
    changearticle() {
      this.dialogtitletwo = true;
    },
    changelink(index) {
      if (index == 0) {
        this.dialoglink0 = true;
      }
      if (index == 1) {
        this.dialoglink1 = true;
      }
      if (index == 2) {
        this.dialoglink2 = true;
      }
      if (index == 3) {
        this.dialoglink3 = true;
      }
      if (index == 4) {
        this.dialoglink4 = true;
      }
      if (index == 5) {
        this.dialoglink5 = true;
      }
    },
    changelinktwo(index) {
      if (index == 0) {
        this.dialoglink3 = true;
      }
      if (index == 1) {
        this.dialoglink4 = true;
      }
      if (index == 2) {
        this.dialoglink5 = true;
      }
    },
    changefriendlink() {
      this.dialogfriendlink = true;
    },
    handlecolumnChangeone(value) {
      let index = value.length - 1;
      this.linkcolumn = value[index];
      console.log(this.linkcolumn, 0);
    },
    handlecolumnChangetwo(value) {
      let index = value.length - 1;
      this.linkcolumntwo = value[index];
      console.log(this.linkcolumntwo, 0);
    },
    handleChange(value) {
      console.log(value);
    },
    handleAvatarSuccess(data) {
      this.homeForm.bannerurl = data.data.fileUrl;
      postHomebanner({
        imgUrl: data.data.fileUrl,
      }).then((res) => {
        console.log(res, 6666);
        this.homeForm.bgImgId = res.id;
      });
    },
    //文件上传成功
    handlecarousel(data) {
      this.homeForm.addcarousel.url = data.data.fileUrl;
      console.log(this.homeForm.addcarousel.url, data, 0);
    },
    handleeditcarousel(data) {
      this.homeForm.editcarousel.url = data.data.fileUrl;
      console.log(data);
    },
    Carouseltrue(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.homeForm.tableData.length == 5)
            this.$message({
              showClose: true,
              message: "警告！最多加五个轮播图",
              type: "warning",
            });
          else {
            addHomecarouse(this.homeForm.addcarousel).then((res) => {
              this.homeForm.tableData.unshift(res);
              // this.addhomeForm.carouselIds.unshift(res.id);
              // console.log(res, 66);
              this.dialogcarousel = false;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      this.carouseemptyimg = false;
    },
    beforebannerAvatarUpload(file) {
      const isJPG = file.type.indexOf("image") > -1;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("文件格式错误!");
      }
      if (!isLt10M) {
        this.$message.error("文件大小不能超过10MB!");
      }
      return isJPG && isLt10M;
    },
    // 文件上传之前的钩子，限制文件类型与大小
    beforeAvatarUpload(file) {
      console.log(file, 66);
      const isJPG = file.type.indexOf("image") > -1 || file.type.indexOf("video") > -1;
      // console.log(isJPG)
      const isLt100M = file.size / 1024 / 1024 < 50;
      if (file.type.indexOf("image") > -1) {
        this.imageshow = true;
        this.videoshow = false;
        this.homeForm.addcarousel.isImg = 0;
      } else if (file.type.indexOf("video") > -1) {
        this.videoshow = true;
        this.imageshow = false;
        this.homeForm.addcarousel.isImg = 1;
      }

      if (!isJPG) {
        this.$message.error("文件格式错误!");
      } else if (!isLt100M) {
        this.$message.error("文件大小不能超过50MB!");
      }
      return isJPG && isLt100M;
    },
    beforeAvatareditUpload(file) {
      console.log(file, 66);
      const isJPG =
        file.type.indexOf("image") > -1 || file.type.indexOf("video") > -1;
      // console.log(isJPG)
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (file.type.indexOf("image") > -1) {
        this.imageshow = true;
        this.videoshow = false;
        this.homeForm.editcarousel.isImg = 0;
        console.log(this.homeForm.editcarousel.isImg, 7);
      } else if (file.type.indexOf("video") > -1) {
        this.videoshow = true;
        this.imageshow = false;
        this.homeForm.editcarousel.isImg = 1;
        console.log(this.homeForm.editcarousel.isImg, 8);
      }

      if (!isJPG) {
        this.$message.error("文件格式错误!");
      } else if (!isLt100M) {
        this.$message.error("文件大小不能超过100MB!");
      }
      return isJPG && isLt100M;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.activeName);
    },
    classDelete(index) {
      this.homeFormlink.frinedlinkmange.splice(index, 1);
    },
    linkmange() {
      if (this.activeName == "first") {
        this.dialogaddlink = true;
        this.homeFormlink.addlink = {
          title: "",
          classifyId: 0,
          isShow: "0",
          linkUrl: "",
        };
        this.optionslink = JSON.parse(
          JSON.stringify(this.homeFormlink.frinedlinkmange)
        );
        this.optionslink.push({
          id: 0,
          classifyName: "无",
        });
      }
      if (this.activeName == "second") {
        this.homeFormlink.addclassify.classifyName = "";
        this.dialogaddclassify = true;
      }
    },
    classEdit(index, row) {
      this.rowedit = row;
      this.dialogeditclassify = true;
      this.homeFormlink.editclassify = row.classifyName;
    },
    classifytrue(formName) {
      const that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName == "addclassify") {
            // addHomeclassify({
            //   classifyName: that.homeFormlink.addclassify,
            // }).then((res) => {

            // });

            this.homeFormlink.frinedlinkmange.push(
              JSON.parse(JSON.stringify(this.homeFormlink.addclassify))
            );
            console.log(this.homeFormlink.frinedlinkmange, 666);
          }
          if (formName == "editclassify") {
            this.rowedit.classifyName = this.homeFormlink.editclassify;
          }
          if (formName == "addlink") {
            // addHomefriendlink(this.homeFormlink.addlink).then((res) => {
            //   console.log(res, "a");
            //   res.data.options = JSON.parse(
            //     JSON.stringify(this.homeFormlink.frinedlinkmange)
            //   );
            //   res.data.options.push({
            //     id: 0,
            //     classifyName: "无",
            //   });
            //   this.homeFormlink.frinedlinktableData.push(res.data);
            // });
            this.homeFormlink.addlink.options = this.optionslink;
            this.homeFormlink.frinedlinktableData.push(
              JSON.parse(JSON.stringify(this.homeFormlink.addlink))
            );
          }

          that.dialogaddclassify = false;
          that.dialogeditclassify = false;
          that.dialogaddlink = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    linkclassify() {
      let linkids = this.homeFormlink.frinedlinktableData.map((res) => {
        return res.id;
      });
      let classify = this.homeFormlink.frinedlinkmange.map((res) => {
        return res.id;
      });
      if (this.activeName == "second") {
        this.frinedlinkmangeclone = JSON.parse(
          JSON.stringify(this.homeFormlink.frinedlinkmange)
        );

        modifyHomeclassify(this.homeFormlink.frinedlinkmange).then((res) => {
          deleteHomeclassify(classify).then((res) => {
            console.log(res);
            getHomelink().then((res) => {
              console.log(res, 666);
              this.Datachild = res[0];
              // console.log(this.Datachild, 8);
              this.Data = res[1];
            });
            getHomeclassify().then((res) => {
              // this.homeForm.frinedlinkmange = JSON.parse(JSON.stringify(res));
              this.homeFormlink.frinedlinkmange = JSON.parse(
                JSON.stringify(res)
              );
              console.log(res, "ply");
              this.frinedlinkmangeclone = JSON.parse(JSON.stringify(res));
              getHomefriendlink().then((res) => {
                console.log(res, "ply1");
                this.homeFormlink.frinedlinktableData = res.map((res) => {
                  res.options = JSON.parse(
                    JSON.stringify(this.homeFormlink.frinedlinkmange)
                  );
                  res.options.push({
                    id: 0,
                    classifyName: "无",
                  });
                  return res;
                });
                this.frinedlinktableDataclone = JSON.parse(
                  JSON.stringify(
                    res.map((res) => {
                      res.options = JSON.parse(
                        JSON.stringify(this.homeFormlink.frinedlinkmange)
                      );
                      res.options.push({
                        id: 0,
                        classifyName: "无",
                      });
                      return res;
                    })
                  )
                );
              });
            });
          });
          console.log(res);
        });
      }
      if (this.activeName == "first") {
        this.frinedlinktableDataclone = JSON.parse(
          JSON.stringify(this.homeFormlink.frinedlinktableData)
        );
        modifyHomefriendlink(this.homeFormlink.frinedlinktableData).then(
          (res) => {
            console.log(res);
            deleteHomelink(linkids).then((res) => {
              console.log(res, 666);
              getHomelink().then((res) => {
                console.log(res, 666);
                this.Datachild = res[0];
                // console.log(this.Datachild, 8);
                this.Data = res[1];
              });
              getHomeclassify().then((res) => {
                // this.homeForm.frinedlinkmange = JSON.parse(JSON.stringify(res));
                this.homeFormlink.frinedlinkmange = JSON.parse(
                  JSON.stringify(res)
                );
                console.log(res, "ply");
                this.frinedlinkmangeclone = JSON.parse(JSON.stringify(res));
                getHomefriendlink().then((res) => {
                  console.log(res, "ply1");
                  this.homeFormlink.frinedlinktableData = res.map((res) => {
                    res.options = JSON.parse(
                      JSON.stringify(this.homeFormlink.frinedlinkmange)
                    );
                    res.options.push({
                      id: 0,
                      classifyName: "无",
                    });
                    return res;
                  });
                  this.frinedlinktableDataclone = JSON.parse(
                    JSON.stringify(
                      res.map((res) => {
                        res.options = JSON.parse(
                          JSON.stringify(this.homeFormlink.frinedlinkmange)
                        );
                        res.options.push({
                          id: 0,
                          classifyName: "无",
                        });
                        return res;
                      })
                    )
                  );
                });
              });
            });
          }
        );
      }
      this.dialogfriendlink = false;
    },
    cancellink() {
      if (this.activeName == "second") {
        this.homeFormlink.frinedlinkmange = JSON.parse(
          JSON.stringify(this.frinedlinkmangeclone)
        );
      }
      if (this.activeName == "first") {
        this.homeFormlink.frinedlinktableData = JSON.parse(
          JSON.stringify(this.frinedlinktableDataclone)
        );
      }
      this.dialogfriendlink = false;
    },
    initRequest() {
      getHomecolumn().then((res) => {
        console.log("数据 =>",res)
        this.homeForm.bgImgId = res[0].bgImgId;
        this.homeForm.columnIds = res[0].columnIds.split(",");
        this.homeForm.headline1Id = res[0].headline1Id;
        this.homeForm.headline2Id = res[0].headline2Id;
        this.homeForm.linkcolumn = Number(this.homeForm.columnIds[0]);
        this.homeForm.linkcolumntwo = Number(this.homeForm.columnIds[1]);
        getHomebanner(res[0].bgImgId).then((res) => {
          console.log(res, "img");
          this.homeForm.bannerurl = res[0].imgUrl;
          this.homeFormfirst.bannerurl = res[0].imgUrl;
        });
        getHomecarouse(res[0].carouselIds).then((res) => {
          if (res.length > 0) {
            this.homeFormfirst.tableData = res[0];
          }
          this.homeForm.tableData = res;
          this.tableDataclone = JSON.parse(JSON.stringify(res));
          console.log(this.tableDataclone, 66);
          if (this.homeForm.tableData == "") {
            this.carouseemptyimg = true;
          }
          if (
            this.homeFormfirst.tableData.url.indexOf("jpeg") > -1 ||
            this.homeFormfirst.tableData.url.indexOf("jpg") > -1 ||
            this.homeFormfirst.tableData.url.indexOf("png") > -1
          ) {
            this.isshowimage = true;
            this.isshowvideo = false;
          }
          if (
            this.homeFormfirst.tableData.url.indexOf("mp4") > -1 ||
            this.homeFormfirst.tableData.url.indexOf("ogg") > -1 ||
            this.homeFormfirst.tableData.url.indexOf("avi") > -1 ||
            this.homeFormfirst.tableData.url.indexOf("wmv") > -1
          ) {
            this.isshowimage = false;
            this.isshowvideo = true;
            this.playerOptions.sources[0].src = res[0].url;
          }

          // console.log(this.homeForm.tableData, 9);
        });
        getHomeheadline(res[0].headline1Id).then((res) => {
          this.homeForm.titleone = res[0].title;
          this.homeFormfirst.titleone = res[0].title;
        });
        getHomelinks(res[0].linkIds).then((res) => {
          this.homeForm.links0 = res[0];
          getColumnallarticle(res[0].linkColumnId).then((res) => {
            this.option0 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option0.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          getColumnallarticle(res[1].linkColumnId).then((res) => {
            this.option1 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option1.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          getColumnallarticle(res[2].linkColumnId).then((res) => {
            this.option2 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option2.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          getColumnallarticle(res[3].linkColumnId).then((res) => {
            this.option3 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option3.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          getColumnallarticle(res[4].linkColumnId).then((res) => {
            this.option4 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option4.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          getColumnallarticle(res[5].linkColumnId).then((res) => {
            this.option5 = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            this.option5.unshift({
              value: 0,
              label: "无",
            });
            console.log(res, 666);
          });
          this.links0clone = JSON.parse(JSON.stringify(res[0]));
          this.homeForm.links1 = res[1];
          this.links1clone = JSON.parse(JSON.stringify(res[1]));
          this.homeForm.links2 = res[2];
          this.links2clone = JSON.parse(JSON.stringify(res[2]));
          this.homeForm.links3 = res[3];
          this.links3clone = JSON.parse(JSON.stringify(res[3]));
          this.homeForm.links4 = res[4];
          this.links4clone = JSON.parse(JSON.stringify(res[4]));
          this.homeForm.links5 = res[5];
          this.links5clone = JSON.parse(JSON.stringify(res[5]));
          this.homeFormfirst.links = res.splice(0, 3);
          this.homeFormfirst.linksone = res;

          console.log(res, 0);
        });
        getHomeheadline(res[0].headline2Id).then((res) => {
          this.homeForm.titletwo = res[0].title;
          this.homeFormfirst.titletwo = res[0].title;
        });
        returnColumn(this.homeForm.columnIds[0]).then((res) => {
          this.homeFormfirst.linkcolumn = res[0].columnName;
        });
        returnColumn(this.homeForm.columnIds[1]).then((res) => {
          this.homeFormfirst.linkcolumntwo = res[0].columnName;
        });
        if (res[0].columnIds.length >= 1) {
          getColumnarticle(this.homeForm.columnIds[0], 1).then((res) => {
            if (res) {
              this.homeFormfirst.linkcolumnarticletop = res.list[0];
              this.homeFormfirst.linkcolumnarticlebottom = res.list.splice(
                1,
                4
              );
            }
          });
        }
        if (res[0].columnIds.length >= 2) {
          getColumnarticle(this.homeForm.columnIds[1], 1).then((res) => {
            console.log(res);
          });
        }
      });
      getHomeclassify().then((res) => {
        // this.homeForm.frinedlinkmange = JSON.parse(JSON.stringify(res));
        this.homeFormlink.frinedlinkmange = JSON.parse(JSON.stringify(res));
        console.log(res, "ply");
        this.frinedlinkmangeclone = JSON.parse(JSON.stringify(res));
        getHomefriendlink().then((res) => {
          console.log(res, "ply1");
          this.homeFormlink.frinedlinktableData = res.map((res) => {
            res.options = JSON.parse(
              JSON.stringify(this.homeFormlink.frinedlinkmange)
            );
            res.options.push({
              id: 0,
              classifyName: "无",
            });
            return res;
          });
          this.frinedlinktableDataclone = JSON.parse(
            JSON.stringify(
              res.map((res) => {
                res.options = JSON.parse(
                  JSON.stringify(this.homeFormlink.frinedlinkmange)
                );
                res.options.push({
                  id: 0,
                  classifyName: "无",
                });
                return res;
              })
            )
          );
        });
      });
      getHomelink().then((res) => {
        console.log(res, 666);
        this.Datachild = res[0];
        // console.log(this.Datachild, 8);
        this.Data = res[1];
      });
    },
  },

  // 监听表单数据变化
  watch: {
    // title() {
    //         if (homeForm.editcarousel.description.length > this.titleMaxLength) {
    //             homeForm.editcarousel.description = String(homeForm.editcarousel.description).slice(0, this.titleMaxLength);
    //         }
    //     },
    homeForm: {
      handler(val) {
        val && this.changeCount++;
      },
      deep: true,
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.changeCount > 6 && !this.isPopup) {
      this.$confirm("你有内容正在编辑确定离开当前界面吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          next();
        })
        .catch(() => {
          next(false);
        });
    } else {
      next();
    }
  },
  mounted() {
    this.common();
    this.initRequest();
  },
};
</script>
<style lang="less">
#home {
  #carouseltitle {
    margin-bottom: 20px;
  }
  height: 100%;
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px;
    .el-button {
      margin-top: 16px;
    }
    .el-icon-s-home {
      margin-right: 10px;
    }
  }
  .title {
    margin-top: 18px;
    font-size: 20px;
    img {
      vertical-align: middle;
      display: inline-block;
      margin-bottom: 3px;
      margin-right: 10px;
    }
  }
  i {
    font-size: 20px;
  }
  .contain {
    margin-top: 50px;
    .carousel {
      width: 100%;
      height: 316px;
      margin-top: 60px;
      display: flex;
      justify-content: space-between;

      .left {
        width: 57%;
        height: 316px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 400px;
        text-align: left;
        .description {
          margin-top: 10px;
          font-size: 16px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 9;
          -webkit-box-orient: vertical;
          line-height: 30px;
        }
      }
    }
    .input_video .video-player {
      height: 100%;
    }
    .category {
      margin-top: 70px;

      img {
        width: 70px;
        height: 70px;
        border-radius: 35px;
      }
      h3 {
        width: 190px;
      }
    }
    .category > div {
      margin-top: 30px;
      display: -ms-flexbox;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      -o-flex-wrap: wrap;
      -ms-justify-content: space-between;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      div {
        width: 246px;
        height: 200px;
        text-align: center;
        margin-bottom: 20px;
        transition: 1s;
        box-shadow: 1px 1px 4px #ccc;
        img {
          margin-top: 15px;
        }
      }
    }
    .box1 > div > p {
      margin-top: 10px;
    }
    .box2 > div > p {
      margin-top: 10px;
    }
    .article {
      margin-top: 70px;
      // text-align: center;
      h3 {
        width: 190px;
      }
    }
    .articlelink {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      margin-bottom: 40px;

      h3 {
        margin-left: 60px;
        font-size: 18px;
      }
    }
    .articledetails {
      display: flex;
      justify-content: space-between;
      img {
        width: 580px;
        height: 320px;
      }
      div {
        background: #e6e6e6;
        width: 400px;
        position: relative;
        .textContent {
          text-align: left;
          width: 400px;
          margin-top: 10px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 8;
          -webkit-box-orient: vertical;
          color: #333;
          font-size: 16px;
          line-height: 30px;
          img {
            display: none;
          }
          video {
            display: none;
          }
        }
        .timebottom {
          color: #ccc;
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
      }
    }
    .articledetailsitem {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      div {
        img {
          width: 180px;
          height: 120px;
        }
        p {
          font-size: 16px;
          color: #333;
          margin-top: 20px;
          width: 180px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .time {
          margin-top: 10px;
        }
      }
    }
    .front {
      position: relative;
    }
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      background: rgba(24, 22, 22, 0.7);
      top: 0;
      left: 0;
      font-size: 20px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .avatar-uploader .el-upload {
      // border: 1px dashed #ccc;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 100%;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 980px;
      height: 180px;
      line-height: 180px;
      text-align: center;
    }
    .avatar {
      width: 980px;
      height: 180px;
      display: block;
    }
  }
  .el-dialog__wrapper .el-dialog .el-dialog__header {
    text-align: center;
  }
  .el-dialog__header .el-dialog__title {
    border-bottom: 1px solid skyblue;
    color: skyblue;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 0px 0px 10px 0px;
  }
  .el-input__inner {
    width: 350px;
  }
  .el-table .el-input__inner {
    width: 160px;
  }
  .el-form-item {
    width: 100%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .el-table .has-gutter th div {
    font-size: 18px;
    color: #fff;
    background: #68b6c9;
    height: 40px;
    line-height: 40px;
  }
  .el-table td {
    text-align: center;
    border: none;

    .cell {
      padding-top: 10px;
      height: 80px;
      background: #f3f0f0;
      text-align: center;
      line-height: 60px;
    }
    // .el-table tr:hover{
    //   background: red  !important;
    // }
  }
  .el-table--enable-row-transition .el-table__body tr:hover > td {
    background: #fff !important;
  }
  .el-table tr td:nth-child(1) .cell {
    background: #fff;
  }
  // .el-table .el-table__body td{
  //   display: inline-block;
  //   width: 50px;;
  //   margin-bottom: 10px;
  // }
  .el-table th > .cell {
    line-height: 40px;
    vertical-align: top;
  }
  #add {
    width: 50px;
    margin: 0 auto;
    margin-top: 10px;
    .el-icon-circle-plus-outline {
      font-size: 26px;
    }
  }
  .el-dialog {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 300px;
      height: 170px;
      display: block;
    }
    .avatar-uploader-icon {
      width: 300px;
      height: 170px;
    }
  }
  .emptybox {
    .empty {
      width: 400px;
      height: 360px;
      display: block;
      margin: 0 auto;
    }
    p {
      font-size: 20px;
      width: 252px;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  .classifyId {
    margin: 20px auto;
  }
  .el-icon-circle-plus-outline {
    cursor: pointer;
  }
  .linkType {
    margin: 16px auto;
  }
  .article {
    margin-top: 15px;
  }
  .carousevideo {
    width: 100px;
    height: 64px;
  }
  .el-form-item {
    margin-top: 16px;
  }
  .classEdit {
    cursor: pointer;
    margin-right: 50px;
  }
  .classDelete {
    cursor: pointer;
  }
  .link {
    width: 100%;
    height: 150px;
    background: #f3f3f3;
    padding-top: 50px;
    margin-top: 80px;
    font-size: 18px;
    img {
      width: 20px;
      height: 20px;
      margin-bottom: -3px;
    }

    .con {
      display: flex;
      .visit {
        margin-right: 108px;
      }
      .el-menu-item {
        font-size: 18px;
      }
    }
    .visit,
    .friendlink {
      .visittotal {
        padding-bottom: 10px;
        width: 200px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
        span {
          font-size: 18px;
          color: #2d2d2d;
        }
      }
      p {
        margin-top: 10px;
      }
      span {
        margin-left: 10px;
      }
      .el-menu--horizontal {
        border-bottom: none;
      }
      .el-menu-item a {
        text-decoration: none !important;
      }
      .el-submenu__title {
        font-size: 18px;
      }
      .el-menu-item * {
        vertical-align: baseline;
      }
      .el-submenu__title,
      .is-active,
      .el-submenu {
        border: none;
      }
      .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
        border: none;
      }
    }
  }
  .move {
    width: 54px;
    margin-left: 10px;
  }
}
</style>
