<style>
  /* ------------------预览------------------- */
  .diy-topic .diy-component-preview {
    width: 100%;
  }

  .diy-topic .diy-component-preview .diy-topic-normal {
    width: 100%;
    padding: 10px;
    background: #fff;
  }

  .diy-topic .diy-component-preview .cat-list {
    width: 100%;
    overflow-x: auto;
    background: #fff;
  }

  .diy-topic .diy-component-preview .cat-list .cat-item {
    height: 80px;
    padding: 0 10px;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    margin: 0 20px;
  }

  .diy-topic .diy-component-preview .cat-list .cat-item.active {
    border-bottom: 4px #ff4544 solid;
  }

  .diy-topic .diy-component-preview .topic-list {}

  .diy-topic .diy-component-preview .topic-list .topic-item {
    padding: 24px;
    margin-top: 12px;
    background: #fff;
  }

  .diy-topic .diy-component-preview .topic-list .topic-item .browse {
    font-size: 24px;
    color: #888;
    margin-top: 12px;
  }

  .diy-topic .diy-component-preview .topic-list .topic-item .topic-pic {
    background: #eee;
  }


  /* ------------------设置------------------- */
  .diy-topic .diy-component-edit .diy-topic-label {
    width: 82px;
  }

  .diy-topic .topic-edit-options {
    position: relative;
    overflow: visible;
  }

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

  .topiclogo_img1 {
    background-size: 100% 100%;
    background-position: center center;
    width: 104px;
    height: 32px;
    border-radius: 0%;
    margin-right: 20px;
  }

  .topiclogo_img2 {
    background-size: 100% 100%;
    background-position: center center;
    width: 104px;
    height: 50px;
    border-radius: 0%;
    margin-right: 20px;
  }

  .topiclogo_img3 {
    background-size: 100% 100%;
    background-position: center center;
    width: 54px;
    height: 28px;
    border-radius: 0%;
    margin-right: 10px;
  }

  .topic-Mypic {
    background-color:#eee;
  }

  .topic-Mypic img {
    width: 100%;
    height: 100%;
  }

