<template>
  <div class="orderManagerDiv">
    <div class="orderManagerSearchDiv">
      <el-input v-model="searchContent" placeholder="请输入要搜索的内容（批量搜索用,隔开）" class="searchInput">
        <template #prepend>
          <el-select v-model="searchType" placeholder="Select" style="width: 115px">
            <el-option label="旺旺号" value="WANG_ID" />
            <el-option label="微信号" value="WECHAT_ID" />
            <el-option label="支付宝账号" value="ALIPAY_ID" />
            <el-option label="手机号" value="PHONE_NUMBER" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="search" />
        </template>
      </el-input>
    </div>
    <div class="orderManagerTableDiv">
      <el-table :data="tableShowData" style="width: 100%" table-layout="auto">
        <el-table-column fixed prop="id" label="ID" width="50px" />
        <el-table-column prop="orderNo" label="订单号" width="200px" />
        <el-table-column prop="orderTime" label="订单创建时间" width="300px" />
        <el-table-column prop="orderStatus" label="订单状态" width="150px" />
        <el-table-column prop="wangNo" label="旺旺号" width="300px" />
        <el-table-column prop="wechatNo" label="微信号" width="300px" />
        <el-table-column prop="alipayNo" label="支付宝账号" width="300px" />
        <el-table-column prop="payAmt" label="付款金额" width="100px" />
        <el-table-column prop="storeName" label="店铺" width="200px" />
        <el-table-column prop="commission" label="佣金" width="100px" />
        <el-table-column prop="alipayName" label="支付宝用户名" width="300px" />
        <el-table-column prop="rpName" label="负责人名称" width="300px" />
        <el-table-column prop="rpWechatName" label="负责人微信名称" width="300px" />
        <el-table-column prop="remark" label="备注" width="600px" />
        <el-table-column prop="phoneNumber" label="收件人手机号" width="300px" />
        <el-table-column prop="cardNo" label="银行卡号" width="600px" />
        <el-table-column prop="flag" label="插旗" width="50px">
          <template #default="scope">
            <el-icon v-if="scope.row.flag"><Flag :style="{ color: getColor(scope.row) }" /></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="flagRemark" label="插旗备注" width="600px" />
        <el-table-column prop="payTime" label="支付时间" width="300px" />
        <el-table-column prop="address" label="地址" width="1000px" />
        <el-table-column prop="shopId" label="商品ID" width="200px" />
        <el-table-column prop="sku" label="SKU" width="300px" />
        <el-table-column fixed="right" label="操作" width="210px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleExchangeButtonClick(scope.row)">修改</el-button>
            <el-button link type="primary" size="small" @click="handleChangeStatusButtonClick(scope.row)"
              >修改状态</el-button
            >
            <el-button link type="primary" size="small" @click="handleFlagButtonClick(scope.row)">插旗</el-button>
            <el-button link type="primary" size="small" @click="handleRemoveButtonClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="orderManagerPaginationDiv">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalOrderCount"
        :current-page="nowPage"
        @update:current-page="handleChangePage"
      />
    </div>
    <el-dialog
      v-model="showFlagDialog"
      title="插旗"
      width="30%"
      :before-close="
        () => {
          flagData = undefined
        }
      "
    >
      <div>
        <el-radio-group v-model="flagData.flag">
          <el-radio :label="1">
            <el-icon><Flag style="color: red" /></el-icon>
          </el-radio>
          <el-radio :label="2">
            <el-icon><Flag style="color: orange" /></el-icon>
          </el-radio>
          <el-radio :label="3">
            <el-icon><Flag style="color: yellow" /></el-icon>
          </el-radio>
          <el-radio :label="4">
            <el-icon><Flag style="color: green" /></el-icon>
          </el-radio>
          <el-radio :label="5">
            <el-icon><Flag style="color: blue" /></el-icon>
          </el-radio>
          <el-radio :label="6">
            <el-icon><Flag style="color: purple" /></el-icon>
          </el-radio>
          <el-radio :label="7">
            <el-icon><Flag style="color: gray" /></el-icon>
          </el-radio>
        </el-radio-group>
      </div>
      <div>
        <el-input v-model="flagData.flagRemark">
          <template #prepend>插旗备注：</template>
        </el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showFlagDialog = false">取消</el-button>
          <el-button type="primary" @click="handleFlag">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="showExchangeDialog"
      title="修改订单"
      width="30%"
      :before-close="
        () => {
          exchangeOrder = undefined
        }
      "
    >
      <el-form :model="exchangeOrder" label-width="150px" :rules="formRules" ref="formRef">
        <el-form-item label="微信账号" prop="wechatNo">
          <el-input v-model="exchangeOrder.wechatNo" />
        </el-form-item>
        <el-form-item label="支付宝账号" prop="alipayNo">
          <el-input v-model="exchangeOrder.alipayNo" />
        </el-form-item>
        <el-form-item label="佣金" prop="commission">
          <el-input v-model.number="exchangeOrder.commission" />
        </el-form-item>
        <el-form-item label="支付宝收款名称" prop="alipayName">
          <el-input v-model="exchangeOrder.alipayName" />
        </el-form-item>
        <el-form-item label="负责人" prop="rpName">
          <el-input v-model="exchangeOrder.rpName" />
        </el-form-item>
        <el-form-item label="负责放单人微信名" prop="rpWechatName">
          <el-input v-model="exchangeOrder.rpWechatName" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="exchangeOrder.remark" />
        </el-form-item>
        <el-form-item label="买家电话" prop="phoneNumber">
          <el-input v-model="exchangeOrder.phoneNumber" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNo">
          <el-input v-model="exchangeOrder.cardNo" />
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="exchangeOrder.address" />
        </el-form-item>
        <el-form-item label="商品ID" prop="shopId">
          <el-input v-model.number="exchangeOrder.shopId" />
        </el-form-item>
        <el-form-item label="SKU" prop="sku">
          <el-input v-model="exchangeOrder.sku" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExchangeDialog = false">取消</el-button>
          <el-button type="primary" @click="handleExchange">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="changeStatusDialogShow"
      title="修改状态"
      width="30%"
      :before-close="
        () => {
          changeStatusOrder = undefined
        }
      "
    >
      <el-select v-model="changeStatusOrder.orderStatus" clearable>
        <el-option :key="1" label="商家驳回" value="商家驳回" />
        <el-option :key="2" label="已完成" value="已完成" />
        <el-option :key="3" label="已确认等待财务审核" value="已确认等待财务审核" />
        <el-option :key="4" label="提交" value="提交" />
        <el-option :key="5" label="新建待提交数据" value="新建待提交数据" />
        <el-option :key="6" label="财务审核已通过" value="财务审核已通过" />
        <el-option :key="7" label="财务驳回" value="财务驳回" />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeStatusDialogShow = false">取消</el-button>
          <el-button type="primary" @click="confirmChangeStatus">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { IOrder, ISearchType } from "@/api/order/types/order"
