<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="type" label="类别" ></el-table-column>
    <el-table-column prop="clothesType" label="类型"></el-table-column>
    <el-table-column prop="specificDate" label="日期"></el-table-column>
    <el-table-column prop="timeSlot" label="时间"></el-table-column>
    <el-table-column prop="createTime" label="下单时间"></el-table-column>
    <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
    <el-table-column label="购买客户" width="50">
            <el-table-column label="姓名" prop="contactsSnapshot.name" />
            <el-table-column label="联系方式" prop="contactsSnapshot.phone" />
    </el-table-column>
    <el-table-column label="操作" width="200">
      <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>
<!--  弹窗-->
  <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="订单编号" >
        <el-input v-model="order.id" disabled/>
      </el-form-item>
      <el-form-item label="类型">
        <el-input v-model="order.clothesType" disabled/>
      </el-form-item>
      <el-form-item label="定金">
        <el-input v-model="order.deposit" disabled/>
      </el-form-item>
      <el-form-item label="拍摄日期">
        <el-input v-model="order.specificDate" disabled/>
      </el-form-item>
      <el-form-item label="拍摄时间段">
        <el-input v-model="order.timeSlot" disabled/>
      </el-form-item>
      <el-form-item label="室内拍摄">
        <el-input v-model="order.isIndoors" disabled/>
      </el-form-item>
      <el-form-item label="妆造">
        <el-input v-model="order.isMakeup" disabled/>
      </el-form-item>
      <el-form-item label="摄影">
        <el-input v-model="order.isPhotography" disabled/>
      </el-form-item>
      <el-form-item label="用户id">
        <el-input v-model="order.userId" disabled/>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input v-model="order.orderStatus"/>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="order.createTime" disabled/>
      </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";
const orders = ref([{}])
const name = ref('')
const searchParams: any = ref({ //封装分页
  current: 1, //当前页码
  pageSize: 5, //每页显示条数
  sortField: "id",  //根据ID分类
  sortOrder: "descend" //降序
})
onMounted(()=>{
  getList()
})
//获取订单
const total = ref(0)
const getList = async () => {
const res = await myAxios.post('/advanceOrder/list',{...searchParams.value})

  if (res.data.code === 1) {
    orders.value = res.data.data.records
    total.value = res.data.data.total
  }else {
    ElMessage({
      message:res.data.message
    })
    return
  }
}
const handleSelectionChange  = (val:any)=>{
  console.log(val)
}
//弹窗
const dialogVisible = ref(false)
const disabled = ref(true)
const order = ref({
  id:0,
  type:'',
  clothesType:'',
  deposit:'',
  specificDate:'',
  timeSlot:'',
  isIndoors:0,
  isMakeup:0,
  isPhotography:0,
  userId:0,
  orderStatus:'',
  createTime:''
})
const title = ref('')
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 cancel = () => {
  dialogVisible.value = false
}
const editForm : any = ref({})
const addType =async () => {
  dialogVisible.value = false
  const res = await myAxios.post('/advanceOrder/update',{
    id:order.value.id,
    orderStatus:order.value.orderStatus
  })
  if(res.data.code === 1 ) {
    ElMessage({
      type: 'success',
      message:'更新成功'
    })
  }else{
    ElMessage.error(res.data.message)
  }
}
//搜索
const Search = (data:any)=>{
  searchParams.value.orderStatus = data
  // searchParams.value.id = data
  // searchParams.value.type = data
  searchParams.value.current = 1
  getList()
}
const reset = ()=>{
  name.value = ''
}
</script>

<style scoped>

</style>