<template>
  <cr-popup
    v-model="show"
    closeable
    round
    position="bottom"
    get-container="body"
    class="cancel-popup"
  >
    <div class="Cp__head">
      <div class="Cp__head-title">退款原因</div>
    </div>
    <cr-radio-group v-model="reasonType" class="Cp__list-wrap">
      <cr-cell-group class="Cp__list">
        <cr-cell
          v-for="(item, index) in list"
          :key="index"
          :title="item.reasonName"
          @click="onCellClick(item)"
        >
          <template #right-icon>
            <cr-radio ref="checkboxes" :name="item.reasonId" class="Cp__list-radio" />
          </template>
        </cr-cell>
      </cr-cell-group>
    </cr-radio-group>
  </cr-popup>
</template>
<script>
export default {
  name: 'Popup',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    value: Boolean,
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      reasonType: ''
    };
  },
  watch: {
    value(val) {
      console.log(val);
      this.show = val;
    }
  },
  methods: {
    onCellClick(name) {
      this.reasonType = name;
      this.$emit('reason', name);
      // this.show = false;
    }
  }
};
</script>
<style lang="less" scoped>
.order-list {
  padding: 0 @padding-sm;
}
.cancel-popup {
  @{deep} .cr-popup--close-top-right {
    top: 18px;
    right: 14px;
  }
}

.Cp {
  &__head {
    text-align: center;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 @padding-md;
    border-bottom: 1px solid @grey-border;
    &-title {
      .text-size(16);
      color: @text-color;
      font-weight: bold;
    }
    &-desc {
      .text-size(13);
      color: @text-grey;
    }
  }
  &__list {
    flex: 1;
    &-radio {
      margin-right: 0;
    }
  }
  &__button {
    border-top: 1px solid @grey-border;
    padding: @padding-sm - 2 @padding-xs;
  }
  &__tip {
    width: 343px;
    margin: @padding-xs auto;
    background-color: @gray-1;
    border-radius: @border-radius-md;
    color: @gray-5;
    .text-size(12);
    text-align: center;
    padding: @padding-sm @padding-xs;
  }
}
</style>
