<template>
  <div class="app-container">
    <el-table :data="rewardList" class="zd-table">
      <el-table-column
        label="兑付单号"
        align="center"
        prop="id"
        show-overflow-tooltip
      />
      <el-table-column
        label="兑付时间"
        align="center"
        prop="claimTime"
        width="120"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.claimTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动名称"
        align="center"
        prop="activityName"
        show-overflow-tooltip
      />

      <el-table-column
        label="商品名称"
        align="center"
        prop="rewardGoodsName"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span v-if="scope.row.rewardType === 1">啤酒币</span>
          <span v-if="scope.row.rewardType === 2">{{
            scope.row.rewardGoodsName
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="兑付类型" align="center" prop="orderType" /> -->
      <el-table-column label="门店" align="center" prop="barName" />
      <el-table-column label="门店ID" align="center" prop="barNumber" />
      <el-table-column
        label="门店城市"
        align="center"
        prop="barCity"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        label="品牌啤酒币兑换数"
        align="center"
        prop="beerCoinNum"
      />
      <el-table-column
        label="平台啤酒币兑换数"
        align="center"
        prop="platformCoinNum"
      /> -->
      <!-- <el-table-column
        label="收货地址"
        align="center"
        prop="address"
        show-overflow-tooltip
      /> -->

      <el-table-column label="物流状态" align="center" prop="shippingStatus" />

      <el-table-column
        label="发货时间"
        align="center"
        prop="dispatchTime"
        width="120"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.dispatchTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="快递单号" align="center" prop="wayBillNo" />
      <el-table-column label="兑付状态" align="center" prop="rewardStatus">
        <template #default="scope">
          <span v-if="scope.row.rewardStatus === 0">待发放</span>
          <span v-if="scope.row.rewardStatus === 1">已发放</span>
          <span v-if="scope.row.rewardStatus === 2">已领取</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.rewardType === 2 && scope.row.rewardStatus === 0"
            link
            type="primary"
            @click="handleDelivery2(scope.row)"
            >发货</el-button
          >
          <el-button link type="primary" @click="handleRemark(scope.row)"
            >备注</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 2 发货 -->
    <el-dialog
      title="订单发货"
      v-model="deliveryOpen2"
      width="500px"
      append-to-body
    >
      <el-form
        ref="deliveryRef2"
        :model="deliveryForm2"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="商品信息">
          <div
            style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
              gap: 20px;
              width: 100%;
            "
          >
            <el-image
              style="width: 60px; height: 60px"
              :src="currentRow2.goodsCover"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[currentRow2.goodsCover]"
              :initial-index="4"
              fit="cover"
              title="点击查看大图"
              preview-teleported
            />
            <div>
              <div>{{ currentRow2.rewardGoodsName }}</div>
              <!-- <div>{{ currentRow.goodsName }}</div> -->
            </div>
            <div>x {{ currentRow2.rewardGoodsNum }}</div>
          </div>
        </el-form-item>
        <el-form-item label="收货信息">
          <div>联系方式：{{ currentRow2.contactPhone }}</div>
          <div>收货地址：{{ currentRow2.address }}</div>
        </el-form-item>
        <el-form-item label="发货方式" prop="dispatchMethod">
          <el-radio-group v-model="deliveryForm2.dispatchMethod">
            <el-radio :value="0">自己配送</el-radio>
            <el-radio :value="1">快递</el-radio>
          </el-radio-group>
        </el-form-item>
        <templatet v-if="deliveryForm2.dispatchMethod === 1">
          <el-form-item label="快递公司" prop="expressCompany">
            <el-input
              v-model="deliveryForm2.expressCompany"
              placeholder="请输入快递公司"
            />
          </el-form-item>
          <el-form-item label="快递单号" prop="wayBillNo">
            <el-input
              v-model="deliveryForm2.wayBillNo"
              placeholder="请输入快递单号"
            />
          </el-form-item>
        </templatet>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDelivery2">确 定</el-button>
          <el-button @click="cancelDelivery2">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      title="订单备注"
      v-model="openRemark"
      width="500px"
      append-to-body
    >
      <el-form
        ref="remarkRef"
        :model="remarkForm"
        :rules="rulesRemark"
        label-width="80px"
      >
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="remarkForm.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitRemark">确 定</el-button>
          <el-button @click="cancelRemark">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import {
  activityRedeemOrder,
  getOrderInfo,
  deliveryRedeemOrder,
} from "@/api/brewery/redeemOrder";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(0);
const ids = ref(0);
const remarkForm = ref({});
const openRemark = ref(false); // 备注弹窗
const rulesRemark = ref({
  remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
});
const rewardList = ref([]);
const deliveryOpen = ref(false); // 发货弹窗
const deliveryForm = ref({});
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
onMounted(() => {
  getList();
});

/** 查询兑换订单列表 */
function getList() {
  loading.value = true;
  activityRedeemOrder(queryParams.value).then((response) => {
    rewardList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

const currentRow2 = ref({});
const deliveryOpen2 = ref(false);
const deliveryForm2 = ref({ dispatchMethod: 0 });
/** 发货按钮操作 */
function handleDelivery2(row) {
  currentRow2.value = row;
  console.log(row);
  deliveryOpen2.value = true;
}
// 发货按钮
function submitDelivery2() {
  proxy.$refs["deliveryRef2"].validate((valid) => {
    if (valid) {
      deliveryForm2.value.rewardId = currentRow.value.id;
      dispatchRew(deliveryForm2.value).then((response) => {
        proxy.$modal.msgSuccess("发货成功");
        deliveryOpen2.value = false;
        getGoodsActivity();
      });
    }
  });
}
function cancelDelivery2() {
  deliveryOpen2.value = false;
  deliveryForm2.value = { dispatchMethod: 0 };
  currentRow2.value = {};
}

function handleRemark(row) {
  currentRow2.value = row;
  openRemark.value = true;
}
function submitRemark() {
  proxy.$refs["remarkRef"].validate((valid) => {
    if (valid) {
      remarkForm.value.id = currentRow2.value.id;
      updateRedeemOrder(remarkForm.value).then((response) => {
        proxy.$modal.msgSuccess("备注成功");
        openRemark.value = false;
        getList();
      });
    }
  });
}
// 取消按钮
function cancelRemark() {
  openRemark.value = false;
}
</script>

<style scoped lang="scss"></style>
