<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 Diet &Ex",
          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>