<template>
  <up-popup :show="show" closeable round="10" @close="close">
    <view class="cancel-popup">
      <view class="head-title">订单取消</view>
      <view class="row" v-for="(item,index) in cancelDict" :key="item.value" @click="cancelType=item.value">
        <view>{{item.name}}</view>
        <image v-if="cancelType==item.value" src="@/static/icon/check.png"></image>
        <image v-else src="@/static/icon/n-check.png"></image>
      </view>
      <up-button color="#20B128" shape="circle" @click="submitCancel">提交</up-button>
    </view>
  </up-popup>
</template>

<script setup>
  import cancelDict from "@/dict/cancelDict.js";
  import { ref } from "vue"
  
  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
  })
  
  const cancelType = ref(-1); //  取消类型
  
  const emit = defineEmits(['close', 'change']);
  const close = () => {
    emit('close');
  }
  
  const submitCancel = () => {
    let obj = cancelDict.find(item=>item.value == cancelType.value);
    if(!obj) return uni.$u.toast('请选择取消原因');
    emit('change', obj);
  }
</script>

<style lang="scss" scoped>
.cancel-popup {
    padding: 30rpx;

    .head-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .row {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
</style>