<template>
    <div class="address-list">
        <div class="list-wrap">
            <div class="list-item" v-for="(item, index) in addressList" :key="index">
                <div class="item-info">
                    <div class="tree-icon">
                        <div class="tree-tag" v-show="item.status === 0">待确认</div>
                        <div class="tree-tag done" v-show="item.status === 1">已确认</div>
                        <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
                        <div class="tree-type-name-tag">白糖罂</div>
                    </div>
                    <div class="item-center">
                        <div class="center-t">
                            BTY-A25
                            <span class="type-tag">综合:94分</span>
                            <span class="type-tag">生态:92分</span>
                            <span class="type-tag">树龄:5年</span>
                        </div>
                        <div class="center-item">单价：<span>12元/斤</span></div>
                        <div class="center-item">预计成熟时间：<span>2025.05.30</span></div>
                    </div>
                </div>

                <div v-if="item.status === 1" class="address-wrap">
                    <div class="info" v-for="(user, userI) in 3" :key="userI">
                        <div class="avatar">
                            <el-avatar
                                :size="53"
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            />
                            <div class="name">刘浩浩</div>
                        </div>
                        <el-divider class="divider" direction="vertical" />
                        <div class="cont">
                            <div class="li">发货时间<span>2025.03.22</span></div>
                            <div class="li">认养斤数<span>50斤</span></div>
                            <div class="li">收货电话<span>19871533165</span></div>
                            <div class="li">收货地址<span>湖北省武汉市富丽长信园1520室</span></div>
                        </div>
                    </div>
                </div>
                <div v-else class="user-wrap">
                    <div class="user-title">权属人</div>
                    <div class="user-item">
                      <div class="user-detail" v-for="(owner, oI) in item.owners" :key="oI">
                        {{ owner.userName }}({{ owner.value }}斤)
                        <span v-show="oI<item.owners.length-1">/</span>
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 渐变主色按钮 -->
        <div class="center-btn" @click="showExport">导出</div>
        <!-- 导出表格 -->
        <table-popup :showPopupParent="showPopupParent"></table-popup>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import tablePopup from "./tablePopup.vue"

const addressList = ref([
  { status: 0, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}] },
  { status: 0, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}]  },
  { status: 1, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}] },
  { status: 1, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}]  },
]);
onMounted(() => {});

// 导出
function showExport() {
    showPopupParent.value = !showPopupParent.value
}

const showPopupParent = ref(false)
</script>

<style lang="scss" scoped>
.address-list {
    height: 100%;
    overflow: auto;

    .type-tag {
        color: #ffd489;
        background: rgba(255, 212, 137, 0.06);
        padding: 2px 4px;
        font-size: 10px;
        margin-left: 4px;
        border-radius: 4px;
    }
    .list-wrap {
        .list-item {
            background: rgba(255, 255, 255, 0.08);
            padding: 8px 10px;
            border-radius: 5px;
            .item-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .tree-icon {
                position: relative;
                .tree-tag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: #ed9e1e;
                    border-radius: 5px 0 5px 0;
                    color: #fff;
                    padding: 1px 6px;
                    font-size: 10px;
                    &.done {
                        background: #5c5c5c;
                    }
                }
                .tree-type-name-tag {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 0 5px 5px 0;
                    font-size: 10px;
                    width: 100%;
                    text-align: center;
                    padding: 1px;
                    backdrop-filter: blur(2px);
                }
                .tree-img {
                    width: 63px;
                    height: 63px;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }
            .item-center {
                flex: 1;
                padding: 0 12px;
                color: #fff;
                .center-t {
                    font-size: 14px;
                }
                .center-item {
                    color: #6c6c6c;
                    font-size: 12px;
                    padding-top: 2px;
                    span {
                        color: #fff;
                    }
                }
            }
        }
        .list-item + .list-item {
            margin-top: 8px;
        }

        .address-wrap {
          padding-top: 12px;
            .info {
                border-radius: 4px;
                background: rgba(255, 255, 255, 0.04);
                padding: 6px 2px 6px 10px;
                border: 1px solid rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                margin-top: 8px;
                box-sizing: border-box;
                .avatar {
                    text-align: center;
                    .name {
                        background: #fff;
                        border-radius: 20px;
                        font-size: 12px;
                        color: #0d0d0d;
                        padding: 1px 2px;
                        position: relative;
                        z-index: 2;
                        margin-top: -12px;
                    }
                }
                .divider {
                    border-color: rgba(252, 252, 252, 0.3);
                    margin: 0 14px;
                    height: 50px;
                }
                .cont {
                    .li {
                        color: #6c6c6c;
                        position: relative;
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        &::before {
                            content: "";
                            position: absolute;
                            top: 7px;
                            left: -10px;
                            width: 4px;
                            height: 4px;
                            border-radius: 50%;
                            background: #6c6c6c;
                        }
                        span {
                            color: #ffffff;
                            margin-left: 5px;
                            flex: 1;
                        }
                    }
                }
            }
        }
        .user-wrap {
          margin-top: 12px;
          padding: 5px 10px;
          background: linear-gradient( 90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
          border-radius: 30px 0 0 30px;
          width: 100%;
          display: flex;
          font-size: 12px;
          .user-title {
            color: rgba(255, 255, 255, 0.56);
            padding-right: 5px;
          }
          .user-item {
            display: flex;
            align-items: center;
            color: #FFD489;
          }
        }
    }
    .unit {
        padding-left: 5px;
        color: #fff;
    }
    .p-t-2 {
        padding-top: 2px;
    }
    
    .center-btn {
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
        color: #000000;
        border-radius: 20px;
        font-size: 14px;
        padding: 7px 10px;
        cursor: pointer;
        border: 1px solid #fff;
        background: linear-gradient(180deg, #ffd887, #ed9e1e);
        width: 194px;
        box-sizing: border-box;
        text-align: center;
    }
}
</style>
