<!--
 * @Author: Jenkins
 * @Date: 2020-12-01 09:54:12
 * @LastEditTime: 2020-12-03 17:39:59
 * @LastEditors: Please set LastEditors
 * @Description: 星云动态
 * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\index.vue
-->
<template>
  <div id='nebulaDynamics'>
      <!-- 顶部功能栏 -->
      <div class="top">
          <div class="title">星云动态</div>
          <div class="controls">
              <div class="item" v-for="(val,index) in topControls" :key="index" @click="topControlActive(val.key)">
                  {{val.name}}
              </div>
          </div>
      </div>
      <!-- 类型管理弹框 -->
      <el-dialog title="类型管理" :visible.sync="typeManagerVisible" append-to-body>
        <div id="typeManager">
            <div class="controls">
                <div class="addUpdate" @click="typeCreatorVisible = true">
                    添加类型
                </div>
            </div>
            <div class="content">
                <el-table :data="tableType" border fit highlight-current-row style="width: 100%" max-height="400">
                    <el-table-column label="序号" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型名称" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.sort}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span>
                                <div class="operators">
                                    <div class="edit">编辑</div>
                                    <div class="offshelf">下架</div>
                                    <div class="delete">删除</div>
                                </div>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 添加类型弹框 -->
        <el-dialog width="40%" title="添加类型" :visible.sync="typeCreatorVisible" append-to-body>
            <div id="typeCreator">
                <div class="content">
                    <span>*类型名称</span>
                    <el-col :span="14">
                        <el-input v-model="newType" placeholder="请输入类型名称" size="100px"></el-input>
                    </el-col>
                </div>
                <div class="content">
                    <span>*类型排序</span>
                    <el-col :span="14">
                        <el-input v-model="newSort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
                    </el-col>
                </div>
                <div class="operators">
                    <div class="cancel">取消</div>
                    <div class="confirm">确定</div>
                </div>
            </div>
        </el-dialog>
    </el-dialog>
      <!-- 操作表格栏 -->
      <div class="operators">
          <div class="status">
            <span>所有状态</span>
            <el-select v-model="currentStatus" placeholder="全部">
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
          </div>
          <div class="types">
            <span>资讯类型</span>
            <el-select v-model="currentTypes" placeholder="全部">
                <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
          </div>
          <div class="sorts">
            <span>排序</span>
            <el-select v-model="currentSorts" placeholder="全部">
                <el-option v-for="item in sorts" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
          </div>
          <div class="controls">
              <div class="item" v-for="(item,index) in operatorControls" :key="index">
                  {{item.name}}
              </div>
          </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
            <el-table-column label="序号" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column label="资讯标题" width="200" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="缩略图" width="150" align="center">
                <template slot-scope="scope">
                    <span>
                        <img class="icon" :src="scope.row.icon.url" @click="showPreview(scope.row.icon)"/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="简介" align="center">
                <template slot-scope="scope">
                    <span class="introduce">{{scope.row.introduce}}</span>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.type}}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.sort}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.status}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <!-- <span>{{scope.row.operator}}</span> -->
                    <span>
                        <div class="operators">
                            <div class="edit">编辑</div>
                            <div class="offshelf">下架</div>
                            <div class="delete">删除</div>
                        </div>
                    </span>
                </template>
            </el-table-column>
        </el-table>
      </div>
    <!-- 使用图片查看器预览当前缩略图 -->  
    <el-image-viewer  v-if="currentIcon.showPreview" :on-close="closePreview" :url-list="[currentIcon.url]" />
  </div>
</template>

