<template>
    <c-popup
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        height="60%"
        :title="data.title"
        :title-style="{color: '#1f1f1f', fontSize: '0.18rem', lineHeight: '0.26rem'}"
        border-radius="0.21rem"
        close-icon="close"
        class="cancel-popup"
        stop-scroll-through
        scroll-view
        :btn-close="false"
        :btns="__btns"
        @close="handlePopupClose"
        @masktap="handlePopupClose"
        @submit="onSubmit"
    >
        <view class="cancel-popup__tips c-font-normal c-color-gray">
            <c-icon
                name="exclamation-circle"
                class="cancel-popup__tips__icon"
                font-size="0.15rem"
            />
            <text>{{ data.tips }}</text>
        </view>
        <view class="cancel-popup__option c-font-medium c-color-title">
            <view 
                v-for="(item, index) in data.list"
                :key="index"
                class="cancel-popup__option__item"
                @tap="anonymousChange(item.text, item.value)"
            >
                <view>{{ item.text }}</view>
                <c-checkbox
                    :checked="checkedValue == item.value"
                    checked-color="#fd503e"
                    color="#b8b8b8"
                    size="0.18rem"
                />
            </view>
        </view>
    </c-popup>
</template>

<script>
/* global Page swan  getApp */
import CCheckbox from '@components/common/checkbox';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as conf from '@utils/conf';
import {request} from '@utils/request';

// 
/**
 * @file 检测-机构弹窗
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        CCheckbox,
        CIcon
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            type: Boolean,
            default: false
        },
        /**
         * 资质数据
         */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            checkedText: '',
            checkedValue: -1,
            isSubmit: false
        };
    },
    computed: {
        __btns() {
            const btns = JSON.parse(JSON.stringify(this.data.btns || []));
            btns.forEach(item => {
                item.height = 40;
            });
            if (this.checkedValue === -1 && btns.length) {
                btns[0].disabled = true;
            }
            else if (btns.length) {
                btns[0].disabled = false;
            }
            return btns;
        }
    },
    created() {

    },
    methods: {
        handlePopupClose(e) {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onClose');
        },
        onSubmit(e) {
            const btn = e.btn || {};
            if (this.checkedValue != -1 && btn.api && !this.isSubmit) {
                this.isSubmit = true;
                request({
                    url: conf.goApiHost + btn.api,
                    data: {
                        reason: this.checkedText,
                        reasonType: this.checkedValue.toString()
                    }
                }).then(res => {
                    /** 重新加载 */
                    this.$emit('reLoad');
                    /** 关闭 */
                    this.$emit('onClose');
                    this.isSubmit = false;
                }).catch(() => {
                    this.isSubmit = false;
                });
            }
            
        },
        anonymousChange(text, value) {
            this.checkedText = text;
            this.checkedValue = value;
        }
    }
};
</script>
<style lang="less" scoped>
.cancel-popup {
    &__tips {
        line-height: 0.35rem;
        background: #F5F5F5;
        border-radius: 0.09rem;
        &__icon {
            margin-left: 0.13rem;
            margin-right: 0.06rem;
        }
    }
    &__option {
        &__item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.17rem 0;
        }
    }
}
</style>
