<template>
  <div class="publish-wrap">
    <el-col :xs="24" :sm="24" :md="24" :xl="24">
      <el-row v-if="shopData.length>0 && shopDataFalg">
        <el-form ref="queryform" :model="listingRequest" class="query-form w100_" :rules="listingRules" :inline="true" label-width="55px">
          <el-col>
            <el-row class="d-flex space-between recipient-wrap">
              <el-row class="w100_">
                <el-form-item label="店铺" prop="shopId" class="w100_">
                  <ProductShop v-model="listingRequest.shopId" placeholder="店铺" @change="validateFun" :shopDatas="shopData" />
                </el-form-item>
              </el-row>
              <el-row class="w100_">
                <el-form-item label="仓库" prop="shopWarehouseId" class="w100_">
                  <ProductShopWarehouse v-model="listingRequest.shopWarehouseId" :shopId="listingRequest.shopId" />
                </el-form-item>
              </el-row>
            </el-row>
          </el-col>
        </el-form>
        <el-row justify="end" class="mt10 w100_ mr10">
          <el-button class="btn_edge" @click="emit(Events.done);">
            取消
          </el-button>
          <el-button class="btn_main w80" @click="updateAddressFun" :loading="btnLoading">
            提交
          </el-button>
        </el-row>
      </el-row>

      <el-row v-else-if="shopData.length==0 && shopDataFalg" class="mb13 d-flex justify-content-center">
        <el-tag type="danger" class="mb20">您未对第三方平台店铺进行授权，请先对店铺进行授权</el-tag>
        <el-row class="w100_ d-flex justify-content-center">
          <el-button class="btn_main w80" @click="linkTo">
            店铺授权
          </el-button>
        </el-row>
      </el-row>
      <el-row v-else v-loading="!shopDataFalg" class="mb20 mt10">

      </el-row>
    </el-col>
  </div>
</template>
<script setup lang="ts">
import { Events } from "~/dim/event";
const user = useUserStore();
const props = defineProps<{ spuCode: string }>();
const emit = defineEmits([Events.done]);
import type { FormInstance } from "element-plus/lib/components";
import { useShop } from "~/api/shop/shopService";
import {
  type warehouseListQuery,
  type listingQuery,
} from "~/api/shop/shopQuery";
import type shopList from "~/domain/Shop";
import type shopListQuery from "~/api/shop/shopQuery";
import { DefaultQuery } from "~/domain/query";
const { spuListing, sellerShopList } = useShop();
import { listingRules } from "~/domain/Shop";
const queryform = ref<FormInstance | undefined>();
let btnLoading: Ref<boolean> = ref(false);
const listingRequest: Ref<listingQuery> = ref({} as listingQuery);
listingRequest.value.spuCode = props.spuCode;
const shopData: Ref<shopList[]> = ref([]);
const shopDataFalg = ref(false);
const defaultQuery = () => {
  const q = new DefaultQuery({}) as shopListQuery;
  return q;
};
const query: Ref<shopListQuery> = ref(defaultQuery());
function linkTo(){
  navigateTo({
    path: "/admin/Shop",
    query: { type: 'detail' }
  });
}
async function sellerShopListFun() {
  const q = JSON.parse(JSON.stringify(query.value));
  const res: any = await sellerShopList(q);
  if (res.code == 200) {
    shopData.value = res.rows;
    shopDataFalg.value = true;
  }
}
async function updateAddressFun() {
  if (!queryform.value) return;
  btnLoading.value = true;
  await queryform.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      const res: any = await spuListing(
        listingRequest.value.shopId as number,
        listingRequest.value
      );
      if (res.code == 200) {
        ElMessage.success("刊登成功");
        emit(Events.done);
      }
      btnLoading.value = false;
    } else {
      btnLoading.value = false;
    }
  });
}
function validateFun() {
  listingRequest.value.shopWarehouseId = "" as any;
}
onMounted(() => {
  sellerShopListFun();
});
</script>
<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-right: 10px;
}
</style>