<template>
  <div class="good-page">
    <div class="good-search" v-if="!isShowGoods">
      <div>
        <a-button danger class="ml10">全部</a-button>
        <a-button danger class="ml10">正常</a-button>
        <a-button danger class="ml10">已下架</a-button>
        <a-input-search
          v-model:value="value"
          placeholder="input search text"
          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="data">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              Name
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="
                  tag === 'loser'
                    ? 'volcano'
                    : tag.length > 5
                    ? 'geekblue'
                    : 'green'
                "
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical" />
              <a>Delete</a>
              <a-divider type="vertical" />
              <a class="ant-dropdown-link">
                More actions
                <down-outlined />
              </a>
            </span>
          </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 }" ></GoodsBags>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, onMounted} from "vue";
import { SmileOutlined, DownOutlined,LeftOutlined } from "@ant-design/icons-vue";
import GoodsBags from "./components/index.vue";
import {onSelectGoods} from '@/api/index'
import { getUid } from "@/utils/userInfo";
const columns = [
  {
    name: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
  },
  {
    title: "Action",
    key: "action",
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"],
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];
interface props {
  isCad: Number;
}

const value = ref<string>("");
const propsData = reactive<props>({
  isCad: 0,
});
const isShowGoods = ref<Boolean>(false);
const onSearch = (searchValue: string) => {
  console.log("use value", searchValue);
  console.log("or use this.value", value.value);
};
const onGoods = (e: Number) => {
  propsData.isCad = e;
  isShowGoods.value = true;
};
const onBack = (e: Number) => {
  isShowGoods.value = false;
};
onMounted(async() => {
  const uid = getUid()
  const data =  await onSelectGoods(uid)
  
})
defineExpose({
  value,
  onSearch,
  data,
  columns,
  onGoods,
  isShowGoods,
  propsData,
  onBack,
});
</script>
<style lang="less" scoped>
.good-page {
  .good-search {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .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>