<template>
  <div class="personal-shipping-container">
    <div class="page-header">
      <h2 class="page-title">个人寄件物流公司选择</h2>
      <!--      <p class="page-description">请选择您要使用的物流服务</p>-->
    </div>

    <div class="logistics-company-list">

      <!-- 京东物流 -->
      <div class="company-card" :class="{ 'selected': selectedCompany === 'jd' }" @click="selectCompany('jd')">
        <div class="company-header">
          <div class="company-logo jd-logo">
            <img src="../../../assets/images/logo-jd.png"/>
          </div>
          <div class="company-name">
            <h3>京东物流</h3>
          </div>
          <div class="selection-indicator" v-if="selectedCompany === 'jd'">
            <!--            <el-icon color="#409EFF" size="24">-->
            <!--              <Select />-->
            <!--            </el-icon>-->
          </div>
        </div>

        <div class="company-intro">
          <span>京东物流提供快速、可靠的快递服务，依托京东强大的物流网络，覆盖全国各级城市，支持上门取件、快递跟踪等全方位服务，满足个人寄件需求。</span>
        </div>

        <div class="company-footer">
          <el-button type="primary" @click.stop="goToJDWebsite" class="jump-btn">
            点击跳转
          </el-button>
        </div>
      </div>

      <!-- 顺丰物流 -->
      <div class="company-card" :class="{ 'selected': selectedCompany === 'sf' }" @click="selectCompany('sf')">
        <div class="company-header">
          <div class="company-logo sf-logo">
            <img src="../../../assets/images/logo-sf.png"/>
          </div>
          <div class="company-name">
            <h3>顺丰物流</h3>
            <!--            <el-tag type="success" size="small" class="recommend-tag">推荐</el-tag>-->
          </div>
          <div class="selection-indicator" v-if="selectedCompany === 'sf'">
<!--            <el-icon color="#409EFF" size="24">-->
<!--              <Select />-->
<!--            </el-icon>-->
          </div>
        </div>

        <div class="company-intro">
          <span>顺丰物流提供高效、安全、便捷的快递服务，覆盖全国各大城市，支持次日达、隔日达等多种时效选择，是个人寄件的优质选择。</span>
        </div>

        <div class="company-footer">
          <el-button type="primary" @click.stop="goToSFWebsite" class="jump-btn">
            点击跳转
          </el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Select, ArrowRight, InfoFilled } from '@element-plus/icons-vue'

// 选中的物流公司
const selectedCompany = ref('')
const confirmDialogVisible = ref(false)

// 选择物流公司
const selectCompany = (company) => {
  selectedCompany.value = company
  if(company === 'sf'){
    goToSFWebsite()
  }else {
    goToJDWebsite()
  }
  // ElMessage.success(`已选择${company === 'sf' ? '顺丰物流' : '京东物流'}`)
}

// 跳转到顺丰物流网站
const goToSFWebsite = () => {
  // 实际项目中这里应该是顺丰物流的跳转链接
  window.open('https://www.sf-express.com', '_blank')
}

// 跳转到京东物流网站
const goToJDWebsite = () => {
  // 实际项目中这里应该是京东物流的跳转链接
  window.open('https://www.jdl.cn', '_blank')
}

// 确认选择
const confirmSelection = () => {
  if (!selectedCompany.value) {
    ElMessage.warning('请先选择物流公司')
    return
  }

  confirmDialogVisible.value = true
}

// 重置选择
const resetSelection = () => {
  if (selectedCompany.value) {
    ElMessageBox.confirm('确定要重置选择的物流公司吗？', '重置确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
        .then(() => {
          selectedCompany.value = ''
          ElMessage.info('已重置选择')
        })
        .catch(() => {
          // 用户取消操作
        })
  } else {
    ElMessage.info('当前未选择任何物流公司')
  }
}

// 处理对话框关闭
const handleDialogClose = (done) => {
  ElMessageBox.confirm('确定要取消选择吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        done()
      })
      .catch(() => {
        // 用户取消操作
      })
}

// 跳转到物流公司寄件页面
const proceedToShipping = () => {
  confirmDialogVisible.value = false

  // 模拟跳转逻辑
  ElMessage.success(`正在跳转到${selectedCompanyText.value}寄件页面...`)

  // 实际项目中这里应该是路由跳转或打开新页面
  setTimeout(() => {
    if (selectedCompany.value === 'sf') {
      window.open('https://www.sf-express.com/cn/sc/dynamic_function/waybill/waybill_standard/', '_blank')
    } else if (selectedCompany.value === 'jd') {
      window.open('https://www.jdl.cn/#/', '_blank')
    }
  }, 1000)
}

// 计算选中的物流公司文本
const selectedCompanyText = computed(() => {
  return selectedCompany.value === 'sf' ? '顺丰物流' :
      selectedCompany.value === 'jd' ? '京东物流' : ''
})
</script>

<style scoped>
.personal-shipping-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  background: #F5F7FA;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

.page-title {
  font-size: 40px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.page-description {
  font-size: 16px;
  color: #666;
}

.logistics-company-list {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin-bottom: 40px;
}

.company-card {
  width: 432px;
  height: 270px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid transparent;
}

.company-card:hover {
  //border-color: #c0e0ff;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.company-card.selected {
  //border-color: #409EFF;
  //background-color: #f5f9ff;
}

.company-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.company-logo {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-weight: bold;
  font-size: 22px;
  color: white;
  img{
    width: 60px;
    height: 60px;
  }
}

.sf-logo {
  width: 60px;
  height: 60px;
  /*background: linear-gradient(135deg, #1e5dd9, #2a7fff);*/
}

.jd-logo {
  width: 60px;
  height: 60px;
  /*background: linear-gradient(135deg, #e6181c, #ff3b30);*/
}

.company-name {
  flex: 1;
  display: flex;
  align-items: center;
}

.company-name h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0 15px 0 0;
}

.recommend-tag {
  font-size: 12px;
}

.selection-indicator {
  color: #409EFF;
}

.company-intro {
  flex: 1;
  overflow: hidden;
  margin-bottom: 20px;
}

.company-intro span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 24px;
  text-align: left;
}

.company-footer {
  flex-shrink: 0;
  text-align: center;
  margin-top: auto;
}

.jump-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
  border-top: 1px solid #eaeaea;
}

.confirm-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.confirm-icon {
  margin-bottom: 20px;
}

.selected-company-name {
  color: #409EFF;
  font-weight: bold;
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .logistics-company-list {
    flex-direction: column;
    align-items: center;
  }

  .company-card {
    width: 100%;
    max-width: 432px;
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .personal-shipping-container {
    padding: 15px;
  }

  .page-title {
    font-size: 24px;
  }

  .logistics-company-list {
    gap: 20px;
  }

  .company-card {
    padding: 20px;
    height: 250px;
  }

  .company-logo {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }

  .company-logo img {
    width: 50px;
    height: 50px;
  }

  .company-name h3 {
    font-size: 18px;
  }
}
</style>