<template>
<div class="order_detail_box">
          <span class="title_box order_transport_btn">标记信息</span>
          <div class="item_box">
            <div class="sign-box">
            <div class="linebox linebox1">
              <div class="left">标记：</div>
              <div class="right">    
                 <el-radio-group v-model="orderInfo.flag" @change="radioSignVal">
                    <el-radio :label="1"><span class="iconfont icon-qizi-red-copy"></span></el-radio>
                    <el-radio :label="2"><span class="iconfont icon-qizi-yellow-copy"></span></el-radio>
                    <el-radio :label="3"><span class="iconfont icon-qizi-green-copy"></span></el-radio>
                    <el-radio :label="4"><span class="iconfont icon-qizi-blue-copy"></span></el-radio>
                    <el-radio :label="5"><span class="iconfont icon-qizi-violet-copy"></span></el-radio>
                </el-radio-group> 
              </div>
              <div class="clear"></div>
            </div>
            <div class="linebox">
              <div class="left textarea">标记信息：</div>
              <div class="right">
                <!-- <div class="tip"><img src="@/assets/img/icon-tip.png" alt="">标记的信息仅自己可见。若不是本人填写，请小心被骗</div> -->
                <textarea v-model="orderInfo.flagRemark" name="tabRemark" class="must textarea2" cols="30" rows="10" placeholder="标记信息作为你对这笔订单的标记记录，仅自己可见" data-msg="未填写标记信息"></textarea>
              </div>
              <div class="clear"></div>
            </div>
            <div class="linebox">
              <div class="left"></div>
              <div class="right btnbox">
                <el-button type="primary" class="layui-btn layui-btn-normal" @click="signInfo">确认</el-button>
              </div>
            </div>
          </div>  
          </div>
          </div>
           
</template>
<script>
import qs from "qs";
import { Stats } from 'fs';
export default {
    data(){
        return{

        }
    },
    props:{
        orderInfo:{
            type:Object,
            default:{}
        },
        orderSource:{
            type:String,
            default:''
        },
        source:{
            type:String,
            default:''
        }
    },
    methods:{
        radioSignVal(val){
        this.$emit('returnData',val);
        },
        signInfo(){
        var data = {
            orderId:this.source == 'eds'?this.orderInfo.orderCode:this.orderInfo.orderId,
            flag:this.orderInfo.flag,
            flagRemark:this.orderInfo.flagRemark
        };
        let datap = qs.stringify(data);
        if(!data.flagRemark){
            this.$message.error('请填写标记信息!')
            return false
        }
        this.$axios.post(this.HOST + this.orderSource,datap).then(res =>{
            if(res.data.code == 200){
            this.$message.success(res.data.message);
            this.backFn();
            }else{
            this.$message.error(res.data.message);
            }
        }).catch(()=>{

        })
        },
        backFn(){
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="scss" scoped>
.order_detail_box {
  font-size: 0;
  margin-top: 30px;
  .title_box {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    color: #333;
    font-size: 14px;
    padding: 2px 15px;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    bottom: -1px;
    left: 26px;
    z-index: 1;
  }
  .item_box {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: 14px;
    border: 1px solid #dcdcdc;
    
  }
}
// 标记信息
.sign-box{
  margin-top: 20px;
  .linebox1{margin-bottom: 10px;}
	.linebox{
    margin-left: 50px;
    text-align: left;
     .el-radio{
       margin-right:12px;
     }
		.left,.right{display: inline-block;}
		.left{
			width:80px;
			&.textarea{vertical-align: top;}
		}
		.right{
			.tip{
                border: 1px solid #58bcff;background: #e5f5ff;padding:6px 5px 4px;
                vertical-align: middle;
				img{width:16px;vertical-align: middle;margin:0 2px;margin-bottom: 2px;}
			}
			label{cursor:pointer;}
			input{width:14px;height:14px;vertical-align: middle;margin-top: 0;}
			img{margin:0 10px 0 5px;width:16px;vertical-align: middle;}
			textarea{resize: none;width:390px;padding:8px;}	
    }
    .textarea2{
        border:1px solid #dcdcdc;
    }
    .btnbox{
      margin: 20px 0;
    }

	}

}
.icon-qizi-red-copy{
  color: red;
}
.icon-qizi-yellow-copy {
  color: #f4ea2a;
}

.icon-qizi-green-copy {
 color: #1afa29;
}

.icon-qizi-blue-copy {
  color: #1296db;
}

.icon-qizi-violet-copy {
  color: #d4237a;
}
</style>
