<template>
  <div>
    <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="服装名称"
              v-model="name"></el-input>
    <el-button class="ml-5" type="primary" @click="Search(name)" style="height: 25px;">搜索</el-button>
    <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
  </div>
<!--  <div style="margin: 15px 0">-->
<!--    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"-->
<!--                   title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>-->
<!--      <template #reference>-->
<!--        <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">-->
<!--          <Remove />-->
<!--        </el-icon></el-button>-->
<!--      </template>-->
<!--    </el-popconfirm>-->
<!--  </div>-->
<!--  数据展示-->
  <el-table :data="orders" border style="width: 100%;margin: 15px 0" :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="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="服装名称" ></el-table-column>
        <el-table-column prop="clothesType" label="类型"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column prop="image" label="类别图片" width="200">
      <template #default="scope"><img :src="scope.row.image" alt="" style="height: 50px;"></template>
    </el-table-column>
    <el-table-column prop="image" label="效果图片" width="200">
      <template #default="scope"><img :src="scope.row.effectImg" alt="" style="height: 50px;"></template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="editShow(scope.$index, scope.row,0)">详情</el-button>
        <el-button type="success" @click="editShow(scope.$index, scope.row,1)">修改</el-button>
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                       title="是否确认删除" @confirm="Delete(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>
<!--  分页-->
  <div style="padding: 10px 0">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
                   :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
                   :total="total" />
  </div>
<!--  弹窗-->
  <el-dialog v-model="dialogVisible" title="" width="500">
    <el-form :model="order" label-width="auto" style="max-width: 600px" :disabled="disabled">
      <el-form-item label="服装图片">
        <div v-if="order.image">
          <img :src="order.image"  class="thumbnail" style="width: 100px; height: 100px;" />
        </div>
        <el-upload
            ref="uploadProductImg"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            multiple="true"
            :on-remove="handleRemove"
            :on-exceed="Exceed_ProductImg"
            limit="1" >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品图文">
        <div v-if="order.effectImg">
          <img :src="order.effectImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
        </div>
        <el-upload
            ref="uploadProductDetail"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            multiple="true"
            :on-remove="handleRemove"
            :on-exceed="Exceed_ProductDetail"
            limit="1" >
          <el-icon>
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="order.name"/>
      </el-form-item>
      <el-form-item label="类型">
        <el-input v-model="order.clothesType"/>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="order.price"/>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="order.intro"/>
      </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="addType">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import myAxios from "@/api/myAxios";
import {ElMessage, genFileId, type UploadProps, type UploadRawFile} from "element-plus";

onMounted(()=>{
  getList()
})
const  orders = ref([{}])
const total = ref(0)
const getList = async ()=>{
  const res = await myAxios.post('/clothesInfo/list/page',{...searchParams.value})
  console.log(res)
  if (res.data.code === 1) {
    orders.value = res.data.data.records;
    total.value = parseInt(res.data.data.total)
  }else {
    ElMessage({
      message:'获取数据失败',
    })
    return
  }
}
const name = ref('')//跟据名搜索
const dialogVisible = ref(false)
const order=ref({
  id:0,
  name:'',
  price:'',
  effectImg:'',
  image:'',
  intro:'',
  clothesType:''
})
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
const cancel = () => {
  dialogVisible.value = false
}

const title = ref('')
const disabled = ref(true)
const editShow = (index: number, row: any,flag:number) => {
 flag ? (title.value= "修改服装",disabled.value = false): (title.value= "服装详情·",disabled.value = true)
  dialogVisible.value = true
  order.value = row
}
//删除
const Delete=async (index : number)=>{
  const res = await myAxios.post('/clothesInfo/delete',{ id : index                                                                                    })
  console.log(res)
  if (res.data.code === 1) {
    ElMessage({
      type: 'success',
      message:'删除成功'
    })
  }else {
    ElMessage({
      message:'删除失败'
    })
  }
  getList()
}
const searchParams: any = ref({ //封装分页
  current: 1, //当前页码
  pageSize: 5, //每页显示条数
  sortField: "id",  //根据ID分类
  sortOrder: "descend" //降序
})
const handleSizeChange = (newSize: any) => {
  searchParams.value.pageSize = newSize
  getList()
}
const handleCurrentChange = (Current: any) => {
  searchParams.value.current = Current
  getList()
}

//搜索
const Search = (data:String)=>{
  searchParams.value.name = data
   searchParams.value.current = 1
  getList()
}
// const reload : any = inject("reload")
const reset =()=>{
  name.value=''
}
const handleSelectionChange  = (val:any)=>{
  console.log(val)
}
const fileSimple = ref()
const handleChange = async (file: any) => {
  fileSimple.value = file
  let formData = new FormData()
  formData.append("file", fileSimple.value.raw)
  const res = await myAxios({
    url: '/file/upload/server/not_login',
    method: 'post',
    headers: {
      'content-Type': 'multipart/form-data'
    },
    data: {
      biz: "test",
      file: formData.get("file")
    }
  })
  if ( res.data.code === 1) {
    order.value.image = res.data.data
  }
}
//批量删除
const idList = ref([])
const delBatch = async ()=>{
  console.log(idList.value);
  const res = await myAxios.post('/clothesInfo/delete',{
    id: idList.value
  })
  if(res.data.code === 1) {
    ElMessage({
      type: 'success',
      message: '批量删除成功'
    })
    getList()
  } else {
    ElMessage.error('删除失败')
  }
}
const editForm : any = ref({})
//提交
const addType =async ()=>{
  dialogVisible.value = false
 const res = await myAxios('/clothesInfo/update',{...editForm.value})
  if(res.data.code === 1) {
    ElMessage({
      type: 'success',
      message:'更新成功'
    })
  }else{
    ElMessage.error(res.data.message)
  }
}
const uploadProductImg : any = ref()
const uploadProductDetail : any = ref()
const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
  uploadProductDetail.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadProductDetail.value!.handleStart(file)
}
const Exceed_ProductImg: UploadProps['onExceed'] = (files , flag) => { //覆盖商品照片
  uploadProductImg.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadProductImg.value!.handleStart(file)
}
</script>

<style scoped>

</style>