<template>
  <div class="app-container">

    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      @click="handleAdd"
      v-hasPermi="['mall:mallMajorRanking:add']"
    >新增</el-button>


    <div class="box">
      <el-form
        class="form"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="800px"
      >
        <div class="nav">
          <div
            :class="dict.value == current ? 'nav_item' : ''"
            v-for="dict in dict.type.mall_major_ranking_type"
            :key="dict.value"
            @click="onClick(dict.value, dict.value)"
          >
            <span class="spa1">{{ dict.label }}</span>
            <span class="spa2"></span>
          </div>

        </div>
      </el-form>

      <el-table v-loading="loading" :data="mallMajorRankingList" @selection-change="handleSelectionChange">
<!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.mall_major_ranking_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column label="专业榜单名称" align="center" prop="rankingName" />
        <el-table-column label="专业榜单标题" align="center" prop="rankingTitle" />
        <el-table-column label="浏览量" align="center" prop="viewNum" />
        <el-table-column label="是否展示" align="center" prop="isShow">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.mall_status" :value="scope.row.isShow"/>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" />
        <el-table-column label="创建时间" align="center" prop="createAt" />
        <el-table-column label="" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <router-link :to="'/mall/rankingSchool/index/' + scope.row.rankingId" class="link-type">
              <span>榜单</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['mall:mallMajorRanking:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['mall:mallMajorRanking:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改专业榜单对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择类型">
              <el-option
                v-for="dict in dict.type.mall_major_ranking_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业榜单名称" prop="rankingName">
            <el-input v-model="form.rankingName" placeholder="请输入专业榜单名称" />
          </el-form-item>
          <el-form-item label="专业榜单标题" prop="rankingTitle">
            <el-input v-model="form.rankingTitle" placeholder="请输入专业榜单标题" />
          </el-form-item>
          <el-form-item label="专业榜单简介" prop="rankingInfo">
            <el-input v-model="form.rankingInfo" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="是否展示">
            <el-radio-group v-model="form.isShow">
              <el-radio
                v-for="dict in dict.type.mall_status"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入排序" type="number" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <div class="foot">
        <div></div>
        <pagination
          class="page"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { listMallMajorRanking, getMallMajorRanking, delMallMajorRanking, addMallMajorRanking, updateMallMajorRanking } from "@/api/mall/mallMajorRanking";

export default {
  name: "MallMajorRanking",
  dicts: ['mall_major_ranking_type', 'mall_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 专业榜单表格数据
      mallMajorRankingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: '0',
        rankingName: null,
        rankingTitle: null,
        rankingInfo: null,
        viewNum: null,
        isShow: null,
        icon: null,
        status: null,
        sort: null,
        remarks: null,
        createAt: null,
        updateAt: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onClick(index, type) {
      this.current = index;
      this.queryParams.type = type;
      this.type = type;
      this.getList();
    },

    /** 查询专业榜单列表 */
    getList() {
      this.loading = true;
      listMallMajorRanking(this.queryParams).then(response => {
        this.mallMajorRankingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        rankingId: null,
        type: null,
        rankingName: null,
        rankingTitle: null,
        rankingInfo: null,
        viewNum: null,
        isShow: "0",
        icon: null,
        status: "0",
        sort: null,
        remarks: null,
        createAt: null,
        updateAt: null,
        delFlag: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.rankingId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加专业榜单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const rankingId = row.rankingId || this.ids
      getMallMajorRanking(rankingId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改专业榜单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.rankingId != null) {
            updateMallMajorRanking(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMallMajorRanking(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const rankingIds = row.rankingId || this.ids;
      this.$modal.confirm('是否确认删除专业榜单编号为"' + rankingIds + '"的数据项？').then(function() {
        return delMallMajorRanking(rankingIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('mall/mallMajorRanking/export', {
        ...this.queryParams
      }, `mallMajorRanking_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f9f9f9 !important;
  border-radius: 12px 12px 0 0 !important;
}
.btnxiugai {
  width: 80px !important;
  height: 30px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #2c5bff;
}
.btnshanchu {
  width: 80px !important;
  height: 30px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #ff3b3b;
  color: #ff3b3b;
}
.box {
  width: 100%;
  background: #ffffff;
  //box-shadow: 0px 4px 10px rgba(0, 63, 235, 0.1);
  opacity: 1;
  border-radius: 8px;
  padding: 0 16px;
}
/* 筛选区域 */
.box .form {
  background-color: #fff;
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  height: 89px;
  justify-content: flex-start;
}
.form-item {
  margin: 0;
  display: flex;
  align-items: center;
  // margin-right: 16px;
}
.form-input {
  width: 169px;
  height: 32px;
}
::v-deep .form .el-date-editor,
::v-deep .form input.el-input__inner {
  width: 169px;
  height: 32px;
  border-radius: 113px !important;
  background: #fafafa;
}
::v-deep .el-input--small .el-input__inner {
  width: 169px;
  height: 32px;
  border-radius: 113px !important;
  background: #fafafa;
}
/* 对话框部分 */
::v-deep .el-dialog {
  border-radius: 12px;
}
/* 对话框标题加粗 */
//::v-deep .el-dialog .el-dialog__title {
//  font-weight: bold;
//}
/* 对话框输入框样式 */
//::v-deep .el-dialog input.el-input__inner {
//  /* width: 176px;
//  height: 32px; */
//  /* border-radius: 113px; */
//  border: 1px solid #e6e6e6;
//  background: #fafafa;
//}
//::v-deep .el-dialog textarea.el-textarea__inner {
//  border: 1px solid #e6e6e6;
//  background: #fafafa;
//  resize: none;
//}
//.form .el-form-item {
//  height: 36px;
//  margin: 0;
//  margin-right: 16px;
//  /*width: 176px;*/
//}
.butAdd {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 160px;
  height: 45px;
  background: linear-gradient(90deg, #3434ff 0%, #2775ff 100%);
  box-shadow: 0px 5px 10px 1px rgba(39, 83, 255, 0.3215686274509804);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #ffffff;
  //   display: flex;
  // font-size: 32px;
  // font-family: PingFang SC;
  // padding-bottom: 24px;
  // font-weight: 400;
  // color: #161616;
  // margin: 0;
}
//::v-deep .el-form-item__label {
//  width: 108px !important;
//  font-size: 16px;
//  font-family: PingFang SC-Bold, PingFang SC;
//  font-weight: bold;
//  color: #000000;
//}
//::v-deep .el-dialog__body {
//  padding: 30px 40px;
//}

// nav
.nav {
  width: 800px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  // position: absolute;
  // margin-left: 20px;

  .nav_item {
    width: 200px;
    height: 41px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
}
.spa1 {
  font-size: 22px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
}
.spa2 {
  width: 65px;
  height: 5px;
  background: linear-gradient(90deg, #3434ff 0%, #2775ff 100%);
  box-shadow: 0px 5px 10px 1px rgba(39, 83, 255, 0.3215686274509804);
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
}
</style>
