<template>
  <div class="no-close row android-repair-order">
    <div class="select-overspread bg-white " id="pc-repair-work">
      <div class="bq-parent">
        <blockquote class="blockquote">
          <p>设备详情</p>
        </blockquote>
        <div class="from-group auto" style="margin-top: 20px;">
          <div class="col-sm-12">
            <input class="magic-checkbox" type="checkbox" @click="getCondition('报警器','bjqCondition','bjqflag','bjqValue')" id = '报警器'/>
            <label for="报警器">
              <nobr>报警器</nobr>
            </label>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body">
                <div  class="select-overspread auto">
                  <div class=" form-group auto" style="margin-bottom: 5px;">
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6 ">
                        <label style="line-height:34px" >报警器有无</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select :disabled="!bjqflag" @change="addCondition('bjqCondition','有否','hasBJQ','bjqValue')"
                                  :value.sync="hasBJQ"
                                  :value-single = "true"
                                  close-on-select clear-button
                                  v-model="hasBJQ" :options="[{label:'有',value:'有'},{label:'无',value:'无'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >安装渠道</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select v-model="bjqInstallation" :disabled="hasBJQ != '有'" @change="addCondition('bjqCondition','安装渠道','bjqInstallation','bjqValue')"
                                  :value-single = "true"
                                  :value.sync="bjqInstallation"
                                  close-on-select clear-button
                                  :options="[{label:'惠众',value:'惠众'},{label:'其他',value:'其他'}]"></v-select>
                      </div>
                    </div>
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >安装时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasBJQ != '有'"-->
                          <!--@click="addCondition('bjqCondition','安装时间','f_bjqinstall_start','bjqValue')"-->
                          <!--:value.sync="f_bjqinstall_start"-->
                          <!--placeholder='安装时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_bjqinstall_start">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >到期时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasBJQ != '有'"-->
                          <!--@click="addCondition('bjqCondition','到期时间','f_bjqinstall_end','bjqValue')"-->
                          <!--:value.sync="f_bjqinstall_end"-->
                          <!--placeholder='到期时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_bjqinstall_end">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <input class="magic-checkbox" type="checkbox" @click="getCondition('灶具','zjCondition','zjflag','zjValue')" id = '灶具'/>
            <label for="灶具">
              <nobr>灶具</nobr>
            </label>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body">
                <div  class="select-overspread auto">
                  <div class=" form-group auto" style="margin-bottom: 5px;">
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6 ">
                        <label style="line-height:34px" >是否安装</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select :disabled="!zjflag"
                                  :value-single = "true"
                                  :value.sync="hasZJ"
                                  close-on-select clear-button
                                  @change="addCondition('zjCondition','是否安装','hasZJ','zjValue')"
                                  v-model="hasZJ" :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >安装渠道</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select v-model="zjInstallation" :disabled="hasZJ != '是'"
                                  :value-single = "true"
                                  :value.sync="zjInstallation"
                                  @change="addCondition('zjCondition','安装渠道','zjInstallation','zjValue')"
                                  close-on-select clear-button
                                  :options="[{label:'惠众',value:'惠众'},{label:'其他',value:'其他'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >现状</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select v-model="zjStatus" :disabled="hasZJ != '是'"
                                  :value-single = "true"
                                  :value.sync="zjStatus"
                                  close-on-select clear-button
                                  @change="addCondition('zjCondition','现状','zjStatus','zjValue')"
                                  :options="[{label:'正常',value:'正常'},{label:'漏气',value:'漏气'},{label:'老化',value:'老化'},{label:'未接气',value:'未接气'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >品牌</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <input type="text" class="form-control" v-model="f_zjBrand"
                               @change="addCondition('zjCondition','品牌','f_zjBrand','zjValue')"
                               style="height:34px" :disabled="hasZJ != '是'"   placeholder="品牌">
                      </div>
                    </div>
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >安装时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasZJ != '是'"-->
                          <!--@click="addCondition('zjCondition','安装时间','f_zjinstall_start','zjValue')"-->
                          <!--:value.sync="f_zjinstall_start"-->
                          <!--placeholder='安装时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_zjinstall_start">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >到期时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasZJ != '是'"-->
                          <!--:value.sync="f_zjinstall_end"-->
                          <!--placeholder='到期时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--@click="addCondition('zjCondition','到期时间','f_zjinstall_end','zjValue')"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_zjinstall_end">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <input class="magic-checkbox" type="checkbox" @click="getCondition('热水器','rsqCondition','rsqflag','rsqValue')" id = '热水器'/>
            <label for="热水器">
              <nobr>热水器</nobr>
            </label>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body">
                <div  class="select-overspread auto">
                  <div class=" form-group auto" style="margin-bottom: 5px;">
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6 ">
                        <label style="line-height:34px" >是否安装</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select :disabled="!rsqflag"
                                  :value-single = "true"
                                  :value.sync="hasRSQ"
                                  close-on-select clear-button
                                  @change="addCondition('rsqCondition','是否安装','hasRSQ','rsqValue')"
                                  v-model="hasRSQ" :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >品牌</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <input type="text" class="form-control" v-model="f_rsqBrand"
                               @change="addCondition('rsqCondition','品牌','f_rsqBrand','rsqValue')"
                               style="height:34px" :disabled="hasRSQ !='是'"   placeholder="品牌">
                      </div>
                    </div>
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >安装时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasRSQ !='是'"-->
                          <!--:value.sync="f_rsqinstall_start"-->
                          <!--@click="addCondition('rsqCondition','安装时间','f_rsqinstall_start','rsqValue')"-->
                          <!--placeholder='安装时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_rsqinstall_start">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >到期时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasRSQ !='是'"-->
                          <!--@click="addCondition('rsqCondition','到期时间','f_rsqinstall_end','rsqValue')"-->
                          <!--:value.sync="f_rsqinstall_end"-->
                          <!--placeholder='到期时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_rsqinstall_end">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <input class="magic-checkbox" type="checkbox" @click="getCondition('壁挂锅炉','bgglCondition','bgglflag','bgglValue')" id = '壁挂锅炉'/>
            <label for="壁挂锅炉">
              <nobr>壁挂锅炉</nobr>
            </label>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body">
                <div  class="select-overspread auto">
                  <div class=" form-group auto" style="margin-bottom: 5px;">
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6 ">
                        <label style="line-height:34px" >是否安装</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select :disabled="!bgglflag"
                                  :value-single = "true"
                                  :value.sync="hasBGGL"
                                  close-on-select clear-button
                                  @change="addCondition('bgglCondition','是否安装','hasBGGL','bgglValue')"
                                  v-model="hasBGGL" :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >功率</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <input type="text" class="form-control" v-model="f_bgglPower"
                               @change="addCondition('bgglCondition','功率','f_bgglPower','bgglValue')"
                               style="height:34px" :disabled="hasBGGL != '是'"   placeholder="功率">
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >现状</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select v-model="hasBJQ" :disabled="hasBGGL != '是'"
                                  :value-single = "true"
                                  :value.sync="hasBGGL"
                                  close-on-select clear-button
                                  @change="addCondition('bgglCondition','现状','bgglStatus','bgglValue')"
                                  :options="[{label:'正常',value:'正常'},{label:'漏气',value:'漏气'},{label:'老化',value:'老化'},{label:'未接气',value:'未接气'}]"></v-select>
                      </div>
                    </div>

                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >品牌</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <input type="text" class="form-control" v-model="f_bgglBrand"
                               @change="addCondition('bgglCondition','品牌','f_bgglBrand','bgglValue')"
                               style="height:34px" :disabled="hasBGGL != '是'"   placeholder="品牌">
                      </div>
                    </div>

                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >安装时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasBGGL != '是'"-->
                          <!--@click="addCondition('bgglCondition','安装时间','f_bgglinstall_start','bgglValue')"-->
                          <!--:value.sync="f_bgglinstall_start"-->
                          <!--placeholder='安装时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_bgglinstall_start">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >到期时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasBGGL != '是'"-->
                          <!--:value.sync="f_bgglinstall_end"-->
                          <!--@click="addCondition('bgglCondition','安装时间','f_bgglinstall_end','bgglValue')"-->
                          <!--placeholder='到期时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_bgglinstall_end">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12">
            <input class="magic-checkbox" type="checkbox" @click="getCondition('抽油烟机','cyyjCondition','cyyjflag','cyyjValue')" id = '抽油烟机'/>
            <label for="抽油烟机">
              <nobr>抽油烟机</nobr>
            </label>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body">
                <div  class="select-overspread auto">
                  <div class=" form-group auto" style="margin-bottom: 5px;">
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6 ">
                        <label style="line-height:34px" >是否安装</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <v-select :disabled="!cyyjflag" v-model="hasCYYJ"
                                  :value-single = "true"
                                  :value.sync="hasCYYJ"
                                  close-on-select clear-button
                                  @change="addCondition('cyyjCondition','是否安装','hasCYYJ','cyyjValue')"
                                  :options="[{label:'是',value:'是'},{label:'否',value:'否'}]"></v-select>
                      </div>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <label  style="line-height:34px" >品牌</label>
                      </div>
                      <div class="col-sm-6 col-xs-6 col-md-6">
                        <input type="text" class="form-control" v-model="f_cyyjBrand"
                               @change="addCondition('cyyjCondition','品牌','f_cyyjBrand','cyyjValue')"
                               style="height:34px" :disabled="hasCYYJ != '是'"   placeholder="品牌">
                      </div>
                    </div>
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >安装时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasCYYJ != '是'"-->
                          <!--@click="addCondition('cyyjCondition','安装时间','f_cyyjinstall_start','cyyjValue')"-->
                          <!--:value.sync="f_cyyjinstall_start"-->
                          <!--placeholder='安装时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_cyyjinstall_start">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 col-xs-6 col-md-6" style="padding:5px;">-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<label  style="line-height:45px" >到期时间</label>-->
                      <!--</div>-->
                      <!--<div class="col-sm-6 col-xs-6 col-md-6">-->
                        <!--<datepicker-->
                          <!--:disabled="hasCYYJ != '是'"-->
                          <!--@click="addCondition('cyyjCondition','到期时间','f_cyyjinstall_end','cyyjValue')"-->
                          <!--:value.sync="f_cyyjinstall_end"-->
                          <!--placeholder='到期时间' style="margin-top: 8px"-->
                          <!--:disabled-days-of-week="[]"-->
                          <!--:format="'yyyy-MM-dd'"-->
                          <!--:show-rest-button="reset"-->
                          <!--v-model = "f_cyyjinstall_end">-->
                        <!--</datepicker>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>

