<template>
  <div>
    <form>
      <div class="form-group">
        <label class="col-sm-12 control-label">灶具照片(要求正面照片)：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_pic1_path', '灶具照片')"  :src="piece.f_pic1_path" alt="灶具照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_pic1_path', this.piece.f_pic1_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">品牌：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" v-model="piece.f_brand" maxlength="20">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">型号：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" v-model="piece.f_heatingboiler_model" maxlength="20">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">出厂日期：</label>
        <div class="col-sm-12">
          <input type="date" id="f_making_date" placeholder="出厂日期"
            :value.sync="f_making_date"
            :disabled-days-of-Week="[]"
            :format="'yyyy-MM'"
            :show-reset-button="reset" readonly="readonly">
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">安检项</label>
        <div class="col-sm-12">
            <input type="checkbox" v-model="piece.f_normal">正常</input>
            <input type="checkbox" v-model="piece.f_gas_mismatch">气源不匹配</input>
            <input type="checkbox" v-model="piece.f_damaged">损坏</input>
            <input type="checkbox" v-model="piece.f_valid">报废</input>
            <input type="checkbox" v-model="piece.f_nearwall">与墙面距离不足</input>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_gas_mismatch">
        <label class="col-sm-12 control-label">灶具气源不匹配照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_mismatch_path', '灶具气源不匹配照片')"  :src="piece.f_mismatch_path" alt="灶具气源不匹配照片" width="150" height="200"> </img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_mismatch_path', this.piece.f_mismatch_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_damaged">
        <label class="col-sm-12 control-label">灶具损坏照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_damaged_path', '灶具损坏照片')"  :src="piece.f_damaged_path" alt="灶具损坏照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_damaged_path', this.piece.f_damaged_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_valid">
        <label class="col-sm-12 control-label">灶具报废照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_valid_path', '灶具报废照片')"  :src="piece.f_valid_path" alt="灶具报废照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_valid_path', this.piece.f_valid_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_nearwall">
        <label class="col-sm-12 control-label">灶具与墙面距离不足照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_nearwall_path', '灶具与墙面距离不足照片')"  :src="piece.f_nearwall_path" alt="灶具与墙面距离不足照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_nearwall_path', this.piece.f_nearwall_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">形式</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_setup_state" type="success" buttons="false">
            <radio value="集成">集成</radio>
            <radio value="台式">台式</radio>
            <radio value="镶嵌">镶嵌</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">熄火保护</label>
        <div class="col-sm-12" :class="paper.style__">
          <radio-group :value.sync="piece.f_hasoffprotect" type="success" buttons="false">
            <radio value="有">有</radio>
            <radio value="无">无</radio>
          </radio-group>
        </div>
        <div class="form-group" v-show="piece.f_hasoffprotect == '无'">
          <label class="col-sm-12 control-label">无熄火保护照片：</label>
          <div class="col-sm-12">
            <img-self  @click="takePic('f_hasoffprotect_path', '无熄火保护照片')"  :src="piece.f_hasoffprotect_path" alt="无熄火保护照片" width="150" height="200"> </img-self>
            &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_hasoffprotect_path', this.piece.f_hasoffprotect_path)"></span>
          </div>
        </div>
        <div class="col-sm-12" :class="paper.style__">
          <radio-group :value.sync="piece.f_offprotect_valid" type="success" buttons="false">
            <radio value="有效">有效</radio>
            <radio value="无效">无效</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_offprotect_valid == '无效'">
        <label class="col-sm-12 control-label">熄火保护无效照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_offprotect_valid_path', '熄火保护无效照片')"  :src="piece.f_offprotect_valid_path" alt="熄火保护无效照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_offprotect_valid_path', this.piece.f_offprotect_valid_path)"></span>
        </div>
      </div>
      <div>
        <h4>软管</h4>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">安检项</label>
        <div class="col-sm-12">
            <input type="checkbox" v-model="piece.f_pipe_ok">正常</input>
            <input type="checkbox" v-model="piece.f_pipe_leakage">漏气</input>
            <input type="checkbox" v-model="piece.f_pipe_worn">老化</input>
            <input type="checkbox" v-model="piece.f_pipe_mutilated">破损</input>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_pipe_worn">
        <label class="col-sm-12 control-label">软管老化照片：</label>
        <div class="col-sm-12">
          <img-self @click="takePic('f_worn_path', '软管老化照片')"  :src="piece.f_worn_path" alt="软管老化照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_worn_path', this.piece.f_worn_path)"></span>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_pipe_mutilated">
        <label class="col-sm-12 control-label">软管破损照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_mutilated_path', '软管破损照片')"  :src="piece.f_mutilated_path" alt="软管破损照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_mutilated_path', this.piece.f_mutilated_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">材质</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_pipe_material" type="success" buttons="false">
            <radio value="橡胶">橡胶</radio>
            <radio value="金属管">金属管</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_pipe_material == '橡胶'">
        <label class="col-sm-12 control-label">橡胶软管照片：</label>
        <div class="col-sm-12 text-align-left">
          <img-self  @click="takePic('f_material_path', '橡胶软管照片')"  :src="piece.f_material_path" alt="橡胶软管照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_material_path', this.piece.f_material_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">管卡（个）：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="piece.f_pipe_fasten" number>
          <input type="checkbox" v-model="piece.f_pipe_no_fasten">无管卡</input>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_pipe_no_fasten">
        <label class="col-sm-12 control-label">无管卡照片：</label>
        <div class="col-sm-12">
          <img-self  @click="takePic('f_no_fasten_path', '无管卡照片')"  :src="piece.f_no_fasten_path" alt="无管卡照片" width="150" height="200"></img-self>
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_no_fasten_path', this.piece.f_no_fasten_path)"></span>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">长度（米）：</label>
        <div class="col-sm-12">
          <input type="text" class="form-control" maxlength="10" v-model="piece.f_pipe_length2">
        </div>
      </div>
    </form>
    <a href="#" class="btn btn-primary" @click="goBackValidation">确定</a>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'