import { ElMessage, FormInstance, FormRules } from "element-plus"
import {
  addFlagApi,
  changeOrderApi,
  changeStatusApi,
  getAllOrderApi,
  removeOrderApi,
  searchOrderApi
} from "@/api/order"
import { Flag, Search } from "@element-plus/icons-vue"
import * as AxiosType from "axios/index"
import { IPageResponseData, IResponseData } from "@/api/types/requests"
const tableShowData = ref<IOrder[]>([])
const totalOrderCount = ref<number>(1)
const nowPage = ref<number>(1)
const showFlagDialog = ref<boolean>(false)
const flagData = ref<IOrder>()
const showExchangeDialog = ref<boolean>(false)
const exchangeOrder = ref<IOrder>()
const changeStatusOrder = ref<IOrder>()
const formRules: FormRules = {
  wechatNo: [{ max: 30, message: "微信号长度在30位以内！" }],
  alipayNo: [{ max: 30, message: "支付宝账号长度在30位以内！" }],
  alipayName: [{ max: 30, message: "支付宝用户名长度在30位以内！" }],
  rpName: [{ max: 20, message: "负责人姓名长度应在20位以内！" }],
  rpWechatName: [{ max: 255, message: "放单人微信名长度在255位以内！" }],
  remark: [{ max: 255, message: "备注长度在255位以内！" }],
  phoneNumber: [{ max: 11, message: "卖家电话长度应在11位以内" }],
  cardNo: [{ max: 20, message: "银行卡长度在20位以内！" }],
  address: [
    { required: true, message: "请输入收货地址" },
    { max: 255, message: "收货地址长度在255位以内！" }
  ]
}
const formRef = ref<FormInstance>()
const changeStatusDialogShow = ref<boolean>(false)
const searchContent = ref<string>("")
const searchType = ref<ISearchType>("WANG_ID")
const searchMode = ref<boolean>(false)
const getColor = (row: IOrder): string => {
  switch (row.flag) {
    case 1:
      return "red"
    case 2:
      return "orange"
    case 3:
      return "yellow"
    case 4:
      return "green"
    case 5:
      return "blue"
    case 6:
      return "purple"
    case 7:
      return "gray"
    default:
      ElMessage.warning("检测到未知旗帜类型，使用白色代替")
      return "white"
  }
}
const handleRemoveButtonClick = (row: IOrder) => {
  if (row.id) {
    removeOrderApi(row.id)
      .then(() => {
        ElMessage.success("删除成功")
      })
      .catch((err) => {
        console.log(err)
        ElMessage.error("删除失败")
      })
  }
}
const changePageHandler = (response: AxiosType.AxiosResponse<IResponseData<IPageResponseData<IOrder>>>) => {
  tableShowData.value = response.data.data.info
  totalOrderCount.value = response.data.data.total
}
const handleChangePage = () => {
  if (searchMode.value) {
    searchOrderApi(searchType.value, searchContent.value, nowPage.value)
      .then(changePageHandler)
      .catch(() => {
        ElMessage.error("获取数据失败！")
      })
    return
  }
  getAllOrderApi(nowPage.value)
    .then(changePageHandler)
    .catch(() => {
      ElMessage.error("获取数据失败！")
    })
}

