<template>
  <div class="advert-simple-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>

    <div class="review-access screenSet" id="screenSet">
      <div class="header-title">广告位管理</div>
      <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
        <el-row>
          <el-form-item label="所属项目：" class="search-item">
            <el-input
              v-model="searchForm.projectName"
              size="small"
              class="form-width"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="状态：" class="search-item">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择"
              size="small"
              class="form-width"
            >
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-list">
            <el-button @click="search(true)" type="primary" size="small">查 询</el-button>
            <el-button @click="reset" size="small">重 置</el-button>
          </el-form-item>
        </el-row>
        <el-row style="float: right;">
          <el-button @click="addAdvert()" type="primary" size="small">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新建广告位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </el-row>
      </el-form>
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column align="center" prop="id" label="广告位编号"></el-table-column>
        <el-table-column align="center" prop="pageType" label="页面类型">
          <template slot-scope="scope">
            <span>{{scope.row.pageType == 0 ? '项目列表页' : '项目详情页'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="projectName" label="所属项目"></el-table-column>
        <el-table-column align="center" prop="position" label="页面位置">
          <template slot-scope="scope">
            <span>{{scope.row.position == 0 ? '顶部广告位' : '底部广告位'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="审核状态">
          <template slot-scope="scope">
            <span v-html="getHtmlStatus(scope.row.status)"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editAdvert(scope.row)" type="text" size="small">
              <span style="color: #449284;">编辑</span>
            </el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../../assets/image/no-content1.png" />
            <p>没有查询到数据</p>
          </div>
        </div>
      </el-table>

      <div class="pagination">
        <el-pagination
          class="pagination-style"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totalRows"
          :current-page="searchForm.pageNo"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../../utils/utils";
import BreadCrumb from "../../../components/breadcrumb.vue";
import * as commonUtil from "../../../utils/utils";
import { handleDeleteReq } from "@/utils/cme/cmeApi";

export default {
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "广告位管理",
      totalRows: 0,
      searchForm: {
        projectName: "",
        status: -1,
        pageNo: 1,
        pageSize: 15
      },
      statusList: [
        {
          name: "全部",
          value: -1
        },
        {
          name: "未发布",
          value: 0
        },
        {
          name: "已发布",
          value: 1
        },
        {
          name: "已下线",
          value: 2
        }
      ],
      tableList: []
    };
  },

  components: {
    BreadCrumb
  },

  created() {
    this.search();
  },
  mounted() {
    commonUtil.resizeHeight();
  },
  methods: {
    //
    getHtmlStatus(status) {
      if (status == 0) {
        return `<span style="color:#666666;">未发布</span>`;
      } else if (status == 1) {
        return `<span style="color:#417505;">已发布</span>`;
      } else if (status == 2) {
        return `<span style="color:#D0021B;">已下线</span>`;
      } else {
        return "";
      }
    },

    // 查询列表
    search(needResetPage) {
      // let searchForm = Object.assign({}, this.searchForm);
      needResetPage && (this.searchForm.pageNo = 1);
      this.GET("portal/jump/list", this.searchForm).then(res => {
        if (res.code == "000000") {
          this.tableList = (res.data && res.data.list) || [];
          this.totalRows = res.data.totalSize || 0;
        }
      });
    },

    // 重置
    reset() {
      this.searchForm = {
        projectId: "",
        status: -1,
        pageNo: 1,
        pageSize: 15
      };
    },

    // 新增
    addAdvert() {
      this.$router.push({
        path: "edit-simple-advert",
        query: { id: null }
      });
    },

    // 查看
    editAdvert(row) {
      this.$router.push({
        path: "edit-simple-advert",
        query: { id: row.id }
      });
    },

    // 切换每页个数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.search();
    },

    // 切换当前页
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.search();
    }
  }
};
</script>  

<style lang="scss">
.advert-simple-wrap {
  .review-access {
    padding: 10px;
    background: #fff;
    .el-button--small {
      font-size: 14px;
    }
    .header-title {
      padding: 10px 12px 20px;
      font-size: 14px;
      color: #606266;
      border-bottom: 1px solid #efefef;
    }
    .search-form-wrap {
      padding: 25px 0 20px;
      overflow: hidden;
      // border-bottom: 1px dashed #efefef;
    }
    .search-item {
      float: left;
    }
    .btn-list {
      float: right;
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
    .new-add {
      float: right;
      margin: 10px 0 20px;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
</style>