<style scoped>
  .bg {
    background-color: blue;
    height: 1px;
    border: 0;
  }
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .search_input {
    border: 0;
    outline: none;
  }
  .font {
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .input-font {
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .btn-font {
    font: 600 16px PingFang-SC-Bold;
    color: #499EDF;
  }
  .btn-color {
    background-color: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #499EDF;
  }
  .app-text {
    font-size: 12px;
  }
  .panel-self {
    border-radius: 10px;
    border: 1px solid #499EDF;
    background-color: #F8F8F8;
  }
  .yybtn-color {
    background-color: #499edf;
    border-radius: 4px;
    border: 1px solid #499EDF;
    color: #FFFFFF;
    font: 14px PingFang-SC-Bold;
  }
  .qxbtn-color {
    background-color: #FFFFFF;
    border-radius: 4px;
    color: #499edf;
    font: 14px PingFang-SC-Bold;
    border: 1px solid #499EDF;
  }
  .red-text {
    color: red;
  }
  .section-title {
    font: 14px PingFang-SC-Bold;
    color: #499EDF;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
  }
  .section_gap {
    height: 10px;
  }
</style>

<template>
  <div style="height: auto;width: 100%">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户姓名：</label>
              </div>
              <div class="col-xs-8">
                <input class="search_input input-font" v-model=model.f_user_name
                       condition="f_user_name like '%{}%'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8">
                <input class="search_input input-font" v-model=model.f_userinfo_code
                       condition="f_userinfo_code like '%{}%'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/是否已检.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">是否管控：</label>
              </div>
              <v-select :value.sync="model.f_is_controlled" class="input-font"
                        :width="'60%'"
                        :options='$parent.$parent.controlStateOptions' placeholder='请选择'
                        v-model="model.f_is_controlled"
                        condition="f_is_controlled = '{}'"
                        close-on-select clear-button></v-select>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/是否已检.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">隐患状态：</label>
              </div>
              <v-select :value.sync="model.f_is_repaired" class="input-font"
                        :width="'60%'"
                        :options='$parent.$parent.repairStateOptions' placeholder='请选择'
                        v-model="model.f_is_repaired" condition="f_is_repaired in {}"
                        :multiple="true" close-on-select clear-button></v-select>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/是否已检.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">起始时间：</label>
              </div>
              <datepicker id="f_start_date" placeholder='起始时间'
                          :value.sync="model.f_start_date"
                          :disabled-days-of-Week="[]"
                          v-model="model.f_start_date"
                          class="input-font col-xs-8"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="reset" readonly="readonly">
              </datepicker>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/是否已检.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">结束时间：</label>
              </div>
              <datepicker id="f_end_date" placeholder='结束时间'
                          :value.sync="model.f_end_date"
                          :disabled-days-of-Week="[]"
                          v-model="model.f_end_date"
                          class="input-font col-xs-8"
                          :format="'yyyy-MM-dd 23:59:00'"
                          :show-reset-button="reset" readonly="readonly">
              </datepicker>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户类型：</label>
              </div>
              <v-select :value.sync="model.f_check_type" class="input-font"
                        :width="'60%'"
                        :options='$parent.$parent.userTypeOptions' placeholder='请选择用户类型'
                        v-model="model.f_check_type" condition="f_check_type = '{}'"
                        close-on-select clear-button></v-select>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.selfSearch">查询
              </button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>是否管控:</b></p>
                  <p class="panel-title col-xs-7 text-left"
                     style="width: 79%; font-weight: bold"
                     :style="{color: row.f_is_controlled === '已管控' ? 'green' : '#f0ad4e'}">
                    {{ row.f_is_controlled }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户编号:</b></p>
                  <p class="panel-title col-xs-5 text-left input-font" style="width: 74%">{{ row.f_userinfo_code }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_user_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="width: 23%;float: left"><b>用户电话:</b></p>
                  <p class="panel-title text-left input-font" style="width: 77%">{{ row.f_user_phone }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="width: 21%;float: left"><b>用户地址:</b></p>
                  <p class="panel-title text-left input-font" style="width: 79%">{{ row.f_address }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="width: 21%;float: left"><b>安检人员:</b></p>
                  <p class="panel-title text-left input-font" style="width: 79%">{{ row.f_checker_name }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>检查项:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_device_type }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>隐患项:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_item_name }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>隐患原因:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_item_value }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>隐患级别:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_defect_level }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>处理方式:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_deal_dispose }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>隐患状态:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_is_repaired }}</p>
                </div>
                <!-- 已管控时显示管控信息摘要 -->
                <div class="col-xs-12" v-if="row.f_is_controlled === '已管控'">
                  <p class="panel-title col-xs-5 text-left font"><b>管控方式:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_control_method }}</p>
                </div>
                <div class="col-xs-12" v-if="row.f_is_controlled === '已管控'">
                  <p class="panel-title col-xs-5 text-left font"><b>管控级别:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_control_level }}</p>
                </div>
                <div class="col-xs-12" style="margin-top: 8px">
                  <button type="button" name="button" class="btn btn-primary"
                          style="background-color:#499edf;float: right"
                          @click="$parent.$parent.$parent.openshowModal(row.f_path)">查看照片
                  </button>
                  <button type="button" name="button" class="btn btn-primary"
                          style="background-color:#f0ad4e;float: right;margin-right:10px;border-color:#f0ad4e;"
                          @click="$parent.$parent.$parent.openControlModal(row)">管控处理
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>

  <!-- 照片查看弹窗 -->
  <modal :show.sync="showModal">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">隐患照片</h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <div class="from-group">
        <div class="row">
          <div class="col-md-6">
            <img-self :src="showimg" width="300" height="400"></img-self>
          </div>
        </div>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="closeshowModal">确认</button>
    </div>
  </modal>

  <!-- 管控处理弹窗 -->
  <modal :show.sync="showControlModal">
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">隐患管控处理</h4>
    </div>
    <div slot="modal-body" class="modal-body">
      <!-- 处理前隐患信息 -->
      <div class="section-title">处理前隐患信息</div>
      <div class="row" style="margin-bottom: 6px">
        <p class="col-xs-6 text-left font"><b>检查项:</b> {{ controlResult.f_device_type }}</p>
        <p class="col-xs-6 text-left font"><b>隐患名称:</b> {{ controlResult.f_item_name }}</p>
      </div>
      <div class="row" style="margin-bottom: 6px">
        <p class="col-xs-12 text-left font"><b>隐患原因:</b> {{ controlResult.f_item_value }}</p>
      </div>
      <div class="row" style="margin-bottom: 6px">
        <p class="col-xs-6 text-left font"><b>客户名称:</b> {{ controlResult.f_user_name }}</p>
        <p class="col-xs-6 text-left font"><b>客户电话:</b> {{ controlResult.f_user_phone }}</p>
      </div>
      <div class="row" style="margin-bottom: 10px">
        <p class="col-xs-12 text-left font"><b>客户地址:</b> {{ controlResult.f_address }}</p>
      </div>

      <div class="section_gap"></div>

      <!-- 管控方式（多选） -->
      <div class="row app-row">
        <div class="col-xs-4">
          <p class="panel-title text-left font red-text"><b>管控方式:</b></p>
        </div>
        <div class="col-xs-8">
          <v-select :value.sync="controlData.f_control_method" class="input-font"
                    :width="'100%'"
                    :options='controlMethodOptions' placeholder='请选择管控方式'
                    v-model="controlData.f_control_method"
                    :multiple="true" close-on-select clear-button></v-select>
        </div>
      </div>

      <!-- 处理人（默认当前登录人） -->
      <div class="row app-row">
        <div class="col-xs-4">
          <p class="panel-title text-left font"><b>处理人:</b></p>
        </div>
        <div class="col-xs-8">
          <input class="search_input input-font" v-model="controlData.f_handler"
                 placeholder="请输入处理人" style="width: 90%"/>
        </div>
      </div>

      <!-- 处理时间（默认提交时间） -->
      <div class="row app-row">
        <div class="col-xs-4">
          <p class="panel-title text-left font"><b>处理时间:</b></p>
        </div>
        <div class="col-xs-8">
          <input class="search_input input-font" v-model="controlData.f_control_time"
                 readonly="readonly" style="width: 90%;color: #999"/>
        </div>
      </div>

      <div class="section_gap"></div>

      <!-- 处理照片（必填） -->
      <div class="row">
        <div class="col-xs-12">
          <p class="panel-title text-left font red-text"><b>处理照片（必填）:</b></p>
        </div>
      </div>
      <div class="form-group col-sm-12">
        <div class="auto">
          <div class="panel" style="padding: 10px 10px 5px 10px;">
            <div class="panel-body panel-self"
                 style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
              <img-self :src="controlData.f_photos_path" alt="管控处理照片" :width="140" :height="170"
                        capture="camera" type="file"></img-self>
              <div class="row text-right div-photo" style="height: 50px;margin-top: -30px">
                <img src="../../assets/remove.png"
                     @click="delfile('f_photos_path', controlData.f_photos_path)"/>
                <button type="button" name="button" class="btn btn-primary btn-photo"
                        @click="takePic('f_photos_path','管控处理照片')">拍照
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 备注 -->
      <div class="row app-row">
        <div class="col-xs-3">
          <p class="panel-title text-left font"><b>备注:</b></p>
        </div>
        <div class="col-xs-9">
          <textarea class="input-font " v-model="controlData.f_remark"
                    placeholder="请输入备注信息" style="width: 100%"></textarea>
        </div>
      </div>

      <!-- 管控后隐患级别 -->
      <div class="row app-row">
        <div class="col-xs-4">
          <p class="panel-title text-left font red-text"><b>管控后级别:</b></p>
        </div>
        <v-select :value.sync="controlData.f_control_level" class="input-font"
                  :width="'60%'"
                  :options='defectLevelOptions' placeholder='请选择'
                  v-model="controlData.f_control_level"
                  :value-single="true"
                  close-on-select clear-button></v-select>
      </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="commitControl">确认</button>
      <button type="button" class="btn btn-default" @click="closeControlModal">取消</button>
    </div>
  </modal>