//获取json配置文件


export default {
  title: '安检单查看',
  data () {
    return {
      bjqflag:false,
      zjflag:false,
      rsqflag:false,
      bgglflag:false,
      cyyjflag:false,
      hasBJQ:'',
      bjqInstallation:'',
      bjqValue:{},
      rsqValue:{},
      zjValue:{},
      bgglValue:{},
      cyyjValue:{},
      f_bjqinstall_start:'',
      f_bjqinstall_end:'',
      hasBJQ:'',
      hasZJ:'',
      zjInstallation:'',
      zjStatus:'',
      f_zjBrand:'',
      f_zjinstall_start:'',
      f_zjinstall_end:'',
      hasRSQ:'',
      f_rsqBrand:'',
      f_rsqinstall_start:'',
      f_rsqinstall_end:'',
      hasBGGL:'',
      f_bgglPower:'',
      bgglStatus:'',
      f_bgglinstall_start:'',
      f_bgglinstall_end:'',
      hasCYYJ:'',
      f_cyyjBrand:'',
      f_cyyjinstall_start:'',
      f_cyyjinstall_end:''
    }
  },
  props:{
    zjCondition:{
      type:Object
    },
    bjqCondition:{
      type:Object
    },
    rsqCondition:{
      type:Object
    },
    cyyjCondition:{
      type:Object
    },
    bgglCondition:{
      type:Object
    },
  },
  methods: {
    /**
     *
     * @param type  存放各个模块的下拉参数和名称
     * @param typeflag 是否选中该模块标记
     * @param typeValue 该模块下的所有选项对应的变量名及值
     *
    */
    getCondition(deviceType,type,typeflag,typeValue){
      console.log('type',type)
      this[typeflag] = !this[typeflag]
      this[type]['deviceType'] = deviceType
      if(!this[typeflag]){
        this[type] = {}
        for(let key in this[typeValue]){
          console.log('key',key)
          this[key] = ''
        }
      }

    },
    /**
     *
     * @param condition  存放各个模块的所选参数和名称
     * @param itemName 查询条件名称
     * @param itemValue 该选项的变量名
     * @param typeValue 该模块下的所有选项对应的变量名及值,用于取消模块选中时选中数据的清除
     *
     */
    addCondition(condition,itemName,itemValue,typeValue){
      console.log('condition',condition)
      console.log('itemName',itemName)
      console.log('itemValue',itemValue)
      console.log('this[itemValue]',this[itemValue])
      if(!this[itemValue])
        return
      if((itemName =='有否' && this[itemValue] == '无') || (itemName =='是否安装' && this[itemValue] == '否')){
        //如果选择未安装，则清空除是否安装项之外的选中项的值
        for (let key in this[typeValue]){
          if(key != itemValue){
            this[key] = ''
          }
        }
      }
      this[condition][itemName] = this[itemValue]
      this[typeValue][itemValue] = this[itemValue]
    },
  },
  ready(){
  },
  watch:{

  }

}
</script>
