<template>
  <modal :show.sync="show" v-ref:modal :backdrop="isBack">
    <div slot="modal-header" class="modal-header">
      <span class="modal-title font">
        {{piece.f_device_type}}
      </span>
    </div>
    <div slot="modal-body" class="modal-body">
      <div style="width: 95%;margin: auto">
        <form>
          <div v-for="row in f_items">

            <div class="row" v-if="row.type == 'picture'" v-show="row.isshow">
              <label class="control-label font text-left">{{row.f_item_name}}{{row.disable}}<span  v-if="row.checkmust">*</span></label>
              <div class="form-group col-sm-12" >
                <div class="auto" >
                  <div class="panel">
                    <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
                      <div class="row" style="height: 240px;overflow: scroll;top: 1px">
                        <div class="col-sm-4">
                          <img-self  :src="row.f_path" :alt="row.f_item_name"  width="150" height="200"></img-self>
                        </div>
                      </div>
                      <div class="row text-right div-photo">
                        <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic($index, row.f_item_name)" v-if="role!='androidview'">拍照</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"   @click="delfile($index, row.f_path)" v-if="role!='androidview'" style="width: 20px;"></img>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="row" v-if="row.type == 'string'" style="margin-top: 6px" v-show="row.isshow">
              <label class="col-xs-4 control-label font text-left">{{row.f_item_name}}<span  v-if="row.checkmust">*</span></label>
              <div class="col-xs-8">
                <input type="text"  class="form-control" maxlength="100" v-model="row.f_item_value"  :readonly="role == 'androidview' || row.readonly">
              </div>
            </div>

            <div class="row" v-if="row.type == 'inputSelector'" style="margin-top: 6px" v-show="row.isshow">
              <label class="col-xs-4 control-label font text-left">{{row.f_item_name}}<span  v-if="row.checkmust">*</span></label>
              <div class="col-xs-8">
                <input-select class="col-xs-8"
                              :value.sync="row.selected"
                              v-model="row.selected"
                              :readonly="false"
                              :options="row.options"
                              @change="changse"
                              @click="transelation($index)"></input-select>
              </div>
            </div>

            <div class="row" v-if="row.type == 'number'" style="margin-top: 6px" v-show="row.isshow">
              <label class="col-xs-4 control-label font text-left">{{row.f_item_name}}<span  v-if="row.checkmust">*</span></label>
              <div class="col-xs-8">
                <input type="text" class="form-control" v-model="row.f_item_value" maxlength="20" :readonly="role == 'androidview' || row.readonly"  onkeyup="value=value.replace(/[^\d\.]/g,'')">
              </div>
            </div>

            <div class="row select-overspread" v-if="row.type == 'selector'" style="margin-top: 6px;width: 100%" v-show="row.isshow">
              <label class="col-xs-4 control-label font text-left">{{row.f_item_name}}<span  v-if="row.checkmust">*</span></label>
              <div class="col-xs-8 form-input-group" >
                <v-select   :value.sync="row.selected"
                            v-model="row.selected"
                            placeholder='请选择'
                            :options="row.options"
                            :disabled="role == 'androidview' || row.readonly"
                            @change="changse"
                            @click="transelation($index)"
                            :multiple="row.multiple"
                            :close-on-select="!row.multiple" clear-button></v-select>
              </div>
            </div>
            <div class="row select-overspread"  v-if="row.type == 'selector' && (row.f_path != '' || row.f_is_defect != '') && (livedispose == 'true' || livedispose == true) " style="margin-top: 6px">
              <label class="col-xs-4 control-label font text-left">现场已处理</label>
              <v-select   class="col-xs-8"
                          :value="row.f_live_dispose"
                          :value-single="true"
                          :options="lives"
                          :disabled="role == 'androidview'"
                          @change="changlive"
                          @click="transelation($index)"
                          close-on-select clear-button></v-select>
            </div>
              <div class="form-group col-sm-12"  v-if="row.type == 'selector' && (row.f_path != '' || row.f_is_defect != '')" style="margin-top: 40px">
                  <div class="auto">
                    <div class="panel">
                      <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px">
                        <div class="row" style="height: 240px;top: 1px">
                          <div class="col-sm-4">
                            <img-self  :src="row.f_path" :alt="row.f_item_name"  width="150" height="200"></img-self>
                          </div>
                        </div>
                        <div class="row text-right div-photo">
                          <button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic($index, row.f_item_name)" v-if="role != 'androidview'">拍照</button>
                          &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../assets/remove.png" :class="style__"  v-if="role != 'androidview'" @click="delfile($index, row.f_path)" style="width: 20px;"></img>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>

            <div class="form-group col-sm-12"   v-if="row.type == 'selector' && row.tooltip != undefined  && row.tooltip != '' "  style="margin-top: 40px">
              <div class="auto">
                <div class="panel">
                  <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: auto">
                  {{row.tooltip}}
                  </div>
                </div>
              </div>
            </div>


            <div class="row app-input" v-if="row.type == 'date'" style="margin-top: 6px" v-show="row.isshow">
              <label class="col-xs-4 control-label font text-left">{{row.f_item_name}}<span  v-if="row.checkmust">*</span></label>
              <div class="col-xs-8">
                <datepicker id="f_making_date" :placeholder= row.f_item_name
                            :value.sync="row.f_item_value"
                            :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            class="col-xs-8"
                            :show-reset-button="reset" readonly="readonly">
                </datepicker>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-cancel" @click="cancel()">取消</button>
      <button type="button" class="btn btn-save" @click="save()">确定</button>
    </div>
  </modal>