</style>
<template>
  <div :class="{'active':topicData.isCked}">
    <div class="diy-component-options" v-if="topicData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-topic">
      <div class="diy-component-preview">
        <div class="diy-topic-normal" flex="dir:left cross:center" v-if="data.style == 'normal'">
          <template v-if="data.count==1">
            <div class="topiclogo_img1" :style="{backgroundImage:'url(' + getIconLink(data.logo_1) + ')'}"></div>
          </template>
          <template v-else>
            <div class="topiclogo_img2" :style="{backgroundImage:'url(' + getIconLink(data.logo_2) + ')'}"></div>
          </template>
          <div :style="cStyle">
            <div flex="dir:left cross:center" v-for="(topic,index) in cTopic" :key="index">
              <div class="topiclogo_img3" :style="{backgroundImage:'url(' + getIconLink(data.icon) + ')'}"></div>
              <div>{{topic.title}}</div>
            </div>
          </div>
        </div>
        <div class="diy-topic-list" v-if="data.style == 'list'">
          <template v-if="data.cat_show">
            <div class="cat-list" flex="dir:left">
              <div class="cat-item" flex="main:center cross:center" v-for="(cat, index) in cList" :key="index"
                :class="index == cat_index ? 'active' : ''" @click="selectCat(index)">
                <div>{{cat.name}}</div>
              </div>
            </div>
          </template>
          <div class="topic-list">
            <template v-for="(topic,topIndex) in cTopic">
              <div class="topic-item" v-if="topic.layout == 0" flex="dir:left box:last" :key="topIndex">
                <div flex="dir:top box:last">
                  <div class="topic-title">
                    <div class="vue-line-clamp" style="-webkit-line-clamp: 2">{{topic.title}}</div>
                  </div>
                  <div class="browse">{{topic.read_count}}人浏览</div>
                </div>
                <div class="topic-Mypic" style="width:268px;height:202px;">
                  <img :src="getIconLink(topic.cover_pic)" v-if="topic.cover_pic!=''" />
                  <img src="../../../assets/img/default.png" v-else />
                </div>
              </div>
              <div class="topic-item" v-else flex="dir:top" :key="topIndex">
                <div class="topic-title">
                  <div class="vue-line-clamp" style="-webkit-line-clamp: 2">{{topic.title}}</div>
                </div>
                <div class="topic-Mypic" style="width:702px;height:350px;">
                  <img :src="getIconLink(topic.cover_pic)" v-if="topic.cover_pic!=''" />
                  <img src="../../../assets/img/default.png" v-else />
                </div>
                <div class="browse">{{topic.read_count}}人浏览</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="topicData.isCked">
        <el-form label-width="100px" @submit.native.prevent>
          <el-form-item label="专题样式">
            <el-radio v-model="data.style" label="normal">简易模式</el-radio>
            <el-radio v-model="data.style" label="list">列表模式</el-radio>
          </el-form-item>
          <template v-if="data.style == 'normal'">
            <el-form-item label="显示行数">
              <el-select size="small" v-model="data.count">
                <el-option :value="1"></el-option>
                <el-option :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="logo(1行)">
              <el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top">
                <el-button size="mini" @click="choicImg=true,commonIndex=1">选择图片</el-button>
              </el-tooltip>
              <div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;"
                :style="{backgroundImage:'url(' + getIconLink(data.logo_1) + ')'}">
                <el-button type="danger"
                  v-if="data.logo_1!=domainManager().ImageUrl+'/Static/icon-topic-1.png'"
                  class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.logo_1=domainManager().ImageUrl+'/Static/icon-topic-1.png'" circle>
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="logo(2行)">
                <el-tooltip class="item" effect="dark" content="建议尺寸104*50" placement="top">
                  <el-button size="mini" @click="choicImg=true,commonIndex=2">选择图片</el-button>
                </el-tooltip>
              <div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;"
                :style="{backgroundImage:'url(' + getIconLink(data.logo_2) + ')'}">
                <el-button type="danger"
                  v-if="data.logo_2!=domainManager().ImageUrl+'/Static/icon-topic-2.png'"
                  class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.logo_2=domainManager().ImageUrl+'/Static/icon-topic-2.png'" circle>
                </el-button>
              </div>
            </el-form-item>
            <el-form-item label="专题标签">
            <el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
                <el-button size="mini" @click="choicImg=true,commonIndex=3">选择图片</el-button>
            </el-tooltip>
              <div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;">
                <el-button type="danger"
                  v-if="data.icon!=domainManager().ImageUrl+'/Static/icon-topic-r.png'"
                  class="image-delete" size="mini" style="visibility:visible" icon="el-icon-close" @click.stop="data.icon=domainManager().ImageUrl+'/Static/icon-topic-r.png'" circle>
                </el-button>
                <img :src="getIconLink(data.icon)" style="max-width:100%;max-height:100%;" alt=""/>
              </div>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="是否显示分类">
              <el-switch v-model="data.cat_show"></el-switch>
            </el-form-item>
            <el-form-item label="分类列表" v-if="data.cat_show">
              <el-card shadow="never" class="topic-edit-options" style="margin-bottom: 24px"
                v-for="(cat, catIndex) in data.list" :key="catIndex">
                <div @click="selectCat(catIndex)">
                  <div flex="box:first">
                    <div class="diy-topic-label">专题分类</div>
                    <div>{{cat.cat_name}}</div>
                  </div>
                  <div flex="box:first">
                    <div class="diy-topic-label">菜单名称</div>
                    <div>
                      <el-input v-model="cat.name" size="small"></el-input>
                    </div>
                  </div>
                  <div flex="box:first">
                    <div class="diy-topic-label">自定义专题</div>
                    <div>
                      <el-switch v-model="cat.custom" :inactive-value="0" :active-value="1"></el-switch>
                    </div>
                  </div>
                  <div flex="box:first" v-if="cat.custom==0">
                    <div class="diy-topic-label">专题数量</div>
                    <div>
                      <el-input v-model="cat.number" size="small"></el-input>
                    </div>
                  </div>
                  <div flex="box:first" v-else>
                    <div class="diy-topic-label">专题列表</div>
                    <div>
                        <el-button size="mini" @click="isShowZhuanti=true,isTopicCheck=2">添加专题</el-button>
                        <div style="display:flex">
                          <div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;margin-right:10px;" v-for="(childItem,subIndex) in cat.children" :key="subIndex">
                            <el-button type="danger" style="visibility:visible" @click="deleteTopic(childItem,subIndex)" class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.icon=domainManager().ImageUrl+'/Static/icon-topic-r.png'" circle>
                            </el-button>
                            <img :src="getIconLink(childItem.cover_pic)" style="width:100%;height:100%;" alt=""/>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
                <el-button class="delete" @click="topicCatDelete(catIndex)" type="primary" icon="el-icon-delete"
                  style="top: 0;right: -26px;"></el-button>
              </el-card>
              <el-button size="mini" @click="isShowTopic=true">添加分类</el-button>
            </el-form-item>
            <el-form-item label="专题列表" v-else>
              <el-button size="mini" @click="isShowZhuanti=true,isTopicCheck=1">添加专题</el-button>
              <div style="display:flex">
                <div class="zk_pic_box" flex="main:center cross:center" style="width:100px;height:100px;margin-right:10px;" v-for="(sItem,sIndex) in data.topic_list" :key="sIndex">
                  <el-button type="danger" style="visibility:visible" @click="deleteTopic(sItem,sIndex)" class="image-delete" size="mini" icon="el-icon-close" @click.stop="data.icon=domainManager().ImageUrl+'/Static/icon-topic-r.png'" circle>
                  </el-button>
                  <img :src="getIconLink(sItem.cover_pic)" style="width:100%;height:100%;" alt=""/>
                </div>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog :title="commonTitle" :visible.sync="isShowTopic" width="960px">
      <choiceTopicFenlei ref="choiceTopicFenlei"></choiceTopicFenlei>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowTopic=false">取 消</el-button>
        <el-button size="small" type="danger" @click="saveTopic()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加专题 -->
    <el-dialog :title="commonTitle" :visible.sync="isShowZhuanti" width="960px">
      <choiceZhuanti ref="choiceZhuanti"></choiceZhuanti>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowZhuanti=false">取 消</el-button>
        <el-button size="small" type="danger" @click="saveZhuanti()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import choiceTopicFenlei from "../../common/choiceTopicFenlei.vue";
  import choiceZhuanti from "../../common/choiceZhuanti.vue";
  export default {
    props: ["topicData", "index", "dataLeng"],
    components: {
      ChooseImg,
      choiceTopicFenlei,
      choiceZhuanti
    },
    data() {
      return {
        choicImg: false,
        isShowTopic:false,
        isShowZhuanti:false,
        data: this.topicData.data,
        defaultData: {},
        cat_index: 0,
        topicShow: false,
        catShow: false,
        commonIndex: -1,
        commonTitle:'',
        isTopicCheck:-1

      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.commonIndex == 1) {
          this.data.logo_1 = msg.url;
        } else if (this.commonIndex == 2) {
          this.data.logo_2 = msg.url;
        } else if(this.commonIndex==3){
          this.data.icon = msg.url;
        }

        this.choicImg = false;
      },
      topicCatDelete(index) {
        this.data.list.splice(index, 1);
      },

      deleteTopic(item, index) {
        if (this.data.cat_show) {
          this.data.list[this.cat_index].children.splice(index, 1)
        } else {
          this.data.topic_list.splice(index, 1)
        }
      },
      selectCat(index) {
        this.cat_index = index
      },
      //保存选择分类
      saveTopic(){
        var ckedArr=this.$refs.choiceTopicFenlei.getChoicedFenlei(); 
        ckedArr.forEach(x => {
          let obj={
            cat_id: x.Id,
            cat_name:x.TopicName,  //专题分类
            name:x.TopicName,  //菜单名称
            custom:1,   //自定义主题
            number:3,
            children:[]
          }
          this.data.list.push(obj);
        });
        this.isShowTopic=false;
        this.$refs.choiceTopicFenlei.toggleSelection();
      },
      //保存专题
      saveZhuanti(){
        var ckedArr=this.$refs.choiceZhuanti.getmyTopic(); 
          let topic_list = [];
          ckedArr.forEach(x=>{
            topic_list.push({
              title: x.Title,
              cover_pic: x.CoverImg,
              read_count: x.ReadNum,
              id: x.Id
            });
          })
          topic_list = JSON.parse(JSON.stringify(topic_list));
        if(this.isTopicCheck==2){
          if (this.data.list && this.data.list.length > 0) {
            this.data.list[this.cat_index].children = this.data.list[this.cat_index].children.concat(topic_list);
          }
        }
        if(this.isTopicCheck==1){
          this.data.topic_list = this.data.topic_list.concat(topic_list);
        }
        this.$refs.choiceZhuanti.toggleSelection();
        this.isShowZhuanti=false;
      }
    },
    computed: {
      cList() {
        if (this.data.list && this.data.list.length > 0 && this.data.cat_show) {
          return this.data.list;
        } else {
          let catList = {
            cat_id: 0,
            cat_name: '分类名称',
            name: '分类名称',
            children: [],
            custom: 0,
            number: 0
          };
          return [catList, catList]
        }
      },
      cTopic() {
        if (this.data.list && this.data.list.length > 0 &&
          this.data.list[this.cat_index].children && this.data.list[this.cat_index].children.length > 0 &&
          this.data.cat_show) {
          return this.data.list[this.cat_index].children;
        } else if (this.data.topic_list && this.data.topic_list.length > 0 && !this.data.cat_show) {
          return this.data.topic_list;
        } else {
          let topic = {
            title: '这是一条专题示例',
            cover_pic: '',
            read_count: '999',
            layout: 0,
            id: 0
          };
          let topic_1 = JSON.parse(JSON.stringify(topic));
          topic_1.layout = 1;
          return [topic, topic_1];
        }
      },
      cStyle() {
        if (this.data.style === 'normal') {
          if (this.data.count === 1) {
            return 'height: 32px;overflow-y: hidden;line-height: 32px'
          }
        }
      },
    },
    mounted() {

    }
  };

</script>