<template>
  <div class="content-box">
    <el-row>
      <el-col :span="24">
        <div class="cell">
          <div class="cell-title">
            <div class="title-left">
              <div class="title">服务商城</div>
            </div>
          </div>
          <div class="cell-body">
            <!-- 咨询服务 -->
            <div class="cell_block">
              <div class="title">
                <div class="title_block"></div>
                <h2>咨询服务</h2>
                <span style="color: rgba(255, 87, 51, 1)">（免费）</span>
              </div>
              <div class="block_ul">
                <div
                  class="block_li"
                  :class="flag == 1 ? 'is_active' : ''"
                  @click="serveClick(1)"
                >
                  <img
                    v-if="flag == 1"
                    src="@/assets/images/interflow_s.png"
                    alt=""
                  />
                  <img v-else src="@/assets/images/interflow.png" alt="" />
                  <span>经营交流</span>
                  <div class="select" v-if="flag == 1">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div
                  class="block_li"
                  :class="flag == 2 ? 'is_active' : ''"
                  @click="serveClick(2)"
                >
                  <img
                    v-if="flag == 2"
                    src="@/assets/images/consult_s.png"
                    alt=""
                  />
                  <img v-else src="@/assets/images/consult.png" alt="" />
                  <span>政策咨询</span>
                  <div class="select" v-if="flag == 2">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
            <!-- 金融服务 -->
            <div class="cell_block">
              <div class="title">
                <h4>金融服务</h4>
              </div>
              <div class="block_ul">
                <div
                  class="block_li is_active"
                  @click="serveClick(3)"
                  v-if="flag == 3"
                >
                  <img src="@/assets/images/financing_s.png" alt="" />
                  <span>投融资</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(3)" v-else>
                  <img src="@/assets/images/financing.png" alt="" />
                  <span>投融资</span>
                </div>
              </div>
            </div>
            <!-- 收费服务 -->
            <div class="cell_block">
              <div class="title">
                <div class="title_block"></div>
                <h2>收费服务</h2>
                <span style="color: rgba(255, 87, 51, 1)">（收费）</span>
              </div>
              <div class="block_ul">
                <div
                  class="block_li is_active"
                  @click="serveClick(4)"
                  v-if="flag == 4"
                >
                  <img src="@/assets/images/design_s.png" alt="" />
                  <span>文创设计</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(4)" v-else>
                  <img src="@/assets/images/design.png" alt="" />
                  <span>文创设计</span>
                </div>
                <div
                  class="block_li is_active"
                  @click="serveClick(5)"
                  v-if="flag == 5"
                >
                  <img src="@/assets/images/programme_s.png" alt="" />
                  <span>民宿规划设计</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(5)" v-else>
                  <img src="@/assets/images/programme.png" alt="" />
                  <span>民宿规划设计</span>
                </div>
                <div
                  class="block_li is_active"
                  @click="serveClick(6)"
                  v-if="flag == 6"
                >
                  <img src="@/assets/images/video_s.png" alt="" />
                  <span>宣传视频制作</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(6)" v-else>
                  <img src="@/assets/images/video.png" alt="" />
                  <span>宣传视频制作</span>
                </div>
              </div>
            </div>
            <!-- 管家服务 -->
            <div class="cell_block">
              <div class="title">
                <h4>管家服务</h4>
              </div>
              <div class="block_ul">
                <div
                  class="block_li is_active"
                  @click="serveClick(7)"
                  v-if="flag == 7"
                >
                  <img src="@/assets/images/platina_s.png" alt="" />
                  <span>白金级</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(7)" v-else>
                  <img src="@/assets/images/platina.png" alt="" />
                  <span>白金级</span>
                </div>

                <div
                  class="block_li is_active"
                  @click="serveClick(8)"
                  v-if="flag == 8"
                >
                  <img src="@/assets/images/gold_s.png" alt="" />
                  <span>金宿级</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(8)" v-else>
                  <img src="@/assets/images/gold.png" alt="" />
                  <span>金宿级</span>
                </div>

                <div
                  class="block_li is_active"
                  @click="serveClick(9)"
                  v-if="flag == 9"
                >
                  <img src="@/assets/images/silver_s.png" alt="" />
                  <span>银宿级</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(9)" v-else>
                  <img src="@/assets/images/silver.png" alt="" />
                  <span>银宿级</span>
                </div>
              </div>
            </div>
            <!-- 人力资源服务 -->
            <div class="cell_block">
              <div class="title">
                <h4>人力资源服务</h4>
              </div>
              <div class="block_ul">
                <div
                  class="block_li is_active"
                  @click="serveClick(10)"
                  v-if="flag == 10"
                >
                  <img src="@/assets/images/guestRoom_s.png" alt="" />
                  <span>客房</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(10)" v-else>
                  <img src="@/assets/images/guestRoom.png" alt="" />
                  <span>客房</span>
                </div>
                <div
                  class="block_li is_active"
                  @click="serveClick(11)"
                  v-if="flag == 11"
                >
                  <img src="@/assets/images/hall_s.png" alt="" />
                  <span>大厅</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(11)" v-else>
                  <img src="@/assets/images/hall.png" alt="" />
                  <span>大厅</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 12"
                  @click="serveClick(12)"
                >
                  <img src="@/assets/images/repast_s.png" alt="" />
                  <span>餐饮</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(12)" v-else>
                  <img src="@/assets/images/repast.png" alt="" />
                  <span>餐饮</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 13"
                  @click="serveClick(13)"
                >
                  <img src="@/assets/images/sing_s.png" alt="" />
                  <span>唱歌</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div v-else class="block_li" @click="serveClick(13)">
                  <img src="@/assets/images/sing.png" alt="" />
                  <span>唱歌</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 14"
                  @click="serveClick(14)"
                >
                  <img src="@/assets/images/league_s.png" alt="" />
                  <span>团建教练</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" v-else @click="serveClick(14)">
                  <img src="@/assets/images/league.png" alt="" />
                  <span>团建教练</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 15"
                  @click="serveClick(15)"
                >
                  <img src="@/assets/images/musical_s.png" alt="" />
                  <span>乐器表演</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(15)" v-else>
                  <img src="@/assets/images/musical.png" alt="" />
                  <span>乐器表演</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 16"
                  @click="serveClick(16)"
                >
                  <img src="@/assets/images/dance_s.png" alt="" />
                  <span>舞蹈</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div v-else class="block_li" @click="serveClick(16)">
                  <img src="@/assets/images/dance.png" alt="" />
                  <span>舞蹈</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 17"
                  @click="serveClick(17)"
                >
                  <img src="@/assets/images/protocol_s.png" alt="" />
                  <span>礼仪培训</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div class="block_li" @click="serveClick(17)" v-else>
                  <img src="@/assets/images/protocol.png" alt="" />
                  <span>礼仪培训</span>
                </div>
              </div>
            </div>
            <!-- 直播服务 -->
            <div class="cell_block">
              <div class="title">
                <h4>直播服务</h4>
              </div>
              <div class="block_ul">
                <div
                  class="block_li is_active"
                  v-if="flag == 18"
                  @click="serveClick(18)"
                >
                  <img src="@/assets/images/live_s.png" alt="" />
                  <span>民宿直播</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div v-else class="block_li" @click="serveClick(18)">
                  <img src="@/assets/images/live.png" alt="" />
                  <span>民宿直播</span>
                </div>
                <div
                  class="block_li is_active"
                  v-if="flag == 19"
                  @click="serveClick(19)"
                >
                  <img src="@/assets/images/live_s.png" alt="" />
                  <span>产品直播</span>
                  <div class="select">
                    <img src="@/assets/images/select.png" alt="" />
                  </div>
                </div>
                <div v-else class="block_li" @click="serveClick(19)">
                  <img src="@/assets/images/live.png" alt="" />
                  <span>产品直播</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

