<template>
  <div>
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h2 class="title-single">User Defined Group</h2>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
      <div class="row mb-3">
        <div class="col-md-12">
          <form id="mainForm">
            <div v-if="userDefinedGroup" class="form-group row">
              <div class="col-md-4">
                <label>Description</label>
                <input
                  class="form-control"
                  type="text"
                  name="description"
                  id="description"
                  v-model="userDefinedGroup.description"
                />
              </div>
              <div class="col-md-4">
                <label>Property Type</label>
                <select
                  class="form-control"
                  name="UsageType"
                  id="UsageType"
                  v-model="userDefinedGroup.usageType"
                >
                  <option value="0">Residential</option>
                  <option value="1">Commercial</option>
                  <option value="2">Both</option>
                </select>
              </div>
              <div class="col-md-4">
                <label>Order</label>
                <input
                  class="form-control"
                  type="number"
                  name="rank"
                  id="rank"
                  v-model="userDefinedGroup.rank"
                />
              </div>
            </div>
            <div v-if="!userDefinedGroup" class="form-group row">
              <div class="col-md-4">
                <label>Description</label>
                <input
                  class="form-control"
                  type="text"
                  name="description"
                  id="description"
                  v-model="group.description"
                />
              </div>
              <div class="col-md-4">
                <label>Property Type</label>
                <select
                  class="form-control"
                  name="UsageType"
                  id="UsageType"
                  v-model="group.usageType"
                >
                  <option value="0">Residential</option>
                  <option value="1">Commercial</option>
                  <option value="2">Both</option>
                </select>
              </div>
              <div class="col-md-4">
                <label>Order</label>
                <input
                  class="form-control"
                  type="number"
                  name="rank"
                  id="rank"
                  v-model="group.rank"
                />
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="container">
      <button
        type="button"
        @click="newItem()"
        class="btn btn-b-n"
        style="width: 85px; height:40px;"
      >New</button>
      <br />
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Field Name</th>
            <th>Field Type</th>
            <th>Order</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in userFields" :key="i">
            <td>{{item.fieldName}}</td>
            <td>{{item.fieldType}}</td>
            <td>{{item.rank}}</td>
            <td>
              <router-link :to="{ name: 'UserDefinedField', query: { field: item }}">Edit</router-link>
              <!-- <router-link :to="`/userField`">Edit</router-link>| Delete -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <button
      type="button"
      @click="SubmitData()"
      class="btn btn-b-n"
      style="width: 85px; height:40px;"
    >Save</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'UserDefinedGroup',
  data() {
    return {
      group: {
        description: '',
        usageType: 0,
        rank: 0,
      },
    };
  },
  mounted() {
    if (this.$route.params.id > 0) {
      this.getUserDefinedGroup(
        Object.assign({}, { id: this.$route.params.id }),
      );
      this.getUserFields(Object.assign({}, { groupId: this.$route.params.id }));
    }
  },
  computed: {
    ...mapState('propertyAdmin', ['userDefinedGroup', 'userFields']),
  },
  methods: {
    ...mapActions('propertyAdmin', [
      'getUserDefinedGroup',
      'getUserFields',
      'saveUserDefinedGroup',
      'updateUserDefinedGroup',
    ]),
    SubmitData() {
      if (this.$route.params.id > 0) {
        this.updateUserDefinedGroup(
          Object.assign({}, { group: this.userDefinedGroup }),
        );
      } else {
        this.saveUserDefinedGroup(Object.assign({}, { group: this.group }));
      }
      this.$router.push('/userDefinedGroups/list');
    },
    newItem() {
      const newField = {
        fieldName: '',
        fieldType: 'Text',
        rank: 0,
      };
      this.$router.push({
        path: '/userField',
        query: { field: newField },
      });
    },
  },
};
</script>
