<template>
  <div class="select-overspread repair-bg">
    <div class="bq-parent">
      <blockquote class="blockquote">
        <p>户内维修1</p>
      </blockquote>
    </div>
    <div class="panel panel-default auto repair-info-content">
      <div class="panel-body">
        <!--<div class="auto" v-if="!show">-->
            <!--<input class="magic-checkbox" type="checkbox" value='户内维修' id="huanbiao-checkbox-hunei"-->
	    <!--@click="switchDetails('户内维修', $event)" v-model="hunei.f_if_hunei" :true-value="'是'" :false-value="''" />-->
            <!--<label for="huanbiao-checkbox-hunei">户内维修</label>-->
        <!--</div>-->
        <!--<div class="auto" v-if="show">-->
          <!--<span>户内维修</span>-->
        <!--</div>-->
        <!--<div class="auto" v-if="hunei && !show">-->
          <!--<input class="magic-checkbox" type="checkbox"  id="qimixing-checkbox-one" :true-value="'是'" :false-value="''"-->
                 <!--v-model="hunei.f_if_qimi"  :disabled="!isHunei">-->
          <!--<label for="qimixing-checkbox-one">气密性报修</label>-->
        <!--</div>-->
        <!--<div class="auto" v-if="hunei && show">-->
          <!--<span>气密性保修</span>-->
        <!--</div>-->
        <div class="auto">
          <input class="magic-checkbox" type="checkbox"  id="huanbiao-checkbox-one" :true-value="'是'" :false-value="''"
	  v-model="hunei.f_if_change" >
          <label for="huanbiao-checkbox-one">换表</label>
        </div>
        <div class="auto">
          <span>换表</span>
        </div>
        <!--<div class="auto" v-if="hunei && !show">-->
          <!--<input class="magic-checkbox" type="checkbox"  id="qita-checkbox-one" :true-value="'是'" :false-value="''"-->
                 <!--v-model="hunei.f_if_other"  :disabled="!isHunei">-->
          <!--<label for="qita-checkbox-one">其他维修</label>-->
        <!--</div>-->
        <!--<div class="auto" v-if="hunei && show">-->
          <!--<span>其他维修</span>-->
        <!--</div>-->
        <div class="span auto compatible">
          <!--气密性报修相关信息-->
          <!--<div class="row auto" v-if="hunei.f_if_qimi">-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4 form-input-group">-->
              <!--<div class="col-sm-4">-->
                <!--<label class="text-justify lb-left">是否漏气</label>-->
                <!--<span v-if="show">{{hunei.f_louqi}}</span>-->
              <!--</div>-->
              <!--<div class="col-sm-4">-->
                <!--<input class="magic-radio" type="radio" name='louqi' value="是" id="louqiyes-radio" v-model="hunei.f_louqi" :disabled="!hunei" v-if="!show">-->
                <!--<label for="louqiyes-radio" v-if="!show">是</label>-->
              <!--</div>-->
              <!--<div class="col-sm-4">-->
                <!--<input class="magic-radio" type="radio" name='louqi' value="否" id="louqino-radio" v-model="hunei.f_louqi" :disabled="!hunei" v-if="!show">-->
                <!--<label for="louqino-radio" v-if="!show">否</label>-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4  form-input-group">-->
              <!--<label class="lb-left text-justify">立管上游</label>-->
              <!--<span v-if="show">{{hunei.f_liupduan}}</span>-->
              <!--<v-select :value.sync="hunei.f_qi_liupduan" close-on-select multiple="multiple"-->
                        <!--:options='liupservice' placeholder='请选择' :disabled="!(hunei.f_louqi === '是')" v-if="!show">-->
              <!--</v-select>-->
            <!--</div>-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4  form-input-group">-->
              <!--<label class="lb-left text-justify">立管段</label>-->
              <!--<span v-if="show">{{hunei.f_liguanduan}}</span>-->
              <!--<v-select :value.sync="hunei.f_qi_liguanduan" close-on-select multiple="multiple"-->
                        <!--:options='liservice' placeholder='请选择' :disabled="!(hunei.f_louqi === '是')" v-if="!show">-->
              <!--</v-select>-->
            <!--</div>-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4  form-input-group">-->
              <!--<label class="lb-left text-justify">支管段</label>-->
              <!--<span v-if="show">{{hunei.f_zhiguanduan}}</span>-->
              <!--<v-select :value.sync="hunei.f_qi_zhiguanduan" close-on-select multiple="multiple"-->
                        <!--:options='zhiservice' placeholder='请选择' :disabled="!(hunei.f_louqi === '是')" v-if="!show">-->
              <!--</v-select>-->
            <!--</div>-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4  form-input-group" >-->
              <!--<label class="lb-left text-justify">其他</label>-->
              <!--<span v-if="show">{{hunei.f_qi_other}}</span>-->
              <!--<textarea name="name" rows="2" class="form-control ver-textarea" v-model="hunei.f_qi_other" :disabled="!(hunei.f_louqi === '是')" v-if="!show"></textarea>-->
            <!--</div>-->
          <!--</div>-->
          <!--换表相关信息-->
          <div class="row auto">
            <div class="col-xs-12 col-sm-6 col-md-4 row form-input-group">
              <label class="lb-left text-justify">换表原因</label>
                <span v-if="show">{{hunei.f_reason_change}}</span>
                <v-select :value.sync="hunei.f_reason_change" close-on-select :value-single="true"
                    :options='changemeter' placeholder='请选择'
		     :disabled="!(hunei && hunei.f_if_change === '是')">
                </v-select>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 row form-input-group">
              <label class="lb-left text-justify">换表类型</label>
                <span>{{hunei.f_type_change}}</span>
                <v-select :value.sync="hunei.f_type_change" close-on-select :value-single="true"
                    :options='changetype' placeholder='请选择' :disabled="!(hunei && hunei.f_if_change === '是')"
                          v-if="!show">
                </v-select>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">原表号</label>
              <span v-if="show">{{f_meternumber}}</span>
              <input id="hunei.f_old_id"  readonly type="text" class="form-control"  v-model='f_meternumber'>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">原表读数</label>
              <span v-if="show">{{f_old_backnumber}}</span>
              <input type="text" name=""  class="form-control"  v-model='f_old_backnumber'>
            </div>
          </div>
          <div class="row auto ">
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">新表号</label>
              <span v-if="show">{{hunei.f_new_backnumber}}</span>
              <input type="text" id="hunei-f_new_backnumber" class="form-control" v-model='hunei.f_new_backnumber'>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">累计购气</label>
              <span v-if="show">{{f_metergasnums}}</span>
              <input type="text" name="" readonly class="form-control" v-model='f_metergasnums'>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">补气量</label>
              <span v-if="show">{{f_gasbill}}</span>
              <input type="text" name=""  readonly v-model="f_gasbill"  class="form-control">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 row form-input-group">
              <label class="lb-left text-justify">表品牌</label>
              <span v-if="show">{{f_gaswatchbrand}}</span>
              <v-select :value.sync="f_gaswatchbrand" close-on-select :value-single="true"
                        :options='pinpai' placeholder='请选择' :disabled="!(hunei && hunei.f_if_change === '是')"
                        @change="changed"
                        v-if="!show">
              </v-select>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">表厂</label>
              <span v-if="show">{{f_changjia}}</span>
              <input type="text" name="" readonly  v-model="f_changjia"  class="form-control">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 row form-input-group">
              <label class="lb-left text-justify">新表型号</label>
              <span v-if="show">{{f_metertype}}</span>
              <v-select :value.sync="f_metertype" close-on-select :value-single="true"
                        :options='xinghao' placeholder='请选择'>
              </v-select>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 row form-input-group">
              <label class="lb-left text-justify">新表类型</label>
              <span v-if="show">{{f_gasmeterstyle}}</span>
              <input type="text" name="" readonly  v-model="f_gasmeterstyle"  class="form-control">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group" v-if="false">
              <label class="text-justify lb-left">次数</label>
              <span v-if="show">{{f_times}}</span>
              <input type="text" name=""  v-model="f_times"  class="form-control">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group">
              <label class="text-justify lb-left">卡号</label>
              <span v-if="show">{{f_cardid}}</span>
              <input type="text" name=""  v-model="f_cardid"  readonly class="form-control">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 form-input-group" v-if="!show">
              <div class="col-sm-6">
                <button type="button" name="button" class="btn btn-primary" @click="upload">保存</button>
              </div>
              <div class="col-sm-6">
                <button type="button" name="button" class="btn btn-primary"  @click="gohuan">换表补气</button>
              </div>
            </div>
          </div>
          <!-- 其他故维修相关信息-->
          <!--<div class="row auto" v-if="hunei.f_if_qimi || hunei.f_if_other || hunei.f_if_change">-->
            <!--<div class="col-xs-12 col-sm-12 col-md-4  form-input-group" >-->
              <!--<label class="lb-left text-justify">维修过程</label>-->
              <!--<span v-if="show">{{hunei.f_process}}</span>-->
              <!--<textarea name="name" rows="2" class="form-control ver-textarea" v-model="hunei.f_process"  v-if="!show"></textarea>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div v-if="!hunei.f_if_change && !show && !hunei.f_if_qimi && !hunei.f_if_other" >如气密性报修，请勾选换表选型，换表，请勾选换表选型，其他维修，请勾选其他</div>-->
          <!--换表相关信息/-->

          <!--<div class="row auto">-->
            <!--<p><big><b>故障详情</b></big></p>-->
          <!--</div>-->
          <!--<div class="row auto">-->
            <!--<div class="col-xs-12 col-sm-6 col-md-4auto" style="margin-bottom: 5px;" v-for="conkout in conkoutAll" >-->
              <!--<input-select :model="conkout" @changerow="retrow" :is-hunei="hunei" :show="show"></input-select>-->
            <!--</div>-->
          <!--</div>-->
        </div>
        <!--<div v-if="!hunei && !show">如做户内维修，请选择户内维修选型</div>-->
      </div>
    </div>
    <add-gas :bukadata="addcardmsg"  :isbuka="bukatype" ></add-gas>
  </div>
