<template>
  <div class="address-manager">
    <!-- 标签页切换 -->
    <el-tabs v-model="active" class="custom-tabs" @tab-change="tabChange">
      <el-tab-pane label="收货地址列表" name="0" />
      <el-tab-pane :label="title" name="1" />
    </el-tabs>
    <!-- 地址列表 -->
    <div v-show="active == '0'" class="address-list">
      <el-card
        v-for="val in list"
        :key="val.id"
        :class="{ 'is-default': val.defaultFlag == 1 }"
        class="address-card"
        shadow="hover"
      >
        <div class="address-content">
          <div class="address-title">
            {{ val.addressName }}
          </div>
          <div class="address-header">
            <div class="address-detail">
              
              <span class="address-text">{{ val.a }}</span>
            
            </div>
          </div>
          
          <div class="address-info">
            <div class="contact-info">
              <el-icon>
                <User />
              </el-icon>
              <span>{{ val.name }}</span>
              <el-icon class="ml-3">
                <Phone />
              </el-icon>
              <span>{{ val.phone }}</span>
              <span v-if="val.defaultFlag == 1" class="default-badge">
                <el-icon><StarFilled /></el-icon>
                默认
              </span>
            </div>
            
            <div class="action-buttons">
              <el-button link type="primary" @click.stop="handleSelect(val)">
                <el-icon><Select /></el-icon>
                选择
              </el-button>
              <el-button link type="warning" @click.stop="handleUpdate(val)">
                <el-icon>
                  <Edit />
                </el-icon>
                编辑
              </el-button>
              <el-button link type="danger" @click.stop="handleDel(val)">
                <el-icon>
                  <Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </div>
          
          <div v-if="val.defaultFlag != 1" class="default-actions">
            <el-button size="small" text type="primary" @click.stop="handleDefault(val)">
              设为默认地址
            </el-button>
          </div>
        </div>
      </el-card>
      
      <el-empty v-if="list.length == 0" description="暂无收货地址" />
    </div>
    
    <!-- 表单 -->
    <div v-show="active == '1'" class="address-form">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" label-width="80px">
        <el-form-item label="收货人" prop="name">
          <el-input v-model.trim="form.name" clearable placeholder="请输入收货人姓名" size="large" />
        </el-form-item>
        
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model.trim="form.phone" clearable placeholder="请输入手机号码" size="large" />
        </el-form-item>
        <el-form-item label="省市区" prop="cascader">
          <el-cascader
            ref="cascaderA"
            v-model.trim="form.cascader"
            :options="options"
            :props="defaultProps"
            placeholder="请选择"
            style="width: 100%;"
            @change="changeCascader"
          />
        </el-form-item>
        
        <el-form-item label="详细地址" prop="a">
          <el-input
            v-model.trim="form.a"
            maxlength="100"
            placeholder="请输入详细地址"
            rows="4"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        
        <div class="form-actions">
          <el-button size="large" type="primary" @click="handelSubmit">
            <el-icon>
              <Check />
            </el-icon>
            保存地址
          </el-button>
          <el-button size="large" @click="handelClose">
            <el-icon>
              <Close />
            </el-icon>
            取消
          </el-button>
        </div>
      </el-form>
    </div>
  
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { addMyAddress, editMyAddress, getDefaultAddress, listAPI, postAddressDel, setDefault } from '@/api/address'
import { StarFilled, User, Phone, Select, Edit, Delete, Check, Close } from '@element-plus/icons-vue'
import { regionsList } from '@/api/system/userInfo'

