<template>
  <el-dialog :title="title" :visible.sync="showModal">
    <div class="agentDetailsModal">
      <el-form label-position="top" :model="agent">
        <el-form-item label="نوع نماینده">
          <el-input v-if="agent.representation_type === 'both'" disabled value="نماینده هر دو نوع لوازم"/>
          <el-input v-if="agent.representation_type === 'verity'" disabled value="نماینده لوازم جانبی کامپیوتر و موبایل"/>
          <el-input v-if="agent.representation_type === 'panatech'" disabled value="نماینده لوازم صوتی تصویری خودرو"/>
        </el-form-item>

        <el-form-item label="نام فروشگاه">
          <el-input disabled :value="agent.store_name"></el-input>
        </el-form-item>

        <el-form-item label="کد نماینده">
          <el-input disabled :value="agent.agent_code"></el-input>
        </el-form-item>

        <el-form-item label="نام و نام خانوادگی">
          <el-input disabled :value="agent.full_name"></el-input>
        </el-form-item>

        <el-form-item label="شماره تلفن ثابت">
          <el-input disabled :value="agent.tel_number"></el-input>
        </el-form-item>

        <el-form-item label="شماره فکس">
          <el-input disabled :value="agent.fax_number || '-'"></el-input>
        </el-form-item>

        <el-form-item label="شماره موبایل">
          <el-input disabled :value="agent.mobile_number"></el-input>
        </el-form-item>

        <el-form-item label="ایمیل">
          <el-input disabled :value="agent.email"></el-input>
        </el-form-item>

        <el-form-item label="استان">
          <el-input disabled :value="agent.province_name"></el-input>
        </el-form-item>

        <el-form-item label="شهر">
          <el-input disabled :value="agent.city_name"></el-input>
        </el-form-item>

        <el-form-item label="آدرس" :title="agent.address">
          <el-input disabled :value="agent.address"></el-input>
        </el-form-item>

        <el-form-item label="کد پستی">
          <el-input disabled :value="agent.postal_code"></el-input>
        </el-form-item>
      </el-form>

      <div class="btnRow" style="text-align: center">
        <a class="btn btn-primary mb-1" :href="`tel: ${agent.mobile_number}`">تماس به همراه</a>
        <a class="btn btn-primary mb-1" :href="`tel: ${agent.tel_number}`">تماس به تلفن ثابت</a>
        <a class="btn btn-primary mb-1" :href="`mailto: ${agent.email}`">ایمیل</a>
        <el-button class="btn btn-primary mb-1" @click="showModal = false">بستن</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AgentDetailsModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    agent: {
      requred: true,
      type: Object,
      default: null
    }
  },
  data() {
    return {}
  },
  computed: {
    showModal: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('closeModal')
      }
    },
    title() {
      return 'اطلاعات تماس نماینده'
    }
  }
}
</script>
