<template>
  <div class="review-access-wrap">
    <bread-crumb :curmbFirst="curmbFirst"></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.courseName" 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()" type="primary" size="small">查询</el-button>
            <el-button @click="reset" size="small">重置</el-button>
          </el-form-item>
        </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="页面类型" ></el-table-column>
        <el-table-column align="center" prop="projectName" label="所属项目" ></el-table-column>
        <el-table-column align="center" prop="position" label="页面位置" ></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,
        addEditVisible: false,
        isAdd: true,            // 新增或编辑状态：新增 true; 编辑 false 
        deleteVisible: false,
        currentRow: null,       // 当前行数据
        searchForm: {
          projectId: '',
          status: -1,
          pageNo: 1,
          pageSize: 15,
        },
        auditForm: {
          auditRadio: '',
          desc: '',
        },
        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:#D0021B;">已发布</span>`;
        } else if(status == 2) {
          return `<span style="color:#417505;">已下线</span>`;
        } else {
          return ''
        }
      },

      // 查询列表
      search() {
        let searchForm = Object.assign({}, this.searchForm);

        this.GET("contents/course/custom/check/v1/list", searchForm).then(res => {
          if (res.code == "000000") {
            this.tableList = res.data && res.data.courseList || [];
            this.totalRows = res.data.totalSize || 0;
            // this.protocolInfo = res.data;
          }
        });
      },
      
      // 重置
      reset() {
        this.searchForm = {
          courseName: '',
          status: -1,
          createdDoctorName: '',
          pageNo: 1,
          pageSize: 15,
        };
      },
      
      // 查看 每种查看的方式不一样
      editAdvert(row) {
        console.log(row);
        this.$router.push({
          path: 'audit-custom-course',
          query: {
            courseId: row.courseId,
            createdDoctorName: row.createdDoctorName,
          }
        })
      },

      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      handleSizeChange(val){
        this.searchForm.pageSize = val;
        this.search();
      },
      
      // 切换当前页
      handleCurrentChange(val){
        this.searchForm.pageNo = val;
        this.search();
      },
    },

  }
</script>  

<style lang="scss">
  .review-access-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>