<!-- 技术路线 -->
<template>
    <div class="newApply">
        <p>技术路线</p>
        <div class="newApply-box" >
            <div class="whole" v-for="(item,index) in val ">
                <div class="newApply-title">
                    <!--<el-radio v-model="tech" :label="1">{{item.name}}</el-radio>-->
                    <span  @click="check(index)"> <i :class="(index == isCheck - 1) ? 'isActive': ''"></i> </span>
                    <div>{{item.name}}</div>

                </div>
                <div class="newApply-content">
                    <div>
                        <span>操作系统：<i>{{item.os.version}}</i></span>
                        <span>数据库：<i>{{item.db.version}}</i></span>
                        <span>中间件：<i>{{item.midWare.version}}</i></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="line"></div>
        <div class="newApplyBtn">
            <span @click="cancle">取消</span>
            <span @click="makeSure">确定</span>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
    name: 'newApply',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['val','applyId','osId'],
    data () {
        // 这里存放数据
        return {
            tech: '',
            isCheck: '',
            itemId: ''
        };
    },
    // 方法集合
    methods: {
        cancle() {
            this.$emit('on-close');
        },
        check(i) {
            console.log('选中',i)
            console.log(this.isCheck)
                this.isCheck = i + 1
            console.log(this.isCheck)
        },
        makeSure() {
            let a = this.applyId;
            let b = this.isCheck;
            let obj = {
                id: a,
                techId: b
            }
            this.$server.postMidify(obj).then(res => {
                console.log('postMidify',res);
                this.$emit('on-close');

                this.$emit('on-closeWeb');

                this.$emit('on-project');

                // this.$emit('on-websocket');

            }).catch(err => {
                console.log(err)
                this.$message.error('请求失败')
            })
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {
        'val': function(val) {
            console.log('技术路线数据',val)
        },
        'applyId': function(applyId) {
            console.log('项目id',applyId)
        },
        'osId': function(osId) {
            console.log('osIdid',osId)
            this.isCheck = this.osId
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        console.log(this.osId)
        this.isCheck = this.osId
        console.log('122222',this.isCheck)
    },
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {
        // this.check(this.osId);
    },
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
}
</script>

<style scoped>
    .newApply {
        width: 810px;
        height: 518px;
        background: #fff;
        border-radius: 11px;
        position: absolute;
        top: 17px;
        left: -425px;
    }
    .newApply p {
        width: 100%;
        height: 58px;
        font-size: 18px;
        text-align: center;
        line-height: 58px;
        background: #ebf0f8;
        color: #333;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
    }
    .newApply-box{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .newApply-title {
        text-align: center;
        margin: 25px 0;
    }
    .newApply-title span i{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid #666;
        margin-left: 58px;
        margin-top: 3px;
        float: left;
    }
    .newApply-content {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
    }
    .newApply-content div {
        text-align: right;
    }
    .newApply-content div span {
        display: block;
        height: 45px;
        line-height: 45px;
        color: #666;
        margin-bottom: 20px;
        width: 200px;
    }
    .newApply-content div span i {
        display: inline-block;
        width: 64%;
        background: #f5f8fd;
        height: 35px;
        border: 1px solid rgba(8,104,157,.3);
        text-align: center;
        color: #333;
    }
    .newApplyBtn {
        text-align: center;
    }
    .newApplyBtn span {
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background: #4877e6;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin-left: 60px;
    }
    .newApplyBtn span:hover {
        background: #1c45a4;
    }
    .line {
        width: 71%;
        margin: 0 auto;
        border: 1px solid rgba(8,104,157,.1);
        margin-bottom: 50px;
    }
    .isActive {
        /*background: #1E8255;*/
        /*border: 1px solid red;*/
        width: 14px;
        height: 14px;
        background: url("../../assets/img/check.png") no-repeat;
        background-size: 100% 100%;
        background-color: transparent;
        border: none;
    }
</style>