<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { generateRandom } from '@/utils/common'
import Drawer from '@/components/Drawer/index.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { useTablePublic } from '@/hooks/useTablePublic'
import type { FormInstance, FormRules } from 'element-plus'
import { validate_float } from '@/views/salary/salary/relus'
import { ColumnProps } from '@/components/TableBase/interface/index'

const isNew = ref(true)
const tableData = ref<any[]>([])
const ruleFormRef = ref<FormInstance>()
const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
const { resetForm } = useTablePublic()
const form = ref({
  id: '',
  T_date: '',
  T_money: ''
})
const rules = reactive<FormRules>({
  T_date: [{ required: true, message: '请输入物联网卡号', trigger: 'blur' }],
  T_money: [{ required: true, validator: validate_float(), trigger: 'blur' }]
})

const callbackDrawer = (done: () => void) => {
  done()
  resetForm(ruleFormRef.value)
}
const AddMoneyDetailed = (type: string, row?: any) => {
  isNew.value = type === 'edit' ? false : true
  if (type === 'edit') {
    form.value = { ...row }
  }
  drawerRef.value?.openDrawer()
}
const AddMoney = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      if (isNew.value) {
        tableData.value.push({ ...form.value, id: generateRandom() })
      } else {
        const index = tableData.value.findIndex(item => item.id === form.value.id)
        tableData.value[index] = { ...form.value }
      }
      nextTick(() => {
        isNew.value = true
        resetForm(ruleFormRef.value)
        drawerRef.value?.closeDrawer()
      })
    }
  })
}
const deleteMoneyDeatil = (row: any) => {
  tableData.value = tableData.value.filter((item: any) => item.id !== row.id)
}

const props = defineProps<{ columns: ColumnProps[]; title: string; labels: any }>()
const title = ref(props.title)

const getMoneyDeatil = () => tableData.value
const setMoneyDeatil = (dataArr: any[]) => {
  tableData.value = dataArr.map((item: any) => {
    item.id = generateRandom()
    return item
  })
}
const clearDetail = () => (tableData.value = [])
defineExpose({
  clearDetail,
  getMoneyDeatil,
  setMoneyDeatil
})
</script>
<template>
  <div class="table-detail">
    <el-table border stripe :data="tableData" style="width: 100%" :header-cell-style="{ height: '50px' }">
      <template v-for="item in columns" :key="item.prop">
        <el-table-column show-overflow-tooltip v-bind="item" v-if="item.fixed !== 'right'"></el-table-column>
        <el-table-column v-bind="item" v-if="item.fixed === 'right'">
          <template #default="{ row }">
            <el-button link type="primary" size="small" :icon="Edit" @click="AddMoneyDetailed('edit', row)"
              >编辑</el-button
            >
            <el-button link type="danger" size="small" :icon="Delete" @click="deleteMoneyDeatil(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <template #append>
        <slot name="add" :AddDetail="AddMoneyDetailed"></slot>
      </template>
    </el-table>
    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
      <template #header="{ params }">
        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - {{ title }}</h4>
      </template>
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item :label="labels['date']" label-width="100px" prop="T_date">
          <el-date-picker
            v-model="form.T_date"
            class="my-date-picker"
            style="width: 100%"
            type="date"
            :placeholder="labels['date']"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label="labels['money']" label-width="100px" prop="T_money">
          <el-input v-model="form.T_money" type="text" autocomplete="off" :placeholder="labels['money']" />
        </el-form-item>
        <el-form-item label-width="100px">
          <div class="btn">
            <el-button v-if="isNew" color="#626aef" @click="AddMoney(ruleFormRef)">添加</el-button>
            <el-button v-else color="#626aef" @click="AddMoney(ruleFormRef)">修改</el-button>
          </div>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<style scoped lang="scss">
.table-detail {
  width: 100%;
}
.el-form-item {
  margin-bottom: 18px;
}
.btn {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  .el-button {
    padding: 0 32px;
  }
}
</style>
