<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 v-slot="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 v-slot="scope">
            <span>{{
              scope.row.position == 0 ? '顶部广告位' : '底部广告位'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="审核状态">
          <template v-slot="scope">
            <span v-html="getHtmlStatus(scope.row.status)"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button @click="editAdvert(scope.row)" type="text" size="small">
              <span style="color: #449284">编辑</span>
            </el-button>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../../assets/image/no-content1.png" />
              <p>没有查询到数据</p>
            </div>
          </div>
        </template>
      </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>
