<template>
  <view class="page">
    <view v-if="questions.length <= 0" class="flex-center mt-40 animation-loading"
      ><uni-icons
        type="spinner-cycle"
        size="20"
        color="rgba(0, 0, 0, 0.5)"
      ></uni-icons
    ></view>
    <view class="sheet">
      <view class="sheet_bar" v-for="(item, index) in questions" :key="index">
        <view class="head" @click="toggle(index)">
          <view class="pt-32 pb-32 flex-align-center">
            <view class="fs-28 fw-500 color-000">{{ item.question }}</view>
            <view
              class="width-40 ml-auto flex-end flex-shrink transition"
              :style="{
                transform: item.open ? 'rotate(180deg)' : 'rotate(0deg)',
              }"
            >
              <uni-icons
                type="bottom"
                size="18"
                color="rgba(0,0,0,0.4)"
              ></uni-icons>
            </view>
          </view>
        </view>
        <view :class="['body', item.open ? 'body-open' : 'body-hidden']">
          <view
            v-for="(answerItem, answerIndex) in item.answer"
            :key="answerIndex"
            :class="[
              'fs-28',
              'lh-48',
              'color-666',
              answerIndex === 0 ? 'mt-0' : 'mt-10',
            ]"
            >{{ answerItem }}</view
          >
        </view>
      </view>
    </view>
    <view
      class="flex-center flex-column contact mt-20"
      hover-class="hover-scale"
      @click="call"
      v-if="questions.length"
    >
      <image
        class="width-96"
        mode="widthFix"
        src="/static/images/contact-servicer.png"
      />
      <view class="mt-16 color-666 fs-28">电话客服</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { fetchCommonQuestions } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const questions = ref<any[]>([]);
const servicerPhone = ref("");

const call = () => {
  uni.makePhoneCall({
    phoneNumber: servicerPhone.value,
  });
};

const toggle = (index: number) => {
  questions.value = questions.value.map((item, i) => {
    return {
      ...item,
      open: item.open ? false : i === index,
    };
  });
};

onLoad((options) => {
  if (options) {
    servicerPhone.value = options.service;
  }
  fetchCommonQuestions().then((res) => {
    questions.value = res.map((item: any) => {
      return {
        ...item,
        answer: item.answer.split("\\r\r\n"),
        open: false,
      };
    });
  });
});
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: #f6f7fa;
  box-sizing: border-box;
  padding: 40rpx 32rpx;
}
.contact {
  height: 216rpx;
  border-radius: 24rpx;
  background: #fff;
}
.sheet {
  box-sizing: border-box;
  border-radius: 24rpx;
  background: #fff;
  overflow: hidden;
  &_bar {
    .head {
      padding: 0rpx 24rpx;
      box-sizing: border-box;
      & > view {
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      }
    }
    .body {
      box-sizing: border-box;
      background-color: rgba(52, 125, 255, 0.06);
      transition: all 0.3s;
      padding: 0rpx 24rpx;
    }
    .body-hidden {
      height: 0px;
      overflow: hidden;
    }
    .body-open {
      height: auto;
      padding-top: 24rpx;
      padding-bottom: 24rpx;
    }
    &:last-child {
      .head {
        & > view {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
