<template>
  <div class="app-container">
    <Custom-table
      :tableConfigData="tableConfigData"
      @handle-show="handleShow"
    >
      <template v-slot:drawer>
        <el-form-item
          v-for="(item, index) in editData"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
          <custom-form-item
            v-model:modValue="tableConfigData.drawerformData[item.prop]"
            :type="item.type"
            :inputType="item.inputValue"
            :options="tableData"
            :selectProp="item.selectProp"
          >
          </custom-form-item>
        </el-form-item>
      </template>
    </Custom-table>
  </div>
</template>

<script lang="ts">
import { projectTypeData } from './tableConfigData/projectType'
import { Scope } from '@/table/type'
import { ref, Ref, reactive } from 'vue'
export default {
  name: 'ProjectType',
  setup() {
    const tableConfigData = reactive(projectTypeData)
    const tableData: Ref<any[]> = ref([])
    const editData: Ref<any[]> = ref([])
    tableConfigData.tableTitle.forEach(item => {
      if (item.type) {
        editData.value.push(item)
      }
    })
    const handleShow = ref((params: { key: string, tableData: object[], scope?: Scope }) => {
      tableData.value = params.tableData
      const key = params.key
      switch (key) {
        case '新增':
          tableConfigData.drawerformData = {
            id: '',
            cname: '',
            ename: '',
            code: '',
            bizunits: '',
            effect_time: '',
            lose_effect_time: '',
            detail: ''
          }
          break
        case '编辑': {
          if (!params.scope) return false
          const row = params.scope.row
          tableConfigData.drawerformData = {
            id: row.id,
            cname: row.cname,
            ename: row.ename,
            code: row.code,
            bizunits: row.bizunit,
            effect_time: row.effect_time,
            lose_effect_time: row.lose_effect_time,
            detail: row.detail
          }
          break
        }
      }
    })
    return {
      tableConfigData,
      handleShow,
      tableData,
      editData
    }
  }
}
</script>

<style>

</style>