const props = defineProps({
  select: {
    type: String,
    default: '0'
  },
  type: {
    type: String,
    default: '0'
  }
})
const emit = defineEmits(['handelSelect'])
const active = ref('0')
const list = ref([])
const { proxy } = getCurrentInstance()
const options = ref([])
const form = ref({
  id: null,
  cascader: []
})
const defaultProps = {
  children: 'children',
  label: 'text',
  value: 'text'
}
const title = ref('新增收货地址')
const rules = ref({
  name: [{ required: true, trigger: 'blur', message: '请输入收货人姓名' }],
  a: [{ required: true, trigger: 'change', message: '请输入详细地址' }],
  cascader: [{ required: true, trigger: 'change', message: '请选择' }],
  phone: [
    {
      required: true,
      pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ]
})

onMounted(() => {
  initData()
  getAddress()
  addressFn()

  active.value = props.type ?? '0'
})

async function initData() {
  const res = await listAPI()
  list.value = res.rows
  for (const val of list.value) {
    val.addressName = ''
    if (val.province) val.addressName += val.province
    if (val.city) val.addressName += val.city
    if (val.area) val.addressName += val.area
  }
}

async function handleDel(row) {
  await proxy.$modal.confirm('确认删除该地址吗？删除后无法恢复。')
  await postAddressDel(row.id)
  await initData()
  proxy.$modal.msgSuccess('删除成功')
}

function handleUpdate(row) {
  active.value = '1'
  form.value = { ...row }
  form.value.cascader = []
  row.province && form.value.cascader.push(row.province)
  row.city && form.value.cascader.push(row.city)
  row.area && form.value.cascader.push(row.area)
  title.value = '修改收货地址'
}

async function handleDefault(row) {
  await proxy.$modal.confirm('确认将当前地址设为默认地址吗？')
  await setDefault(row.id)
  await initData()
  proxy.$modal.msgSuccess('设置成功')
}

async function getAddress() {
  const res = await getDefaultAddress()
  console.log(res)
}

function handleSelect(row) {
  emit('handelSelect', row)
}

function tabChange(e) {
  active.value = e
  if (e == '0') {
    title.value = '新增收货地址'
    initData()
    handelClose()
  }
  if (e == '1' && title.value == '新增收货地址') {
    form.value = { id: null }
    proxy.$refs['formRef']?.resetFields()
  }
}

function changeCascader(e) {
  console.log(e)
}

async function handelSubmit() {
  await proxy.$refs['formRef'].validate()
  form.value.province = form.value.cascader[0] ?? ''
  form.value.city = form.value.cascader[1] ?? ''
  form.value.area = form.value.cascader[2] ?? ''
  form.value.address = form.value.province + form.value.city + form.value.area + form.value.a
  
  if (form.value.id) {
    await editMyAddress(form.value)
  } else {
    await addMyAddress(form.value)
  }
  // await initData()
  active.value = '0'
  proxy.$modal.msgSuccess('操作成功')
}

function handelClose() {
  proxy.$refs['formRef']?.resetFields()
  form.value = { id: null, cascader: [] }
}

async function addressFn() {
  const res = await regionsList()
  options.value = res.data
  await initData()
}
</script>

<style lang="scss" scoped>
.address-manager {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  .custom-tabs {
    --el-tabs-header-height: 48px;
    margin-bottom: 24px;
    
    :deep(.el-tabs__item) {
      font-size: 16px;
      font-weight: 500;
      padding: 0 20px;
    }
    
    :deep(.el-tabs__active-bar) {
      height: 3px;
      border-radius: 3px;
    }
  }
  
  .address-list {
    .address-card {
      margin-bottom: 20px;
      border-radius: 16px;
      transition: all 0.3s ease;
      border: 1px solid var(--el-border-color-light);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      }
      
      &.is-default {
        border-left: 4px solid var(--el-color-primary);
        background: linear-gradient(120deg, #f8faff 0%, #ffffff 100%);
      }
      
      .address-content {
        .address-title {
          font-size: 13px;
          color: #7f7f86;
          margin-bottom: 5px;
        }
        
        .address-header {
          margin-bottom: 16px;
          padding-bottom: 12px;
          border-bottom: 1px dashed var(--el-border-color-lighter);
          
          .address-detail {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            
            
            .address-text {
              font-size: 15px;
              font-weight: 500;
              color: var(--el-text-color-primary);
              line-height: 1.5;
              flex: 1;
            }
          }
        }
        
        .address-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 16px;
          margin-bottom: 12px;
          
          .contact-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--el-text-color-regular);
            background: var(--el-fill-color-light);
            padding: 6px 16px;
            border-radius: 24px;
            
            .el-icon {
              font-size: 16px;
              color: var(--el-color-primary);
            }
            
            .ml-3 {
              margin-left: 12px;
            }
            
            .default-badge {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              background: linear-gradient(135deg, #e6a23c, #f5d48f);
              color: #fff;
              padding: 2px 10px;
              border-radius: 20px;
              font-size: 12px;
              font-weight: 500;
              
              .el-icon {
                font-size: 14px;
                color: #fff;
              }
            }
          }
          
          .action-buttons {
            display: flex;
            gap: 8px;
            
            .el-button {
              font-size: 13px;
              padding: 5px 12px;
              
              .el-icon {
                margin-right: 4px;
                font-size: 14px;
              }
            }
          }
        }
        
        .default-actions {
          text-align: right;
          padding-top: 8px;
          border-top: 1px solid var(--el-border-color-lighter);
          
          .el-button {
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .address-form {
    background: var(--el-bg-color);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    
    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 24px;
        
        .el-form-item__label {
          font-weight: 500;
          font-size: 14px;
          padding-bottom: 8px;
        }
      }
    }
    
    .form-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-top: 32px;
      padding-top: 16px;
      border-top: 1px solid var(--el-border-color-lighter);
      
      .el-button {
        min-width: 120px;
        
        .el-icon {
          margin-right: 6px;
        }
      }
    }
  }
}
</style>