<template>
  <div class="special">
    <template v-if="speciaIsShowAdd">
      <div class="head-title">
        专题
        <el-button @click="speciaIsShowAdd=false,clearInfo()" style="float:right;margin-top: -5px;" size="small"
          type="primary">
          新增
        </el-button>
      </div>
      <div class="content">
        <div>
          <el-select size="small" class="w150" v-model="msg.TopicTypeId">
            <el-option label="全部专题" :value="0"></el-option>
            <el-option v-for="item in TypeList" :key="item.Id" :label="item.TopicName" :value="item.Id">
            </el-option>
          </el-select>
          <div class="searchInput">
            <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.Title"
              size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
            </el-input>
            <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
              @click="msg.pageIndex=1,getList()"> </span>
          </div>
        </div>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="Id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="TopicName" label="分类" width="120">
          </el-table-column>
          <el-table-column prop="Title" label="专题">
          </el-table-column>
          <el-table-column prop="FlexTypeStr" label="布局方式" width="120">
          </el-table-column>
          <el-table-column prop="IsChoiceStr" label="是否精选" width="100">
          </el-table-column>
          <el-table-column prop="SortNum" label="排序" width="200">
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
              <img @click="RemmoveRole(scope.row)" src="../../assets/img/userman/del.png" alt="">
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="speciaIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">专题</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>专题编辑</span>
      </div>
      <div class="content">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础设置" name="first">
            <div class="contentTwo">
              <el-form label-width="10rem" :model="addMsg" :rules="rules" ref="addMsg">
                <el-form-item label="标题" prop="Title">
                  <el-input type="text" maxlength="100" size="small" v-model="addMsg.Title"></el-input>
                </el-form-item>
                <el-form-item label="专题列表布局方式">
                  <el-radio-group v-model="addMsg.FlexType">
                    <el-radio :label="1">小图模式</el-radio>
                    <el-radio :label="2">大图模式</el-radio>
                    <el-radio :label="3">多图模式</el-radio>
                  </el-radio-group>
                  <div class="flexTypeList">
                    小图模式建议封面图片大小：268×202；大图模式建议封面图片大小：702×350；多图模式建议封面图片大小：268×202，最多上传3张图片
                  </div>
                </el-form-item>
                <el-form-item label="封面图" prop="CoverImg">
                  <el-tooltip class="item" effect="dark" content="建议尺寸: 268 * 202" placement="top">
                    <el-button size="mini" @click="choicImg=true,commonIndex=1">选择图片</el-button>
                  </el-tooltip>
                  <div class="customize-share-title">
                    <div class="zk_pic_box" @click="choicImg=true,commonIndex=1" style="width:80px;height:80px;" flex="main:center cross:center"
                      :style="{backgroundImage:'url(' + getIconLink(addMsg.CoverImg) + ')'}">
                      <i v-if="addMsg.CoverImg==''" class="el-icon-picture-outline"></i>
                      <el-button type="danger" v-if="addMsg.CoverImg!=''" class="image-delete" size="mini"
                      icon="el-icon-close" @click.stop="addMsg.CoverImg=''" circle></el-button>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <span slot="label">摘要</span>
                  <el-tooltip slot="label" class="item" effect="dark" content="专题内容的简介，用于列表上显示" placement="top">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                  <el-input type="textarea" size="small" v-model="addMsg.Abstract" :rows="2"></el-input>
                </el-form-item>
                <el-form-item label="自定义分享标题">
                  <el-input type="text" size="small" v-model="addMsg.CustomTitle"></el-input>
                </el-form-item>
                <el-form-item label="自定义分享图片">
                  <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                    <el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
                  </el-tooltip>
                  <div class="customize-share-title">
                    <div class="zk_pic_box" @click="choicImg=true,commonIndex=2" style="width:80px;height:80px;" flex="main:center cross:center"
                      :style="{backgroundImage:'url(' + getIconLink(addMsg.CustomImg) + ')'}">
                      <i v-if="addMsg.CustomImg==''" class="el-icon-picture-outline"></i>
                      <el-button type="danger" v-if="addMsg.CustomImg!=''" class="image-delete" size="mini"
                      icon="el-icon-close" @click.stop="addMsg.CustomImg=''" circle></el-button>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="是否精选">
                  <el-switch v-model="addMsg.IsChoice" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="分类" prop="TopicTypeId">
                  <el-select v-model="addMsg.TopicTypeId" size="small">
                    <el-option :key="0" label="请选择" :value="0">
                    </el-option>
                    <el-option v-for="item in TypeList" :key="item.Id" :label="item.TopicName" :value="item.Id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <span slot="label">虚拟阅读量</span>
                  <el-tooltip slot="label" class="item" effect="dark" content="手机端显示的阅读量=实际阅读量+虚拟阅读量" placement="top">
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                  <el-input type="text" size="small" v-model="addMsg.ReadNum"
                    @keyup.native="checkInteger(addMsg,'ReadNum')" maxlength="8"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                  <el-input type="text" size="small" v-model="addMsg.SortNum"
                    @keyup.native="checkInteger(addMsg,'SortNum')" maxlength="2"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="详情设置" name="second">
            <div style="position: relative; margin-bottom: 10px; height: 621px;">
              <div class="all-components">
                <div class="component-list">
                  <div class="component-item" @click="setPlugin('rubik')">
                    <img :src="domainManager().ImageUrl+'/Static/rubik.png'" alt="">
                    <div class="component-name">图片广告</div>
                  </div>
                  <div class="component-item" @click="setPlugin('video')">
                    <img :src="domainManager().ImageUrl+'/Static/video.png'" alt="">
                    <div class="component-name">视频</div>
                  </div>
                  <div class="component-item" @click="setPlugin('image-text')">
                    <img :src="domainManager().ImageUrl+'/Static/image-text.png'" alt="">
                    <div class="component-name">图文详情</div>
                  </div>
                </div>
              </div>
              <div class="special_Content">
                <div class="mobile-framework">
                  <div class="mobile-framework-header"></div>
                  <div class="mobile-framework-body">
                    <!-- 为空的样式开始 -->
                    <div v-if="pluginData.length==0" flex="main:center cross:center"
                      style="height: 200px; color: rgb(173, 177, 184); text-align: center;">
                      <div>
                        <i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px;"></i>
                        <div>空空如也</div>
                        <div>请从左侧组件库添加组件</div>
                      </div>
                    </div>
                    <!-- 为空的样式结束 -->
                    <div v-for="(item,index) in pluginData" :key="index" @click="getItem(item)">
                      <rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                        :index="index" :dataLeng="pluginData.length"></rubik>
                      <myvideo v-if="item.Id=='video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                        :index="index" :dataLeng="dataList.length"></myvideo>
                      <imageText v-if="item.Id=='image-text'" :imageData="item" @getSord="getSord"
                        @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
      </el-button>
    </template>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import rubik from "../sallCenter/plugin/rubik.vue"
  import myvideo from "../sallCenter/plugin/video.vue"
  import imageText from "../sallCenter/plugin/image-text.vue"
  export default {
    components: {
      ChooseImg,
      rubik,
      myvideo,
      imageText
    },
    data() {
      let validataTopic = (rule, value, callback) => {
        if (this.addMsg.TopicTypeId == 0) {
          return callback(new Error('请选择专题分类'));
        } else {
          callback();
        }
      }
      return {
        loading: false,
        choicImg:false,
        commonIndex:-1,
        activeName: 'first',
        pluginData: [],
        TypeList: [], //分类列表
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          TopicTypeId: 0,
          Title: "",
        },
        pwdMsg: {
          password: ''
        },
        total: 0,
        speciaIsShowAdd: true,
        addMsg: {
          Id: 0,
          Title: '', //标题
          FlexType: 1, //专题列表布局方式
          CoverImg: '', //封面图
          Abstract: '', //摘要
          CustomTitle: '', //自定义分享标题
          CustomImg: '', //自定义分享图片
          IsChoice: 0, //是否精选
          TopicTypeId: 0, //分类
          ReadNum: 0, //虚拟阅读量 
          SortNum: 0, //排序
          ComponentDataList: [], //插件
        },
        rules: {
          Title: [{
            required: true,
            message: "标题不能为空",
            trigger: "blur"
          }],
          CoverImg: [{
            required: true,
            message: "封面图片不能为空",
            trigger: "blur"
          }],
          TopicTypeId:[{
            validator: validataTopic,
            trigger: "change",
            required: true
          }]

        },
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //选择图片
      SelectId(msg) {
        if(this.commonIndex==1){
           this.addMsg.CoverImg = msg.url;
        }else if(this.commonIndex==2){
           this.addMsg.CustomImg=msg.url;
        }
        this.choicImg = false;
      },
      getList() {
        this.apipost("/api/MContent/GetTopicPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      submitform(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveMsg();
          } else {
            return false;
          }
        });
      },
      //保存
      saveMsg() {
        this.addMsg.ComponentDataList = this.pluginData;
        this.apipost("/api/MContent/SetTopic", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.clearInfo();
            this.speciaIsShowAdd = true;
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //清空
      clearInfo() {
        this.addMsg.Id = 0;
        this.addMsg.Title = '';
        this.addMsg.FlexType = 1;
        this.addMsg.CoverImg = '';
        this.addMsg.Abstract = '';
        this.addMsg.CustomTitle = '';
        this.addMsg.CustomImg = '';
        this.addMsg.IsChoice = 0;
        this.addMsg.TopicTypeId = 0;
        this.addMsg.ReadNum = 0;
        this.addMsg.SortNum = 0;
        this.activeName='first';
        this.addMsg.ComponentDataList = [];
        this.pluginData=[];
      },
      //修改
      EditRole(item) {
        this.speciaIsShowAdd=false;
        this.activeName='first';
        this.apipost("/api/MContent/GetTopic", {
          Id: item.Id
        }, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;
            this.addMsg.Id = jsonData.Id;
            this.addMsg.Title = jsonData.Title;
            this.addMsg.FlexType = jsonData.FlexType;
            this.addMsg.CoverImg = jsonData.CoverImg;
            this.addMsg.Abstract = jsonData.Abstract;
            this.addMsg.CustomTitle = jsonData.CustomTitle;
            this.addMsg.CustomImg = jsonData.CustomImg;
            this.addMsg.IsChoice = jsonData.IsChoice;
            this.addMsg.TopicTypeId = jsonData.TopicTypeId;
            this.addMsg.ReadNum = jsonData.ReadNum;
            this.addMsg.SortNum = jsonData.SortNum;
            if(jsonData.ComponentDataList){
                this.addMsg.ComponentDataList = jsonData.ComponentDataList;
                this.pluginData = jsonData.ComponentDataList;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除
      RemmoveRole(item) {
        var that = this;
        that.Confirm("是否要删除?", function () {
          that.apipost("/api/MContent/RemoveTopic", {
            Id: item.Id
          }, res => {
            if (res.data.resultCode == 1) {
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          })
        })
      },
      //点击设置组件
      setPlugin(Id) {
        switch (Id.toString()) {
          //图片广告
          case 'rubik':
            let rubObj = {
              Id: 'rubik',
              isCked: false,
              data: {
                style: -1, //样式-选取几张图
                space: 0, //图片件间隔
                height: 0, //选中的第几张图 对应的style_list里的height
                w: 1, //选中的第几张图 对应的style_list里的w
                h: 1, //选中的第几张图 对应的style_list里的h
                list: [], //选中的第几张图的小区域对应的数据
                hotspot: [] //热区划分
              }
            }
            this.pluginData.push(rubObj);
            break;
            //视频
          case 'video':
            let videoObj = {
              Id: 'video',
              isCked: false,
              data: {
                pic_url: '', //图片地址
                url: '' //视频地址
              }
            }
            this.pluginData.push(videoObj);
            break;
            //图文详情
          case 'image-text':
            let tuwenObj = {
              Id: 'image-text',
              isCked: false,
              data: {
                content: '',
              }
            }
            this.pluginData.push(tuwenObj);
            break;
        }
      },
      //给子组件调用 重新排序上移下移
      getSord(index, IsUp) {
        var currentItem = this.pluginData[index];
        if (IsUp == 0) {
          if (index > 0) {
            var upItem = this.pluginData[index - 1];
            this.$set(this.pluginData, index - 1, currentItem);
            this.$set(this.pluginData, index, upItem);
          }
        } else {
          if (index != this.pluginData.length - 1) {
            var downItem = this.pluginData[index + 1];
            this.$set(this.pluginData, index + 1, currentItem);
            this.$set(this.pluginData, index, downItem);
          }
        }
      },
      //删除组件事件
      comDelPlugin(index) {
        this.pluginData.splice(index, 1);
      },
      //点击选中
      getItem(item) {
        this.pluginData.forEach(x => {
          x.isCked = false;
        })
        item.isCked = true;
      },
      getTypeList() {
        this.apipost("/api/MContent/GetTopicTypeList", {}, res => {
          if (res.data.resultCode == 1) {
            this.TypeList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.getTypeList();
      this.getList();
    }
  };

</script>
<style>
  .special .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .special .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .special .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .special .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .special .contentTwo {
    min-width: 1000px;
    padding: 20px;
    padding-right: 50%;
  }

  .special .el-alert__content {
    display: flex;
    align-items: center;
  }

  .special .el-alert {
    padding: 0 0 5px 5px;
  }

  .special .el-alert__title {
    margin-top: 5px;
  }

  .special .flexTypeList {
    color: rgb(99, 108, 114);
    font-size: 12px;
    margin-top: -0.5rem;
  }

  .all-components {
    width: 422px;
    background: #fff;
    max-height: 625px;
    overflow-y: auto;
  }

  .all-components .component-list {
    display: flex;
    flex-wrap: wrap;
    border: 0 solid #eeeeee;
    border-width: 1px 0 0 1px;
  }

  .all-components .component-list .component-item {
    width: 140px;
    height: 100px;
    border: 0 solid #eeeeee;
    border-width: 0 1px 1px 0;
    text-align: center;
    padding: 15px 0 0;
    cursor: pointer;
  }

  .all-components .component-list .component-item img {
    width: 40px;
    height: 40px;
  }

  .special_Content {
    width: 430px;
    overflow: hidden auto;
    margin-top: 16px;
    height: 605px;
  }

  .special_Content .mobile-framework {
    width: 420px;
    padding: 22px 22px 22px 23px;
    background-color: #FFFFFF;
    border-radius: 16px;
  }

  .special_Content .mobile-framework-header {
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    text-align: center;
    background: url(../../assets/img/storeDesign/topic-head.png) no-repeat;
    border: 0 solid #eeeeee;
    border-width: 2px 2px 0 2px;
    width: 375px;
  }

  .special_Content .mobile-framework-body {
    width: 375px;
    min-height: 500px;
    border: 1px solid #e2e2e2;
    background: #f5f7f9;
  }

  .diy-component-options .el-button {
    height: 25px;
    line-height: 25px;
    width: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    position: absolute;
    margin-left: 0;
  }

  .diy-component-preview {
    cursor: pointer;
    position: relative;
    zoom: 0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: top left;
    font-size: 28px;
  }

  .diy-component-edit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 465px;
    right: 0;
    background: #fff;
    padding: 20px;
    overflow: auto;
    min-width: 650px;
    padding-right: 20%;
  }

  .diy-component-options {
    position: relative;
  }

  .active .diy-component-preview {
    border: 2px dashed #409EFF;
    left: -2px;
    right: -2px;
    width: calc(100% + 4px);
  }

</style>
