<template>
  <div>
    <ods-sub-header>
        <h6>SandBox</h6>
    </ods-sub-header>
    <div style="padding:120px;">

      <!-- Enlaces -->
      <ods-module>
        <div slot="header" class="clearfix" style="position: relative">
          <span>Modificaciones de estado</span>
        </div>
        <div class="text item">
          <ods-button type="text" @click="dialogpendingStatus = true">
            Lanza pop up de modificar estado a pendiente <ods-icon name="arrow-right" size="16"></ods-icon>
          </ods-button><br>
          <ods-button type="text" @click="dialogAssignmentStatus = true">
            Lanza pop up de modificar estado a asignar responsable <ods-icon name="arrow-right" size="16"></ods-icon>
          </ods-button><br>
          <ods-button type="text" @click="dialogResolvedStatus = true">
            Lanza pop up de modificar estado a resuelta <ods-icon name="arrow-right" size="16"></ods-icon>
          </ods-button><br>
        </div>
      </ods-module>

      <!-- DIALOGS
        ========================================================================== -->

      <!-- dialogpendingStatus
      -------------------------------------------- -->
      <ods-dialog
        title="¿Estás seguro de que quieres dejar como pendiente esta notificación?"
        :visible.sync="dialogpendingStatus"
        width="610px"
        custom-class="-custom-simple-dialog"
        :append-to-body="true">

        <span slot="footer" class="dialog-footer">
          <ods-button size="medium" type="text" @click="dialogpendingStatus = false">No, dejarla como está</ods-button>
          <ods-button size="medium" @click="dialogpendingStatus = false">Dejar como pendiente</ods-button>
        </span>
      </ods-dialog>

      <assign-dialog @close="dialogAssignmentStatus = false" @assignmentFormData="submitForm" :visible="dialogAssignmentStatus"></assign-dialog>

      <!-- dialogResolvedStatus
      -------------------------------------------- -->
      <ods-dialog
        title="¿Estás seguro de resolver esta notificación?"
        :visible.sync="dialogResolvedStatus"
        width="598px"
        custom-class="-custom-simple-dialog"
        :append-to-body="true">

        <span slot="footer" class="dialog-footer">
          <ods-button size="medium" type="text" @click="dialogResolvedStatus = false">No, no quiero resolverla</ods-button>
          <ods-button size="medium" @click="dialogResolvedStatus = false">Si, quiero resolverla</ods-button>
        </span>
      </ods-dialog>

    </div>
  </div>
</template>

<script>
// import { mapActions, mapGetters, mapState } from 'vuex'
import AssignDialog from '@/components/assign-dialog/AssignDialog';

export default {
  name: 'SandBox',
  components: {AssignDialog},
  data() {
    return {
      dialogpendingStatus: false,
      dialogAssignmentStatus: false,
      dialogResolvedStatus: false,
    };
  },
  mounted() {},
  computed: {},
  methods: {
    submitForm(formName) {
      console.log(formName);
      this.dialogAssignmentStatus = false;
    },
  },
};

</script>

<style lang="scss">
  .ods-dialog.-custom-simple-dialog {
    padding:18px 32px 20px 34px;

    .ods-dialog__title {
      font-size: 16px;
      font-weight: 500;
      line-height: 32px;
    }

    .ods-dialog__headerbtn {
      display:none;
    }
    .ods-dialog__footer {
      padding-top: 13px;

      .ods-button--text:first-child {
        padding-right:10px;
      }
    }
  }

  .ods-form-item__label.-not-float {float:none;}

  // .-custom-label {}

</style>