import RadioGroup from 'vue-client/src/vue-strap/src/radioGroup'
import Radio from 'vue-client/src/vue-strap/src/radioBtn'
import Datepicker from 'vue-client/src/vue-strap/src/Datepicker'


export default {
  title: '灶具',
  data() {
    return {
      paper: this.$parent.$parent.data,
      brands: Util.choices(this.$parent.$parent.role, '灶具品牌'),
      f_brand: '',
      f_making_date: ''
    }
  },
  props: ['idx'],
  components: {
    RadioGroup,
    Radio,
    Datepicker
  },
  ready() {
    console.log('cooker ready')
    this.$set('piece', this.paper.f_cookers[this.idx])
    //处理照片
    if(!this.piece.f_pic1_path)
      this.$set('piece.f_pic1_path', Vue.nopic)
    if(!this.piece.f_mismatch_path)
      this.$set('piece.f_mismatch_path', Vue.nopic)
    this.$watch("piece.f_gas_mismatch", function(val){
      if(!val)
        this.$set('piece.f_mismatch_path', Vue.nopic)
    })
    if(!this.piece.f_damaged_path)
      this.$set('piece.f_damaged_path', Vue.nopic)
    this.$watch("piece.f_damaged", function(val){
      if(!val)
        this.$set('piece.f_damaged_path', Vue.nopic)
    })
    if(!this.piece.f_nearwall_path)
      this.$set('piece.f_nearwall_path', Vue.nopic)
    this.$watch("piece.f_nearwall", function(val){
      if(!val)
        this.$set('piece.f_nearwall_path', Vue.nopic)
    })
    if(!this.piece.f_valid_path)
      this.$set('piece.f_valid_path', Vue.nopic)
    this.$watch("piece.f_valid", function(val){
      if(!val)
        this.$set('piece.f_valid_path', Vue.nopic)
    })
    if(!this.piece.f_hasoffprotect_path)
      this.$set('piece.f_hasoffprotect_path', Vue.nopic)
    this.$watch("piece.f_hasoffprotect", function(val){
      if(val != '无')
        this.$set('piece.f_hasoffprotect_path', Vue.nopic)
    })
    if(!this.piece.f_offprotect_valid_path)
      this.$set('piece.f_offprotect_valid_path', Vue.nopic)
    this.$watch("piece.f_offprotect_valid", function(val){
      if(val != '无效')
        this.$set('piece.f_offprotect_valid_path', Vue.nopic)
    })
    if(!this.piece.f_worn_path)
      this.$set('piece.f_worn_path', Vue.nopic)
    this.$watch("piece.f_pipe_worn", function(val){
      if(!val)
        this.$set('piece.f_worn_path', Vue.nopic)
    })
    if(!this.piece.f_no_fasten_path)
      this.$set('piece.f_no_fasten_path', Vue.nopic)
    this.$watch("piece.f_pipe_no_fasten", function(val){
      if(!val) {
        this.$set('piece.f_no_fasten_path', Vue.nopic)
      } else {
        this.$set('piece.f_pipe_fasten', 0)
      }
    })
    if(!this.piece.f_mutilated_path)
      this.$set('piece.f_mutilated_path', Vue.nopic)
    this.$watch("piece.f_pipe_mutilated", function(val){
      if(!val)
        this.$set('piece.f_mutilated_path', Vue.nopic)
    })
    if(!this.piece.f_material_path)
      this.$set('piece.f_material_path', Vue.nopic)
    this.$watch("piece.f_pipe_material", function(val){
      if(val != '橡胶')
        this.$set('piece.f_material_path', Vue.nopic)
    })

    if(!this.piece.f_making_date) {
      this.$set('piece.f_making_date', null)
    } else {
      this.f_making_date = this.piece.f_making_date
    }
    if(!this.piece.f_brand) {
        this.$set('piece.f_brand', null)
    } else {
      this.f_brand = [this.piece.f_brand]
    }
    this.$watch('f_brand', function (val) {
        this.piece.f_brand = val[0]
    })
    this.$watch('f_making_date', function (val) {
        this.piece.f_making_date = val
    })
  },
  methods: {
    cameraCallBack(prop, fileName) {
      console.log(prop + ',' + fileName)
      HostApp.__this__.piece[prop] = fileName + '?' + Math.random()
      console.log(HostApp.__this__.piece[prop])
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      console.log('this.piece[prop]:' + this.piece[prop])
      let fileName
      if(!this.piece[prop] || this.piece[prop].includes("nopic.png")) {
        fileName = Util.guid() +'-cooker-' + this.idx + '-' + prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.piece[prop])
      }
      HostApp._open_a_page({type: 'boomerang',
        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
        param: {file: fileName, requestCode: 111, callback:'javascript:HostApp.__callback__("' + prop +'", "%s");', watermark: title + '\t时间：'+ Util.toStandardTimeString() + '\t' + Vue.user.name}
      })
    },
    goBackValidation() {
      this.$goto('paper-device', {}, 'paper-router')
    },
    delfile(prop, fileName) {
      if(fileName == Vue.nopic)
        return
      else {
        HostApp.delfile(fileName)
        this.piece[prop] = Vue.nopic
      }
    }
  }
}
</script>
