<template>
  <el-header>
      <Header />
    </el-header>
    <div class="delivery-container">
        <el-row class="send-container">
          <el-row class="panel send-panel send-panel1">
            <el-row class="send-container">
              <el-button class="send-btn">寄</el-button>
              <el-row>
                <el-button @click="openAddressBook">地址簿</el-button>
                <el-button>智能填写</el-button>
              </el-row>
            </el-row>
            <el-form ref="senderFormRef" label-width="auto" class="form" :model="form.sender" :rules="rules.sender">
              <el-form-item label="姓名" prop="senderName">
                <el-input v-model="form.sender.senderName" placeholder="请填写发件人姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="senderPhone">
                <el-input v-model="form.sender.senderPhone" placeholder="请填写发件人联系电话"></el-input>
              </el-form-item>
              <el-form-item label="省市区" prop="senderProvince">
                <el-cascader
                      :options="options"
                      v-model="form.sender.senderProvince"
                      :props="{ value: 'value', label: 'label', children: 'children' }"
                      placeholder="请选择省市区"
                />
              </el-form-item>
              <el-form-item label="详细地址" prop="senderAddress">
                <el-input v-model="form.sender.senderAddress" placeholder="请填写详细地址"></el-input>
              </el-form-item>
              <el-form-item label="公司名称" prop="senderCompany" class="no-asterisk">
                <el-input v-model="form.sender.senderCompany" placeholder="请填写公司名称"></el-input>
              </el-form-item>
            </el-form>
          </el-row>
          <el-image src="src/assets/arrow.png"></el-image>
          <el-row class="panel send-panel send-panel1">
            <el-row class="send-container">
              <el-button class="send-btn receiver-btn">收</el-button>
              <el-row>
                <el-button @click="openAddressBook">地址簿</el-button>
                <el-button>智能填写</el-button>
              </el-row>
            </el-row>
            <el-form ref="receiverFormRef" label-width="auto" class="form" :model="form.receiver" :rules="rules.receiver">
              <el-form-item label="姓名" prop="receiverName">
                <el-input v-model="form.receiver.receiverName" placeholder="请填写收件人姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="receiverPhone">
                <el-input v-model="form.receiver.receiverPhone" placeholder="请填写收件人联系电话"></el-input>
              </el-form-item>
              <el-form-item label="省市区" prop="receiverProvince">
                <el-cascader
                      :options="options"
                      v-model="form.receiver.receiverProvince"
                      :props="{ value: 'value', label: 'label', children: 'children' }"
                      placeholder="请选择省市区"
                />
              </el-form-item>
              <el-form-item label="详细地址" prop="receiverAddress">
                <el-input v-model="form.receiver.receiverAddress" placeholder="请填写详细地址"></el-input>
              </el-form-item>
              <el-form-item label="公司名称" prop="receiverCompany" class="no-asterisk">
                <el-input v-model="form.receiver.receiverCompany" placeholder="请填写公司名称"></el-input>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row class="panel send-panel">
            <el-text class="end-label">寄件方式</el-text>
            <el-radio-group v-model="sendType">
              <el-radio :value="0" size="large">预约上门取件</el-radio>
              <el-radio :value="1" size="large">自行联系快递员</el-radio>
            </el-radio-group>
          </el-row>
          <el-row class="panel send-panel">
            <el-button class="confirm-btn" @click="submitForm">下单</el-button>
          </el-row>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入路由相关的函数
import addressList from '../../assets/addressList.js';

const formatCityData = (arr) => {
  return arr.map(item => ({
      value: item.name,
      label: item.name,
      children: item.sub && item.sub.length > 0 ? formatCityData(item.sub) : []
  }));
};

const options = ref(formatCityData(addressList));

const sendType = ref(0);

// 创建路由实例
const router = useRouter();

// 模拟打开地址簿功能（这里实现跳转到address.vue页面）
const openAddressBook = () => {
  router.push({ name: 'address' }); // 假设address.vue对应的路由路径是'/address'，可根据实际情况修改
};

