<template>
  <div class='app-container'>
    <!-- @click="getRouter('./apply')" -->
    <div class="repair" >
      <span>维修申请</span>
    </div>
    <div class="change" @click="getRouter('./apply')">
      <span>换新申请</span>
    </div>
    <!-- @click="getRouter('./order')" -->
    <div class="order" >
      <span>申请查询</span>
    </div>
    <div class="address" @click="getDialog">售后寄回地址</div>

    <el-dialog v-model="dialogVisible" title="详情" width="90%">
      <div>
        <p style="text-indent: 2em;">整机性能保修1年，1年内，非人为损坏的产品性能问题全保，外观不在保修范围内，超过1年保修期或人为损坏支持有偿维修服务。</p>

        <p style="text-indent: 2em;"><i style="color: red; font-style: normal">注意事项：</i>寄回维修或者换新请务必填写好工单信息，仓库拒收非登记快件，如因未填写工单信息产生丢件，概不处理！仓库不接收任何快递公司的到付件，请勿发到付！</p>

        <p>售后地址：广东省东莞市厚街镇福民路11号3号楼2楼。</p>

        <p>联系人：猫王售后部 </p>

        <p>电话：19129538090</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const dialogVisible = ref(false)

const getRouter = (path) => {
  proxy.$router.push({
    path
  })
}

const getDialog = () => {
  dialogVisible.value = true
}

onMounted(() => {
  document.title = '售后服务'
})
</script>

<style lang="scss" scoped>
.app-container {
  font-size: 16px;
}

.repair,
.change,
.order {
  background-color: #eaeaea;
  text-align: center;
  border-radius: 8px;

  span {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.repair,
.change {
  display: inline-block;
  width: calc(50% - 10px);
  height: 250px;
  margin-bottom: 20px;
}

.repair {
  margin-right: 20px;
}

.order {
  height: 180px;
  line-height: 180px;
}

.address {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
  border-bottom: 1px solid #000;
}
</style>