<template>
  <!-- 取单 -->
  <el-dialog width="550px" title="取单" v-model="prveOrder.show">
    <div class="take_order_list">
      <div class="tol_left_list">
        <div
          class="tolll_item"
          :class="{ active: prveOrder.sel === index }"
          @click="changePrveOrder(index)"
          v-for="(item, index) in prveOrder.list"
          :key="index"
        >
          <div class="tollli_index">{{ index + 1 }}</div>
          <div class="tollli_price">￥{{ item.totalAmount }}</div>
          <div class="tollli_time_and_num">
            <div class="tollli_time">{{ item.created_at || "" }}</div>
            <div class="tollli_num">({{ item.totalNumber }}件)</div>
          </div>
        </div>
      </div>
      <div class="tol_right_list" v-if="prveOrder.list.length && prveOrder.sel >= 0">
        <div class="tolrl_item" v-for="(item, index) in prveOrder.selCart" :key="index">
          <div class="tolrli_img">
            <img :src="item.coverImg" alt="" />
          </div>
          <div class="tolrli_right">
            <div class="tr_top">
              <div class="trt_name">{{ item.name }}</div>
              <div class="trt_num">x{{ item.number }}</div>
              <div class="trt_price">￥{{ item.totalAmount || 0 }}</div>
            </div>
            <div class="tr_bottom">
              <span class="trb_item">
                {{ item.specSnap }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex row-center">
        <div style="margin-right: 20px">
          <el-button type="primary" @click="confirmChoosePrveOrder">确认此单</el-button>
        </div>
        <el-button @click="delPrveOrder">删除此单</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const prveOrder = reactive({
  list: [],
  show: false,
  sel: 0,
  selCart: [],
});

function show() {
  prveOrder.show = true;
}
function close() {
  prveOrder.show = false;
}
defineExpose({
  show,
  close,
});
</script>

<style lang="scss" scoped>
.take_order_list {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;

  .tol_left_list {
    height: 360px;
    margin-right: 24px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0;
    }

    .tolll_item {
      border: 1px solid rgb(247, 247, 250);
      height: 86px;
      width: 130px;
      padding: 10px 14px;
      margin-bottom: 12px;
      border-radius: 4px;
      color: #303133;

      background-color: #f7f7fa;

      &.active {
        border: 1px solid rgb(0, 194, 95);
        background-color: rgba(0, 194, 95, 0.1);
        color: rgb(0, 194, 95) !important;

        .tollli_time,
        .tollli_num {
          color: rgb(0, 194, 95) !important;
        }
      }

      cursor: pointer;

      .tollli_index {
        font-weight: 600;
        font-size: 18px;
      }

      .tollli_price {
        margin-top: 8px;
        font-size: 14px;
      }

      .tollli_time_and_num {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;

        .tollli_time,
        .tollli_num {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .tol_right_list {
    flex: 1;
    height: 360px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0;
    }

    .tolrl_item {
      display: flex;
      padding: 2px 2px 13px 2px;
      margin-bottom: 12px;
      border-bottom: 1px solid #ebebeb;

      .tolrli_img {
        img {
          width: 40px;
          height: 40px;
          border-radius: 4px;
        }
      }

      .tolrli_right {
        display: flex;
        justify-content: space-between;
        flex: 1;
        flex-direction: column;
        padding: 1px 0 1px 8px;

        .tr_top {
          display: flex;
          justify-content: space-between;

          .trt_name {
            width: 150px;
            font-size: 14px;
            color: #212121;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .trt_num {
            font-size: 14px;
            color: #212121;
          }

          .trt_price {
            width: 100px;
            text-align: right;
            font-size: 14px;
            color: #212121;
          }
        }

        .tr_bottom {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>