
<template>
    <div class="Basic-box">
        <div class="Basic-box-item" v-for="(item, index) in BasicList" :key="index">
            <div>{{ item.nameTitle }}</div>
            <div class="item-value">{{ item.value }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Basicbox',
    components: {},
    data() {
        return {
            BasicList: [],
            ypList: [
                { nameTitle: "药品通用名称:", value: "", type:'name' },
                { nameTitle: "药品分类:", value: "", type:'type'  },
                { nameTitle: "剂型:", value: "", type:'jx' },
                { nameTitle: "规格:", value: "", type:'modelSpecifications' },
                { nameTitle: "批准文号:", value: "", type:'bah' },
                { nameTitle: "批准文号期限:", value: "", type:'pzwhyxq' },
                { nameTitle: "上市许可证持有人:", value: "", type:'ssxkcyr' },
                { nameTitle: "生产企业:", value: "", type:'scqy' },
                { nameTitle: "执行标准:", value: "", type:'zxbz' },
            ],
            ylqxList: [
                { nameTitle: "产品名称:", value: "", type:'name' },
                { nameTitle: "产品类型:", value: "", type:'type' },
                { nameTitle: "管理类别:", value: "", type:'gllb' },
                { nameTitle: "型号规格:", value: "", type:'modelSpecifications' },
                { nameTitle: "备案编号:", value: "", type:'bah' },
                { nameTitle: "备案人名称:", value: "", type:'barmc' },
                { nameTitle: "产品有效期:", value: "", type:'cpyxq' },
                { nameTitle: "结构特征:", value: "", type:'jgtz' },
                { nameTitle: "境内进口:", value: "", type:'jnjk' },
                { nameTitle: "生产地址:", value: "", type:'scdz' },
                { nameTitle: "生产标准:", value: "", type:'scbz' },
            ],
            hzpList: [
                { nameTitle: "产品名称:", value: "", type:'name' },
                { nameTitle: "产品类型:", value: "", type:'type' },
                { nameTitle: "型号规格:", value: "", type:'modelSpecifications' },
                { nameTitle: "备案编号:", value: "", type:'bah' },
                { nameTitle: "备案人名称:", value: "", type:'barmc' },
                { nameTitle: "产品有效期:", value: "", type:'cpyxq' },
                { nameTitle: "境内进口:", value: "", type:'jnjk' },
                { nameTitle: "生产地址:", value: "", type:'scdz' },
                { nameTitle: "生产标准:", value: "", type:'scbz' },
            ]
        }
    },
    created() { },
    mounted() {
        let type = this.$route.query.type;
        type == 1 ? this.BasicList = this.ypList : type == 2 ? this.BasicList = this.ylqxList : this.BasicList = this.hzpList;
        this.getInfo({type,code:this.$route.query.code})
    },
    methods: {
        async getInfo(name){
            let data = await this.$api.productPortrayal.findInfoByReq(name);
            // console.log(data.data);
            // console.log(this.BasicList);
            for(var key in data.data){
                this.BasicList.map(item=>{
                    if(item.type == key) {
                        item.value = data.data[key];
                    }
                })
            }
        }
    },
    computed: {}
}
</script>
<style scoped lang='scss'>
.Basic-box {
    width: 100%;
    height: 300px;
    padding: 0 11px 11px 11px;
    overflow-y: auto;

    .Basic-box-item {
        position: relative;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px 0 40px;
        background: url('../../../assets/images/daping/basic.png');
        background-size: cover;
        background-repeat: no-repeat;

        &::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 0px;
            /* 将伪元素定位到元素的边框上方 */
            height: 1px;
            width: 100%;
            /* 将伪元素定位到元素的边框上方 */
            border: 1px solid rgba(0, 0, 0, 0.2);
        }

        div:nth-of-type(1) {
            // flex: 1;
            /* 第二个子元素的样式 */
            font-size: 16px;
            font-family: Medium;
            font-weight: 400;
            color: #7CA8F4;
            margin-right: 10px;
        }

        div:nth-of-type(2) {
            /* 第二个子元素的样式 */
            max-width: 250px;
            text-align: right;
            font-size: 14px;
            font-family: Regular;
            font-weight: 400;
            color: #B7D4F5;
            white-space: nowrap;
            /* 不换行 */
            overflow: hidden;
            /* 溢出隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */

        }
    }
}
</style>