const handleExchangeButtonClick = (row: IOrder) => {
  exchangeOrder.value = row
  showExchangeDialog.value = true
}
const handleFlagButtonClick = (row: IOrder) => {
  showFlagDialog.value = true
  flagData.value = row
}
const handleFlag = () => {
  if (flagData.value) {
    addFlagApi(flagData.value)
      .then(() => {
        ElMessage.success("插旗成功！")
      })
      .catch((err) => {
        ElMessage.error("插旗失败！")
        console.log(err)
      })
    showFlagDialog.value = false
  }
}
const handleExchange = () => {
  formRef.value
    ?.validate()
    .then(() => {
      if (exchangeOrder.value) {
        changeOrderApi(exchangeOrder.value)
          .then(() => {
            ElMessage.success("修改订单成功")
          })
          .catch((err) => {
            console.log(err)
            ElMessage.error("修改失败！")
          })
        showExchangeDialog.value = false
      }
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error("有数据不符合要求！")
    })
}
const handleChangeStatusButtonClick = (row: IOrder) => {
  changeStatusOrder.value = row
  changeStatusDialogShow.value = true
}
const confirmChangeStatus = () => {
  if (changeStatusOrder.value) {
    changeStatusApi(changeStatusOrder.value)
      .then(() => {
        ElMessage.success("修改成功")
      })
      .catch((err) => {
        ElMessage.error("修改失败，请重试！")
        console.log(err)
      })
    changeStatusDialogShow.value = false
  }
}
const search = () => {
  searchMode.value = searchContent.value !== ""
  nowPage.value = 1
  handleChangePage()
}

onMounted(() => {
  handleChangePage()
})
</script>

<style scoped>
.orderManagerDiv {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}
.orderManagerTableDiv {
  width: 100%;
  height: calc(90% - 20px);
  margin-top: 10px;
}
.orderManagerPaginationDiv {
  height: 5%;
  margin-top: 10px;
  min-height: 32px;
}
.orderManagerSearchDiv {
  height: 5%;
  width: 100%;
}
.searchInput {
  width: calc(30% + 100px);
}
</style>