<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
// 导入请求
import { getAllnewsType,getListnewsType,addUpdateNewsType,getListNewsInfo,addUpdateNewsInfo } from '@/api/website/newsCategory/index';
export default {
  name: 'nebulaDynamics',
  components: {
      ElImageViewer
  },
  data(){
    return {
        // 功能按钮
        topControls: [{
            key: 'manager',
            name: '类型管理',
        },{
            key: 'creator',
            name: '创建资讯文章',
        }],
        typeManagerVisible: false,
        typeCreatorVisible: false,
        newType: "",
        newSort: "",
        // 状态下拉
        status: [{
          value: '1',
          label: '全部'
        }, {
          value: '2',
          label: '上架'
        }, {
          value: '3',
          label: '下架'
        }],
        currentStatus: '全部',
        // 类型下拉
        types: [{
          value: '1',
          label: '全部'
        }, {
          value: '2',
          label: '新闻动态'
        }, {
          value: '3',
          label: '行业新闻'
        }, {
          value: '4',
          label: '新闻发布'
        }],
        currentTypes: '全部',
        // 排序下拉
        sorts: [{
          value: '1',
          label: '全部'
        }, {
          value: '2',
          label: '降序'
        }, {
          value: '3',
          label: '升序'
        }],
        currentSorts: '全部', 
        // 功能按钮
        operatorControls: [{
            name: '搜索',
        },{
            name: '清空搜索',
        }],
        // 表格数据
        tableData: [{
            id: '1',
            title: '王小虎',
            icon: {
                url: 'https://onemap.obtdata.com/wx/download/world.png',
                showPreview: false
            },
            introduce: '介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍',
            type: '类型',
            sort: '排序',
            status: '状态',
            operator: '操作',
        }],
        currentIcon: '',
        // 类型表格数据
        tableType: [{
            id: '1',
            name: '类型名称',
            sort: '排序',
            operator: '操作'
        }],
    }
  },
  mounted() {
    /**
    // 获取所有新闻类型
    getAllnewsType().then(res => {
        console.log("获取所有新闻类型=>",res)
    });
    // 获取分页新闻类型
    getListnewsType({
        page: "0",
        limit: "10",
        name: ""
    }).then(res => {
        console.log("获取分页新闻类型=>",res)
    });
    // 新增或更新新闻类型
    addUpdateNewsType({
        nameCn: "行业创新",
        nameEn: "News creation",
        rank: 0,
        status: 1,
        id: "11"
    }).then(res => {
        console.log("新增或更新新闻类型=>",res)
    });
    // 获取分页新闻资讯
    getListNewsInfo({
        page: "0",
        limit: "10",
        typeId: "1"
    }).then(res => {
        console.log("获取分页新闻资讯=>",res)
    });
    // 新增或更新新闻资讯
    addUpdateNewsInfo({
        id: 1001,
        title: "",
        detail: "",
        coverImg: "",
        content: "",
        newsDate: "2020-12-25 17:29:34",
        typeId: 1,
        status: 1,
        indexShow: 1,
        typeName: ""
    }).then(res => {
        console.log("新增或更新新闻资讯",res)
    });
     */
  },
  methods: {
      topControlActive(key){
          if(key=='manager'){
              this.typeManagerVisible = true
          }else{
              this.$parent.componentName = "newsCreator"
          }
      },
      showPreview(icon){
          this.currentIcon=icon
          this.currentIcon.showPreview=true
      },
      closePreview(){
          this.currentIcon.showPreview=false
      }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    #nebulaDynamics{
        margin: 0 1% 0 1%;
        width: 98%;
        height: auto;
        .top{
            width: 100%;
            height: 68px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            border-bottom: 1px solid #EEEEEE;
            .title{
                width: 114px;
                height: 46px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                color: #000000;
                overflow: hidden;   
            }
            .controls{
                width: 296px;
                height: 46px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                overflow: hidden; 
                .item{
                    width: 138px;
                    height: 46px;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    background-color: #5178F2;
                    border: 1px solid #5178F2;
                    border-radius: 5px;
                    color: #FFFFFF;
                    font-weight: 400;
                    cursor: pointer;
                    overflow: hidden; 
                }
            }
        }
        .operators{
            // margin: 0 1% 0 1%;
            width: 100%;
            height: 68px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .status,.types,.sorts{
                width: auto;
                height: 46px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                span{
                    margin: 0 10px 0 20px;
                }
            }
            .controls{
                margin-left: 40px;
                width: 260px;
                height: 46px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .item{
                    width: 120px;
                    height: 36px;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    font-weight: 400;
                    color: #5178F2;
                    border: 1px solid #5178F2;
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
        }
        .table{
            margin: 1% 1% 0 1%;
            width: 98%;
            height: auto;
            span{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .icon{
                    width: 50px;
                    height: 50px;
                    object-fit: cover;
                }
                .operators{
                    width: 300px;
                    height: 46px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    .edit,.offshelf,.delete{
                        width: auto;
                        height: 36px;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }
                    .edit,.offshelf{
                        color: #1890FF;
                    }
                    .delete{
                        color: #FE4066;
                    }
                }
            }
            
        }
    }
    #typeManager{
        width: 100%;
        height: auto;
        .controls{
            margin: 0 0 30px 0;
            width: 100%;
            height: 46px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .addUpdate{
                width: 120px;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                color: #5178F2;
                border: 1px solid #5178F2;
                border-radius: 5px;
                cursor: pointer;
            }
        }
        .content{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .operators{
                width: auto;
                height: 16px;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                .edit,.offshelf,.delete{
                    width: auto;
                    height: 16px;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
                .edit,.offshelf{
                    color: #1890FF;
                }
                .delete{
                    color: #FE4066;
                }
            }
        }
    }
    #typeCreator{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .content{
            margin-bottom: 25px;
            width: 100%;
            height: 26px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            span{
                width: 100px;
                height: 26px;
            }
        }
        .operators{
            margin: 25px 0 0 0;
            width: 100%;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .cancel,.confirm{
                margin-left: 20px;
                width: 82px;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
            }
            .cancel{
                border: 1px solid #bdbdbd;
                color: #000000;
                cursor: pointer;
            }
            .confirm{
                border: 1px solid #5178F2;
                background-color: #5178F2;
                color: #FFFFFF;
                cursor: pointer;
            }
        }
    }
</style>