<template>
  <div class="create-pages">
    <div class="create-bos">
      <div class="create-title flex-row-start">
        <el-icon color="#101828" size="16"><Document /></el-icon>
        <div style="margin-left: 6px">确认订单信息</div>
      </div>
      <div class="create-head flex-row-start">
        <span>中国南方电网有限公司</span>
        <span class="border"></span>
        <span>某某部门</span>
      </div>
      <div class="address-title">收货地址</div>
      <div class="address-bos">
        <div v-for="(item, index) in 4" :key="index" class="address-list flex-column-between" :class="index == 0 ? 'hig' : ''">
          <div class="address1">广东省 广州市 萝岗区科学城11号</div>
          <div class="address2">中国南方电网有限公司</div>
          <div class="address3">18062697722</div>
        </div>
      </div>
      <div class="address-more flex-row-start">
        <div>展开全部地址</div>
        <el-icon style="margin-left: 6px" color="#6A7282" size="14"><ArrowDown /></el-icon>
      </div>
      <div class="form-bos">
        <div class="form-title flex-row-start">
          <div class="asterisk">*</div>
          <div>配送时间</div>
        </div>
        <el-date-picker style="width: 340px" v-model="form.value1" type="date" placeholder="选择日期" />
      </div>
      <div class="form-bos">
        <div class="form-title flex-row-start">
          <div class="asterisk">*</div>
          <div>费用类型</div>
        </div>
        <el-select v-model="form.value2" placeholder="请选择费用类型" style="width: 340px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="form-bos">
        <div class="form-title flex-row-start">
          <div class="asterisk">*</div>
          <div>采购事由</div>
        </div>
        <el-input
          :maxlength="50"
          v-model="form.value3"
          style="width: 340px"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          show-word-limit
          placeholder="请输入采购事由"
        />
      </div>
      <div class="form-bos">
        <div class="form-title flex-row-start">
          <div class="asterisk"></div>
          <div>订单备注</div>
        </div>
        <el-input
          :maxlength="50"
          v-model="form.value3"
          style="width: 340px"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          show-word-limit
          placeholder="请输入订单备注"
        />
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          color: '#1D2129',
          backgroundColor: '#F2F3F5',
          fontWeight: 'normal'
        }"
      >
        <el-table-column label="商品信息" width="490">
          <template #default="scope">
            <div class="cart-info">
              <img class="cart-img" src="@/assets/images/login-background.jpg" alt="" />
              <div class="cart-text">
                <div class="text1">清华同方超越E500台式机电脑超越E500台式机电脑(i3-6100/4G/1T/19.5寸)</div>
                <div class="text2">
                  <span>规格01</span>
                  <span>规格02</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="150">
          <template #default="scope"> ¥1,299 </template>
        </el-table-column>
        <el-table-column label="数量" width="160">
          <template #default="scope"> 1 </template>
        </el-table-column>
        <el-table-column label="小计" width="160">
          <template #default="scope"> ¥1,299 </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-button link> 移入收藏 </el-button>
            </div>
            <div>
              <el-button link> 删除 </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="create-foot">
      <div class="foot-bos flex-row-between">
        <div></div>
        <div class="foot-box flex-column-between">
          <div class="flex-row-between" style="width: 100%">
            <div>商品件数</div>
            <div>6</div>
          </div>
          <div class="flex-row-between" style="width: 100%">
            <div>商品总额</div>
            <div>¥1,299</div>
          </div>
          <div class="foot-yun flex-row-between">
            <div>运费</div>
            <div>¥48</div>
          </div>
          <div class="flex-row-between" style="width: 100%">
            <div>共计</div>
            <div class="zhu">¥1,299</div>
          </div>
          <div class="flex-row-between" style="width: 100%">
            <div></div>
            <div class="bnt-bos">
              <el-button class="bnt1">返回购物车修改</el-button>
              <el-button class="bnt2" type="primary">提交订单</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const form = ref<any>({
  value1: '',
  value2: '',
  value3: '',
  value4: ''
});
const tableData = ref<any>([{}, {}, {}, {}]);
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
];
</script>

<style lang="scss" scoped>
.create-pages {
  width: 100%;
  background-color: #ffffff;
  .create-bos {
    width: 1200px;
    margin: 0 auto;
    .create-title {
      font-size: 16px;
      color: #101828;
      padding-top: 16px;
    }
    .create-head {
      width: 1200px;
      height: 40px;
      background: #f9fafb;
      margin-top: 10px;
      font-weight: 600;
      font-size: 14px;
      color: #101828;
      padding-left: 10px;
      .border {
        display: inline-block;
        width: 1px;
        height: 12px;
        background-color: #e5e7eb;
        margin: 0 10px;
      }
    }
    .address-title {
      font-weight: 600;
      font-size: 14px;
      color: #101828;
      margin: 30px 0 10px 0;
    }
    .address-bos {
      display: flex;
      gap: 10px 12px;
      .address-list {
        width: 291px;
        height: 92px;
        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #e5e7eb;
        padding: 12px;
        cursor: pointer;
        &.hig {
          border: 1px solid #e7000b;
        }
        .address1 {
          font-size: 14px;
          color: #364153;
        }
        .address2 {
          font-size: 14px;
          color: #101828;
        }
        .address3 {
          font-size: 14px;
          color: #364153;
        }
      }
    }
    .address-more {
      font-size: 14px;
      color: #6a7282;
      margin: 10px 0 30px 0;
    }
    .form-bos {
      margin-bottom: 20px;
      display: flex;
      align-items: start;
      .form-title {
        font-size: 14px;
        color: #1d2129;
        width: 80px;
        .asterisk {
          color: #f53f3f;
          width: 10px;
        }
      }

      :deep(.el-select__wrapper) {
        border: none;
        /* 可选：去除聚焦时的高亮 */
        box-shadow: none;
        outline: none;
        background: #f4f6f8;
      }
      :deep(.el-input__wrapper) {
        border: none;
        /* 可选：去除聚焦时的高亮 */
        box-shadow: none;
        outline: none;
        background: #f4f6f8;
      }
      :deep(.el-textarea__inner) {
        border: none;
        /* 可选：去除聚焦时的高亮 */
        box-shadow: none;
        outline: none;
        background: #f4f6f8;
      }
    }
    .cart-info {
      width: 490px;
      height: 94px;
      display: flex;
      .cart-img {
        width: 94px;
        height: 94px;
        border-radius: 6px;
      }
      .cart-text {
        flex: 1;
        width: 0;
        padding-left: 10px;
        .text1 {
          font-size: 14px;
          color: #000000;
          height: 50px;
        }
        .text2 {
          font-size: 14px;
          color: #364153;
          span {
            margin-right: 10px;
          }
        }
        .text3 {
          font-size: 14px;
          color: #e7000b;
        }
      }
    }
  }
  .create-foot {
    width: 100%;
    height: 245px;
    background: #ffffff;
    box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
    .foot-bos {
      width: 1200px;
      margin: 0 auto;
      .foot-box {
        width: 458px;
        font-weight: 600;
        font-size: 14px;
        color: #101828;
        padding: 18px 0 20px 0;
        height: 245px;
        .foot-yun {
          width: 100%;
          height: 40px;
          background: #f7f8fc;
          border-radius: 10px;
          padding: 0 10px;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
        }
        .zhu {
          color: #e7000b;
        }
        .bnt1 {
          width: 198px;
          height: 50px;
          background: #f7f8fa;
        }
        .bnt2 {
          width: 156px;
          height: 50px;
        }
      }
    }
  }
}
</style>
