<template>
  <div class="activity" v-loading="loading">
    <el-dialog
      :title="t('activity.publishActivity')"
      v-model="dialogVisible"
      width="380px"
    >
      <div class="contact-admin">
        <el-image :src="activeQrCode"></el-image>
        <p class="description">
          {{ t("activity.description") }}
        </p>
        <p class="description">
          {{ t("activity.contactInformation") }}：{{ mobile }}
        </p>
      </div>
    </el-dialog>
    <div
      v-if="!state.banner"
      class="_banner"
      style="height: 394px; background-color: #ccc"
    >
      <div class="_publish conter1000">
        <el-button @click="dialogVisible = true"
          >{{ t("activity.publishActivity") }}
        </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="publicActivity"
          >{{ t("activity.publishActivity") }}
        </el-button>
      </div>
    </div>
    <div>
      <router-view />
    </div>
    <div class="box conter1000" v-show="!isShow">
      <el-row :gutter="10" v-if="false">
        <el-col :span="5">
          <el-select
            v-model="queryParams.value"
            :placeholder="t('activity.activityCategory')"
          ></el-select>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="queryParams.value2"
            :placeholder="t('activity.activityStatus')"
          ></el-select>
        </el-col>
        <el-col :span="14">
          <el-input
            v-model="queryParams.value3"
            :placeholder="t('input.inputKeyWord')"
          >
            <template #append>
              <el-button>{{ t("activity.search") }}</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: 220px; vertical-align: middle"
              :src="item.image"
              fit="fill"
            ></el-image>
          </div>
          <div class="_r" style="position: relative">
            <p class="text_hidden">{{ item.title }}</p>
            <div class="_time">
              {{ t("activity.activityTime") }}：{{ item.beginTime }}
            </div>
            <div class="_time">
              {{ t("activity.chargeAmount") }}：{{ item.amount }}
            </div>
            <div class="_time">
              {{ t("activity.contact") }}：{{ item.contact }}
            </div>
            <div class="_time">
              {{ t("activity.contactInformation") }}
              ：{{ item.contactMobile }}
            </div>
            <!-- <div class="_info"> -->
            <!-- <span class="fl"
                ><span class="x_blue">{{ item.user }}</span> 人报名</span
              > -->
            <!-- <el-button class="fr x_btns" v-if="item.enrollFlag" disabled
                >已报名</el-button
              > -->
            <!-- v-else-if="item.status == 2" -->
            <!-- <el-button
                class="x16 x_blue x_border_blue"
                v-else
                style="
                  border-radius: 0;
                  position: absolute;
                  right: 10px;
                  bottom: 0;
                "
                @click="handleClickSignUp(item.id, $event)"
                >报名</el-button
              > -->
            <!-- <el-button
                v-else
                class="fr x16"
                style="border-radius: 0"
                type="info"
                disabled
                >>{{t("dict.finished")}}<</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">
          <!-- src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" -->
          <el-image
            style="width: 358px; height: 100%; vertical-align: middle"
            :src="selectedActivity.image"
            fit="cover"
          ></el-image>
        </div>
        <div class="_r">
          <p class="_title text_hidden">
            {{ selectedActivity.title }}
          </p>
          <p class="_brief text_hidden">
            {{ t("activity.activityIntroduction") }}：{{
              selectedActivity.description
            }}
          </p>
          <p class="_classif">
            {{ t("activity.activityCategory") }}：{{ t("activity.education") }}
          </p>
          <p class="_time">
            {{ t("activity.activityTime") }}
            ：{{ selectedActivity.beginTime }} ~
            {{ selectedActivity.finishTime }}
          </p>
          <p class="_place">
            {{ t("activity.activityLocation") }}：{{ selectedActivity.address }}
          </p>
          <p class="_place">
            {{ t("activity.contact") }}
            ：{{ selectedActivity.contact }}
          </p>
          <p class="_place">
            {{ t("activity.contactInformation") }}：{{
              selectedActivity.contactMobile
            }}
          </p>
          <p class="_user">
            <el-button
              v-if="selectedActivity.enrollFlag"
              class="x_btns"
              disabled
            >
              {{ t("activity.signedUp") }}
            </el-button>
            <el-button
              v-else
              class="fr x16 x_blue x_border_blue"
              style="border-radius: 0"
              @click="handleClickSignUp(selectedActivity.id, $event)"
            >
              {{ t("activity.signUp") }}
            </el-button>
            <!-- <span class="_num"><span class="x_blue">16</span> 人报名</span> -->
          </p>
        </div>
      </div>
      <div class="_info">
        <div class="_l">
          <p class="_tit">
            {{ t("activity.activityDetails") }}
          </p>
          <div class="_txt" v-html="selectedActivity.content"></div>
        </div>
        <div class="_r">
          <WebContact />
        </div>
      </div>
    </div>
    <webFooter></webFooter>

    <el-dialog :title="t('activity.signUpActivity')" v-model="showSignUp">
      <el-form
        :model="signUpForm"
        :rules="signUpRules"
        ref="signUpFormRef"
        labelWidth="100px"
      >
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item :label="t('input.name')" prop="name">
              <el-input
                :placeholder="t('input.inputName')"
                v-model="signUpForm.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('input.phone')" prop="phone">
              <!--                maxlength="11"-->
              <el-input
                :placeholder="t('input.inputPhone')"
                v-model="signUpForm.phone"
                oninput="value=value.replace(/[\D]+/,``)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--    ADDEMAIL-->
        <!--    邮箱-->
        <el-row>
          <el-col :span="24">
            <el-form-item :label="t('admin.form.email')" prop="email">
              <el-input
                :placeholder="t('input.inputEmail')"
                v-model="signUpForm.email"
              ></el-input>
            </el-form-item>
          </el-col>
          <!--    其他联系方式-->
          <el-col :span="24">
            <el-form-item
              :label="t('admin.form.otherContact')"
              prop="otherContact"
            >
              <el-input v-model="signUpForm.otherContact"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item :label="t('input.age')" prop="age">
              <el-input-number
                :placeholder="t('activity.inputAge')"
                v-model="signUpForm.age"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('input.gender')" prop="gender">
              <el-radio-group v-model="signUpForm.gender">
                <el-radio label="1">{{ t("activity.male") }}</el-radio>
                <el-radio label="2">
                  {{ t("activity.female") }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-row justify="end">
          <el-button @click="showSignUp = false">
            {{ t("activity.cancel") }}
          </el-button>
          <el-button @click="submitSignUp" type="primary"
            >{{ t("activity.signUp") }}
          </el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Activity">
import QrcodeVue from "qrcode.vue";
import activeQrCode from "@/assets/images/active_qrcode.png";
import { banner } from "@/api/website/home/index";
import request from "@/utils/request";
import webFooter from "@/components/webFooter/index.vue";
import { computed, reactive, toRefs } from "vue";
import WebContact from "@/components/webContact";
// import { activitysList } from "@/api/admin/enterprise";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import {
  signUpActivity,
  activitysList,
  activityDetail,
} from "@/api/website/activity";
import { ElMessage } from "element-plus";
import { getToken } from "@/utils/auth";
import { useI18n } from "vue-i18n";

