/**
  // author：zhangb
  // time:2022-12-01
  // desc:订单管理
*/
<template>
  <div class="orderManageIndex">
    <!-- 筛选 -->
    <Row :gutter="8">
      <Col span="5">
        <Input placeholder="请输入订单编号" v-model="filtInfoData.orderNum" style="width: 100%" clearable>
          <template #suffix>
            <Icon type="ios-search" />
          </template>
        </Input>
      </Col>
      <Col span="4">
        <Input placeholder="请输入商品名称" v-model="filtInfoData.itemName" style="width: 100%" clearable></Input>
      </Col>
      <Col span="4">
        <Select v-model="filtInfoData.status" placeholder="全部订单" style="width: 100%" @on-change="getAllOrderList">
          <Option v-for="item in orderStatusList" :value="item.val" :key="item.val">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="5">
        <DatePicker type="datetimerange" format="yyyy-MM-dd" placeholder="请选择订单时间范围" style="width:100%" @on-change="changeOrderTimeRage" />
      </Col>
      <Col span="3">
        <Button type="primary" @click="getAllOrderList">确定搜索</Button>
      </Col>
    </Row>
    <!-- 表格部分 -->
    <el-table :data="orderDataList" border style="width: 100%; margin-top:20px;">
      <el-table-column type="index" label="序号" width="55" align="center" fixed="left" />
      <el-table-column prop="orderNum" label="订单编号" min-width="220" fixed="left" />
      <el-table-column label="订单状态" width="100" align="center" >
        <template #default="scope">
          {{orderStatus(scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="itemName" label="商品名称" min-width="130" />
      <el-table-column prop="pastureName" label="商品单价" width="120" align="center">
        <template #default="scope">
          <Numeral :value="scope.row.price || 0" format="0,0.00">
            <template #prefix>
                <strong>¥</strong>
            </template>
            <template #suffix>
                <span>/头</span>
            </template>
          </Numeral>
        </template>
      </el-table-column>
      <el-table-column label="商品订金" width="120" align="center">
        <template #default="scope">
          <Numeral :value="scope.row.firstMoney || 0" format="0,0.00">
            <template #prefix>
                <strong>¥</strong>
            </template>
            <template #suffix>
                <span>/头</span>
            </template>
          </Numeral>
        </template>
      </el-table-column>
      <el-table-column prop="payStatus" label="下单数量(头)" width="110" align="center" >
        <template #default="scope">
          {{scope.row.count}} 
        </template>
      </el-table-column>
      <!-- <el-table-column prop="payStatus" label="支付状态" width="100" align="center" >
        <template #default="scope">
          <el-tag :type="scope.row.payStatus == 1?'success':'warning'">{{ payOrderState(scope.row.payStatus) }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="sum" label="订单总额" width="120" align="center">
        <template #default="scope">
          <Numeral :value="scope.row.totalMoney" format="0,0.00">
            <template #prefix>
                <strong>¥</strong>
            </template>
          </Numeral>
        </template>
      </el-table-column>
      <el-table-column prop="price2" label="订金总额" width="150" align="center" >
        <template #default="scope">
          <Numeral :value="scope.row.firstMoney * scope.row.count" format="0,0.00">
            <template #prefix>
                <strong>¥</strong>
            </template>
          </Numeral>
          <span v-if="scope.row.payStatus == 3" style="background-color:#19be6b;color:#fff; font-size:12px;padding:3px 5px;border-radius:2px;margin-left:5px;margin-top:-2px;">已付</span>
          <span v-if="scope.row.payStatus == 2" style="background-color:#ff9900;color:#fff; font-size:12px;padding:3px 5px;border-radius:2px;margin-left:5px;margin-top:-2px;">待付</span>
          <span v-if="scope.row.payStatus == 5" style="background-color:#ed4014;color:#fff; font-size:12px;padding:3px 5px;border-radius:2px;margin-left:5px;margin-top:-2px;">已退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="price3" label="待付尾款" width="100" align="center" >
        <template #default="scope">
          {{ scope.row.waitPayLast || '—' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="220"  fixed="right">
        <template  #default="scope">
          <el-button  size="small" @click="$router.push('orderDetail?id=' + scope.row.orderNum)">订单详情</el-button>&nbsp;
          <el-button  size="small" type="primary" v-if="scope.row.status == '2' && scope.row.contactCell" @click="lookCow(scope.row,'预约记录')">查看预约</el-button>
          <!-- <el-button  size="small" type="success" v-if="scope.row.status == '3'">联系买家</el-button> -->
          <el-button  size="small" type="warning" v-if="scope.row.status == '7'" @click="$router.push('orderDetail?id=' + scope.row.orderNum)">申请售后</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page_style">
      <Page :total="orderTotalNum" :model-value="currentPage" :page-size="filtInfoData.limit" show-elevator show-total @on-change="changePage" />
    </div>
    <!-- 查看预约 -->
    <Modal v-model="lookModal" width="25%">
      <template #header>
        <p style="text-align:center">
            <span>{{ modalTitle}}</span>
        </p>
      </template>
      <div v-if="modalTitle == '预约记录'" style="padding:1rem 5rem;">
        <p style="margin-bottom:0.5rem">联系人： {{cattleMsg.contactName || '无'}}</p>
        <p>联系电话： {{cattleMsg.contactCell || '无'}}</p>
      </div>
      <template #footer >
        <div style="text-align:center;">
          <Button @click="lookModal=false">关闭页面</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref ,reactive} from 'vue'
import {cow} from '@/request/api'
import {orderStatus,payOrderState} from '@/utils/system/filters'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components:{
    
  },
  setup() {
    let filtInfoData = ref({
      limit:20,
      offset:0,
      orderNum:'',
      status:'',
      startDate:'',
      endDate:'',
      itemName:'',
    })

    let orderStatusList = ref([
      {label:'全部订单',val:''},
      {label:'待支付',val:'1'},
      {label:'待看牛',val:'2'},
      {label:'待付尾款',val:'3'},
      {label:'待交割',val:'4'},
      {label:'已取消',val:'5'},
      {label:'已完成',val:'6'},
      {label:'申请售后',val:'7'},
      {label:'已退款',val:'8'},
    ])

    const lookModal = ref(false)
    let modalTitle = ref('预约记录')
    let cattleMsg = ref({})  

    // 改变订单的时间范围
    function changeOrderTimeRage(val){
      console.log('选择的时间',val);
      filtInfoData.value.startDate = val[0]
      filtInfoData.value.endDate = val[1]
      getAllOrderList()
    }

    let orderDataList = ref([])
    let orderTotalNum = ref(0)
    // 获取全部订单
    async function getAllOrderList(){
      await cow.getCattleOrderPage(filtInfoData.value).then(res=>{
        if(res.code === 101){
          orderDataList.value = res.data
          orderTotalNum.value = res.total
        }
      })
    }
  
    let currentPage = ref(1)
    //更改页码
    function changePage (page) {
      filtInfoData.value.offset = (page -1) *  filtInfoData.value.limit  //更新偏移量
      currentPage.val = page  //切换当前页码
      getAllOrderList()
    }

    // 查看预约
    function lookCow(row,title){
      modalTitle.value = title
      lookModal.value = true
      cattleMsg.value = row
    }

    onMounted(()=>{
      getAllOrderList() //获取全部订单
    })

    return {
      orderDataList,orderTotalNum,orderStatus,payOrderState,
      filtInfoData,orderStatusList,currentPage,lookModal,modalTitle,cattleMsg,
      changePage,changeOrderTimeRage,lookCow,getAllOrderList,
    }
  },
})
</script>

<style lang="scss" scoped>
.orderManageIndex{
  padding: 1em;
  .page_style{
    text-align: right; margin-top: 1em;
    background-color: var(--system-container-background);
  }
}
</style>