<template>
  <div class="activity" v-loading="loading">
    <webReleaseActive v-model:dialogVisible="dialogVisible"></webReleaseActive>
    <div v-if="!state.banner" class="_banner" style="height: 394px; background-color: #ccc">
      <div class="_publish conter1000">
        <el-button @click="dialogVisible = true">发布活动</el-button>
      </div>
    </div>
    <div v-else class="_banner" style="height: 394px;background-size: cover;" :style="{backgroundImage: `url(${state.banner})`}">
      <div class="_publish conter1000">
        <el-button @click="dialogVisible = true">发布活动</el-button>
      </div>
    </div>
    <div>
      <router-view />
    </div>

    <!-- <div class="box conter1000" v-show="!isShow">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-select
            v-model="queryParams.value"
            placeholder="活动分类"
          ></el-select>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="queryParams.value2"
            placeholder="活动状态"
          ></el-select>
        </el-col>
        <el-col :span="14">
          <el-input v-model="queryParams.value3" placeholder="请输入关键词">
            <template #append>
              <el-button>搜索</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <div v-loading="loading">
        <div
          class="_item pointer"
          v-for="item in dataList"
          :key="item.id"
          @click="handleDetail(item)"
        >
          <div class="_l">
            <el-image
              style="width: 358px; height: 200px; vertical-align: middle"
              :src="item.src"
              fit="fill"
            ></el-image>
          </div>
          <div class="_r">
            <p class="text_hidden">{{ item.title }}</p>
            <div class="_time">活动时间：{{ item.time }}</div>
            <div class="_info">
              <span class="fl"
                ><span class="x_blue">{{ item.user }}</span> 人报名</span
              >
              <el-button class="fr x_btns" v-if="item.status == 1" disabled
                >已报名</el-button
              >
              <el-button
                v-else-if="item.status == 2"
                class="fr x16 x_blue x_border_blue"
                style="border-radius: 0"
                >报名</el-button
              >
              <el-button
                v-else
                class="fr x16"
                style="border-radius: 0"
                type="info"
                disabled
                >已结束</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div class="box2 conter1000" v-show="isShow">
      <webBreadcrumb
        v-model:isShow="isShow"
        v-model:breadcrumbTitle="breadcrumbTitle"
      ></webBreadcrumb>
      <div class="_head">
        <div class="_l">
          <el-image
            style="width: 358px; height: 100%; vertical-align: middle"
            src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
            fit="cover"
          ></el-image>
        </div>
        <div class="_r">
          <p class="_title text_hidden">
            订单利润模型——构建企业利润机器人智能感知与控制专场 |
            合肥高新区科技成果供需对接活动
          </p>
          <p class="_brief text_hidden">
            活动简介：订单利润模型——构建企业利润机器人智能感知与控制专场 |
            合肥高新企业利润机 区科技成果
            供需对接活动订单利润模型——构建企业利润机器人智能感知供需对接活动订单利润模型——构建企业利润机器人智能感知
          </p>
          <p class="_classif">活动分类：教育</p>
          <p class="_time">
            活动时间：2021-10-14 13:30:00 ~ 2021-10-16 16:30:00
          </p>
          <p class="_place">
            活动地点：安徽省-合肥市-蜀山区 科学大道233号来福酒店1号会议厅
          </p>
          <p class="_user">
            <el-button class="x_btns" disabled>已报名</el-button>
            <span class="_num"><span class="x_blue">16</span> 人报名</span>
          </p>
        </div>
      </div>
      <div class="_info">
        <div class="_l">
          <p class="_tit">活动详情</p>
          <div class="_txt">
            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
          </div>
          <div class="_txt">
            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
          </div>
        </div>
        <div class="_r">联系我</div>
      </div>
    </div> -->
    <webFooter></webFooter>
  </div>
</template>
<script setup>
import { banner } from "@/api/website/home/index";

import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import webReleaseActive from "@/components/webReleaseActive/index.vue";

const dialogVisible = ref(false);
const loading = ref(true);
const total = ref(1);
const state = reactive({
  banner: ''
});
let dataList = ref([]);
const isShow = ref(false);
let breadcrumbTitle = reactive({
  id: null,
  title: "",
  twoTitle: "",
});
/** 查询 */
function getList() {
  loading.value = true;
  setTimeout(() => {
    dataList.value = [
      {
        id: 1,
        title:
          "订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
        src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
        user: 16,
        status: 1,
      },
      {
        id: 2,
        title:
          "订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
        src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
        user: 17,
        status: 2,
      },
      {
        id: 3,
        title:
          "订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
        src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
        time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
        user: 18,
        status: 3,
      },
    ];
    loading.value = false;
  }, 500);
}
function handleDetail(item) {
  breadcrumbTitle.id = item.id;
  breadcrumbTitle.title = "活动报名";
  breadcrumbTitle.twoTitle = "活动报名详情";
  isShow.value = !isShow.value;
}
getList();

onMounted(() => {
  banner('活动报名').then(res => {
    if (200 == res.code) {
      state.banner = res.data.images
      loading.value = false;
    }
  }).catch(() => {
    loading.value = false;
  })
});
</script>
<style lang="scss" scoped>
.activity {
  background-color: #f2f6ff;
  ._banner {
    position: relative;
    ._publish {
      position: relative;
      .el-button {
        position: absolute;
        top: 171px;
        right: 46px;
        background-color: #ffc600;
        color: #fff;
        border: 0;
        border-radius: 0;
        font-size: 36px;
        font-weight: bold;
      }
    }
  }
  .box {
    position: relative;
    padding-top: 20px;
    .el-input {
      ::v-deep(.el-input__inner) {
        border-right: 0;
      }
      ::v-deep(.el-input-group__append) {
        overflow: hidden;
        font-size: 16px;
        color: #fff;
        border-top-color: #0054ff;
        border-right-color: #0054ff;
        border-bottom-color: #0054ff;
        background-color: #0054ff;
      }
    }
    ._item {
      display: flex;
      margin-top: 16px;
      ._r {
        flex: 1;
        padding: 36px 20px 0 16px;
        background-color: #fff;
        p {
          margin-top: 0;
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          line-height: 30px;
        }
        ._time {
          margin-bottom: 7px;
          font-size: 16px;
          font-weight: 400;
          color: #666666;
        }
        ._info {
          .fl {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            span {
              font-size: 30px;
            }
          }
        }
      }
    }
  }
  .box2 {
    ._head {
      padding: 20px;
      background-color: #fff;
      display: flex;
      ._r {
        padding-left: 18px;
        p {
          margin: 11px 0;
        }
        ._title {
          font-size: 18px;
          font-weight: 500;
          color: #333333;
          line-height: 30px;
        }
        ._brief,
        ._classif,
        ._time,
        ._place {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
        ._brief {
          line-height: 24px;
        }
        ._user {
          margin-bottom: 0;
          display: flex;
          align-items: flex-end;
          ._num {
            margin-left: 10px;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            .x_blue {
              font-size: 30px;
            }
          }
        }
      }
    }
    ._info {
      display: flex;
      margin-top: 16px;
      margin-bottom: 35px;
      ._l {
        width: 662px;
        margin-right: 14px;
        padding: 14px 40px 0 20px;
        background-color: #fff;
        ._tit {
          &::before {
            content: "";
            display: inline-block;
            margin-right: 5px;
            width: 5px;
            height: 5px;
            background-color: #0054ff;
            vertical-align: middle;
          }
        }
        ._txt {
          margin-bottom: 45px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 24px;
        }
      }
      ._r {
        flex: 1;
        background-color: #fff;
      }
    }
  }
}
</style>