<template>
  <div class="app-container">
    <div class="zd-card">
      <el-table v-loading="loading" :data="goodsList" class="zd-table">
        <el-table-column label="商品名称" align="left" prop="goodsName">
          <template #default="scope">
            <div style="display: flex; align-items: center; gap: 16px">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.goodsCover"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[scope.row.goodsCover]"
                :initial-index="4"
                fit="cover"
                title="点击查看大图"
                preview-teleported
              />
              <div>
                <div>名称：{{ scope.row.goodsName }} {{ scope.row.specs }}</div>
                <div>编码：{{ scope.row.goodsSn }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品类型" align="center" prop="purchaseMethod">
          <template #default="scope">
            <span v-if="scope.row.purchaseMethod == 1">啤酒币兑换</span>
            <span v-if="scope.row.purchaseMethod == 2">营销返利兑换</span>
          </template>
        </el-table-column>
        <el-table-column
          label="啤酒币兑换数量"
          align="center"
          prop="redeemedNum"
        >
          <template #default="scope">
            <template v-if="currentGoodsCoinId === scope.row.id">
              <el-input
                v-model="goodsCoinCount"
                type="number"
                placeholder="请输入数量"
                style="width: 80px"
              />
              <el-button link type="primary" @click="saveGoodsCoinCount"
                >保存</el-button
              >
              <el-button link @click="cancelGoodsCoin">取消</el-button>
            </template>
            <template v-else>
              <span>{{ scope.row.redeemedNum }}</span>
              <el-icon
                size="16"
                class="edit-icon"
                @click="handleGoodsIcons(scope.row)"
                ><EditPen
              /></el-icon>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="关联活动数量"
          align="center"
          prop="activityCount"
        />

        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="商品状态" align="center" prop="onSale">
          <template #default="scope">
            <el-tag v-if="scope.row.onSale === 1" type="success"> 在售</el-tag>
            <el-tag v-else type="danger"> 下架</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="zd-card">
      <h4>啤酒币兑换历史</h4>
      <el-table :data="exchangeList" class="zd-table">
        <el-table-column label="兑换单号" align="center" prop="orderSn" />
        <el-table-column label="兑换时间" align="center" prop="paidTime" />
        <el-table-column label="门店ID" align="center" prop="barId" />
        <el-table-column label="门店城市" align="center" prop="barCity" />
        <el-table-column
          label="使用啤酒币数量"
          align="center"
          prop="beerCoinNum"
        />
        <el-table-column label="发货时间" align="center" prop="shippingTime" />
        <el-table-column
          label="发货地址"
          align="center"
          prop="address"
          show-overflow-tooltip
        />
        <el-table-column
          label="物流单号"
          align="center"
          prop="trackingNumber"
        />
        <el-table-column label="发货状态" align="center" prop="shippingStatus">
          <template #default="scope">
            {{ scope.row.shippingStatus === 1 ? "已发货" : "未发货" }}
          </template>
        </el-table-column>
        <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.shippingStatus != 1"
              link
              type="primary"
              @click="handleDelivery(scope.row)"
              >发货</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="zd-card">
      <h4>累积返利活动</h4>
      <el-table :data="activityList" class="zd-table">
        <el-table-column label="兑换单号" align="center" prop="id" />
        <el-table-column label="兑换时间" align="center" prop="claimTime" />
        <el-table-column label="门店ID" align="center" prop="barId" />
        <el-table-column
          label="门店城市"
          align="center"
          prop="barCity"
          show-overflow-tooltip
        />
        <el-table-column label="参与活动ID" align="center" prop="activityId" />
        <el-table-column
          label="活动目标"
          align="center"
          prop="activityTarget"
        />
        <el-table-column label="发货时间" align="center" prop="dispatchTime" />
        <el-table-column label="发货地址" align="center" prop="barAddress" />
        <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"
          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
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="订单发货"
      v-model="deliveryOpen"
      width="500px"
      append-to-body
    >
      <el-form
        ref="deliveryRef"
        :model="deliveryForm"
        :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="currentRow.goodsCover"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[currentRow.goodsCover]"
              :initial-index="4"
              fit="cover"
              title="点击查看大图"
              preview-teleported
            />
            <div>
              <div>{{ currentRow.goodsName }}</div>
              <!-- <div>{{ currentRow.goodsName }}</div> -->
            </div>
            <div>x {{ currentRow.redeemNum }}</div>
          </div>
        </el-form-item>
        <el-form-item label="收货信息">
          <div>联系方式：{{ currentRow.contactPhone }}</div>
          <div>收货地址：{{ currentRow.address }}</div>
        </el-form-item>
        <el-form-item label="发货方式" prop="dispatchMethod">
          <el-radio-group v-model="deliveryForm.dispatchMethod">
            <el-radio :value="0">自己配送</el-radio>
            <el-radio :value="1">快递</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="deliveryForm.dispatchMethod === 1">
          <el-form-item label="快递公司" prop="expressCompany">
            <el-input
              v-model="deliveryForm.expressCompany"
              placeholder="请输入快递公司"
            />
          </el-form-item>
          <el-form-item label="快递单号" prop="trackingNumber">
            <el-input
              v-model="deliveryForm.trackingNumber"
              placeholder="请输入快递单号"
            />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDelivery">确 定</el-button>
          <el-button @click="cancelDelivery">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 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%;
            "
          >
            <template v-if="currentRow2.rewardType === 2">
              <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>
            </template>
            <template v-else>
              啤酒币 * {{ currentRow2.rewardGoodsNum }}
            </template>
          </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>
        <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>
      </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>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
import {
  getGoods,
  getGoodsActivityList,
  getGoodsExchangeList,
} from "@/api/brewery/goods";
import { deliveryRedeemOrder, dispatchRew } from "@/api/brewery/redeemOrder";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const goodsId = ref(null);
const rules = ref({
  dispatchMethod: [
    { required: true, message: "请选择发货方式", trigger: "change" },
  ],
  expressCompany: [
    { required: true, message: "请输入快递公司", trigger: "blur" },
  ],
  trackingNumber: [
    { required: true, message: "请输入快递单号", trigger: "blur" },
  ],
});
onMounted(() => {
  goodsId.value = route.query.goodsId;
  queryActivity.value.goodsId = goodsId.value;
  queryExchange.value.goodsId = goodsId.value;
  getGoodsInfo();
  getGoodsActivity();
  getGoodsExchange();
});
// 获取商品详情
const goods = ref({});
const goodsList = ref([]);
function getGoodsInfo() {
  loading.value = true;
  getGoods(goodsId.value).then((response) => {
    // goods.value = response.data;
    goodsList.value = [];
    goodsList.value.push(response.data);
    loading.value = false;
  });
}
// 获取商品的活动列表
const activityList = ref([]);
const queryActivity = ref({
  pageNum: 1,
  pageSize: 10,
  goodsId: goodsId.value,
});
const getGoodsActivity = async () => {
  const res = await getGoodsActivityList(queryActivity.value);
  activityList.value = res.data;
};
// 获取商品的兑换列表
const exchangeList = ref([]);
const queryExchange = ref({
  pageNum: 1,
  pageSize: 10,
  goodsId: goodsId.value,
});
const getGoodsExchange = async () => {
  const res = await getGoodsExchangeList(queryExchange.value);
  exchangeList.value = res.data;
};
// 修改兑换啤酒数
const currentGoodsCoinId = ref(null);
const goodsCoinCount = ref(0);
function handleGoodsIcons(row) {
  currentGoodsCoinId.value = row.id;
  goodsCoinCount.value = row.redeemedNum;
}
function saveGoodsCoinCount() {
  updateGoodsIcons({
    goodsId: currentGoodsCoinId.value,
    icons: goodsCoinCount.value,
  }).then(() => {
    proxy.$modal.msgSuccess("修改成功");
    currentGoodsCoinId.value = null;
    goodsCoinCount.value = 0;
    getGoodsInfo();
  });
}
function cancelGoodsCoin() {
  currentGoodsCoinId.value = null;
  goodsCoinCount.value = 0;
}
//==========//==========

const currentRow = ref({});
const deliveryOpen = ref(false);
const deliveryForm = ref({ dispatchMethod: 0 });
/** 发货按钮操作 */
function handleDelivery(row) {
  currentRow.value = row;
  console.log(row);
  deliveryOpen.value = true;
}
// 发货按钮
function submitDelivery() {
  proxy.$refs["deliveryRef"].validate((valid) => {
    if (valid) {
      deliveryForm.value.orderId = currentRow.value.id;
      deliveryRedeemOrder(deliveryForm.value).then((response) => {
        proxy.$modal.msgSuccess("发货成功");
        deliveryOpen.value = false;
        getGoodsExchange();
      });
    }
  });
}
function cancelDelivery() {
  deliveryOpen.value = false;
  deliveryForm.value = { dispatchMethod: 0 };
  currentRow.value = {};
}

// ==========
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 = {};
}
</script>

<style lang="scss" scoped>
.edit-icon {
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
