<template>

  <!-- Add Question dialog  -->
    <v-flex>
      <v-card>

        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="800px">

          <v-card>
            <v-card-title>

              <span class="headline hidden-xs-only hidden-md-only hidden-sm-only">{{ formTitle }}</span>
              <h4 class="hidden-lg-only">{{ formTitle }}</h4>

              <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-tabs color="white" show-arrows>
                  <v-tabs-slider color="black"></v-tabs-slider>
                  <v-tab>
                    <v-btn color="grey darken-2" flat>Suggestion</v-btn>
                  </v-tab>
                  <v-tab>
                    <v-btn color="grey darken-2" flat>Sex</v-btn>
                  </v-tab>
                  <v-tab>
                    <v-btn color="grey darken-2" flat>Health</v-btn>
                  </v-tab>
                  <v-tab>
                    <v-btn color="grey darken-2" flat>Skin & Beauty</v-btn>
                  </v-tab>
                  <v-tab>
                    <v-btn color="grey darken-2" flat>Diet & Ex</v-btn>
                  </v-tab>

                </v-tabs>

              </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>
        <!-- Edit Question Dialog see answer -->
        <v-dialog v-model="dialog1" max-width="900px">
          <v-card height="700px">
            <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>
                  <v-textarea
                    solo
                    v-model="editedItem.question"
                    name="input-7-4"
                    label="Question"
                    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
                  ></v-textarea>
                </v-flex>
              </v-layout>
              <v-layout class="mt-4">
                <v-flex xs12 sm6>
                  <h5>
                    <span class="title">Ana suggestion:</span> Abnormal Uterine Bleeding
                  </h5>
                  <h5
                    class="subheading hidden-xs-only hidden-md-only hidden-sm-only"
                  >Diagnosis 1,Diagnosis 2,Diagnosis 3</h5>
                  <p class="hidden-lg-only">Diagnosis 1,Diagnosis 2,Diagnosis 3</p>
                </v-flex>
                <v-flex sm6 class="hidden-xs-only hidden-md-only hidden-sm-only">
                  <v-btn dark large class="right" @click.native="save1">Save Edit</v-btn>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 class="hidden-lg-only">
                  <v-btn dark small @click.native="save1">Save Edit</v-btn>
                </v-flex>
              </v-layout>
              <v-layout class="mt-3 AnswerTable">
                <v-flex xs12>
                  <div>
                    <v-data-table :items="getQuestion" class="elevation-1" hide-actions hide-headers>
                      <template slot="items" slot-scope="props">
                        <v-layout>
                          <v-flex xs9 class="bottomAnswser">
                            <td class="pa-3">
                              <span class="subheading text--black font-weight-bold">{{ props.item.name }}</span>
                              <br>
                              {{ props.item.calories }}
                            </td>
                          </v-flex>
                          <v-flex xs3  class="bottomAnswser">
                            <td class="justify-center layout px -0 mt-4">
                              <v-icon medium @click="deleteAnswer(props.item)">delete</v-icon>
                            </td>
                          </v-flex>
                        </v-layout>
                      </template>
                      <template slot="no-data">
                        <v-btn color="primary" @click="initializeData">Reset</v-btn>
                      </template>
                    </v-data-table>
                  </div>

                </v-flex>
              </v-layout>

            </v-card-text>

          </v-card>
        </v-dialog>
        <!-- Forum Questions data-table -->    
        <v-card>
          <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 class="pa-4">
                  <span style="cursor:pointer" @click="dialog=true">
                    <v-icon class="outlined mb-2" medium>add_box</v-icon><span class="subheading"> Add New Question </span>
                  </span>
                </td>
                <td id="td">&nbsp;</td>
                <td id="td">&nbsp;</td>
              </tr>
              <tr>
                <td id="td" class="text-xs-center pa-4">{{ 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-card>

    </v-flex>

  </template>
  <script>
  export default {
    data: () => ({

      question: "",

      AddQuestioncredentials: {},
      dialog: false,
      dialog1: false,
      isActive: true,
      newActive: false,
      pagination: {

        rowsPerPage: 10

      },

      getQuestion: [],

      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: "",
        name: ''

      },
      defaultItem: {
        no: 0,

        name: '',
        question: "",
        res: 0

      }
    }),
  
    computed: {

      formTitle() {
        return this.editedIndex === -1 ? "Create New Question" : "Edit Question";

      }
    },
  
    watch: {

      dialog(val) {

        val || this.close();
      }
    },

    created() {

      this.initialize();

      this.initializeData()

    },
  
    methods: {

      initialize() {

        this.desserts = [
          {

            no: "1",
            ques: "questions Skin & Beauty",
            res: 21
          }

        ];

      },
      initializeData () {
        this.getQuestion = [
          {
            name: 'Frozen Yogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
          },
          {
            name: 'Zogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
  
          },
          {
            name: 'Frozen Yogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
  
          },
          {
            name: 'Cupcake',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
          },
          {
            name: 'Gingerbread',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
        
          },
          {
            name: 'Jelly bean',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'          
          },
          {
            name: 'Frozen Yogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
          },
          {
            name: 'Zogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
  
          },
          {
            name: 'Frozen Yogurt',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'

          },
          {
            name: 'Cupcake',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
          },
          {
            name: 'Gingerbread',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'
        
          },
          {
            name: 'Jelly bean',
            calories: 'You can apply the hide-headers and hide-actions props to remove the default               header and footer respectively.You can apply the hide-headers and hide-actions props              to remove the default header and footer respectively.'          
          },
        ]
      },
      deleteAnswer (item) {
        const index = this.getQuestion.indexOf(item)
        confirm('Are you sure you want to delete this item?') && this.getQuestion.splice(index, 1)
      },
      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;
  }
  .AnswerTable{
  height: 370px;overflow: auto;
  }
  .bottomAnswser{
  border-bottom:1px solid #aaa;

  }
  </style>