<template>
  <user-dashboard-container page-class="post" panel-title="ارسال برای گارانتی">
    <div class="chooseDataBase">
      <el-alert type="warning" class="mb-5">
        کاربر گرامی توجه داشته باشید نمیتوانید لوازم جانبی کامپیوتر و لوازم صوتی تصویری رو همزمان باهم در یک فرم ارسال
        کنید. لذا اگر از هر دو نوع محصول دارید دو فرم جداگانه برای هرکدام پر کنید.
      </el-alert>
      <h2>نوع محصول را انتخاب کنید:</h2>
      <div class="brandsList">
        <div class="brand" :class="db_name === 'verity' && 'selected'">
          <button @click="db_name = 'verity'">
            <i class="fas fa-phone-laptop"></i>
            <span>لوازم جانبی کامپیوتر و موبایل</span>
          </button>
        </div>
        <div class="brand" :class="db_name === 'panatech' && 'selected'">
          <button @click="db_name = 'panatech'">
            <i class="fas fa-photo-video"></i>
            <span>لوازم صوتی و تصویری خودرو</span>
          </button>
        </div>
      </div>
    </div>
    <form v-if="db_name !== ''" class="form form_3" @submit.prevent="postDraft">
      <div class="userInfo">
        <div class="formRow">
          <label for="customer_name">نام مشتری</label>
          <input id="customer_name" type="text" :value="user.first_name + ' ' + user.last_name" disabled />
        </div>
        <div class="formRow">
          <label for="customer_code">کد مشتری</label>
          <input id="customer_code" type="text" :value="businessCode" disabled />
        </div>
        <div class="formRow">
          <label for="mobile">شماره موبایل</label>
          <input id="mobile" type="text" :value="user.mobile_number" disabled />
        </div>
      </div>

      <div class="formRow">
        <label>آدرس</label>
        <textarea name="description" cols="30" rows="5" disabled :value="userAddress"></textarea>
      </div>

      <hr />

      <div class="formRow">
        <label for="description">توضیحات فرم (اختیاری)</label>
        <textarea
          id="description"
          v-model="description"
          name="description"
          placeholder="توضیحات راجع به کالاها را میتوانید اینجا بنویسید"
          cols="30"
          rows="10"
        ></textarea>
      </div>

      <div class="btnRow">
        <button class="btn btn-primary postPageBtn">
          <span>مرحله بعد افزودن کالا</span>
          <i v-if="db_name === 'panatech'" class="fas fa-photo-video"></i>
          <i v-if="db_name === 'verity'" class="fas fa-phone-laptop"></i>
        </button>
      </div>
    </form>
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountPost',
  layout: 'user',
  data() {
    return {
      db_name: '',
      description: ''
    }
  },
  computed: {
    user() {
      return this.$auth.user
    },
    userAddress() {
      const user = this.user
      return user.province_name + '، ' + user.city_name + '، ' + user.address + '،کد پستی: ' + user.postal_code
    },
    businessCode() {
      const errMsg = 'عدم ثبت در پایگاه داده'
      if (this.db_name === 'panatech') return this.user.panatech_businessCode || errMsg
      if (this.db_name === 'verity') return this.user.verity_businessCode || errMsg
      return errMsg
    }
  },
  methods: {
    postDraft() {
      if (this.db_name === '') {
        return this.$message({
          type: 'warning',
          message: 'برند محصول را انتخاب کنید'
        })
      }
      const data = {
        db_name: this.db_name,
        description: this.description
      }
      this.$axios
        .post('/api/user/transactionDraft', data)
        .then(res => {
          this.$router.push({ name: 'account-drafts-draftID', params: { draftID: res.data.draftId } })
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: 'مشکلی در ثبت فرم پیش آمده'
          })
        })
    }
  }
}
</script>