</template>

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

  export default {
    title: '设备项信息',
    data() {
      return {
        isBack:false,
        paper: this.$parent.$parent.$parent.data,
        f_items:[],
        page:{},
        selectindex:null,
        lives:[{label: '是', value: '是'},{label: '否', value: '否'}],
        f_live_dispose:'否'
      }
    },
    props: ['config','device','idx','show','operation','role'],
    components: {
      Datepicker
    },
    ready() {
      //tag
      if(Vue.config.safecheck != undefined){
        if(Vue.config.safecheck.ApproveConfig != undefined){
          if(Vue.config.safecheck.ApproveConfig.livedispose != undefined) {
            this.livedispose = Vue.config.safecheck.ApproveConfig.livedispose
          }
        }
      }
      //创建页面所需数据
      this.$set('piece', JSON.parse(JSON.stringify(this.paper['device'+this.device.n][this.idx])))
      //tag)
      //tag)
      let n = 0
      for (let item in this.config[this.device.device].items) {
        let index = this.config[this.device.device].items[item].index-1
        this.$set('page.options' + index, [])
        //tag)
        //tag)
        //tag)
        // 先根据配置组接页面
        let f_item_value
        if(this.config[this.device.device].items[item].type == 'selector'){
          f_item_value = []
          // if(this.config[this.device.device].items[item].data){
          //   f_item_value.push(this.config[this.device.device].items[item].data)
          // }
        }else{
          f_item_value = ''
        }
        //tag)
        let it = {
          type: this.config[this.device.device].items[item].type,
          f_item_name: item,
          checkmust: this.config[this.device.device].items[item].checkmust,
          f_item_value: f_item_value,
          f_is_defect: '',
          multiple:this.config[this.device.device].items[item].multiple == true?this.config[this.device.device].items[item].multiple:false,
          isshow:this.config[this.device.device].items[item].isshow == false?this.config[this.device.device].items[item].isshow:true,
          readonly: this.config[this.device.device].items[item].readonly == true?true:false,
          f_path: '',
          tooltip:'',
          f_live_dispose:''
        }
        this.$set('f_items['+index+']',it)
        if (this.config[this.device.device].items[item].type == 'selector' ||this.config[this.device.device].items[item].type == 'inputSelector') {
          if(this.config[this.device.device].items[item].type == 'selector'){
            this.page['options' + index].push({
              label: "请选择",
              value: ''
            })
          }
          for (let i in this.config[this.device.device].items[item].options) {
            this.page['options' + index].push({
              label: this.config[this.device.device].items[item].options[i].data,
              value: this.config[this.device.device].items[item].options[i].data
            })
          }
          if(this.config[this.device.device].items[item].type == 'selector'){
            this.$set('f_items['+index+'].selected',[])
          }else if(this.config[this.device.device].items[item].type == 'inputSelector'){
            this.$set('f_items['+index+'].selected','')
          }

          this.$set('f_items['+index+'].options',this.page['options' + index])

          //tag)
        }
        n = n + 1
      }
      if(JSON.stringify(this.piece) == '{}') {
        // 如果没有，则新建
        this.$set('piece.f_items',this.f_items)
        this.$set('piece.f_device_type',this.device.device)
      }
      else {
        // 已经存在，把之前填入的数据重新填入
        for (let f in this.f_items){
          for(let p in this.piece.f_items) {
            //tag)
            //tag)
            if (this.f_items[f].f_item_name == this.piece.f_items[p].f_item_name) {
              this.f_items[f] = Object.assign(this.f_items[f], this.piece.f_items[p])
              //tag)
              if (this.f_items[f].type == 'selector' || this.f_items[f].type == 'inputSelector') {
                //tag)
                //tag)
                this.f_items[f].selected = this.piece.f_items[p].f_item_value
                //tag)
              }
            }
          }
          for (let em in this.config[this.device.device].items) {
            if (this.config[this.device.device].items[em].type == 'selector' && em == this.f_items[f].f_item_name) {
              this.f_items[f].options =[]
              for (let k in this.config[this.device.device].items[em].options) {
                this.f_items[f].options.push({
                  label: this.config[this.device.device].items[em].options[k].data,
                  value: this.config[this.device.device].items[em].options[k].data
                })
              }
            }
          }
        }
        //tag)
        this.$set('piece.f_items',this.f_items)
      }
      this.towatch()
    },
    methods: {
      changse(val){
        if(val == undefined){
          return
        }
        if(this.selectindex != null) {
          if(this.f_items[this.selectindex].type == 'selector'){
            this.f_items[this.selectindex].f_item_value = val
          }else if(this.f_items[this.selectindex].type == 'inputSelector'){
            this.f_items[this.selectindex].f_item_value = val.target.value
          }
        }
      },
      changlive(val){
        if(val == undefined){
          return
        }
        if(this.selectindex != null) {
          this.f_items[this.selectindex].f_live_dispose = val
        }
      },
      transelation(val){
        this.selectindex = val
      },
      towatch(){
        for(let n in this.f_items){
          if(this.f_items[n].type  == 'selector' || this.f_items[n].type  == 'inputSelector'){
            // 监听下拉框，如果有隐患，需要拍照
            this.$watch('f_items['+n+'].selected',function(val) {
                // 下拉框值
                //tag)
                // 下拉框所属设备
                //tag
                // 下拉框所属项
                //tag
                let shImage = false
                // if(this.config[this.device.device].items[item].type == 'selector'){
                //   this.f_items[n].f_item_value = val
                // }else if(this.config[this.device.device].items[item].type == 'inputSelector'){
                //   this.f_items[n].f_item_value = val[0]
                // }
                // 在配置中查找该项
                for (let item in this.config[this.device.device].items) {
                  let type = this.config[this.device.device].items[item].type
                  let multiple = this.config[this.device.device].items[item].multiple
                  let options = this.config[this.device.device].items[item].options
                  if ((this.config[this.device.device].items[item].type == 'selector' || this.config[this.device.device].items[item].type == 'inputSelector') && item == this.f_items[n].f_item_name) {
                    for (let i in options) {
                      let value
                      if(this.config[this.device.device].items[item].type == 'selector' && this.config[this.device.device].items[item].multiple == false){
                        value = val[0]
                      }else if (this.config[this.device.device].items[item].type == 'inputSelector'){
                        value = val
                      }
                      //tag)
                      // 如果未选择，清空图片、隐患信息等
                      if((type == 'selector' && val.length == 0) || (type == 'inputSelector' && val == '')){
                        this.f_items[n].f_path = ''
                        this.f_items[n].f_is_defect = ''
                        this.f_items[n].f_defect_level = ''
                        this.f_items[n].f_live_dispose = ''
                        this.f_items[n].tooltip = ''
                      }
                      if((type == 'selector' && multiple == false && options[i].data == val[0]) || (type == 'inputSelector' && options[i].data == val) || (type == 'selector' && multiple == true && val.indexOf(options[i].data) > -1)){
                        // 找到选中的项了
                        //tag
                        if(options[i].isdefect == true ){
                          shImage = true
                        }
                        if(options[i].isdefect == false || this.f_items[n].f_item_value == ''){
                          shImage = false
                        }
                        //tag
                        if(shImage){
                          this.f_items[n].f_is_defect =true
                          this.f_items[n].f_defect_level = options[i].level
                          this.f_items[n].f_path = Vue.nopic
                          this.f_items[n].f_live_dispose = '否'
                          this.f_items[n].tooltip= options[i].tooltip
                        }else{
                          this.f_items[n].f_path = ''
                          this.f_items[n].f_is_defect = ''
                          this.f_items[n].f_defect_level = ''
                          this.f_items[n].f_live_dispose = ''
                          this.f_items[n].tooltip = ''
                        }
                      }
                    }
                  }
                }
              }
            )
            // this.$watch('other',function(val){
            //   //tag
            //   if(this.selectindex != null) {
            //     let index = this.f_items[this.selectindex].f_item_value.indexOf('其他')
            //     if(index > -1){
            //       this.f_items[this.selectindex].f_item_value.splice(index,1,this.other)
            //     }
            //   }
            //
            // })
          }
        }
        //tag)
      },
      cameraCallBack(prop, fileName) {
        HostApp.__this__.$set( 'f_items['+prop+'].f_path', fileName + '?' + Math.random())
        //tag
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        //tag
        let fileName
        if(!this.f_items[prop].f_path || this.f_items[prop].f_path.includes("nopic.png")) {
          fileName = Util.guid() + '-' + 'device'+this.device.n + '-' + this.idx + '-'+'f_items'+prop+ '.jpg'
        } else {
          fileName = Util.getFileName(this.f_items[prop].f_path)
        }
        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('devices', {},'paper-router')
      },

      delfile(prop, fileName) {
        //tag
        //tag)
        if(fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          this.f_items[prop].f_path = Vue.nopic
        }
      },
      save(){
        let nullCount = 0
        let metertitles
        //判断当前是否有选中项
        for (let row in this.f_items){
          if(this.f_items[row].selected  && this.f_items[row].selected != '' && this.f_items[row].selected instanceof Array){
            //tag
            this.f_items[row].f_item_value = this.f_items[row].selected
          }else if(this.f_items[row].selected  && this.f_items[row].selected != ''){
            //tag
            this.f_items[row].f_item_value = this.f_items[row].selected
          }
          if(this.f_items[row].f_item_value instanceof Array && this.f_items[row].f_item_value.length != 0 ){
            nullCount = nullCount+1
          }else if(this.f_items[row].f_item_value != ''){
            nullCount = nullCount+1
          }
        }
        if(nullCount == 0){
          this.$showMessage('未添加任何内容！')
        }else{
          let picture = []
          // for (let row in this.f_items){
          //   let a={}
          //   a.f_path = this.f_items[row].f_path
          //   a.name = this.f_items[row].f_item_name
          // }
          //   picture.push(a)
          this.$set(`paper['device${this.device.n}'][${this.idx}]`, this.piece)
          this.$parent.showDevice = false
          this.$dispatch('finishChoose')
          //tag
        }
      },
      cancel(){
        if(this.operation == 'edit'){
          for (let row of this.f_items){
            if(row.f_item_value != ''){
              this.$parent.showDevice = false
              return
            }
          }
        } else if (this.operation == 'add'){
          this.$parent.paper['device' + this.device.n].pop()
          this.$parent.showDevice = false
        }
      }
    },
  }
</script>
<style>
  .modal{
    overflow:auto!important;
  }
  .modal-open{
    overflow:auto!important;
  }
.font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .btn-cancel{
    border:1px solid #499edf;
    background-color: #f5fbff;
    border-radius: 7px;
    color: #499edf;
    font: 15px PingFang-SC-Bold;
  }
  .btn-save{
    background-color: #499edf;
    border-radius: 7px;
    font: 15px PingFang-SC-Bold;
    color: #ffffff;
  }

</style>
