<template>
<v-container grid-list-xl>
    <v-flex>
  <v-card>
    <v-toolbar flat color="white">
      <v-card-title>
      <h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3>
      <h5 style="position:relative; left:40px; top:-15px;">Select Category</h5>
      <span style="position:relative; left:-95px; top:10px;">
            <v-btn color="grey darken-2" flat>Suggestion</v-btn>
            <v-btn color="grey darken-2" flat>Sex</v-btn>
            <v-btn color="grey darken-2" flat>Health</v-btn>
            <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
            <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
      </span>
      
      </v-card-title>
    
      <v-spacer></v-spacer>
      <v-dialog v-model="dialog" max-width="800px">
    
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
            <v-spacer></v-spacer>
            <v-icon @click="close">close</v-icon>
          </v-card-title>
          <v-flex>
            <v-card>
              <v-card-text>
          <span>
          <p><b>Ana Suggestion:</b> Select Suggestion</p></span>
          <h5>Select Category:</h5>
          <span>
            <v-btn color="grey darken-2" flat>Suggestion</v-btn>
            <v-btn color="grey darken-2" flat>Sex</v-btn>
            <v-btn color="grey darken-2" flat>Health</v-btn>
            <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
            <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
            </span>
              </v-card-text>
          </v-card>
          </v-flex>
          <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
            <v-flex xs12 sm6 md12>
               
          <v-textarea
           solo
           v-model="AddQuestioncredentials.question"
          name="input-7-4"
          label="Type Question"
        ></v-textarea>
              </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>

          <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn dark large @click.native="save">Post Question</v-btn>
          </v-card-actions>
          </v-card>
          </v-dialog>

        
        
        <v-dialog v-model="dialog1" max-width="800px">
        <v-card>
        <v-card-title>
        <span class="headline">Edit Question</span>
        <v-spacer></v-spacer>
        <v-icon @click="close1">close</v-icon>
        </v-card-title>

        <v-card-text>
          <v-layout wrap>
              <v-flex xs12 sm6 md12>
                <v-text-field outline v-model="editedItem.ques" label="Question"></v-text-field>
              </v-flex>
            </v-layout>
            <span><p> <b>Ana suggestion:</b> Abnormal Uterine Bleeding <br>
            Diagnosis 1,Diagnosis 2,Diagnosis 3
            <v-btn dark large @click.native="save1" style="position:absolute; top:163px; right:5px;">Save Edit</v-btn></p></span>
          </v-card-text>
         </v-card>
       </v-dialog>
    </v-toolbar>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      :pagination.sync="pagination"
    >
    <template slot="items" slot-scope="props">
      <tr v-if="props.index === 0">
        <td id="td">&nbsp;</td>
        <td>
        <span style="cursor:pointer" @click="dialog=true"> <v-icon>add</v-icon>Add New Question</span>
        </td>
        <td id="td">&nbsp;</td>
          <td id="td">&nbsp;</td>
      </tr>
      <tr>
        <td id="td" class="text-xs-center">{{ props.item.no }}</td>
        <td id="td">{{ props.item.ques }}</td>
        <td id="td" class="text-xs-center">{{ props.item.res }}</td>
        <td class="text-xs-center">
          <span>
          <img style="cursor:pointer; height:18px; " class="mr-5" @click="editItem(props.item)" src="/static/icon/edit1.png"/>
          <img style="cursor:pointer; height:20px; " class="mr-5" @click="deleteItem(props.item)" src="/static/icon/delete1.png"/>
          </span>
        </td>
      </tr>
      </template>
    </v-data-table>
  </v-card>
  </v-flex>

  </v-container>
</template>
<script>
export default {
  data: () => ({
    question: '',
    AddQuestioncredentials: {},
    dialog: false,
    dialog1: false,
    isActive: true,
    newActive: false,
    pagination: {
      rowsPerPage: 10,
    },
    headers: [
      {
        text: 'No.',
        align: 'center',
        sortable: false,
        value: 'name'
      },
      { text: 'Posts', value: 'posts', sortable: false, align: 'center' },
      { text: 'Responses', value: 'responses', sortable: false, align: 'center' },
      { text: '', value: 'carbs', sortable: false, align: 'center' },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      question: '',
      
    },
    defaultItem: {
      no: 0,
      question: '',
      res: 0,
      
    }
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? 'Create New Question' : 'Edit Question';
    }
  },

  watch: {
    dialog (val) {
      val || this.close();
    }
  },

  created () {
    this.initialize();
  },

  methods: {
    initialize () {
      this.desserts = [
        {
          no: '1',
          ques: 'questions',
          res: 9.0,
        },
      ];
    },    

    editItem (item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog1 = true;
    },

    deleteItem (item) {
      const index = this.desserts.indexOf(item);
      confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1);
    },

    close () {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    close1 () {
      this.dialog1 = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    save () {
      console.log('editedItem', this.editedItem);
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close();
    },
    save1 () {
      console.log('editedItem', this.editedItem);
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close1();
    }
  },
  // switchComponent (comp) {
  //   this.$emit('switchComp', comp);
  // }
};
</script>
<style>
#td{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
   
}
</style>