<template>
  <div>
    <div class="m-3">
      <h4>شکایت</h4>
      <div class="row ui-box p-3">
        <div class="col-lg-4">
          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">نام و نام خانوادگی :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.fullName }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">کد ملی :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.national }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">شماره تماس :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.phoneNumber }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">ایمیل :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.email }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">کد پذیرش :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.receptionCode }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">شماره سریال دستگاه :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.deviceNumber }}</p>
          </div>

          <div class="d-flex mt-3" style="align-items: center">
            <h5 style="margin-bottom: 1rem">نوع ارتباط :</h5>
            <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.callType ? 'ایمیل' : ' تماس تلفنی' }}</p>
          </div>
        </div>

        <div class="col-lg-8">
          <h5>توضیحات :</h5>
          <div style="display: flex; align-items: center; justify-content: center">
            <div class="d-flex mt-3" style="align-items: center; justify-content: center">
              <p class="mr-2" style="margin-bottom: 1rem">{{ complaint?.caption }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminComplaintDetails',

  layout: 'admin',

  async asyncData({ $axios, params, query, error }) {},
  data() {
    return {
      complaint: null
    }
  },

  computed: {},
  beforeMount() {
    this.$axios.get(`/api/admin/complaint/${this.$route.params.item}`).then(res => {
      this.complaint = res.data
    })
  },
  methods: {}
}
</script>

<style lang="scss">
.progressBar {
  .el-progress-bar__inner {
    left: auto;
    right: 0;
    text-align: left;
  }
}

.btn-upload {
  background-color: cornflowerblue;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: white;
  float: left;
}

.space {
  margin: 5rem;
}
.ui-box {
  background-color: white;
  border-radius: 10px;
}
</style>