</template>

<script>
  import Vue from 'vue'
  import {PagedList} from 'vue-client'
  import * as Util from '../Util'

  export default {
    title: '隐患管控',
    data() {
      return {
        showModal: false,
        showControlModal: false,
        showimg: '',

        // 管控处理数据
        controlResult: {},
        controlData: {
          f_control_method: [],    // 选中值数组
          f_handler: Vue.user.name,
          f_control_time: '',
          f_photos_path: '',
          f_remark: '',
          f_control_level: ''
        },

        // 管控方式多选选项（从参数系统取值）
        controlMethodOptions: this.$appdata.getParam('管控方式') || [],

        // 管控状态选项
        controlStateOptions: [{label: '请选择', value: ''}, ...(this.$appdata.getParam('管控状态') || [])],
        // 隐患状态多选
        repairStateOptions: this.$appdata.getParam('隐患状态') || [],
        // 用户类型
        userTypeOptions: [{label: '请选择用户类型', value: ''}, ...(this.$appdata.getParam('用户类型') || [])],
        // 管控后隐患级别
        defectLevelOptions: [{label: '请选择级别', value: ''}, ...(this.$appdata.getParam('隐患级别') || [])],

        // 分页列表
        model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/defectControlList`, 20, {
          condition: 'this.condition',
          f_filialeids: `'${Vue.user.orgid}'`
        })
      }
    },
    ready() {
      this.selfSearch()
    },
    methods: {
      // 拍照回调
      cameraCallBack(prop, fileName) {
        HostApp.__this__.$set('controlData.' + prop, fileName)
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },

      // 拍照
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        let fileName
        if (!this.controlData[prop] || this.controlData[prop].includes('nopic.png')) {
          fileName = Util.guid() + '-' + prop + '.jpg'
        } else {
          fileName = Util.getFileName(this.controlData[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
          }
        })
      },

      // 删除照片
      delfile(prop, fileName) {
        if (fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          this.controlData[prop] = Vue.nopic
        }
      },

      // 打开照片查看
      openshowModal(val) {
        this.showimg = `${this.$androidUtil.getProxyUrl()}/rs/image/file/` + val
        this.showModal = true
      },
      closeshowModal() {
        this.showimg = ''
        this.showModal = false
      },

      // 打开管控处理弹窗
      openControlModal(row) {
        this.controlResult = row
        // 设置默认值
        this.controlData = {
          f_control_method: [],
          f_handler: Vue.user.name,
          f_control_time: Util.toStandardTimeString(),
          f_photos_path: '',
          f_remark: '',
          f_control_level: ''
        }
        this.showControlModal = true
      },

      // 关闭管控弹窗
      closeControlModal() {
        this.controlResult = {}
        this.controlData = {
          f_control_method: [],
          f_handler: Vue.user.name,
          f_control_time: '',
          f_photos_path: '',
          f_remark: '',
          f_control_level: ''
        }
        this.showControlModal = false
        this.selfSearch()
      },

      // 提交管控处理
      commitControl() {
        // 校验管控方式
        if (!this.controlData.f_control_method || !this.controlData.f_control_method.length) {
          this.$showMessage('请选择管控方式')
          return
        }
        // 校验照片
        if (!this.controlData.f_photos_path || this.controlData.f_photos_path.includes('nopic.png')) {
          this.$showMessage('处理照片必须上传')
          return
        }
        // 校验管控后级别
        if (!this.controlData.f_control_level) {
          this.$showMessage('请选择管控后隐患级别')
          return
        }

        HostApp.__this__ = this
        HostApp.logicWithHint({
          'logic': 'safe_saveDefectControl',
          'callback': 'javascript: HostApp.__this__.commitCallBack()',
          'data': {
            f_defect_id: this.controlResult.f_defect_id,
            f_control_method: this.controlData.f_control_method.join(','),
            f_handler: this.controlData.f_handler,
            f_control_time: this.controlData.f_control_time,
            f_photos_path: this.controlData.f_photos_path,
            f_remark: this.controlData.f_remark,
            f_control_level: this.controlData.f_control_level
          },
          'backresult': 1
        })
      },
      commitCallBack(jo) {
        if (jo.state == 'ok') {
          let ress = JSON.parse(jo.result)
          if (ress.code == 200) {
            this.$showMessage(ress.msg)
            this.closeControlModal()
          } else {
            this.$showMessage(ress.msg)
          }
        } else {
          this.$showMessage('本地服务调用失败')
        }
      },

      // 查询
      selfSearch() {
        let condition = '1=1 '
        if (this.$refs.paged.$refs.cri.model.f_user_name) {
          if (this.$refs.paged.$refs.cri.model.f_user_name.toString().trim()) {
            condition += " and f_user_name like '" + this.$refs.paged.$refs.cri.model.f_user_name + "%'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_userinfo_code) {
          if (this.$refs.paged.$refs.cri.model.f_userinfo_code.toString().trim()) {
            condition += " and f_userinfo_code like '%" + this.$refs.paged.$refs.cri.model.f_userinfo_code + "%'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_is_controlled) {
          if (this.$refs.paged.$refs.cri.model.f_is_controlled.toString().trim()) {
            condition += " and f_is_controlled = '" + this.$refs.paged.$refs.cri.model.f_is_controlled + "'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_is_repaired) {
          let vals = this.$refs.paged.$refs.cri.model.f_is_repaired
          if (Array.isArray(vals) && vals.length > 0) {
            let inStr = vals.map(v => "'" + v + "'").join(',')
            condition += ' and f_is_repaired in (' + inStr + ')'
          } else if (typeof vals === 'string' && vals.trim()) {
            condition += " and f_is_repaired = '" + vals + "'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_start_date) {
          if (this.$refs.paged.$refs.cri.model.f_start_date.toString().trim()) {
            condition += " and f_offsite_time > '" + this.$refs.paged.$refs.cri.model.f_start_date + "'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_end_date) {
          if (this.$refs.paged.$refs.cri.model.f_end_date.toString().trim()) {
            condition += " and f_offsite_time < '" + this.$refs.paged.$refs.cri.model.f_end_date + "'"
          }
        }
        if (this.$refs.paged.$refs.cri.model.f_check_type) {
          if (this.$refs.paged.$refs.cri.model.f_check_type.toString().trim()) {
            condition += " and f_check_type = '" + this.$refs.paged.$refs.cri.model.f_check_type + "'"
          }
        }
        this.model.search(condition)
      }
    }
  }
</script>
