<template>
  <div style="margin-bottom: 10px;">
    <el-button type="success" @click="showForm">添加类别</el-button>
  </div>
  <el-dialog v-model="dialogVisible" title="服装类别" width="500">
    <el-form :model="typeForm" label-width="auto" style="max-width: 600px" v-loading="loading">
      <el-form-item label="类别名" size="large">
        <el-input v-model="typeForm.name" />
      </el-form-item>
    </el-form>
    <template #footer #default="{ row, $index }">
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addOrUpdateType" >
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 数据展示层 -->
  <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
            @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="类别编号"></el-table-column>
    <el-table-column prop="name" label="类别名称"></el-table-column>
    <el-table-column prop="operation" label="操作">
      <template #default="scope">
        <el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                       title="是否确认删除" @confirm="Delete_type(scope.row.id)" width=180>
          <template #reference>
            <el-button style="height: 25px" class="ml-5" type="danger">删除类别</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
import { onMounted, ref } from 'vue'
import myAxios from '@/api/myAxios';
const selectedItems = ref([])
const dialogVisible = ref(false)
const loading = ref(false)  //加载

//表单数据
const typeForm = ref({
  id: 0,
  name: ''
})
//表格数据
const tableData = ref([])
const flag = ref(0)
onMounted(() => {
  getTypeList()
})
//获取服装类别列表
const getTypeList = async () => {
  const res = await myAxios.post('/clothesCategory/list/web')
  // console.log(res.data.data)
  if (res.data.code === 1) {
    tableData.value = res.data.data
  } else {
    ElMessage.error('获取类别列表失败，请检查服务')
  }
}
//新增类别
const showForm = async () => {
  resetForm()
  dialogVisible.value = true;
  flag.value = 0
}
//取消
const cancel = () => {
  dialogVisible.value = false
  resetForm()
}
//新增类别
const addOrUpdateType = async () => {
  if (typeForm.value.name?.indexOf(' ') !== -1 ||
      typeForm.value.name == '' ) {
    ElMessage({
      type: 'warning',
      message: '不能为空格/空字符串'
    })
    return
  }
  //取消展示表单
  dialogVisible.value = false;
  if (flag.value === 0) {
    const res = await myAxios.post('/clothesCategory/add', {
      name: typeForm.value.name
    })
    if (res.data.code === 1) {
      //提交成功后，之间重置表格
      resetForm()
      SuccessInfo('添加成功')
    } else {
      ElMessage.error('提交失败')
    }
  }
  if( flag.value === 1 ) {
    const res = await myAxios.post('/clothesCategory/update',{
      id : typeForm.value.id,
      name: typeForm.value.name
    })
    if (res.data.code === 1) {
      //提交成功后，之间重置表格
      ElMessage({
        type: 'success',
        message: '更新成功'
      })
    } else {
      ElMessage.error('更新失败')
    }
  }
  getTypeList()
}
//重置表单
const resetForm = () => {
  typeForm.value = {
    id: 0,
    name: ''
  }
};
const handleSelectionChange = (row: any) => {
  selectedItems.value = JSON.parse(JSON.stringify(row))
}
//编辑
const editShowForm = (index: number, row: any) => {
  dialogVisible.value = true
  typeForm.value = JSON.parse(JSON.stringify(row))
  flag.value = 1
  // console.log('本行--->',row)
}
//删除类别  请求体里只传id即可
const Delete_type = async (index: number) => {
  const res = await myAxios.post('/clothesCategory/delete', { id: index })
  // console.log(res)
  if (res.data.code === 1) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  }
  await getTypeList()
}
</script>

<style scoped></style>