<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @onValueChange="onValueChange" @submit="onSubmit" />
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="false"
      :table-options="tableOptions"
      :edit-form="editForm"
      :edit-config="editConfig"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 310px)' }"
    />
    <!-- 自定义弹窗 -->
    <Dialog ref="dialog">
      <template slot="content">
        <TableEditor
          ref="tableEditor"
          v-model="tableEditorDrawerVisible"
          :edit-form="editForm"
          :edit-data="selectRow"
          :config="editConfig"
          :apis="apiParams"
          :opt-type="optType"
          @onValueChange="editValueChange"
          @callback="handleTableEditorCallback"
        />
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog/index.vue'

const TableEditor = () => import('@/components/Table/tableEditor')

export default {
  components: {
    Dialog,
    TableEditor
  },
  data() {
    return {
      loading: false,
      visibleBasicDrawer: false,
      renderContent: '',
      paneTabs: [
        {
          title: 'Tab 1',
          name: 1
        },
        {
          title: 'Tab 2',
          name: 2
        }
      ],
      searchForm: [
        {
          text: '按钮',
          type: 'button',
          method: () => {
            console.log('按钮')
          }
        },
        {
          text: '自定义弹窗',
          type: 'button',
          method: () => {
            this.$refs.dialog.open()
          }
        },
        {
          label: '模板模板',
          type: 'input',
          prop: 'xxxx',
          clearable: false
        },
        {
          label: '模板模板',
          type: 'input',
          prop: 'xxxx',
          clearable: false
        },
        {
          label: '勿删',
          type: 'select',
          prop: 'xxxx',
          clearable: false,
          options: [
            {
              value: 0,
              label: '否'
            },
            {
              value: 1,
              label: '是'
            }
          ]
        }
      ],
      columns: [
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        },
        {
          label: 'xxxx',
          prop: 'xxxx'
        }
      ],
      rowsActions: [
        // {
        //   key: 'personal',
        //   label: '申请',
        //   method: row => {
        //     this.handleClickDrawer(row)
        //   }
        // }
        {
          key: 'edit',
          label: '编辑'
        },
        {
          key: 'delete',
          label: '删除'
        }
      ],
      apis: {
        list: {
          url: 'user/user',
          dataParam: 'data.list',
          resultParam: 'data',
          init: false
        },
        add: {
          url: '',
          cover: true,
          coverMethod: (row, node) => {
            return row.year + '、' + node[0].label
          }
        },
        edit: {
          url: '',
          cover: true,
          coverMethod: (row, node) => {
            return row.year + '、' + node[0].label
          }
        },
        preview: {
          url: '',
          dataParam: 'datas',
          keyParam: 'cache_key'
        },
        import: {
          url: '',
          params: 'cache_key'
        },
        batchDelete: {
          url: '',
          params: 'ids'
        },
        delete: {
          url: '',
          params: 'ids'
        }
      },
      tableOptions: {
        add: {
          show: false,
          initData: () => {
            return { test: 'test' }
          }
        },
        import: {
          show: false,
          tip: '注：备注',
          columns: [
            {
              label: '严控',
              prop: 0,
              required: true
            }
          ]
        },
        export: {
          show: false,
          dataName: 'xxx.xlsx',
          baseApi: process.env.VUE_APP_BASE_IMG + '/',
          theadMap: [
            {
              xxxx: {}
            }
          ],
          theadProps: {
            xxxx: {}
          }
        },
        download: {
          show: false,
          url: '/static/template.xlsx'
        },
        batchDelete: {
          show: false
        }
      },
      editForm: [
        {
          body: [
            {
              label: '年度',
              type: 'year',
              prop: 'year',
              clearable: false,
              rules: [
                {
                  required: true,
                  message: '请选择年度',
                  trigger: 'change'
                }
              ]
            }
          ]
        }
      ],
      editConfig: {
        addTip: '注：备注',
        editTip: '注：备注'
      },
      countData: {},
      showForm: false,
      formFields: [
        {
          prop: 'name',
          label: '商品名称',
          type: 'input',
          rules: [{ required: true, message: '请输入商品名称' }]
        },
        {
          prop: 'category',
          label: '商品分类',
          type: 'select',
          options: [
            { value: 1, label: '电子产品' },
            { value: 2, label: '服装服饰' }
          ]
        },
        {
          prop: 'price',
          label: '商品价格',
          type: 'input',
          rules: [
            { required: true, message: '请输入价格' },
            { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效金额' }
          ]
        },
        {
          prop: 'releaseDate',
          label: '发布日期',
          type: 'date'
        },
        {
          prop: 'images',
          label: '商品图片',
          type: 'upload',
          action: '/api/upload',
          multiple: true
        }
      ]
    }
  },
  created() {
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
      // 调用API提交数据
    },
    handleClickDrawer(row) {

    },
    onValueChange(val) {

    },
    onSubmit(params) {
      this.$refs.table.getList(params)
    }
  }
}
</script>
