<style>
  textarea
  {
    width:100%;
  }
</style>
<template>
  <div class=" col-md-12 col-lg-12 ">
    <!-- <div class="form-group" v-show="paper.f_defects && paper.f_defects.length>0" :class="paper.style__">
       <label class="col-sm-12 control-label">维修人：</label>
       <div class="col-sm-12">
         <v-select :value.sync="f_mechanics" :options='mechanics' placeholder='请选择维修人'
           close-on-select clear-button></v-select>
       </div>
     </div>-->
    <table class="table">
      <tbody>
      <tr v-show="role == 'repair'">
        <td>用户电话：</td>
        <td colspan="2">{{paper.f_user_phone2 ? paper.f_user_phone2 : paper.f_phone }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-earphone" @click='makeAPhoneCall(paper.f_phone)'></span></td>
      </tr>
      </tbody>
      <tbody v-for="row in paper.f_defects">
      <tr :class="paper.style__">
        <td>隐患级别</td><td>{{row.f_defect_level}}</td>
      </tr>
      <tr :class="paper.style__">
        <td>隐患</td><td>{{row.f_defect}}</td>
      </tr>
      <tr :class="paper.style__">
        <td>部位</td><td>{{row.f_device_type}}</td>
      </tr>
      <tr :class="paper.style_view_" >
        <td>处理方式</td>
        <td>
          <radio-group :value.sync="row.f_resolve_type" type="success" buttons="false">
            <radio value="现场处理">现场处理</radio>
            <radio value="用户处理">用户处理</radio>
            <radio value="维修处理">维修处理</radio>
          </radio-group>
        </td>
      </tr>
      <tr :class="paper.style_view_">
        <td>整改结果</td>
        <td>
          <radio-group :value.sync="row.f_ratification" type="success" buttons="false">
            <radio value="已处理">已处理</radio>
            <radio value="未处理">未处理</radio>
          </radio-group>
        </td>
      </tr>
      <tr v-if="row.f_defect_path">
        <td>整改前照片</td>
        <td><img-self   :src="row.f_defect_path" alt="整改前照片" width="150" height="200"></img-self>
      </td>
      </tr>
      <tr v-if="row.f_ratification == '已处理'">
        <td>整改后照片</td>
        <td>
          <img-self  @click="takePic($index, 'f_ratified_path', row.f_defect + '整改后照片')"  :src="row.f_ratified_path" alt="{{row.f_defect}}整改后照片" width="150" height="200"></img-self>

          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile($index, 'f_ratified_path', row.f_ratified_path)"></span>
        </td>
      </tr>
      <tr :class="paper.style_view_">
        <td>备注</td><td><textarea  v-model="row.f_remark" rows="2"></textarea></td>
      </tr>
      </tbody>
    </table>
    <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'

  export default {
    title: '隐患汇总',
    data() {
      return {
        paper: this.$parent.$parent.data,
        defects: {},
        f_mechanics: '',
        mechanics: Vue.mechanics,
        role: this.$parent.$parent.role
      }
    },
    ready() {
      this.$parent.$parent.collectDefects()
      this.$set('defects', this.$parent.$parent.savedefect)
      //this.paper.f_defects.sort(this.comp)
      // if(!this.paper.f_repairman) {
      //     this.$set('paper.f_repairman', null)
      // } else {
      //   this.f_mechanics = [this.paper.f_repairman]
      //   console.log('还原的维修人：' + this.f_mechanics)
      // }
      this.$watch('f_mechanics', function (val) {
        this.paper.f_repairman = val[0]
        console.log(JSON.stringify(val))
      })
      this.paper.f_defects.forEach((row) => {
        if(!row.f_ratified_path)
          Vue.set(row, 'f_ratified_path', Vue.nopic)
        if(!row.f_resolve_type)
          Vue.set(row, 'f_resolve_type', '维修处理')
        if(!row.f_ratification)
          Vue.set(row, 'f_ratification','未处理')
    })
  },
    components: {
      RadioGroup,
      Radio
    },
    methods: {
      cameraCallBack(idx, prop, fileName) {
        console.log(prop + ',' + fileName)
        HostApp.__this__.$set('paper.f_defects[' + idx + '].' + prop, fileName + '?' + Math.random())
        //Vue.set(HostApp.__this__.paper.f_defects[idx].prop, fileName + '?' + Math.random())
        console.log(HostApp.__this__.paper.f_defects[idx].prop)
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(idx, prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        let fileName
        if (!this.paper.f_defects[idx] || !this.paper.f_defects[idx].prop || this.paper.f_defects[idx].prop.includes("nopic.png")) {
          fileName = Util.guid() + '-defects-' + idx + '-' + prop + '.jpg'
        } else {
          fileName = Util.getFileName(this.paper.f_defects[idx].prop)
        }
        HostApp._open_a_page({
          type: 'boomerang',
          page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
          param: {
            file: fileName,
            requestCode: 111,
            callback: 'javascript:HostApp.__callback__(' + idx + ',"' + prop + '", "%s");',
            watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + Vue.user.name
          }
        })
      },
      delfile(idx, prop, fileName) {
        if (fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          Vue.set(this.paper.f_defects[idx], prop, Vue.nopic)
        }
      },
      comp(a, b) {
        let a1 = window.parseInt(a.f_defect_level.substr(0, 1), 16) * 64 + window.parseInt(a.f_defect_level.substr(1), 10)
        let b1 = window.parseInt(b.f_defect_level.substr(0, 1), 16) * 64 + window.parseInt(b.f_defect_level.substr(1), 10)
        return a1 - b1
      },
      makeAPhoneCall(phoneNumber) {
        HostApp.makeAPhoneCall(phoneNumber)
      },
      viewPic(fileName) {
        console.log(fileName)
        if (this.$parent.$parent.role == 'view') {
          if (!fileName.endsWith('nopic.png')) {
            this.$parent.$parent.pic_to_be_viewed = fileName
            this.$parent.$parent.showModal = true
          }
        } else {
          this.$parent.$parent.viewPic(fileName)
        }
      }
    },
    watch: {
      '$parent.$parent.savedefect'(val) {
        this.paper.f_defects.forEach((item) => {
        if (item.f_ratification == '已处理') {
          item.f_ratifiedpeople = this.paper.f_checker_name
          item.f_ratifieddate = this.paper.f_offsite_time
        }
      })
      },

    }
  }
</script>
