<template>
  <uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
    <view class='content'>
      <text class='title'>切换门店</text>
      <scroll-view scroll-y style='max-height: 600rpx;padding: 15rpx'>
        <view class='store-item' v-for='(item, index) in companyList' :key='index' @click='() => {
          handleClick(index)
        }'>
          <view class='c-flex-row'>
            <text>{{ item?.companyName || '' }}</text>
            <image v-if='index===currentIndex' src='/static/images/ic_checkmark_red.png' />
          </view>
        </view>
      </scroll-view>
      <view class='close-btn primary-button' @click='close'>
        <text>取消</text>
      </view>
    </view>
  </uni-popup>
</template>

<script lang='ts' setup>
const props = defineProps({
  companyList: {
    type: Array,
    default: () => []
  }
});

const popupRef = ref();
const currentIndex = ref(0);
let callback: Function;

const show = (companyId: string, fn: Function) => {
  if(companyId) {
    currentIndex.value = props.companyList.findIndex(item => item.id === companyId);
  }
  callback = fn;
  popupRef.value.open();
};

const handleClick = (index: number) => {
  currentIndex.value = index;
  callback(index);
  close();
};

const close = () => {
  popupRef.value.close();
};

defineExpose({
  show, close
});
</script>

<style lang='scss' scoped>
.content {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx 30rpx 30rpx 30rpx;

  .title {
    display: flex;
    align-self: center;
    font-size: 30rpx;
    font-weight: bold;
    padding: 20rpx;
  }

  .store-item {
    display: flex;
    flex-direction: column;
    font-size: 35rpx;
    color: #333333;
    //padding: 20rpx 20rpx;


    .c-flex-row {
      text {
        display: flex;
        flex: 1;
      }

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 30rpx;
      }
    }
  }

  .store-item:after {
    content: '';
    background: #F5F5F5;
    height: 0.5rpx;
    width: 100%;
    margin: 25rpx 0;
  }

  .close-btn {
    background: #F5F5F5;
    color: #333333;
    justify-content: center;
  }
}
</style>