const form = ref({
  sender: {
    senderName: '',
    senderPhone: '',
    senderProvince: [],
    senderAddress: '',
    senderCompany: ''
  },
  receiver: {
    receiverName: '',
    receiverPhone: '',
    receiverProvince: [],
    receiverAddress: '',
    receiverCompany: ''
  }
});

const rules = ref({
  receiver: {
    receiverName: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    receiverPhone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' }
    ],
    receiverProvince: [
      { required: true, message: '请输入省市区', trigger: 'blur' }
    ],
    receiverAddress: [
      { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
    receiverCompany: [
      { required: false, message: '请输入公司名称', trigger: 'blur' }
    ],
  },
  sender: {
    senderName: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    senderPhone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' }
    ],
    senderProvince: [
      { required: true, message: '请输入省市区', trigger: 'blur' }
    ],
    senderAddress: [
      { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
    senderCompany: [
      { required: false, message: '请输入公司名称', trigger: 'blur' }
    ],
  }
});

const senderFormRef = ref(null);
const receiverFormRef = ref(null);

const submitForm = () => {
  // 这里假设我们先验证发件人表单，如果需要验证收件人表单，可以调用receiverFormRef.value.validate
  if (senderFormRef.value) {
    senderFormRef.value.validate((valid) => {
      if (valid) {
        alert('发件人表单提交成功!');
        // 发件人表单提交逻辑
      } else {
        console.log('发件人表单验证失败!');
        return false;
      }
    });
  }

  // 如果需要同时验证两个表单，可以在这里添加receiverFormRef.value.validate的调用
  if (receiverFormRef.value) {
    receiverFormRef.value.validate((valid) => {
      if (valid) {
        alert('收件人表单提交成功!');
        // 收件人表单提交逻辑
      } else {
        console.log('收件人表单验证失败!');
        return false;
      }
    });
  }
};
</script>

<style>
	.delivery-container {
    padding: 20px;
    margin: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
	.send-container {
	  display: flex;
	  width: 70%;
	  flex-direction: row;
	  justify-content: space-between;
	  margin-top: 10px;
	  align-items: center;
	  margin-left: auto;
	  margin-right: auto; /* 添加这一行 */
	}
	/* 卡片容器样式 */
	.panel {
	  background-color: #f9f9f9; /* 淡雅的背景颜色 */
	  border-radius: 8px; /* 圆角边框 */
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	  padding: 30px;
	  margin-top: 30px;
	  margin-bottom: 20px;
	  width: calc(50% - 20px); /* 设置宽度为容器宽度的一半减去间距 */
	}
	
	
	/* 调整第二个卡片的样式 */
	.send-panel1 {
	  width: calc(50% - 20px); /* 设置宽度为容器宽度的一半减去间距 */
	  align-items: center;
	}
	
	/* 按钮样式 */
	.send-btn {
	  background-color: #333; /* 深灰色背景 */
	  color: white;
	  border-radius: 50%;
	  padding: 10px;
	  margin-right: 10px; /* 添加右边距 */
	}
	
	.receiver-btn {
	  background-color: #d9534f; /* 红色背景 */
	}
	
	/* 表单样式 */
	.form {
	  margin-top: 10px;
	  width: 70%; /* 表单宽度调整为100% */
	}
	
	/* 确认按钮样式 */
	.confirm-btn {
	  background-color: #428bca; /* 蓝色背景 */
	  color: white;
	  padding: 10px 20px; /* 添加内边距 */
	  border: none; /* 去除边框 */
	  border-radius: 5px; /* 圆角边框 */
	  margin-top: 5px;
	  margin-bottom: 5px;
	  cursor: pointer; /* 鼠标悬停时显示指针 */
	}
	
	/* 标签样式 */
	.el-form-item__label {
	  color: #333; /* 标签文字颜色 */
	  font-weight: 500; /* 字体加粗 */
	}
	.end-label {
	  font-weight: 600;
	  align-self: flex-start;
	  margin-right: 40px;
	  margin-top: 10px;
	}
	.el-form-item__label::before {
	  content: '*';
	  color: red;
	  margin-right: 4px;
	}
	.el-form-item.no-asterisk .el-form-item__label::before {
	    content: none;
	}
</style>