<template>
  <view>
    <up-radio-group v-model="useType" placement="row">
      <up-radio
        v-for="item in useTypeList"
        :key="item.value"
        :name="item.value"
        :label="item.label"
      ></up-radio>
    </up-radio-group>
    <view class="box" v-if="useType == 'part'" @click.stop="openPopup">
      <text class="u-font-28 color-999 u-p-r-16">请选择</text>
      <view
        class="u-font-24 shop-item u-flex u-p-r-20 u-col-center u-p-r-16"
        v-for="(item, index) in selShops"
        :key="item.shopId"
      >
        <text>{{ returnShopName(item) }}</text>
        <view @click.stop="delShop(index)">
          <up-icon
            name="close"
            size="14"
            @click="delShop(index)"
            color="#999"
          ></up-icon>
        </view>
      </view>
      <view class="icon">
        <up-icon name="arrow-down" size="14" color="#999"></up-icon>
      </view>
    </view>

    <up-popup
      :show="show"
      placement="bottom"
      round="18rpx"
      closeOnClickOverlay
      @close="close"
    >
      <view class="u-p-30">
        <view class="font-bold color-333 u-font-32">选择门店</view>
        <scroll-view
          class="scroll-view u-m-t-30"
          scroll-y="true"
          max-height="40vh"
        >
          <view class="u-m-b-10" v-for="item in list" :key="item.shopId">
            <up-checkbox
              usedAlone
              :name="item.shopId"
              :label="item.shopName"
              v-model:checked="item.checked"
            ></up-checkbox>
          </view>
        </scroll-view>
        <view class="u-flex gap-20 u-m-t-30">
          <view class="u-flex-1">
            <my-button type="default" @click="close">取消</my-button>
          </view>
          <view class="u-flex-1">
            <my-button type="primary" @click="submit">确定</my-button>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { getShopList } from "@/http/api/shop.js";

const show = ref(false);
const selShops = defineModel("selShops", {
  default: () => [],
  type: Array,
});
const useType = defineModel("useType", {
  default: () => "all",
  type: String,
});
const useTypeList = [
  {
    value: "all",
    label: "全部门店",
  },
  {
    value: "part",
    label: "指定门店可用",
  },
];

function returnShopName(shopId) {
  const item = list.value.find((v) => v.shopId == shopId);
  return item?.shopName || "";
}
function close() {
  show.value = false;
}
function submit() {
  selShops.value = list.value
    .filter((item) => item.checked)
    .map((v) => v.shopId);
  show.value = false;
}
function delShop(index) {
  selShops.value.splice(index, 1);
}
const list = ref([]);

function openPopup() {
  show.value = true;
  list.value = list.value.map((item) => ({
    shopId: item.shopId,
    shopName: item.shopName,
    checked: selShops.value.includes(item.shopId),
  }));
}
async function init() {
  const res = await getShopList();
  console.log("selShops.value", selShops.value);

  if (res) {
    list.value = res.map((item) => ({
      shopId: item.shopId,
      shopName: item.shopName,
      checked: selShops.value.includes(item.shopId),
    }));
  }
}
onMounted(init);
</script>
<style lang="scss">
.box {
  margin-top: 16rpx;
  display: flex;
  flex-direction: row;
  align-items: top;
  flex-wrap: wrap;
  padding: 10rpx 24rpx;
  border: 2rpx solid #e5e5e5;
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    right: 24rpx;
    transform: translateY(-50%);
  }
}
.shop-item {
  padding: 4rpx 8rpx 4rpx 16rpx;
  border-radius: 4rpx;
  border: 2rpx solid #f0f0f0;
  background-color: #f5f5f5;
  margin-bottom: 16rpx;
  margin-left: 16rpx;
}
</style>