<!--
 * @Author: Jenkins
 * @Date: 2020-12-01 09:54:12
 * @LastEditTime: 2020-12-11 11:27:34
 * @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" @click.stop="clickTypeEditor(scope.row)">编辑</div>
                    <div class="offshelf" v-if="scope.row.status==1" @click.stop="changeTypeStatus(scope.row)">下架</div>
                    <div class="upshelf" v-else @click.stop="changeTypeStatus(scope.row)">上架</div>
                    <div class="delete" @click.stop="delType(scope.row)">删除</div>
                  </div>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="typePagination">
            <el-pagination
            @size-change="changeHandleSize"
            @current-change="changeHandleCurrent"
            :current-page.sync="typePagination.currentPage"
            :page-sizes="[2,4,6]"
            :page-size="typePagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="typePagination.total">
            </el-pagination>
        </div>
      </div>
      <!-- 编辑类型弹框 -->
      <el-dialog width="40%" title="编辑类型" :visible.sync="typeEditorVisible" append-to-body>
        <div id="typeEditor">
          <div class="content">
            <el-form ref="form" :rules="createRules" :model="editorType" label-width="80px">
              <el-form-item label="类型名称" prop="name">
                  <el-col :span="24">
                    <el-input v-model="editorType.name" placeholder="请输入类型名称"></el-input>
                  </el-col>
              </el-form-item>
              <el-form-item label="类型排序" prop="sort">
                  <el-col :span="24">
                    <el-input v-model="editorType.sort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
                  </el-col>
              </el-form-item>
            </el-form> 
          </div>
          <div class="operators">
            <div class="cancel" @click.stop="cancelEditor">取消</div>
            <div class="confirm" @click.stop="confirmEditor">确定</div>
          </div>
        </div>
      </el-dialog>
      <!-- 添加类型弹框 -->
      <el-dialog width="40%" title="添加类型" :visible.sync="typeCreatorVisible" append-to-body>
        <div id="typeCreator">
          <div class="content">
            <el-form ref="form" :rules="newRules" :model="newType" label-width="80px">
              <el-form-item label="类型名称" prop="newName">
                <el-col :span="24">
                  <el-input v-model="newType.newName" placeholder="请输入类型名称" size="100px"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="类型排序" prop="newSort">
                <el-col :span="24">
                  <el-input v-model="newType.newSort" placeholder="请设置排序0-10000,数值越大排序越靠前"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </div>
          <div class="operators">
            <div class="cancel" @click.stop="typeCreatorVisible = false">取消</div>
            <div class="confirm" @click.stop="createType">确定</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="currentType" 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="currentSort" 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"
          @click.stop="clickOperator(item.type)"
        >
          {{ 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.index }}</span>
          </template>
        </el-table-column>
        <el-table-column label="资讯标题" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="缩略图" 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="类型" 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 == 1 ? "上架" : "下架" }}</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" @click.stop="editorInfo(scope.row)">编辑</div>
                <div class="offshelf" v-if="scope.row.status == 1" @click.stop="changeInfoStatus(scope.row)">下架</div>
                <div class="upshelf" v-else @click.stop="changeInfoStatus(scope.row)">上架</div>
                <div class="delete" @click.stop="delInfo(scope.row)">删除</div>
              </div>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="infoPagination" v-show="infoPagination">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="infoPagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="infoPagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="infoPagination.total">
        </el-pagination>
    </div>
    <!-- <el-dialog title="资讯编辑" :visible.sync="infoEditorVisible" append-to-body>
      <div id="infoEditor">

      </div>
    </el-dialog> -->
    <!-- 使用图片查看器预览当前缩略图 -->
    <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 {
      createRules: {
          name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
          sort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
      },
      newRules: {
          newName: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
          newSort: [{ required: true, message: '请设置排序号', trigger: 'blur' }],
      },
      // 功能按钮
      topControls: [
        {
          key: "manager",
          name: "类型管理",
        },
        {
          key: "creator",
          name: "创建资讯文章",
        },
      ],
      typeManagerVisible: false,
      typeCreatorVisible: false,
      newType: {
        newName: "",
        newSort: "",
      },
      // 状态框
      status: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "上架",
        },
        {
          value: "2",
          label: "下架",
        },
      ],
      currentStatus: this.$parent.currentEditStatus,
      // 类型框
      typesState: [],
      types: [
        {
          value: "",
          label: "全部",
        },
      ],
      currentType: this.$parent.currentEditType,
      // 排序框
      sorts: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "降序",
        },
        {
          value: "2",
          label: "升序",
        },
      ],
      currentSort: this.$parent.currentEditSort,
      // 功能按钮
      operatorControls: [
        {
          type: "search",
          name: "搜索",
        },
        {
          type: "clearSearch",
          name: "清空搜索",
        },
      ],
      canPull: false,
    //   infoEditorVisible: false,
      // 表格数据
      tableData: [
        // {
        //   id: "1",
        //   title: "王小虎",
        //   icon: {
        //     url: "https://onemap.obtdata.com/wx/download/world.png",
        //     showPreview: false,
        //   },
        //   introduce: "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍",
        //   type: "类型",
        //   sort: "排序",
        //   status: "状态",
        //   operator: "操作",
        // },
      ],
      tableDataState: [],// 缓存当前的表格数据
      infoPagination: {
          currentPage: this.$parent.currentEditPage,// 当前页码
          pageSize: 10,// 每页查询数量
          total: 0,// 总记录数量
      },
      // 当前查看器显示的图片
      currentIcon: "",
      // 类型表格数据
      tableType: [
        // {
        //   id: "1",
        //   name: "类型名称",
        //   sort: "排序",
        // },
      ],
      typePagination: {
          currentPage: 1,// 当前页码
          pageSize: 2,// 每页查询数量
          total: 0,// 总记录数量
      },
      typeEditorVisible: false,
      editorType: {},// 编辑中的类型
    };
  },
  watch:{
    //   // 筛选状态发生改变
    //   currentStatus(newVal) {
    //       console.log("状态=>",newVal)
    //     this.screenTableData()
    //   },
    //   // 筛选类型发生改变
    //   currentType(newVal) {
    //       console.log("类型=>",newVal)
    //       this.screenTableData()
    //   },
    //   // 筛选排序发生改变
    //   currentSort(newVal) {
    //       console.log("排序=>",newVal)
    //       this.screenTableData()
    //   },
      canPull(newVal){
        // 分页获取新闻信息
        newVal&&(this.pullListNewsInfo())
      },
      // 当前页码有改变时重新拉取分页数据
      "infoPagination.currentPage": {
          deep: true,
          handler: function(newVal){
              this.pullListNewsInfo()
          }
      },
      // 当查询数量有改变时重新拉取分页数据
      "infoPagination.pageSize": {
          deep: true,
          handler: function(newVal){
              this.pullListNewsInfo()
          }
      },
      // 关闭当前类型弹框时重新加载资讯
      typeManagerVisible(newVal){
          !newVal && (this.pullListNewsInfo())
      },
      // 类型表格筛选页码改变
      "typePagination.currentPage": {
          deep: true,
          handler(){
            //   this.changeTableType()
            this.pullListNewsType()
          }
      },
      // 类型表格筛选数量改变
      "typePagination.pageSize": {
          deep: true,
          handler(){
            //   this.changeTableType()
            this.pullListNewsType()
          }
      }
  },
  mounted() {
    // 获取所有新闻类型
    this.pullAllNewsType()
  },
  methods: {
    // 删除新闻信息
    delInfo(info){
        this.$confirm('确定继续执行该操作吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            info.isDel = 1
            // 删除资讯
            addUpdateNewsInfo({
                id: info.id,
                title: info.title,
                detail: info.introduce,
                coverImg: info.icon.url,
                content: info.title,
                newsDate: info.newsDate,
                typeId: info.typeId,
                status: info.status,
                indexShow: info.indexShow,
                typeName: info.type,
                isDel: info.isDel,
            }).then(res => {
                if(res.status==200){
                    this.$message({
                        message: "删除成功!!!",
                        type: 'success'
                    })
                    this.pullListNewsInfo()
                }else{
                    this.$message.error('操作失败,请稍后重试!!!');
                }
            })
        })
    },
    // 更改资讯状态
    changeInfoStatus(info){
        let message = ""
        if(info.status==1){// 当前为启用
            info.status = 2
            message = "下架成功!!!"
        }else{
            info.status = 1
            message = "上架成功"
        }
        // 更新资讯
        addUpdateNewsInfo({
            id: info.id,
            title: info.title,
            detail: info.introduce,
            coverImg: info.icon.url,
            content: info.title,
            newsDate: info.newsDate,
            typeId: info.typeId,
            status: info.status,
            indexShow: info.indexShow,
            typeName: info.type,
            isDel: info.isDel,
        }).then(res => {
            if(res.status==200){
                this.$message({
                    message: message,
                    type: 'success'
                })
            }else{
                this.$message.error('操作失败,请稍后重试!!!');
            }
        })
    },
    // 编辑资讯
    editorInfo(info){
        console.log("Info=>",info)
        this.$parent.currentEditStatus = this.currentStatus
        this.$parent.currentEditType = this.currentType
        this.$parent.currentEditSort = this.currentSort
        this.$parent.currentEditPage = this.infoPagination.currentPage
        this.$parent.componentName = "newsCreator";
        this.$parent.regions = this.typesState
        this.$parent.info = info
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.infoPagination.pageSize = val
    },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.infoPagination.currentPage = val
    },
    // 获取所有的新闻类型
    pullAllNewsType(isInit = true){
        this.typesState = []
        this.types = [{
          value: "",
          label: "全部",
        }]
        // 获取所有新闻类型
        getAllnewsType().then((res) => {
            // console.log("所有的新闻类型=>",res)
            if(res.status == 200){
                res.data.forEach(element => {
                    // 未被删除的类型且已启用
                    if(element.isDel==0&&element.status==1){
                        this.types.push({
                            value: element.id,
                            label: element.nameCn
                        });
                    }
                    // 缓存所有类型
                    this.typesState.push(element);
                });
                // 升序排序
                this.types.sort((obj1,obj2)=>{
                    let val1 = parseInt((obj1.value+""))
                    let val2 = parseInt((obj2.value+""))
                    if(val1<val2){
                        return -1
                    }else if(val1>val2){
                        return 1
                    }else{
                        return 0
                    }
                });
                console.log("获取到的所有类型=>",this.typesState)
                // 改变类型表格数据
                // this.changeTableType()
                // 拉取分页表格数据
                this.pullListNewsType()
                this.canPull = isInit
            }
        });
    },
    // 分页获取新闻资讯
    pullListNewsInfo(){
        getListNewsInfo({
            page: this.infoPagination.currentPage,
            limit: this.infoPagination.pageSize,
            typeId: this.currentType,
        }).then((res) => {
            if(res.status == 200){
                // console.log("res=>",res)
                this.tableDataState = [] // 先清空当前缓存
                this.infoPagination.total = res.data.totalCount // 更改总记录数
                res.data.data.forEach(element => {
                    // 缓存当前的表格数据
                    this.tableDataState.push(element)
                })
                console.log("获取到的分页新闻资讯",this.tableDataState)
                // 将缓存的数据作进一步的筛选
                this.screenTableData()
            }
            // console.log("获取分页新闻资讯=>", res);
        });
    },
    // 筛选表格数据
    screenTableData(){
        // 先清空当前表格数据
        this.tableData = []
        console.log("星云动态缓存的表格数据=>",this.tableDataState)
        let index = 0
        // 先把未被删除的数据放入到表格
        this.tableDataState.forEach((element) => {
            // 未被删除则显示
            if(element.isDel == 0){
                let type = (this.typesState.find(ele => ele.id == element.typeId))
                this.tableData.push({
                    index: (this.infoPagination.pageSize*(this.infoPagination.currentPage-1))+(++index),// 序号
                    id: element.id, 
                    title: element.title,
                    icon: {
                        url: element.coverImg,
                        showPreview: false,
                    },
                    introduce: element.detail,
                    content: element.content,// 富文本内容
                    newsDate: element.newsDate,
                    type: type ? type.nameCn : "",
                    typeId: element.typeId,
                    sort: element.rank,
                    status: element.status,
                    indexShow: element.indexShow,
                    isDel: element.isDel,
                    isHot: element.isHot,
                });
            }
        });
        // 状态码不为空字符串(全部,上架1,下架2)
        if(this.currentStatus!=""){
            this.tableData = this.tableData.filter(element => element.status == this.currentStatus)
        }
        // 类型id不为空字符串(类型的id,若为空则筛选全部)
        if(this.currentType!=""){
            this.tableData = this.tableData.filter(element => element.typeId == this.currentType)
        }
        // 排序码不为空字符串(全部,升序1,降序2s)
        if(this.currentSort!=""){
            if(this.currentSort==1){
                // 按降序
                this.tableData.sort((obj1,obj2)=>{
                    let val1 = parseInt((obj1.id+""))
                    let val2 = parseInt((obj2.id+""))
                    if(val1<val2){
                        return 1
                    }else if(val1>val2){
                        return -1
                    }else{
                        return 0
                    }
                })
            }else{
                // 按升序
                this.tableData.sort((obj1,obj2)=>{
                    let val1 = parseInt((obj1.id+""))
                    let val2 = parseInt((obj2.id+""))
                    if(val1<val2){
                        return -1
                    }else if(val1>val2){
                        return 1
                    }else{
                        return 0
                    }
                })
            }
        }
    },
    // 顶部栏功能按钮
    topControlActive(key) {
      if (key == "manager") {
        this.typeManagerVisible = true;
        // 将获取到的所有新闻类型按字段放入到弹框表格中
        // console.log("所有新闻类型缓存数据=>",this.typesState)
        // this.changeTableType()
        // 拉取分页数据
        this.pullListNewsType()
      } else {
        this.$parent.componentName = "newsCreator";
        this.$parent.regions = this.typesState
        this.$parent.info = null
      }
    },
    // 获取类型分页的表格数据
    pullListNewsType(){
        // 先将当前类型表格数据清空
        this.tableType = []
        // 获取分页新闻类型
        getListnewsType({
            page: this.typePagination.currentPage,
            limit: this.typePagination.pageSize,
            name: "",
        }).then((res) => {
            console.log("获取分页新闻类型=>", res);
            if(res.status==200){
                this.typePagination.total = res.data.totalCount
                res.data.data.forEach(element => {
                    // 未被删除的类型
                    if(element.isDel==0){
                        this.tableType.push({
                            id: element.id,
                            name: element.nameCn,
                            nameEn: element.nameEn,
                            sort: element.rank,
                            status: element.status,
                            isDel: element.isDel
                        })
                    }
                })
            }
        });
    },
    // 更改类型表格
    // changeTableType(){
    //     this.tableType = []
    //     let startIndex = (this.typePagination.currentPage * this.typePagination.pageSize) - this.typePagination.pageSize; // 开始截取的索引位置
    //     let endIndex = startIndex + this.typePagination.pageSize // 结束截取的索引位置
    //     this.typePagination.total = this.typesState.length
    //     this.typesState.slice(startIndex,endIndex).forEach((element,index) => {
    //         // 未被删除的类型
    //         if(element.isDel==0){
    //             this.tableType.push({
    //                 id: element.id,
    //                 name: element.nameCn,
    //                 nameEn: element.nameEn,
    //                 sort: element.rank,
    //                 status: element.status,
    //                 isDel: element.isDel
    //             })
    //         }
    //     });
    //     this.typesState.sort((obj1,obj2)=>{
    //         let val1 = parseInt((obj1.id+""))
    //         let val2 = parseInt((obj2.id+""))
    //         if(val1<val2){
    //             return -1
    //         }else if(val1>val2){
    //             return 1
    //         }else{
    //             return 0
    //         }
    //     });
    //     console.log("类型表格数据改变=>",this.tableType)
    // },
    // 上下架类型
    changeTypeStatus(type){
       let message = ""
        if(type.status==1){// 当前为启用
            type.status=2
            message = "下架成功"
        }else{// 当前为弃用
            type.status=1 
            message = "上架成功"
        }
        addUpdateNewsType({
            id: type.id+'',
            nameCn: type.name,
            nameEn: type.nameEn,
            rank: type.sort,
            status: type.status, 
            isDel: type.isDel+'', // 0为不删除,1为删除
        }).then(res => {
            if(res.status == 200){
                this.$message({
                    message: message,
                    type: 'success'
                })
                this.pullAllNewsType(false)
            }else{
                this.$message.error('操作失败,请稍后重试!!!');
            }
        })
    },
    // 删除类型
    delType(type){
        this.$confirm('确定继续执行该操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            type.isDel = 1 
            addUpdateNewsType({
                id: type.id+'',
                nameCn: type.name,
                nameEn: type.nameEn,
                rank: type.sort,
                status: type.status, 
                isDel: type.isDel+'', // 0为不删除,1为删除
            }).then(res => {
                if(res.status == 200){
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    })
                    this.pullAllNewsType(false)
                }else{
                    this.$message.error('操作失败,请稍后重试!!!');
                }
            })
        });
    },
    // 添加类型
    createType(){
        if(this.newType.newName&&this.newType.newSort){
            // 必须是中文名称
            if(/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(this.newType.newName)){
                if(this.newType.newSort>=0&&this.newType.newSort<10000){
                    addUpdateNewsType({
                        nameCn: this.newType.newName,
                        nameEn: "",
                        rank: this.newType.newSort,
                        status: 1, // 创建即启用
                        isDel: "0", // 0为不删除,1为删除
                    }).then(res => {
                        if(res.status == 200){
                            this.$message({
                                message: '创建成功!!!',
                                type: 'success'
                            })
                            this.pullAllNewsType(false)
                            this.typeCreatorVisible = false
                        }
                    })
                }else{
                    this.$message.error('排序值不在指定范围,请输入正确的排序值!!!');
                }
            }else{
                this.$message.error('请输入中文名称!!!');
            }
        }else{
            this.$message.error('必填框有缺乏值,请完善输入!!!');
        }
    },
    clickTypeEditor(type){
        this.typeEditorVisible = true
        this.editorType = JSON.parse(JSON.stringify(type))
    },
    cancelEditor(){
      // this.pullListNewsType()
      this.typeEditorVisible = false
    },
    // 修改类型
    confirmEditor(){
        // 中文对应
        if(/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(this.editorType.name)){
            if(this.editorType.sort>=0&&this.editorType.sort<10000){
                // 上传修改
                addUpdateNewsType({ 
                    id: this.editorType.id,
                    nameCn: this.editorType.name,
                    nameEn: this.editorType.nameEn,
                    rank: this.editorType.sort,
                    status: this.editorType.status,// 1启用,2不启用
                    isDel: this.editorType.isDel,// 0不删除,1删除
                });
                this.$message({
                    message: '修改成功!!!',
                    type: 'success'
                })
                this.pullListNewsType()
                this.typeEditorVisible = false
            }else{
                this.$message.error('排序值不在指定范围,请输入正确的排序值!!!');
            }
        }else{
            this.$message.error('中文名称不正确!!!');
        }
    },
    // 功能按钮
    clickOperator(type){
        if(type == "search"){
            this.pullListNewsInfo()
        }else{
            this.currentStatus = ""
            this.currentType = ""
            this.currentSort = ""
            this.pullListNewsInfo()
        }
    },
    changeHandleSize(val) {
        // console.log(`每页 ${val} 条`);
        this.typePagination.pageSize = val
    },
    changeHandleCurrent(val) {
        // console.log(`当前页: ${val}`);
        this.typePagination.currentPage = val
    },
    // 显示图片查看器
    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;
        cursor: pointer;
      }
      .operators {
        width: 300px;
        height: 46px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .edit,
        .upshelf,
        .offshelf,
        .delete {
          width: auto;
          height: 36px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .edit,.upshelf{
          color: #1890ff;
        }
        .offshelf {
            color: #A6A9AD;
        }
        .delete {
          color: #fe4066;
        }
      }
    }
  }
  .infoPagination {
    margin: 1% 1% 0 1%;
    width: 98%;
  }
}
#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,
      .upshelf,
      .offshelf,
      .delete {
        width: auto;
        height: 16px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .edit,.upshelf{
        color: #1890ff;

      }
      .offshelf {
        color: #A6A9AD;
      }
      .delete {
        color: #fe4066;
      }
    }
  }
  .typePagination{
    margin: 30px 0;
    width: 100%;
  }
}
#typeCreator,#typeEditor{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .content{
    margin-left: 70px;
    width: calc(100% - 70px);
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}
#typeCreator,#typeEditor{
  .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>