<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title class="white--text">Position untuk {{xrequirement.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>

        <v-layout row wrap>
          <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
            <v-btn style="min-width:160px;" class="mt-1 mb-2" v-for="(vst,idx) in vpositions" :key="vst.Nat_PositionID" @click="changePosition(idx)"
              small :color="vst.IsChecked === 'N' ? 'yellow' : 'green'">{{vst.Nat_PositionName}}
            </v-btn>
          </v-flex>
        </v-layout>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
  .searchbox .v-input.v-text-field .v-input__slot {
    min-height: 60px;
  }

  .searchbox .v-btn {
    min-height: 60px;
  }


  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background: white;
    border: 0px;
  }

  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  table>tr>td {
    padding: 8px;
  }

  table>tr>td:first {
    padding-left: 15px !important;
  }
</style>

<script>
  module.exports = {
    data() {
      return {
        isLoading: false,
        msgalertmou: ""
      };
    },
    computed: {
      xrequirement() {
        return this.$store.state.requirement.selected_requirement
      },
      vpositions() {
        return this.$store.state.position.positions
      },
    },
    methods: {
      updatePosition() {},
      changePosition(idx) {
        var pos = this.vpositions;
        if (pos[idx].IsChecked == 'Y') {
          pos[idx].IsChecked = 'N'
          this.$store.dispatch("position/delete", {
            requirementid: this.$store.state.requirement.selected_requirement.id,
            requirementname: this.$store.state.requirement.selected_requirement.name,
            positionid: pos[idx].Nat_PositionID,
            positionname: pos[idx].Nat_PositionName
          })
        } else {
          pos[idx].IsChecked = 'Y'
          this.$store.dispatch("position/save", {
            requirementid: this.$store.state.requirement.selected_requirement.id,
            requirementname: this.$store.state.requirement.selected_requirement.name,
            positionid: pos[idx].Nat_PositionID,
            positionname: pos[idx].Nat_PositionName
          })
        }
        this.$store.dispatch("position/update_positions_only", pos)

      }
    }
  }
</script>