<template>
  <div class="teaching-popup">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
      <div class="header-title">弹窗管理</div>
       <!-- 搜索 -->
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
          <el-form ref="serchForm" :model="searchParam" label-width="75px" style="width:100%;">
              <el-col :span="6">
                  <el-form-item label="标题:">
                      <el-input v-model="searchParam.titleStr" clearable size="small" placeholder="请输入标题"></el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="6" style="padding-top:5px;">
               <el-button type="primary" size="small" @click="search(1)">查询</el-button>
              </el-col>
              <el-col :span="10" style="padding:0;text-align:right;padding-right:15px;padding-top:5px;">
                  <el-button type="primary" size="small" @click="addNewLog" style="margin-left:0;">新建弹窗</el-button>
              </el-col>
          </el-form>
      </el-row>
       <!-- 表格 -->
     <el-table
        :data="tableData"
        style="width: 100%; margin-top:30px">
            <el-table-column prop="id" label="ID" min-width="100" align="center"></el-table-column>
            <el-table-column prop="title" label="标题" min-width="200" align="center"></el-table-column>
            <el-table-column prop="uploadTime" label="发布时间" min-width="100" align="center">
               <template slot-scope="scope">
                  <span v-if="scope.row.uploadTime">{{ scope.row.uploadTime }}</span>
                  <span v-else>一</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="80" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.status | statusFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="lastUpdateTime" label="最后修改时间" min-width="160" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.lastUpdateTime">{{ scope.row.lastUpdateTime }}</span>
                  <span v-else>一</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" min-width="200">
              <template slot-scope="scope">
                <el-button type="primary" v-if="scope.row.status == 2" size="small" @click="preView(scope.row)" >查看</el-button>
                <el-button size="small"  v-if="scope.row.status == 1" @click="editColumn(scope.row)" >编辑</el-button>
                <el-button
                  v-if="scope.row.status == 2"
                  type="danger"
                  size="small"
                  @click="downStatus(scope.row)"
                >下架</el-button>
                <el-button
                  v-else
                  type="primary"
                  size="small"
                  @click="openStatusDialog(scope.row)"
                >发布</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
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParam.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
      <el-dialog
      class="dialogFaBu"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="showInfo" :style="{paddingLeft:'50px'}">
        <span class="titleTop">
          <span class="checkIconTitle"><i class="el-icon-check"></i></span>
          <span class="titleInfo">确认发布弹框</span>
        </span>
        <p class="titlePsizw">确认发布 {{showTitleInfo.title}} 吗</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFaBu(1)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="dialogFaBu"
      :visible.sync="dialogVisibleDown"
      width="30%">
      <div class="showInfo" :style="{paddingLeft:'50px'}">
        <span class="titleTop">
          <span class="checkIconTitleDown"><i class="el-icon-close"></i></span>
          <span class="titleInfo">确认下架弹框</span>
        </span>
        <p class="titlePsizw">确定下架 {{showTitleInfo.title}} 吗</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleDown = false">取 消</el-button>
        <el-button type="primary" @click="submitFaBu(2)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="dialogFaBu"
      :visible.sync="dialogVisibleCover"
      width="30%">
      <div class="showInfo" :style="{paddingLeft:'50px'}">
        <span class="titleTop">
          <span class="checkIconTitleDown"><i class="el-icon-close"></i></span>
          <span class="titleInfo">确认覆盖之前的弹窗吗？</span>
        </span>
        <p class="titlePsizw">您选择的教培项目有配置过弹窗，是否要覆盖之前的弹窗，使用本次新增的弹窗</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCover = false">取 消</el-button>
        <el-button type="primary" @click="submitCover">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../../components/breadcrumb.vue";
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "弹窗管理",
      formInline: {
        pageNo: 1,
        pageSize: 10
      },
      searchParam:{
        titleStr:'',
        pageNo: 1,
        pageSize: 10
      },
      tableData:[],
      totalRows: 0,
      linkSelect: [],
      dialogVisible:false,
      dialogVisibleDown:false,
      dialogVisibleCover:false,
      showTitleInfo:{}
    }
  },
  computed: {
  
  },
  created() {
    vm = this;
    vm.search();
  },
  filters: {
    statusFilter(val) {
      if (val == 2) {
        return '已发布'
      } else if (val == 1) {
        return '未发布'
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      vm.searchParam.pageSize = val;
      vm.search();
    },
    handleCurrentChange(val) {
      vm.searchParam.pageNo = val;
      vm.search();
    },
    search() {
      let req = {
        titleStr: this.searchParam.titleStr,
        pageNo: this.searchParam.pageNo,
        pageSize:this.searchParam.pageSize
      };
      vm.POST("portal/popBox/getPopBoxList", req)
        .then((res) => {
          if (res.code == "000000") {
            this.tableData = res.data.list;
            this.totalRows = res.data.allSize;
          } else {
            vm.$message.info(res.message);
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
    },
    submitFaBu(value) {
      if (value == 1) { 
        vm.submitCover();
      }else {
        let req = {
          confirmFlag: 1,
          id:vm.showTitleInfo.id
        };
      vm.POST("portal/popBox/undercarriagePopBox", req)
        .then((res) => {
          if (res.code == "000000") {
            vm.dialogVisibleDown = false;
            vm.search();
          } else {
            vm.$message.info(res.message);
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
      }
    },
    // 查看
    preView(data) {
      console.log(data);
      this.$router.push({path:'/editeach-popup', query:{id:data.id, showType:1}});
    },
    // 编辑
    editColumn(data) {
      console.log(data);
      this.$router.push({path:'/editeach-popup', query:{id:data.id, showType:2}});
    },
     // 新增弹窗
    addNewLog() {
      this.$router.push({path:'/editeach-popup', query:{showType:3}});
    },
    openStatusDialog(data) {
      let req = {
        confirmFlag: 0,
        id:data.id
      };
      vm.POST("portal/popBox/uploadPopBox", req)
        .then((res) => {
          if (res.code == "000000") {
            console.log(res, '22222');
            if (res.data.haveBox == 1) {
              // 有已发布的冲突，需覆盖
              vm.showTitleInfo = data;
              vm.dialogVisibleCover = true;
            }else {
              vm.showTitleInfo = data;
              vm.dialogVisible = true;
            }
          } else {
            vm.$message.info(res.message);
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
    },
    // 覆盖
    submitCover() {
      let req = {
        confirmFlag: 1,
        id:vm.showTitleInfo.id
      };
      vm.POST("portal/popBox/uploadPopBox", req)
        .then((res) => {
          if (res.code == "000000") {
            if (res.data.isSuccess == 1) {
               vm.dialogVisible = false;
               vm.dialogVisibleCover = false;
            }
            vm.search();
          } else {
            vm.$message.info(res.message);
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
    },
    downStatus(data) {
      vm.showTitleInfo = data;
      vm.dialogVisibleDown = true;
    },
  }
}
</script>

<style lang="scss">
  .teaching-popup{
    .component-content {
      background: #fff;
      padding: 10px;
      .header-title {
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .dialogFaBu{
      .titleTop {
        margin-bottom: 10px;
        .checkIconTitleDown{
          background:red;
          border-radius: 50%;
          padding: 5px;
          margin-right: 10px;
        }
        .checkIconTitle{
          background: #67C23A;
          border-radius: 50%;
          padding: 5px;
          margin-right: 10px;
        }
        .el-icon-close{
          width: 15px;
          height: 15px;
          color: white;
        }
        .el-icon-check{
          width: 15px;
          height: 15px;
          color: white;
        }
      }
      .titlePsizw{
          padding-top: 20px;
          padding-left: 38px;
        }
    }
  }
</style>