<style scoped>
    .orderProductDetails-box{
        padding:  20px 0;
        background-color: #fff;
    }
    .MultipleChoice-item {
            display: flex;
        }
        
        .MultipleChoice-item.bottom0 {
            margin-bottom: 0;
        }
        
        .MultipleChoice-OrderType {
            padding: 9px 19px 0 19px;
        }
        
        .el-form-item.MultipleChoice-OrderType {
            margin-bottom: 0 !important;
        }
                
        .MultipleChoice-left {
            display: flex;
            flex-direction: column;
        }
        
        .MultipleChoice-left div {
            flex: 1;
            padding: 20px 19px;
        }
        
        .MultipleChoice-right {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            padding: 0 0 0 0;
        }
        
        .MultipleChoice-right-box {
            background: #fff;
            flex: 1;
            padding: 9px 19px;
            margin-bottom: 10px;
        }
        
        .MultipleChoice-right-box.active {
            background: #F5F7FA;
        }
        
        .MultipleChoice-right-box .el-form-item {
            margin-bottom: 0;
        }
        .combo-box {
            display: flex;
            justify-content: space-between;
        }
        
        .combo-center.active {
            background: #F5F7FA;
        }
        
        .combo-center {
            flex: 1;
            padding: 9px 19px 0 19px;
        }
        
        .combo-center:first-child {
            margin-right: 30px;
        }
        .el-checkbox-group, .el-radio-group{
            margin-bottom: 0;
        }
    </style>
        <template>
            <div class="orderProductDetails-box">
                <el-form class="MyEditForm">
                    <div v-if="checkList.length>0" class="MultipleChoice-item"> 
                        <div class="MultipleChoice-left">
                            <div v-for="(item,index) in checkList" :key="index">
                                {{item.Name}}
                            </div>
                        </div>
                        <div class="MultipleChoice-right">
                            <div class="MultipleChoice-right-box" v-if="detailsData.OrderType&&detailsData.OrderType.indexOf('1')!=-1"
                                :class="AirTicketsShow?'active':''">
                                <el-form-item label="机票金额">
                                    <el-input placeholder="请输入机票金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" 
                                    v-model="detailsData.TicketMoney"
                                    disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="MultipleChoice-right-box" v-if="detailsData.OrderType&&detailsData.OrderType.indexOf('2')!=-1"
                                :class="visaShow?'active':''">
                                <el-form-item label="签证金额">
                                    <el-input placeholder="请输入签证金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" 
                                    v-model="detailsData.VisaMoney"
                                    disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="MultipleChoice-right-box" v-if="detailsData.OrderType&&detailsData.OrderType.indexOf('3')!=-1"
                                :class="groundShow?'active':''">
                                <el-form-item label="地接金额">
                                    <el-input placeholder="请输入地接金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" 
                                    v-model="detailsData.DiJieMoney"
                                    disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="combo-box" v-if="detailsData.OrderType&&detailsData.OrderType.indexOf('4')!=-1">
                                <div class="combo-center"
                                :class="comboShow?'active':''">
                                    <el-form-item label="套餐金额">
                                        <el-input placeholder="请输入套餐金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" 
                                        v-model="detailsData.MealMoney"
                                        disabled></el-input>
                                    </el-form-item>
                                </div>
                                <div class="combo-center"
                                :class="comboShow?'active':''">
                                    <el-form-item label="说明" prop="MealDescription"
                                    :rules="comboShow?[{ required: false}]:rules.MealDescription">
                                        <el-input placeholder="请输入套餐说明" 
                                        v-model="detailsData.MealDescription"
                                        disabled></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="noData">暂无数据</div>
                </el-form>
            </div>
        </template>
        <script>
    export default {
      components: {
        
      },
      props: {
        detailsData: {
          type: Object,
          required: true,
        },
      },
      data() {
        return {
          comboShow: true,
          groundShow: true,
          visaShow: true,
          AirTicketsShow: true,
          checkList:[],
          MultipleChoiceList: [ //多选项目
            {
                Name: '机票',
                Id: '1'
            }, {
                Name: '签证',
                Id: '2'
            }, {
                Name: '地接',
                Id: '3'
            }, {
                Name: '套餐',
                Id: '4'
            }
          ],
          
        };
      },
      watch: {
        detailsData: {
          handler(val, oldVal) {
            this.detailsData = val
            let list = this.detailsData.OrderType.split(',')
            for(let i=0;i<list.length;i++){
                for(let j=0;j<this.MultipleChoiceList.length;j++){
                 if(list[i]==this.MultipleChoiceList[j].Id){
                     this.checkList.push(this.MultipleChoiceList[j])
                 }
                }
            }
          },
          deep: true,
        },
      },
      mounted() {
        
      },
      methods: {
        
      },
    };
    </script>
    