<!--
 * @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,
        status: info.status,
      }).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.sort + "");
            let val2 = parseInt(obj2.sort + "");
            if (val1 < val2) {
              return 1;
            } else if (val1 > val2) {
              return -1;
            } else {
              return 0;
            }
          });
        } else {
          // 按升序
          this.tableData.sort((obj1, obj2) => {
            let val1 = parseInt(obj1.sort + "");
            let val2 = parseInt(obj2.sort + "");
            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>
