<template>
    <view class="pcr-agency">
        <scroll-view
            v-if="list && list.length"
            scroll-x
            class="pcr-agency-scroll"
        >
            <view class="c-flexbox">
                <view v-for="(itm, idx) in list" :key="idx" class="pcr-agency-item">
                    <image
                        :src="itm.logo"
                        mode="widthFix"
                        class="pcr-agency-logo"
                        lazy-load
                    />
                    <view class="pcr-agency-text c-tal c-font-13">
                        <text>{{ itm.brife }}</text>
                        <text :style="{color: color}" class="pcr-agency-more" @tap="showMore(itm)">更多</text>
                    </view>
                    <view class="pcr-agency-check" @tap.stop="onCheckTap(itm, idx)">
                        <c-icon
                            :name="itm.allowCheck ? 'check-circle-solid': 'check-circle'"
                            font-size="15px"
                            class="c-gap-right-small"
                            :class="itm.allowCheck ? 'scroll-item-choose': 'scroll-item-default'"
                        />
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
/**
* @file 接种机构
* @author zhangqian51
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';

import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import * as Log from '../../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * tp数据
         */
        data: {
            type: Array
        },
        /**
         * 颜色
         */
        color: {
            type: String,
            default: '#ff6161'
        },
        /**
         * 主题
         */
        topic: String
    },
    data() {
        return {
            selectedIndex: 0,
            allowCheck: false,
            list: []
        };
    },
    lifetimes: {
        attached() {
            this.list = this.data || [];
        }
    },
    watch: {
        data(newVal, oldVal) {
            if (newVal.length !== this.data.length) {
                this.list = newVal || [];
            }
        }
    },
    methods: {
        onCheckTap(obj, idx) {
            const list = this.list.map((item, index) => {
                if (index !== idx) {
                    return Object.assign(item, {allowCheck: false});
                } else {
                    return Object.assign(item, {allowCheck: !item.allowCheck});
                }
            });
            if (process.env.MARS_ENV === 'swan') {
                obj = Object.assign(obj, {allowCheck: !obj.allowCheck});
            }
            this.$set(this, 'list', list);
            /**
             * 切换结构
             * @property {Event} e a event params
             */
            this.$emit('changeAgency', obj);
        },
        showMore(obj) {
            /**
             * 现实更多
             * @property {Event} e a event params
             */
            this.$emit('showMore', obj);
        }
    }
};
</script>

<style lang="less" scoped>
.pcr-agency {
    &-scroll {
        display: flex;
        height: auto !important;
    }
    &-item {
        width: 2rem;
        text-align: center;
        padding: .18rem .12rem .12rem .1rem;
        border: 1px solid #E0E0E0;
        border-radius: .06rem;
        margin-right: .08rem;
    }
    &-logo {
        width: .81rem;
        height: 30px;
    }
    &-text {
        width: 1.18rem;
        line-height: .19rem;
    }
    &-more {
        float: right;
    }
    &-check {
        .scroll-item-choose {
            color: #4A91FF;
        }
        .scroll-item-default {
            color: #E0E0E0;
        }
    }
}
</style>
