<template>
    <div>
        <DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
            :hover-state-enabled="true" @selection-changed="onSelectionChanged">
            <DxSelection mode="single" />
            <DxColumn :width="80" data-field="Prefix" caption="Title" />
            <DxColumn data-field="FirstName" />
            <DxColumn data-field="LastName" />
            <DxColumn data-field="City" />
            <DxColumn data-field="State" />
            <DxColumn :width="130" data-field="Position" />
            <DxColumn :width="100" data-field="BirthDate" data-type="date" />
            <DxColumn :width="100" data-field="HireDate" data-type="date" />
        </DxDataGrid>
    </div>
</template>

<script setup lang="ts">
import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
import { ref } from 'vue';

const showColumnLines = ref(false);
const showRowLines = ref(false);
const showBorders = ref(false);
const rowAlternationEnabled = ref(true);
interface Employee {
    ID: number;
    FirstName: string;
    LastName: string;
    Prefix: string;
    Position: string;
    Picture: string;
    BirthDate: string;
    HireDate: string;
    Notes: string;
    Address: string;
    State: string;
    City: string;
}

const employees: Employee[] = [{
    ID: 1,
    FirstName: 'John',
    LastName: 'Heart',
    Prefix: 'Mr.',
    Position: 'CEO',
    Picture: 'images/employees/01.png',
    BirthDate: '1964/03/16',
    HireDate: '1995/01/15',
    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
    Address: '351 S Hill St.',
    State: 'California',
    City: 'Los Angeles',
}, {
    ID: 2,
    FirstName: 'Olivia',
    LastName: 'Peyton',
    Prefix: 'Mrs.',
    Position: 'Sales Assistant',
    Picture: 'images/employees/09.png',
    BirthDate: '1981/06/03',
    HireDate: '2012/05/14',
    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
    Address: '807 W Paseo Del Mar',
    State: 'California',
    City: 'Los Angeles',
}, {
    ID: 3,
    FirstName: 'Robert',
    LastName: 'Reagan',
    Prefix: 'Mr.',
    Position: 'CMO',
    Picture: 'images/employees/03.png',
    BirthDate: '1974/09/07',
    HireDate: '2002/11/08',
    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
    Address: '4 Westmoreland Pl.',
    State: 'Arkansas',
    City: 'Bentonville',
}, {
    ID: 4,
    FirstName: 'Greta',
    LastName: 'Sims',
    Prefix: 'Ms.',
    Position: 'HR Manager',
    Picture: 'images/employees/04.png',
    BirthDate: '1977/11/22',
    HireDate: '1998/04/23',
    Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
    Address: '1700 S Grandview Dr.',
    State: 'Georgia',
    City: 'Atlanta',
}, {
    ID: 5,
    FirstName: 'Brett',
    LastName: 'Wade',
    Prefix: 'Mr.',
    Position: 'IT Manager',
    Picture: 'images/employees/05.png',
    BirthDate: '1968/12/01',
    HireDate: '2009/03/06',
    Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
    Address: '1120 Old Mill Rd.',
    State: 'Idaho',
    City: 'Boise',
}, {
    ID: 6,
    FirstName: 'Sandra',
    LastName: 'Johnson',
    Prefix: 'Mrs.',
    Position: 'Controller',
    Picture: 'images/employees/06.png',
    BirthDate: '1974/11/15',
    HireDate: '2005/05/11',
    Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
    Address: '4600 N Virginia Rd.',
    State: 'Utah',
    City: 'Beaver',
}, {
    ID: 7,
    FirstName: 'Kevin',
    LastName: 'Carter',
    Prefix: 'Mr.',
    Position: 'Shipping Manager',
    Picture: 'images/employees/07.png',
    BirthDate: '1978/01/09',
    HireDate: '2009/08/11',
    Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
    Address: '424 N Main St.',
    State: 'California',
    City: 'San Diego',
}, {
    ID: 8,
    FirstName: 'Cynthia',
    LastName: 'Stanwick',
    Prefix: 'Ms.',
    Position: 'HR Assistant',
    Picture: 'images/employees/08.png',
    BirthDate: '1985/06/05',
    HireDate: '2008/03/24',
    Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
    Address: '2211 Bonita Dr.',
    State: 'Arkansas',
    City: 'Little Rock',
}, {
    ID: 9,
    FirstName: 'Kent',
    LastName: 'Samuelson',
    Prefix: 'Dr.',
    Position: 'Ombudsman',
    Picture: 'images/employees/02.png',
    BirthDate: '1972/09/11',
    HireDate: '2009/04/22',
    Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
    Address: '12100 Mora Dr',
    State: 'Missouri',
    City: 'St. Louis',
}, {
    ID: 10,
    FirstName: 'Taylor',
    LastName: 'Riley',
    Prefix: 'Mr.',
    Position: 'Network Admin',
    Picture: '',
    BirthDate: '1982/08/14',
    HireDate: '2012/04/14',
    Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
    Address: '7776 Torreyson Dr',
    State: 'California',
    City: 'San Jose',
}];

const onSelectionChanged = ({ selectedRowsData }: any) => {
    const data = selectedRowsData[0];
    console.log(data);
};

</script>
<style scoped>
.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    width: 24%;
    display: inline-block;
    margin-top: 10px;
}

.options-container {
    display: flex;
    align-items: center;
}
</style>