console.log(activeQrCode);
// import { omit } from "lodash";
// import FieldOptions from "@/views/components/FieldOptions";
// import CityOptions from "@/views/components/CityOptions";

// import webReleaseActive from "@/components/webReleaseActive/index.vue";
const { t } = useI18n();
const dialogVisible = ref(false);
const loading = ref(true);
const total = ref(1);
const state = reactive({
  banner: "",
});
// const data = reactive({
//   activityForm: {},
// });

const queryParams = reactive({});
let dataList = ref([]);
const isShow = ref(false);

let breadcrumbTitle = reactive({
  id: null,
  title: "",
  twoTitle: "",
});

/** 查询 */
function getList() {
  loading.value = true;
  activitysList(queryParams).then((resp) => {
    dataList.value = resp.rows;
    total.value = resp.total;
  });
}

const data = reactive({
  selectedActivity: {},
  activityForm: {},
});
const { selectedActivity } = toRefs(data);

async function handleDetail(item) {
  breadcrumbTitle.id = item.id;
  breadcrumbTitle.title = computed(() => t("activity.signUpActivity"));
  breadcrumbTitle.twoTitle = computed(() =>
    t("activity.activitySignUpDetails")
  );
  // selectedActivity.value = dataList.value.find((el) => el.id == item.id);
  const resp = await activityDetail(item.id);
  selectedActivity.value = resp.data;
  isShow.value = !isShow.value;
}

const mobile = ref("");

function config(params) {
  return request({
    url: "/v1/config",
    params,
  });
}

const publicActivity = async () => {
  // const { data } = await config({ key: "mobile" });
  const data = {
    mobile: { name: t("activity.contactInformation"), value: "18156053255" },
  };
  mobile.value = data.mobile.value;
  dialogVisible.value = true;
};

getList();

onMounted(() => {
  banner({ locals: "活动报名" })
    .then((resp) => {
      state.banner = resp.data[0].images;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
});

const showSignUp = ref(false);
const signUpForm = reactive({});
const signUpFormRef = ref();
const signUpRules = reactive({
  name: [
    {
      required: true,
      message: computed(() => t("input.inputName")),
      trigger: "blur",
    },
  ],
  age: [
    {
      required: true,
      message: computed(() => t("input.inputAge")),
      trigger: "blur",
    },
  ],
  gender: [
    {
      required: true,
      message: computed(() => t("input.inputGender")),
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: computed(() => t("input.inputPhone")),
      trigger: "blur",
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: computed(() => t("input.phoneFormatError")),
      trigger: "blur",
    },
  ],
});
const reset = () => {
  for (const key in signUpForm) {
    if (Object.hasOwnProperty.call(signUpForm, key)) {
      // const item = signUpForm[key];
      delete signUpForm[key];
    }
  }
  if (signUpFormRef.value) {
    signUpFormRef.value.resetFields();
  }
};

const handleClickSignUp = (id, e) => {
  e.stopPropagation();
  console.log(id, e);
  if (!getToken()) {
    return ElMessage.error("您当前未登录");
  }
  reset();
  signUpForm.activityId = id;
  showSignUp.value = true;
};

const submitSignUp = async () => {
  await signUpFormRef.value.validate();
  await signUpActivity(signUpForm);
  let success_msg = computed(() => t("activity.signUpSuccess"));
  ElMessage.success(success_msg.value);
  const resp = await activityDetail(selectedActivity.value.id);
  selectedActivity.value = resp.data;
  showSignUp.value = false;
};
</script>
<style lang="scss" scoped>
.activity {
  background-color: #f2f6ff;

  .contact-admin {
    display: flex;
    flex-direction: column;
    align-items: center;

    .description {
      margin: 10px;
      width: 100%;
      font-size: 16px;
    }
  }

  ._banner {
    position: relative;

    ._publish {
      position: relative;

      .el-button {
        position: absolute;
        top: 171px;
        height: 60px;
        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 {
      ::deep(.el-input__inner) {
        border-right: 0;
      }

      ::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;
        height: 220px;

        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>