</template>
<script>
import AppData from '../../stores/AppData'
import Vue from 'vue'

export default {
  title: '户内维修',
  props: {
    // 工单
    service: {
      type: Object,
      default: {}
    },
    // 本次维修活动
    model: {
      type: Object,
      default:{}
    },
    show:{
      type:Boolean,
      default:false
    },
    userinfo:{
      type:Object,
      default:{}
    }

  },
  data () {
    return {
      isHunei: false,
      ishuanbiao:false,
      addcardmsg:{
        f_user_name:'',
        f_userid:'',
        f_address:'',
        f_changjia:'',
        f_meternumber:'',
        f_aliasname:'',
        f_gaswatchbrand:'',
        f_metertype:'',
        f_gasmeterstyle:'',
        f_times:'',
        f_gasbill:'',
        f_cardid:'',
        klx:''
      },
      f_meternumber:'',
      f_metergasnums:'',
      f_old_backnumber:'',
      f_gasbill:'',
      klx:'',
      f_changjia:'',
      f_aliasname:'',   //厂家别名
      f_gasmeterstyle:'',
      // changjia:[],    厂家
      pinpai:[] ,      //品牌u
      f_new_backnumber:'', //新表号
      f_gaswatchbrand:'',   //新表品牌
      f_metertype:'',     //新表型号
      f_times:'',      //次数
      f_cardid:'',      //新卡号
      xinghao:[],     //型号
      bukatype:'写卡',   //写卡
      isbuqi:false    //换表补气按钮是否显示
    }
  },
  methods: {
    //厂家改变
    changed(val){
      //根据品牌 获取厂家 气表型号
      this.$resetpost(Vue.dataUrl + 'rs/sql/singleTable_OrderBy', {
        data: {
          items: '*',
          tablename: 't_qbnumber',
          orderitem: 'id',
          condition: "parentid = '" + val.id + "'"
        }
      }).then((row) => {
        let rows = row.data
        this.xinghao = rows.map((row) => {
          return {label: row.f_qbnumber, value: {id: row.id, f_qbnumber: row.f_qbnumber, f_type:row.f_type}}
        })
      })
      this.f_changjia = val.f_changjia
      this.klx = val.klx
      this.f_gasmeterstyle = val.f_type
      this.f_aliasname = val.f_aliasname


    },
    upload(){
      let data = {
          id:this.userinfo.id,
          f_meternumber:this.hunei.f_new_backnumber,
          f_aliasname:this.f_aliasname,
          f_gaswatchbrand:this.f_gaswatchbrand.f_pinpai,
          f_metertype:this.f_metertype.f_qbnumber,
          f_type:this.f_metertype.f_type,
          f_gasmeterstyle:this.f_gasmeterstyle,
          f_cardid:'10000000001',
          klx:this.klx,
          f_metergasnums:'0',
          f_cumulativepurchase:'0'
      }
      this.$showMessage('确认后，所有填写内容将上传保存，请确认信息！', ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          this.$resetpost(Vue.dataUrl + 'rs/logic/updataUserInfo', data).then((res) => {
            if(res.data.code === 200){
              this.$showMessage('保存成功')
              this.isbuqi = true
            }
          }).catch((e) => {
            this.$showMessage(JSON.stringify(e) +'保存失败，请退出后，重新进入，如果还未成功，请拨打服务热线咨询')
          })
        }
      })

    },
    gohuan(){
      this.addcardmsg.f_user_name = this.userinfo.f_username
      this.addcardmsg.f_userid = this.userinfo.f_userid
      this.addcardmsg.f_address = this.userinfo.f_address
      this.addcardmsg.f_meternumber = this.f_new_backnumber
      this.addcardmsg.f_changjia = this.f_changjia
      this.addcardmsg.f_aliasname = this.f_aliasname
      this.addcardmsg.f_gaswatchbrand = this.f_gaswatchbrand.f_pinpai
      this.addcardmsg.f_metertype = this.f_metertype.f_qbnumber
      this.addcardmsg.f_gasmeterstyle = this.f_gasmeterstyle
      this.addcardmsg.f_gasbill = this.f_gasbill
      this.addcardmsg.f_cardid = this.f_cardid
      this.addcardmsg.f_times = this.f_times
      this.addcardmsg.klx = this.klx
      this.ishuanbiao = true
    },
    // selectbiao (event) {
    //   this.switchRepair('户内维修', event)
    // },
    // 增加或者取消某种类型维修单
    switchDetails (detailsType, event) {
      if (event.srcElement.checked) {
        this.model.servicerepair.push({
          f_type: detailsType,
        })
        this.isHunei = true
      } else {
        let pos = this.model.servicerepair.findIndex((value) => {
          return  value.f_details_type === detailsType})
        this.model.servicerepair.splice(pos, 1)
        this.isHunei = false
      }
    },
    retrow (row) {
      // 故障详情添加到户内维修中
      if (row.f_content) {
        row = Object.assign({}, row, {f_type: 'a'})
        this.hunei.details.push(row)
      } else {
        let ind = this.hunei.details.findIndex((one) => {
          return row.f_project === one.f_project
        })
        this.hunei.details.splice(ind, 1)
      }
    },

    // 变换 元 方 的通用方法
    changeYuanFang (para) {
      console.log(para)
      if (this.hunei[para] === '方') {
        this.hunei[para] = '元'
      } else if (this.hunei[para] === '元') {
        this.hunei[para] = '方'
      }
    },
    gasbill () {
      this.swapbiao.f_gasbill = ''
    }
  },
  computed: {
    // 获取户内维修对象
    hunei () {
      if (this.model && this.model.servicerepair.length > 0) {
        let result = this.model.servicerepair.find((row) => {
          return row.f_type === '户内维修'
        })
        return result
      }
      return null
    },
    conkoutAll () {
      return AppData.getParam('故障详情')
    },
    changemeter () {
      return AppData.getParam('换表原因')
    },
    changetype () {
      return AppData.getParam('换表类型')
    },
    lowtype () {
      return AppData.getParam('旧表类型')
    },
    newtype () {
      return AppData.getParam('新表类型')
    },
    changegastype () {
      return AppData.getParam('转气类型')
    },
    biaogasschedule () {
      return AppData.getParam('表气费进度')
    },
    liupservice(){
      return AppData.getParam('立管上游')
    },
    liservice(){
      return AppData.getParam('立管段')
    },
    zhiservice(){
      return AppData.getParam('支管段')
    }

  },
  watch:{
    'userinfo'(val){
      this.f_meternumber = val.f_meternumber
      this.f_metergasnums = val.f_metergasnums
    },
    'f_old_backnumber'(val){
      if(!(isNaN(val) || val === ''))
        this.f_gasbill = (parseFloat(this.f_metergasnums)-parseFloat(val)).toFixed(1)
      this.hunei.f_gasbill = this.f_gasbill
      this.hunei.f_old_backnumber = this.val
    },
    'hunei.f_qi_liupduan'(val){
      if (val === ''|| val == undefined ){

      }
      else{
        let array = val
        let str = ''
        array.forEach((value) => {
          str += value + ','
        })
        this.hunei.f_liupduan = str
      }

    },
   'hunei.f_qi_liguanduan'(val){
     if (val === ''|| val == undefined ){

     }
     else {
       let array = val
       let str = ''
       array.forEach((value) => {
         str += value + ','
       })
       this.hunei.f_liguanduan = str
     }
   },
    'hunei.f_qi_zhiguanduan'(val){
      if (val === ''|| val == undefined ){

      }
      else{
      let array = this.hunei.f_qi_zhiguanduan
      let str = ''
      array.forEach((value) => {
        str += value + ','
      })
      this.hunei.f_zhiguanduan = str
      }
    },
    'hunei.f_process'(val) {
      if (val == undefined ){
    }else{
        this.model.f_process =  val
      }}
  },

  ready(){
    //获取厂家，表品牌 下拉参数
    // this.$resetpost(Vue.dataUrl+ 'rs/sql/singleTable_OrderBy', {
    //   data: {
    //     items: '*',
    //     tablename: 't_qibiao',
    //     orderitem: 'id',
    //     condition: `1 = 1`
    //   }
    // }).then((row) => {
    //   let rows = row.data
    //   this.pinpai = rows.map((row) => {
    //       return {label: row.f_pinpai, value: {id: row.id, f_type: row.f_type, f_aliasname:row.f_aliasname,klx:row.klx,f_pinpai:row.f_pinpai,f_changjia:row.f_changjia}}
    //
    //   })
    // })
  },
  components:{
    'add-gas':require('./AddGas.vue'),
  }
}
</script>
