<template>
  <div style="height: 100%">
    <w-grid
      ref="gridRef"
      :title="$t('erm.capitalPlan.strategicTarget.grid.title')"
      :config-button="true"
      selection="multiple"
      :checkbox-selection="true"
      dense-body
      :data-url="Environment.apiContextPath('/api/erm/capitalpan/strategicTarget')"
      :pageable="false"
      :sort-by="['order']"
      :query-form-cols-num="3"
      :query-form-fields="[]"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="['query', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']"
      :columns="[
        { width: 60, name: 'order', label: $t('order') },
        { width: 100, name: 'category', label: $t('category') },
        { width: 150, name: 'code', label: $t('code') },
        { width: '100%', name: 'name', label: $t('name') },
        { width: 130, name: 't', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t'), align: 'right', format: Formater.thousands() },
        { width: 130, name: 't1', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t1'), align: 'right', format: Formater.thousands() },
        { width: 130, name: 't2', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t2'), align: 'right', format: Formater.thousands() },
        { width: 130, name: 't3', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t3'), align: 'right', format: Formater.thousands() },
        { width: 100, name: 'lastModifier', label: $t('lastModifier') },
        { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
      ]"
      :editor="{
        dialog: {
          width: '600px',
        },
        form: {
          colsNum: 1,
          fields: [
            { name: 'order', label: $t('order'), type: 'number' },
            { name: 'category', label: $t('category'), type: 'text' },
            { name: 'code', label: $t('code'), type: 'text', required: true },
            { name: 'name', label: $t('name'), type: 'text', required: true },
            { name: 't', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t'), type: 'number', precision: 3 },
            { name: 't1', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t1'), type: 'number', precision: 3 },
            { name: 't2', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t2'), type: 'number', precision: 3 },
            { name: 't3', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t3'), type: 'number', precision: 3 },
          ],
        },
      }"
      :viewer="{
        panel: {
          columnNum: 1,
          fields: [
            { name: 'id', label: $t('id') },
            { name: 'code', label: $t('code') },
            { name: 'name', label: $t('name') },
            { name: 'category', label: $t('category') },
            { name: 't', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t'), format: Formater.thousands() },
            { name: 't1', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t1'), format: Formater.thousands() },
            { name: 't2', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t2'), format: Formater.thousands() },
            { name: 't3', label: $t('erm.capitalPlan.strategicTarget.grid.entity.t3'), format: Formater.thousands() },
            { name: 'dataComeFrom', label: $t('dataComeFrom') },
            { name: 'creator', label: $t('creator') },
            { name: 'createDate', label: $t('createDate') },
            { name: 'lastModifier', label: $t('lastModifier') },
            { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
            { name: 'corporationCode', label: $t('corporationCode') },
          ],
        },
      }"
      @row-click="(evt, row, index) => {}"
      @before-request-data="() => {}"
    >
    </w-grid>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Environment, Formater } from 'platform-core';

const gridRef = ref();
</script>
