<!--
 * @author: wyf
 * @Date: 2022-05-27
 * @LastEditors: wyf
 * @Description: 表格模板页面
-->
<template>
  <div class="table-preview-content flexDiv flexColumn">
    <div class="form-content">
      <z-form ref="ruleForm" :model="formModel" autocomplete="off">
        <z-row wrap>
          <template v-for="item in formList">
            <z-col v-if="item.tableProperty.isShowSea === '1'" :key="item.basicProperty.currentKey" :span="getColWidth(item.tableProperty.spanWidth)">
              <component :is="formRender(item)" :form-model="formModel" :basic-property="item.basicProperty" :form-property="item.formProperty" />
            </z-col>
          </template>
        </z-row>
        <z-form-item style="margin-bottom: 0;text-align: right;">
          <z-button size="mini" type="primary">查询</z-button>
          <z-button size="mini" style="margin-left: 16px;">重置</z-button>
        </z-form-item>
      </z-form>
    </div>
    <div class="table-content">
      <z-table
        :data-source="dataSource"
        :columns="columns"
      />
      <z-pagination
        v-model:current="pageOpt.page"
        class="pagination"
        show-quick-jumper
        :total="pageOpt.total"
        show-less-items
      />
    </div>
  </div>
</template>
<script>
import { defineComponent, computed, reactive } from 'vue'
import { useStore } from 'vuex'

import InputItem from '@/components/customForm/input/index'
import SelectItem from '@/components/customForm/select/index'

import DateForm from '@/components/customForm/date/form'
import TimeForm from '@/components/customForm/time/form'
import DateTimeForm from '@/components/customForm/dateTime/form'

import tableOpt from '@/mixins/table'

export default defineComponent({
  name: 'TablePreview',
  components: {
    InputItem,
    SelectItem,
    DateForm,
    TimeForm,
    DateTimeForm
  },
  mixins: [tableOpt],
  setup() {
    const store = useStore()

    const dataSource = []

    const formList = computed(() => store.getters.formData)
    console.log(formList, 'formListformList')

    const getForm = () => {
      const model = {}
      formList.value.forEach(list => {
        Object.assign(model, {
          [list.basicProperty.field]: list.formProperty.value || ''
        })
      })
      return model
    }

    const formModel = reactive(getForm())

    const getColumns = () => {
      let col = []
      formList.value.forEach(list => {
        if (list.tableProperty.isShowHead === '1') {
          col.push({
            title: list.tableProperty.headText || list.basicProperty.name,
            dataIndex: list.basicProperty.field,
            ellipsis: true,
            index: Number(list.tableProperty.head)
          })
        }
      })
      return col
    }

    const columns = reactive(getColumns().sort((a, b) => a.index - b.index))

    const getColWidth = (span) => {
      let spanWidth = ''
      switch (span) {
        case '1':
          spanWidth = '6'
          break
        case '2':
          spanWidth = '8'
          break
        case '3':
          spanWidth = '12'
          break
        case '4':
          spanWidth = '24'
          break
        default:
          spanWidth = '24'
          break
      }
      return spanWidth
    }

    const formRender = (element) => {
      let componentId = 'InputItem'
      switch (element.basicProperty.type) {
        case 'input':
          componentId = 'InputItem'
          break
        case 'select':
          componentId = 'SelectItem'
          break
        case 'date':
          componentId = 'dateItem'
          break
        case 'time':
          componentId = 'timeItem'
          break
        case 'datetime':
          componentId = 'DateTimeItem'
          break
      }
      return componentId
    }

    return {
      formList,
      dataSource,
      columns,
      formModel,
      getColWidth,
      formRender
    }
  }
})
</script>
<style lang="scss" scoped>
.table-preview-content {
  padding: 16px;
  border-radius: 4px;
  height: 100%;
  overflow: auto;
  .form-content{
    width: 100%;
    border-radius: 4px;
    padding: 16px;
    background-color: #fff;
    margin-bottom: 16px;
  }
  .table-content{
    flex: 1;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;
    .pagination{
      position: absolute;
      bottom: 16px;
      right: 16px;
    }
  }
}
</style>
