<template>
  <div class="good-page">
    <div class="good-search" v-if="!isShowGoods">
      <div>
        <a-radio-group v-model:value="status">
        <a-radio-button value="0"  class="status"   @click="onSearch">全部</a-radio-button>
        <a-radio-button value="1"  class="status"   @click="onSearch">正常</a-radio-button>
        <a-radio-button value="2"  class="status"   @click="onSearch">已下架</a-radio-button>
      </a-radio-group>
        <a-input-search v-model:value="value" placeholder="请输入商品名称" style="width: 200px; margin-left: 10px"
          @search="onSearch" />
      </div>
      <div class="good-cad">
        <a-button type="primary" class="mr10" @click="onGoods(0)">新建商品</a-button>
        <a-button type="primary" @click="onGoods(1)">新建商品包</a-button>
      </div>
    </div>
    <div class="goods-list" v-if="!isShowGoods">
      <a-table :columns="columns" :data-source="list">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'tags'">
            <a-button type="primary">编辑</a-button>
            <a-button type="primary" style="margin-left:20px;">统计</a-button>
            <a-button type="primary" style="margin-left:20px;">下架</a-button>
            <a-button type="primary" style="margin-left:20px;">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <div v-if="isShowGoods">
      <div style="display: flex; align-items: center; justify-content: space-between" v-if="isShowGoods">
        <a-button class="small left" @click="onBack">
          <template #icon>
            <LeftOutlined />
          </template>
        </a-button>
      </div>
      <GoodsBags :props="{ propsData }" v-if="propsData.isCad == 0" @onBack="onBack"></GoodsBags>
      <GoodsBagSubs :props="{ propsData }" v-else @onBack="onBack"> </GoodsBagSubs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/goods/index.vue";
import GoodsBagSubs from "./components/goodsubs/index.vue";
import { onSelectGoods,onfindby } from '@/api/index'
import { getUid } from "@/utils/userInfo";
const columns = [
  {
    title: "商品编号",
    dataIndex: "goodsid",
    key: "goodsid",
  },
  {
    title: "商品名称",
    dataIndex: "shortname",
    key: "shortname",
  },
  {
    title: "商品类型",
    dataIndex: "sellingmodel",
    key: "sellingmodel",
  },
  {
    title: "商品售卖数",
    key: "markingprice",
    dataIndex: "markingprice",
  },
  {
    title: "默认金额售卖数",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "已售金额",
    key: "price",
    dataIndex: "price",
  },
  {
    title: "商品状态",
    key: "status",
    dataIndex: "status",
  },
  {
    title: "操作",
    key: "tags",
    dataIndex: "tags",
  },
];
interface props {
  isCad: Number;
}
const list = ref<Array<Object>>([])
const value = ref<string>("");
const status = ref<string>("0")
const propsData = reactive<props>({
  isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch =  async() => {
  const params = {
    status:status.value,
    name:value.value,
    uid:getUid()
  }
  const data =   await onfindby(params)
  list.value = data.data
};
const onGoods = (e: Number) => {
  propsData.isCad = e;
  isShowGoods.value = true;
};
const onBack = (e: Number) => {
  isShowGoods.value = !isShowGoods.value;
   const uid = getUid()
  const data = await onSelectGoods(uid)
   list.value = data.data
};
onMounted(async () => {
  const uid = getUid()
  const data = await onSelectGoods(uid)
  list.value = data.data
  return list
})
defineExpose({
  status,
  value,
  columns,
  isShowGoods,
  propsData,
  onBack,
  onSearch,
  onGoods,
});
</script>
<style lang="less" scoped>
.good-page {
  .good-search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .status{
      margin-right: 20px;
      width: 80px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.65);
    }
    .status::before{
     display: none;
     
    }
    .ant-radio-button-wrapper-checked{
      border: 1px solid @primary-color;
    }
    .ood-cad {
      width: 100%;
    }

    .ml10 {
      margin-left: 10px;
    }

    .mr10 {
      margin-right: 10px;
    }
  }

  .goods-list {
    margin-top: 10px;
  }

  .small {
    border: none;
    height: 30px;
    width: 50px;
  }

  .left {
    border-left: 1px solid rgb(236, 236, 236);
    border-top: 1px solid rgb(236, 236, 236);
    border-bottom: 1px solid rgb(236, 236, 236);
    border-right-width: 80%;
    border-right: 1px solid rgb(236, 236, 236);
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
  }
}
</style>
<style lang="less">
.ant-layout-content{
  overflow-y: scroll;
}
</style>