<template>
  <div class="demo-page includes-toc">
    <toc :sections="sections" />
    <section
      id="section-text-fields"
      class="section-example"
    >
      <h2>Text Fields</h2>
      <ExampleTextFields />
    </section>

    <section
      id="section-checkboxes"
      class="section-example"
    >
      <h2>Checkboxes</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Default, Unchecked
            </td>
            <td>
              <TfCheckbox />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Default, Checked
            </td>
            <td>
              <TfCheckbox checked />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled, Unchecked
            </td>
            <td>
              <TfCheckbox disabled />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled, Checked
            </td>
            <td>
              <TfCheckbox
                disabled
                checked
              />
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <section
      id="section-checkboxes-labels"
      class="section-example"
    >
      <h2>Checkboxes + Labels</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Default, Unchecked
            </td>
            <td>
              <TfCheckbox>Checkbox Label</TfCheckbox>
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Default, Checked
            </td>
            <td>
              <TfCheckbox checked>
                Checkbox Label
              </TfCheckbox>
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled, Unchecked
            </td>
            <td>
              <TfCheckbox disabled>
                Checkbox Label
              </TfCheckbox>
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Checked, disabled
            </td>
            <td>
              <TfCheckbox
                disabled
                checked
              >
                Checkbox Label
              </TfCheckbox>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <section
      id="section-switches"
      class="section-example"
    >
      <h2>Switches</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Default, unchecked
            </td>
            <td>
              <ElSwitch
                v-model="switchValueUnchecked"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Default, checked
            </td>
            <td>
              <ElSwitch
                v-model="switchValueChecked"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled, unchecked
            </td>
            <td>
              <ElSwitch
                v-model="disabledSwitchValueUnchecked"
                disabled="disabled"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled, checked
            </td>
            <td>
              <ElSwitch
                v-model="disabledSwitchValueChecked"
                disabled="disabled"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <section
      id="section-radio-buttons"
      class="section-example"
    >
      <h2>Radio Buttons</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Default
            </td>
            <td>
              <ElRadio
                v-model="radio"
                class="radio"
                label="1"
              >
                optionA
              </ElRadio>
              <ElRadio
                v-model="radio"
                class="radio"
                label="2"
              >
                optionB
              </ElRadio>
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Disabled
            </td>
            <td>
              <ElRadio
                v-model="radio1"
                disabled
                label="disabled"
              >
                optionA
              </ElRadio>
              <ElRadio
                v-model="radio1"
                disabled
                label="selected and disabled"
              >
                optionB
              </ElRadio>
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Radios as Buttons
            </td>
            <td>
              <ElRadioGroup
                v-model="radioGroup"
                size="small"
              >
                <ElRadioButton label="Auto" />
                <ElRadioButton label="Draw" />
                <ElRadioButton
                  label="Disabled"
                  disabled="disabled"
                />
              </ElRadioGroup>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <ElForm
      ref="errorSelectForm"
      label-position="top"
      :model="errorSelectForm"
      :rules="errorSelectFormRules"
    >
      <section
        id="section-large-dropdown"
        class="section-example"
      >
        <h2>Large Dropdown</h2>
        <table class="demo-table">
          <tbody>
            <tr>
              <td class="demo-label">
                Large dropdown
              </td>
              <td>
                <ElSelect
                  v-model="value2"
                  size="large"
                  placeholder="Select"
                >
                  <ElOption
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </td>
            </tr>
            <tr>
              <td class="demo-label">
                Error
              </td>
              <td>
                <ElFormItem prop="value3">
                  <ElSelect
                    v-model="errorSelectForm.value3"
                    size="large"
                    placeholder="Select"
                  >
                    <ElOption
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </ElSelect>
                </ElFormItem>
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section
        id="section-normal-dropdown"
        class="section-example"
      >
        <h2>Normal Dropdown</h2>
        <table class="demo-table">
          <tbody>
            <tr>
              <td class="demo-label">
                Normal dropdown
              </td>
              <td>
                <ElSelect
                  v-model="value4"
                  placeholder="Select"
                >
                  <ElOption
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </td>
            </tr>
            <tr>
              <td class="demo-label">
                Error
              </td>
              <td>
                <ElFormItem prop="value5">
                  <ElSelect
                    v-model="errorSelectForm.value5"
                    placeholder="Select"
                  >
                    <ElOption
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </ElSelect>
                </ElFormItem>
              </td>
            </tr>
            <tr>
              <td class="demo-label">
                Grouped dropdown
              </td>
              <td>
                <ElSelect
                  v-model="groupedValue"
                  placeholder="Select"
                >
                  <ElOptionGroup
                    v-for="group in groupedOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <ElOption
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </ElOptionGroup>
                </ElSelect>
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section
        id="section-input-with-options"
        class="section-example"
      >
        <h2>Input with Options</h2>
        <h3><code>&lt;TfInputWithOptions /&gt;</code></h3>
        <ExampleTfInputWithOptions />
      </section>

      <section
        id="section-form-items"
        class="section-example"
      >
        <h2>Form items (labels)</h2>
        <ElFormItem label="Product(s)">
          <ElSelect
            placeholder="Select"
            value="foo"
          />
        </ElFormItem>

        <ElFormItem label="Value">
          <ElInput
            size="medium"
            value="value"
          />
        </ElFormItem>
      </section>

      <section
        id="section-text-area"
        class="section-example"
      >
        <h2>Text area</h2>
        <ElInput
          :rows="6"
          type="textarea"
          placeholder="Enter your text"
        />
      </section>
    </ElForm>
    <ElForm
      ref="textAreaErrorForm"
      :model="textAreaErrorForm"
      :rules="textAreaErrorFormRules"
    >
      <section class="section-example">
        <h2>Text area with error</h2>
        <ElFormItem
          prop="value1"
        >
          <ElInput
            v-model="textAreaErrorForm.value1"
            :rows="6"
            type="textarea"
            placeholder="Enter your text"
          />
        </ElFormItem>
      </section>
    </ElForm>

    <section
      id="section-custom-dropdowns"
      class="section-example"
    >
      <h2>Custom Dropdowns</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Multi Select with 200px explicit Width
            </td>
            <td>
              <TfMultiSelect
                v-model="checkedMultiSelect"
                :options="multiSelectOptions"
                width="200"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Multi Select with Width of Auto (Default. Can't be used with append-to-body: true)
            </td>
            <td>
              <TfMultiSelect
                v-model="checkedMultiSelect"
                :options="multiSelectOptions"
                width="auto"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Multi Select w/ disabled checkboxes
            </td>
            <td>
              <TfMultiSelect
                v-model="checkedMultiSelect"
                :force-disable-checkbox-click="true"
                :options="multiSelectOptions"
                width="auto"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Multi Select w/color Concated Labels
            </td>
            <td>
              <TfMultiSelect
                v-model="checkedMultiSelectCarriers"
                :concatenate-labels="true"
                :options="multiSelectOptionsCarriers"
                width="auto"
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              "tf-select-text" Component
            </td>
            <td>
              <TfSelectText
                v-model="textWithList.value"
                :options="textWithList.options"
                title="Reassign Project"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <section
      id="section-custom-fields"
      class="section-example"
    >
      <h2>Custom Fields</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Tag Field
            </td>
            <td>
              <TfTagField
                v-model="tags"
                placeholder="Add a new annotation to run Tactic Engine."
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Tag Field, closable set at the field level
            </td>
            <td>
              <TfTagField
                v-model="tags"
                :closable="true"
                placeholder="Add a new annotation to run Tactic Engine."
              />
            </td>
          </tr>
          <tr>
            <td class="demo-label">
              Tag Field, no values
            </td>
            <td>
              <TfTagField
                :value="[]"
                placeholder="Add a new annotation to run Tactic Engine."
              />
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <section
      id="section-password-fields"
      class="section-example"
    >
      <h2>Password Fields</h2>
      <table class="demo-table">
        <tbody>
          <tr>
            <td class="demo-label">
              Password field
            </td>
            <td>
              <TfPasswordField />
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>

<script>
  import { FactoryTags } from '@/factories/factories';
  import toc from '@/views/examples/Toc';

  // Components
  // Next step is to make all of these examples their own components and controlled through the routes.
  // This way we won't have to import everything. This is the same approach done with the tables in an effort to  make it easier to manage updating our examples.
  import ExampleTextFields from './TextFields';
  import TfInputWithOptions from './TfInputWithOptions';
  import TfPasswordField from './PasswordField';

  const tags = FactoryTags.getTags();

  export default {
    components: {
      toc,
      ExampleTextFields,
      TfPasswordField,
      ExampleTfInputWithOptions: TfInputWithOptions,
    },
    data: () => ({
      tags,
      groupedOptions: [
        {
          label: 'Popular cities',
          options: [
            { value: 'Shanghai', label: 'Shanghai' },
            { value: 'Beijing', label: 'Beijing' },
          ],
        },
        {
          label: 'City name',
          options: [
            { value: 'Chengdu', label: 'Chengdu' },
            { value: 'Shenzhen', label: 'Shenzhen' },
            { value: 'Guangzhou', label: 'Guangzhou' },
            { value: 'Dalian', label: 'Dalian' },
          ],
        },
      ],
      groupedValue: '',
      switchValueUnchecked: false,
      switchValueChecked: true,
      disabledSwitchValueUnchecked: false,
      disabledSwitchValueChecked: true,
      radio: '1',
      radio1: 'selected and disabled',
      radio2: 9,
      radio3: 'Chicago',
      radio4: 'New York',
      radio5: 'Los Angeles',
      radioGroup: 'Auto',
      textAreaErrorForm: {
        value1: '',
      },
      textAreaErrorFormRules: {
        value1: [
          { required: true, message: 'In-line error text', trigger: 'blur' },
        ],
      },
      errorSelectForm: {
        value3: null,
        value5: null,
      },
      errorSelectFormRules: {
        value3: [
          { required: true, message: 'In-line error text', trigger: 'change' },
        ],
        value5: [
          { required: true, message: 'In-line error text', trigger: 'blur' },
        ],
      },
      value2: '',
      value4: '',
      value5: '',
      options: [
        { value: 'Option1', label: 'Option1' },
        { value: 'Option2', label: 'Option2', disabled: true },
        { value: 'Option3', label: 'Option3' },
        { value: 'Option4', label: 'Option4' },
        { value: 'Option5', label: 'Option5' },
      ],
      showAutocomplete: false,
      rfpDropDownOptions: [
        {
          label: 'Invite New Carriers or Recipients', path: '', notificationCount: 0, warning: false,
        },
        {
          label: 'Edit RFP Details',
          path: '',
          children: [{
            label: 'Edit RFP Due Date', path: '', notificationCount: 0, warning: false,
          }, {
            label: 'Document Manager', path: '', notificationCount: 0, warning: false,
          }],
        },
        {
          label: 'Upload Census', path: '', notificationCount: 0, warning: false,
        },
        {
          label: 'Quote Edits', path: '', notificationCount: 0, warning: true,
        },
        {
          label: 'Comments', path: '', notificationCount: 4, warning: false,
        }],
      rfpDropDownOptionsAlt: [
        {
          label: 'Invite New Carriers or Recipients', path: '', notificationCount: 0, warning: false,
        },
        {
          label: 'Edit RFP Details',
          path: '',
          children: [{
            label: 'Edit RFP Due Date', path: '', notificationCount: 5, warning: false,
          }, {
            label: 'Document Manager', path: '', notificationCount: 0, warning: true,
          }],
        },
        {
          label: 'Upload Census', path: '', notificationCount: 0, warning: false,
        },
        {
          label: 'Quote Edits', path: '', notificationCount: 0, warning: true,
        },
        {
          label: 'Comments', path: '', notificationCount: 4, warning: false,
        }],
      quotesDropDownOption: [
        {
          id: '100',
          title: 'Dental',
          data: [
            {
              id: '1', label: 'Cigna', path: '', quote: 1,
            },
            {
              id: '2', label: 'The Hartford', path: '', quote: 2,
            },
            {
              id: '3', label: 'Prudential', path: '', quote: 2,
            },
            {
              id: '4', label: 'Met Life', path: '', quote: 0,
            },
          ],
        },
        {
          id: '101',
          title: 'Basic Life/AD&D',
          data: [
            {
              id: '5', label: 'Cigna', path: 5, quote: 1,
            },
            {
              id: '6', label: 'The Hartford', path: 5, quote: 2,
            },
            {
              id: '7', label: 'Prudential', path: 5, quote: 2,
            },
            {
              id: '8', label: 'Met Life', path: 5, quote: 0,
            },
          ],
        },
        {
          id: '102',
          title: 'Short Term Disability',
          data: [
            {
              id: '9', label: 'Cigna', path: '', quote: 1,
            },
            {
              id: '10', label: 'The Hartford', path: '', quote: 2,
            },
            {
              id: '11', label: 'Prudential', path: '', quote: 2,
            },
            {
              id: '12', label: 'Met Life', path: '', quote: 0,
            },
          ],
        },
      ],
      documentsDropDownOption: [
        { label: 'Carrier Name 1', documentId: 1 },
        { label: 'Carrier Name 2', documentId: null },
        { label: 'Carrier Name 3', documentId: 2 },
        { label: 'Carrier Name 4', documentId: 3 }],
      multiSelectOptions: [{ label: 'one', id: 1, value: '1' }, { label: 'two', id: 2, value: '2' }, { label: 'three', id: 3, value: '3' }],
      checkedMultiSelect: ['1'],
      multiSelectOptionsCarriers: [{ value: 'Lincoln' }, { value: 'Cigna' }, { value: 'Unum' }],
      checkedMultiSelectCarriers: ['Unum', 'Cigna'],
      productSelectProductSelection: {
        open_category_ids: [36, 37],
        category_id: 36,
        product_ids: [454, 275],
      },
      productSelectFinancialSelection: {
        open_category_ids: [36],
        category_id: 36,
        product_ids: [454, 274],
      },
      productSelectFinancialSelectionOld: {
        open_category_ids: [36],
        category_id: 36,
        product_ids: [454, 274],
      },
      productSelectCategories: [
        {
          category_id: 37,
          category_order: 10,
          category_name: 'Dental & Vision',
          project_products: [
            {
              id: 1196,
              product_type_id: 14,
              alternative: false,
              label: 'Dental',
              contributory: true,
              prior_coverage: true,
              position: 1,
              sold_status: 'Not Sold',
              inforce_carrier_id: 9,
              sold_carrier_id: null,
              product_type_name: 'Dental',
              inforce_carrier_name: 'Guardian',
              sold_carrier_name: null,
              inforce_product: {
                id: 20611,
                document_id: 1544,
                state: 'completed',
                carrier_id: 9,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 1196,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 2227,
                  name: 'DHMO',
                  description: null,
                  position: 1,
                  container_type: 'Plan',
                  container_type_id: 3,
                  container_type_name: 'High',
                  annotations: [],
                },
                {
                  id: 2228,
                  name: 'DHMO (New)',
                  description: null,
                  position: 2,
                  container_type: 'Plan',
                  container_type_id: 4,
                  container_type_name: 'Low',
                  annotations: [],
                },
              ],
            },
          ],
        },
        {
          category_id: 36,
          category_order: 20,
          category_name: 'Life & Disability',
          project_products: [
            {
              id: 454,
              product_type_id: 2,
              alternative: false,
              label: 'Basic Life / AD&D',
              contributory: false,
              prior_coverage: true,
              position: 10,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'Basic Life / AD&D',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6646,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 454,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 852,
                  name: '1',
                  description: 'Full time, including Executives defined as Director, Managing Director, President, Vice President, CEO, CFO, CIO, and COO',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
                {
                  id: 851,
                  name: '2',
                  description: 'Full time employees that have worked at least 30 days as a temporary or part time employee',
                  position: 2,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
            {
              id: 274,
              product_type_id: 4,
              alternative: false,
              label: 'Optional Life',
              contributory: true,
              prior_coverage: true,
              position: 30,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'Optional Life',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6647,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 274,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 508,
                  name: '1',
                  description: 'Full time',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
            {
              id: 275,
              product_type_id: 5,
              alternative: false,
              label: 'Optional AD&D',
              contributory: true,
              prior_coverage: true,
              position: 40,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'Optional AD&D',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6648,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 275,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 509,
                  name: '1',
                  description: 'Full time, including Executives defined as Director, Managing Director, President, Vice President, CEO, CFO, CIO, and COO',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
            {
              id: 1193,
              product_type_id: 1,
              alternative: false,
              label: 'Short Term Disability',
              contributory: false,
              prior_coverage: true,
              position: 50,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'Short Term Disability',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6645,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 1193,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 2224,
                  name: '1',
                  description: 'Full time, including Executives defined as Director, Managing Director, President, Vice President, CEO, CFO, CIO, and COO',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
                {
                  id: 2223,
                  name: '2',
                  description: 'Full time employees that have worked at least 30 days as a temporary or part time employee',
                  position: 2,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
            {
              id: 1192,
              product_type_id: 9,
              alternative: false,
              label: 'NY DBL',
              contributory: true,
              prior_coverage: true,
              position: 70,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'NY DBL',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6644,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 1192,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 2222,
                  name: '1',
                  description: 'All eligible New York employees',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
            {
              id: 476,
              product_type_id: 7,
              alternative: false,
              label: 'Long Term Disability Long Label Long Long Label',
              contributory: false,
              prior_coverage: true,
              position: 110,
              sold_status: 'Not Sold',
              inforce_carrier_id: 1,
              sold_carrier_id: null,
              product_type_name: 'Long Term Disability',
              inforce_carrier_name: 'Sun Life',
              sold_carrier_name: null,
              inforce_product: {
                id: 6643,
                document_id: 1544,
                state: 'completed',
                carrier_id: 1,
                is_sold: false,
                document_type: 'Policy',
                project_product_id: 476,
                valid_plan_design: true,
                valid_rate_structure: true,
              },
              containers: [
                {
                  id: 891,
                  name: '1',
                  description: 'Full time, including Executives defined as Director, Managing Director, President, Vice President, CEO, CFO, CIO, and COO',
                  position: 1,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
                {
                  id: 890,
                  name: '2',
                  description: 'Full time employees that have worked at least 30 days as a temporary or part time employee',
                  position: 2,
                  container_type: 'Class',
                  container_type_id: 1,
                  container_type_name: 'Class',
                  annotations: [],
                },
              ],
            },
          ],
        },
      ],
      sections: [
        { id: 'section-text-fields', text: 'Text Fields' },
        { id: 'section-checkboxes', text: 'Checkboxes' },
        { id: 'section-checkboxes-labels', text: 'Checkboxes + Labels' },
        { id: 'section-switches', text: 'Switches' },
        { id: 'section-radio-buttons', text: 'Radio Buttons' },
        { id: 'section-large-dropdown', text: 'Large Dropdown' },
        { id: 'section-normal-dropdown', text: 'Normal Dropdown' },
        { id: 'section-input-with-options', text: 'Input with Options' },
        { id: 'section-form-items', text: 'Form items (labels)' },
        { id: 'section-text-area', text: 'Text area' },
        { id: 'section-custom-dropdowns', text: 'Custom Dropdowns' },
        { id: 'section-custom-fields', text: 'Custom Fields' },
        { id: 'section-password-fields', text: 'Password Fields' },
      ],
      textWithList: {
        value: '',
        options: [
          { id: 1, name: 'test option 1' },
          { id: 2, name: 'test option 2' },
        ],
      },
    }),

    mounted() {
      this.$refs.textAreaErrorForm.validate(() => {});
      this.$refs.errorSelectForm.validate(() => {});
    },

    methods: {
      /**
       * Alert Message
       *
       * @param {string} message
       */
      alert(message) {
        this.$message({ message });
      },
    },
  };
</script>