const flag = ref(1);
const serveClick = (i) => {
  flag.value = i;
};
</script>

<style lang="scss" scoped>
.content-box {
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  min-width: 1000px;
  width: calc(100vw - 240px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .el-row {
    width: 100%;
    height: 100%;
    .el-col {
      height: 100%;
      // padding: 10px;

      .cell {
        height: 100%;
        padding: 0 30px;
        // border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);

        .cell-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          // margin-bottom: 30px;
          // padding-bottom: 30px;
          height: 60px;
          border-bottom: 1px solid #cccccc;

          .title-left {
            display: flex;
            align-items: center;

            .title {
              font-size: 22px;
              font-family: Microsoft YaHei-3970(82674968);
              font-weight: bold;
              color: #1a202b;
            }

            .title-detail {
              margin-left: 50px;
              font-size: 18px;
              font-family: Microsoft YaHei-3970(82674968);
              color: #1a202b;
            }
          }

          .title-right {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
              width: 110px;
              height: 46px;
              background: #2b4cfe;
              font-size: 18px;
              color: #ffffff;
              font-family: Microsoft YaHei-3970(82674968);
              border-radius: 5px;
            }

            .el-button--warning {
              background: #f88a64;
            }
          }
        }

        .cell-body {
          height: calc(100% - 70px);
          overflow: auto;

          .cell_block {
            .title {
              display: flex;
              align-items: center;
              .title_block {
                width: 17px;
                height: 17px;
                opacity: 1;
                border-radius: 4px;
                background: rgba(9, 101, 98, 1);
                margin-right: 10px;
              }
              h2 {
                font-size: 20px;
              }
            }
          }
          .block_ul {
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;
            .block_li {
              position: relative;
              width: 188px;
              height: 96px;
              opacity: 1;
              border-radius: 6px;
              background: rgba(242, 242, 242, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 17px 17px 0;
              img {
                width: 25px;
                height: 25px;
                margin-right: 9px;
              }
              .select {
                position: absolute;
                right: 0;
                top: 0;
                border-top-right-radius: 5px;
                width: 20px;
                height: 20px;
                background-color: rgb(255, 87, 51);
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 15px;
                  height: 11px;
                  transform: translateX(4px);
                }
              }
            }
            .block_li.is_active {
              background-color: rgba(9, 101, 98, 1);
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>

<style>
.add-voucher-class {
  width: 800px !important;
  height: 890px !important;
}

.el-date-editor--daterange.el-input__inner {
  width: 280px !important;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 180px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}

.show-imgs {
  display: flex;
}

.imgs {
  display: flex;
  flex-direction: row;
  margin-left: 20px;
}

.lbl-cls {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
  color: #bbb;
}

.export {
  background: rgba(9, 101, 98, 1) !important;
  font-size: 14px !important;
  color: #ffffff !important;
  font-family: Microsoft YaHei-3970(82674968);
  border-radius: 5px !important;
  margin-bottom: 22px !important;
  border: none !important;
}

.add-class {
  height: 450px !important;
  width: 800px !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.add-info-cancel-btn {
  color: rgba(9, 101, 98, 1) !important;
  border: 1px solid rgba(9, 101, 98, 1) !important;
}

.add-info-confirm-btn {
  border: none !important;
  background: rgba(9, 101, 98, 1) !important;
  color: #fff !important;
  border-radius: 5px !important;
  margin-left: 28px !important;
}

.el-form-item > label {
  color: rgba(128, 128, 128, 1) !important;
}

.custom-input {
  width: 7rem !important;
}

.custom-input input {
  width: 7rem !important;
}

.el-radio {
  margin-right: 10px;
}

.el-checkbox-group {
  height: 22px !important;
  line-height: 22px !important;
}

.el-form-item {
  margin-bottom: 16px !important;
}
</style>
