<template>
  <div class="main">
    <div class="banner">
      <div class="order-information">
        <div class="header">接单中心</div>
        <div class="condition-scarch">
          <ul>
            <li>
              <div class="label">收货地址：</div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择地址信息"
                style="width: 1.875rem; margin-right: 0.0781rem"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input style="width: 1.4583rem" v-model="input" placeholder="详细地址街道..." />
              <div class="search-btn">收索</div>
            </li>
            <li>
              <div class="label">成交价：</div>
              <div class="price-whel">
                <div tabindex="1">不限</div>
                <div tabindex="2">100元以下</div>
                <div tabindex="3">100-200元</div>
                <div tabindex="4">200-300元</div>
                <div tabindex="5">300-400元</div>
                <div tabindex="6">400元以上</div>
              </div>
            </li>
            <li>
              <div class="label">收货时间：</div>
              <div class="price-whel">
                <div tabindex="1">不限</div>
                <div tabindex="2">今天</div>
                <div tabindex="3">1-3天</div>
                <div tabindex="4">4-7天</div>
                <div tabindex="6">1周以上</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="tabs">
        <div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">综合排序</div>
        <div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">按配送时间</div>
        <div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">按下单时间</div>
        <div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="active = 3">
          按订单金额
          <div v-if="active == 3" class="sort-box">
            <div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="activeSort = 0">
              <el-icon><CaretTop /></el-icon>
            </div>
            <div @click="activeSort = 1" :class="activeSort == 1 ? 'descending active-sort' : 'descending'">
              <el-icon><CaretBottom /></el-icon>
            </div>
          </div>
          <div v-else class="sort-box">
            <div class="ascending-orde">
              <el-icon><CaretTop /></el-icon>
            </div>
            <div class="descending">
              <el-icon><CaretBottom /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="line-items">
        <div class="item-box">
          <div class="item" @click="goToOrderDetails(1)">
            <div class="header">
              <div class="top">
                <div class="address">【北京市 昌平区】北京花乐康语花艺</div>
                <div class="time">接单中</div>
              </div>
              <div class="bottom">
                信用分<span
                  ><el-icon><QuestionFilled /></el-icon></span
                >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
              </div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">会员名称：<span class="time">北京花乐康语花艺</span></div>
                </div>
                <div class="goods-type">
                  <div class="label">联系电话：<span class="type">{{ hidePhoneNumber('17634529377') }}</span></div>
                </div>
                <div class="content">
                  <div class="label">客服QQ：<span class="number">{{ hideQQ('5021314') }}</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">近3月接单量：<span class="information">61</span></div>
                </div>
                <div class="order-description">
                  <div class="label">撤单量：<span class="description">1355</span></div>
                </div>
                <div class="contact-address">
                  <div class="contact-address-txt">店铺地址：</div>
                  <div class="address">立水桥地铁站附近</div>
                  <div class="icon">
                    <el-icon><MapLocation /></el-icon>
                  </div>
                  <div class="map">查看地图</div>
                </div>
              </div>
              <div class="submit-box">
                <div class="title">6天前接单</div>
                <div class="box">
                  <div class="submit-information">在线资讯</div>
                  <div class="submit">立即报价</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="header">
              <div class="top">
                <div class="address">【北京市 昌平区】北京花乐康语花艺</div>
                <div class="time">接单中</div>
              </div>
              <div class="bottom">
                信用分<span
                  ><el-icon><QuestionFilled /></el-icon></span
                >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
              </div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">会员名称：<span class="time">北京花乐康语花艺</span></div>
                </div>
                <div class="goods-type">
                  <div class="label">联系电话：<span class="type">{{ hidePhoneNumber('17634529377') }}</span></div>
                </div>
                <div class="content">
                  <div class="label">客服QQ：<span class="number">{{ hideQQ('5021314') }}</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">近3月接单量：<span class="information">61</span></div>
                </div>
                <div class="order-description">
                  <div class="label">撤单量：<span class="description">1355</span></div>
                </div>
                <div class="contact-address">
                  <div class="contact-address-txt">店铺地址：</div>
                  <div class="address">立水桥地铁站附近</div>
                  <div class="icon">
                    <el-icon><MapLocation /></el-icon>
                  </div>
                  <div class="map">查看地图</div>
                </div>
              </div>
              <div class="submit-box">
                <div class="title">6天前接单</div>
                <div class="box">
                  <div class="submit-information">在线资讯</div>
                  <div class="submit">立即报价</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="header">
              <div class="top">
                <div class="address">【北京市 昌平区】北京花乐康语花艺</div>
                <div class="time">接单中</div>
              </div>
              <div class="bottom">
                信用分<span
                  ><el-icon><QuestionFilled /></el-icon></span
                >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
              </div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">会员名称：<span class="time">北京花乐康语花艺</span></div>
                </div>
                <div class="goods-type">
                  <div class="label">联系电话：<span class="type">{{ hidePhoneNumber('17634529377') }}</span></div>
                </div>
                <div class="content">
                  <div class="label">客服QQ：<span class="number">{{ hideQQ('5021314') }}</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">近3月接单量：<span class="information">61</span></div>
                </div>
                <div class="order-description">
                  <div class="label">撤单量：<span class="description">1355</span></div>
                </div>
                <div class="contact-address">
                  <div class="contact-address-txt">店铺地址：</div>
                  <div class="address">立水桥地铁站附近</div>
                  <div class="icon">
                    <el-icon><MapLocation /></el-icon>
                  </div>
                  <div class="map">查看地图</div>
                </div>
              </div>
              <div class="submit-box">
                <div class="title">6天前接单</div>
                <div class="box">
                  <div class="submit-information">在线资讯</div>
                  <div class="submit">立即报价</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="header">
              <div class="top">
                <div class="address">【北京市 昌平区】北京花乐康语花艺</div>
                <div class="time">接单中</div>
              </div>
              <div class="bottom">
                信用分<span
                  ><el-icon><QuestionFilled /></el-icon></span
                >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
              </div>
            </div>
            <div class="order-info">
              <div class="image">
                <div class="tag">普通订单</div>
              </div>
              <div class="iine-info">
                <div class="receipt-time">
                  <div class="label">会员名称：<span class="time">北京花乐康语花艺</span></div>
                </div>
                <div class="goods-type">
                  <div class="label">联系电话：<span class="type">{{ hidePhoneNumber('17634529377') }}</span></div>
                </div>
                <div class="content">
                  <div class="label">客服QQ：<span class="number">{{ hideQQ('5021314') }}</span></div>
                </div>
                <div class="audit-information">
                  <div class="label">近3月接单量：<span class="information">61</span></div>
                </div>
                <div class="order-description">
                  <div class="label">撤单量：<span class="description">1355</span></div>
                </div>
                <div class="contact-address">
                  <div class="contact-address-txt">店铺地址：</div>
                  <div class="address">立水桥地铁站附近</div>
                  <div class="icon">
                    <el-icon><MapLocation /></el-icon>
                  </div>
                  <div class="map">查看地图</div>
                </div>
              </div>
              <div class="submit-box">
                <div class="title">6天前接单</div>
                <div class="box">
                  <div class="submit-information">在线资讯</div>
                  <div class="submit">立即报价</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-panner">
            <div class="right-panner-item">
          <div class="title">
            <div class="left">推荐花店</div>
            <div class="right">我要出现在这里</div>
          </div>
          <div class="img">
            <div class="tip">【浙江省 宁波市 鄞州区】</div>
          </div>
          <div class="info">
            <div class="order-name">圆梦鲜花店</div>
            <div class="credit-score">
              信用分<span
                ><el-icon><QuestionFilled /></el-icon></span
              >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
            </div>
            <div class="contact-number">联系电话：{{ hidePhoneNumber('17634529377')  }}</div>
            <div class="information-secur">
                <div class="information">证照信息</div>
                <div class="secur">服务保障</div>
            </div>
            <div class="information-ordering">
                <div class="information">在线咨询</div>
                <div class="ordering">下单给TA</div>
            </div>
          </div>
        </div>
        <div class="right-panner-item">
          <div class="title">
            <div class="left">推荐花店</div>
            <div class="right">我要出现在这里</div>
          </div>
          <div class="img">
            <div class="tip">【浙江省 宁波市 鄞州区】</div>
          </div>
          <div class="info">
            <div class="order-name">圆梦鲜花店</div>
            <div class="credit-score">
              信用分<span
                ><el-icon><QuestionFilled /></el-icon></span
              >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
            </div>
            <div class="contact-number">联系电话：{{  hidePhoneNumber('17634529377')  }}</div>
            <div class="information-secur">
                <div class="information">证照信息</div>
                <div class="secur">服务保障</div>
            </div>
            <div class="information-ordering">
                <div class="information">在线咨询</div>
                <div class="ordering">下单给TA</div>
            </div>
          </div>
        </div>
        <div class="right-panner-item">
          <div class="title">
            <div class="left">推荐花店</div>
            <div class="right">我要出现在这里</div>
          </div>
          <div class="img">
            <div class="tip">【浙江省 宁波市 鄞州区】</div>
          </div>
          <div class="info">
            <div class="order-name">圆梦鲜花店</div>
            <div class="credit-score">
              信用分<span
                ><el-icon><QuestionFilled /></el-icon></span
              >:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
            </div>
            <div class="contact-number">联系电话：{{ hidePhoneNumber('17634529377') }}</div>
            <div class="information-secur">
                <div class="information">证照信息</div>
                <div class="secur">服务保障</div>
            </div>
            <div class="information-ordering">
                <div class="information">在线咨询</div>
                <div class="ordering">下单给TA</div>
            </div>
          </div>
        </div>
        </div>

      </div>
      <div class="page">
        <div style="display: flex; justify-content: center">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
        <div class="txt">为了提高查询效率，仅显示近期订单</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { CaretTop, CaretBottom, MapLocation, QuestionFilled } from '@element-plus/icons-vue'
