<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 v-slot="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 v-slot="scope">
            <span>{{ statusFilter_filter(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastUpdateTime"
          label="最后修改时间"
          min-width="160"
          align="center"
        >
          <template v-slot="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 v-slot="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>
        <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
          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" v-model="dialogVisible" width="30%">
        <div class="showInfo" :style="{ paddingLeft: '50px' }">
          <span class="titleTop">
            <span class="checkIconTitle"
              ><el-icon><el-icon-check /></el-icon
            ></span>
            <span class="titleInfo">确认发布弹框</span>
          </span>
          <p class="titlePsizw">确认发布 {{ showTitleInfo.title }} 吗</p>
        </div>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitFaBu(1)">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog class="dialogFaBu" v-model="dialogVisibleDown" width="30%">
        <div class="showInfo" :style="{ paddingLeft: '50px' }">
          <span class="titleTop">
            <span class="checkIconTitleDown"
              ><el-icon><el-icon-close /></el-icon
            ></span>
            <span class="titleInfo">确认下架弹框</span>
          </span>
          <p class="titlePsizw">确定下架 {{ showTitleInfo.title }} 吗</p>
        </div>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleDown = false">取 消</el-button>
            <el-button type="primary" @click="submitFaBu(2)">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog class="dialogFaBu" v-model="dialogVisibleCover" width="30%">
        <div class="showInfo" :style="{ paddingLeft: '50px' }">
          <span class="titleTop">
            <span class="checkIconTitleDown"
              ><el-icon><el-icon-close /></el-icon
            ></span>
            <span class="titleInfo">确认覆盖之前的弹窗吗？</span>
          </span>
          <p class="titlePsizw">
            您选择的教培项目有配置过弹窗，是否要覆盖之前的弹窗，使用本次新增的弹窗
          </p>
        </div>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleCover = false">取 消</el-button>
            <el-button type="primary" @click="submitCover">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Check as ElIconCheck, Close as ElIconClose } from '@element-plus/icons'
import BreadCrumb from '../../components/breadcrumb.vue'
let vm = null
export default {
  components: {
    BreadCrumb,
    ElIconCheck,
    ElIconClose,
  },
  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()
  },
  methods: {
    statusFilter_filter(val) {
      if (val == 2) {
        return '已发布'
      } else if (val == 1) {
        return '未发布'
      }
    },
    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>