import {linkNavigateTo} from '~/utils/util'
import { hidePhoneNumber,hideQQ } from '~/utils/validate'
import { useCounterStore } from '@/stores/nav'
const userIndex = useCounterStore()
onMounted(() => {
  userIndex.increment(5)
})
const value = ref('')
const active = ref(0)
const input = ref('')
const activeSort = ref(0)
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
//跳转订单详情
const goToOrderDetails = (floristId :number) => {
    linkNavigateTo('/homeIndex/orderdetails',{floristId})
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  .banner {
    width: 6.25rem;
    margin: 0 auto;
    .order-information {
      width: 100%;
      // height: 3.4896rem;
      margin-top: 0.026rem;
      background-color: #fff;
      .header {
        // background-color: #f3f4f8;
        height: 0.2083rem;
        color: #252b3a;
        font-size: 0.0833rem;
        line-height: 0.2083rem;
        padding: 0 0.2604rem;
        display: flex;
        align-items: center;
        font-weight: 700;
        border-bottom: 1px solid #e1e1e3;
      }
      .header::before {
        content: ' ';
        display: block;
        background-color: #ff4e8d;
        width: 0.0156rem;
        height: 0.0833rem;
        margin-right: 0.026rem;
      }
      .condition-scarch {
        padding: 0.1042rem 0.3542rem;
        ul {
          li {
            list-style: none;
            display: flex;
            align-items: center;
            color: #252b3a;
            font-size: 0.0729rem;
            margin: 0.1042rem 0;
            .label {
              width: 0.3646rem;
              text-align: right;
            }
            .search-btn {
              width: 0.4167rem;
              height: 0.1771rem;
              color: #fff;
              text-align: center;
              font-size: 0.0729rem;
              line-height: 0.1771rem;
              border-radius: 0.1042rem;
              background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
              margin-left: 0.0521rem;
              cursor: pointer;
            }
            .price-whel {
              display: flex;
              align-items: center;
              div {
                margin-right: 0.2135rem;
                cursor: pointer;
              }
              // div:focus,
              // div:hover {
              //   color: #ff4e8d;
              // }
            }
          }
        }
      }
    }
    .tabs {
      width: 100%;
      height: 0.2083rem;
      background-color: #fff;
      display: flex;
      margin-top: 0.2344rem;
      margin-bottom: 0.1302rem;
      .standard {
        width: 0.7292rem;
        height: 100%;
        color: #252b3a;
        font-size: 0.0729rem;
        text-align: center;
        line-height: 0.2083rem;
        border-radius: 0.0313rem;
        cursor: pointer;
      }
      .active {
        color: #fff;
        background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      }
      .sort {
        display: flex;
        justify-content: center;
        .sort-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left: 0.0365rem;
          color: #b1b6c1;
          div {
            line-height: 0;
            display: inline-block;
          }
          .active-sort {
            color: #fff;
          }
          .descending {
            margin-top: -5px;
          }
        }
      }
    }
    .line-items {
      margin-top: 0.1719rem;
      display: flex;
      justify-content: space-between;
      .item-box {
      }
      .item {
        width: 4.6042rem;
        padding: 0.1042rem;
        background-color: #fff;
        // margin: 0.0521rem 0;
        margin-bottom: .1042rem;
        .header {
          .top {
            display: flex;
          }
          .address {
            // width: 2.8125rem;
            color: #252b3a;
            font-size: 0.0833rem;
            font-weight: 600;
          }
          .time {
            color: #8a8e99;
            font-size: 0.0625rem;
            background-color: #fceced;
            width: 0.2604rem;
            height: 0.099rem;
            color: #ff4e8d;
            text-align: center;
            line-height: 0.099rem;
            margin-left: 0.0521rem;
          }
          .bottom {
            padding: 0.0521rem;
            color: #111213;
            font-size: 0.0625rem;
            display: flex;
            align-items: center;
            span {
              color: #8a8e99;
            }
            .grade {
              display: inline-block;
              width: 0.0938rem;
              height: 0.0938rem;
              background-color: #2cd097;
              color: #fff;
              text-align: center;
              line-height: 0.0938rem;
              border-radius: 50%;
              font-size: 0.0625rem;
            }
          }
        }
        .order-info {
          border-top: 1px dashed #aaa;
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 0.0781rem 0 0 0.0521rem;
          .image {
            width: 0.8333rem;
            height: 0.8333rem;
            background-color: #d9d9d9;
            position: relative;
            .tag {
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 0.125rem;
              color: #fff;
              text-align: center;
              line-height: 0.125rem;
              background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
            }
          }
          .iine-info {
            //   width: 4.1667rem;
            flex: 1;
            margin-left: 0.1042rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .label {
              color: #8a8e99;
              font-size: 0.0625rem;
            }
            .receipt-time {
              .time {
                color: #ff4e8d;
                font-size: 0.0729rem;
                // font-weight: 600;
                margin-right: 0.1042rem;
              }
            }
            .goods-type {
              .type {
                color: #252b3a;
              }
            }
            .content {
              .number {
                color: #ff4e8d;
                font-size: 0.0729rem;
                font-weight: 600;
              }
            }
            .audit-information {
              .information {
                color: #252b3a;
              }
            }
            .order-description {
              .description {
                color: #252b3a;
              }
            }
            .contact-address {
              display: flex;
              align-items: center;
              .contact-address-txt {
                color: #8a8e99;
              }
              .icon {
                font-size: 14px;
                color: #dd323c;
                margin-left: 0.0521rem;
              }
              .map {
                font-size: 0.0625rem;
                color: #8a8e99;
              }
            }
          }
          .submit-box {
            // height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 0.2604rem;
            .box {
              display: flex;
              align-items: center;
            }
            .title {
              color: #ff4e8d;
              font-weight: 600;
              font-size: 0.0729rem;
              text-align: end;
            }

            .submit {
              width: 0.5833rem;
              height: 0.1667rem;
              color: #fff;
              text-align: center;
              line-height: 0.1667rem;
              background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
              border-radius: 0.026rem;
              margin-left: 0.0521rem;
            }
            .submit-information {
              background-color: #fff;
              border-radius: 0.026rem;
              border: 1px solid #ff4e8d;
              color: #ff4e8d;
              height: 0.1667rem;
              line-height: 0.1667rem;
              text-align: center;
              width: 0.4688rem;
            }
          }
        }
      }
      .right-panner-item {
        padding: 0.1042rem 0.1302rem;
        width: 1.6146rem;
        height: 2.6042rem;
        background-color: #fff;
        margin-bottom: .1042rem;
        .title {
          display: flex;
          justify-content: space-between;

          .left {
            color: #252b3a;
            font-size: 16px;
          }
          .right {
            color: #ff94d4;
            font-size: 0.0625rem;
            display: flex;
            align-items: center;
          }
          .right::after {
            content: ' ';
            display: block;
            width: 0.0625rem;
            height: 0.0625rem;
            background-color: #ff4e8d;
            margin-left: 0.026rem;
          }
        }
        .img {
          position: relative;
          width: 1.3542rem;
          height: 1.3542rem;
          background-color: #d9d9d9;
          margin-top: 0.1042rem;
          .tip {
            width: 100%;
            position: absolute;
            bottom: 0;
            height: 0.1875rem;
            background-color: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            font-size: 0.0729rem;
            text-align: center;
            line-height: 0.1875rem;
          }
        }
        .info {
          .order-name {
            color: #252b3a;
            font-size: 0.0833rem;
            margin-top: .0521rem;
          }
          .credit-score {
            color: #111213;
            font-size: 0.0625rem;
            display: flex;
            align-items: center;
            margin: .0521rem 0;
            span {
              color: #8a8e99;
            }
            .grade {
              display: inline-block;
              width: 0.0938rem;
              height: 0.0938rem;
              background-color: #ff4e8d;
              color: #fff;
              text-align: center;
              line-height: 0.0938rem;
              border-radius: 50%;
              font-size: 0.0625rem;
            }
          }
          .contact-number{
            color: #111213;
            font-size: 0.0625rem;
          }
          .information-secur{
            display: flex;
            margin-top: .0885rem;
            div{
                width: .4271rem;
                height: .099rem;
                font-size: .0625rem;
                text-align: center;
                line-height: .099rem;
            }
            .information{
                color: #D90E19;
                border: 1px solid #D90E19;
            }
            .secur{
                color: #43A7E5;
                border: 1px solid #43A7E5;
                margin-left: 10px;
            }
          }
          .information-ordering{
            margin-top: .0885rem;
            display: flex;
            justify-content: space-between;
           div{
            width: .651rem;
            height: .1667rem;
            font-size: .0729rem;
            text-align: center;
            line-height: .1667rem;
            border-radius: .026rem;
           }
           .information{
            color: #ff4e8d;
            border: 1px solid #ff4e8d;
           }
           .ordering{
            color: #fff;
            background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
           }
          }
        }
      }
    }
    .page {
      height: 1.0417rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      .txt {
        text-align: center;
        color: #252b3a;
        margin-top: 0.1563rem;
      }
    }
  }
}
</style>
