<template>
  <div class="form-horizontal select-overspread p-10">
    <validator name="v1" v-if="selectdata.f_process_id !== null">
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">用户编号</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_userinfo_id"
                 :value="selectdata.f_userinfo_id"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">用户名</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_user_name"
                 :value="selectdata.f_user_name"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">电话</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_user_phone"
                 :value="selectdata.f_user_phone"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">地址</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_address + selectdata.f_address_detail"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">派单时间</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_date"
                 :value="selectdata.f_date"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">表号</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_meternumber"
                 :value="selectdata.f_meternumber"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">气表分类</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_meter_classify"
                 :value="selectdata.f_meter_classify"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">气表品牌</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_meter_brand"
                 :value="selectdata.f_meter_brand"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">气表型号</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="selectdata.f_meter_style"
                 :value="selectdata.f_meter_style"
                 :readonly="true"
          />
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">有无隐患</label>
        <div class="col-xs-8">
          <input-select
            class="select select_list"
            :value.sync="model.f_ignition_trouble"
            v-model="model.f_ignition_trouble"
            :options="ignition_trouble"
            :valueSingle="true"></input-select>
        </div>
      </div>
      <div class="col-xs-12 form-group app-input auto">
        <label class="control-label-justify">点火备注</label>
        <div class="col-xs-8">
          <input class="" style="width: 100%" type="input"
                 v-model="model.f_ignition_remarks"
                 :value="model.f_ignition_remarks"
                 :readonly="false"
          />
        </div>
      </div>
      <div class="col-xs-12 auto">
        <accordion one-at-a-time="true">
          <panel header="设备查看" :is-open="false" type="primary">
            <app-devices-management :selectdata="selectdata" :mark = 1 ></app-devices-management>
          </panel>
          <panel header="拍照" :is-open="false" type="primary">
            <app-take-pic
              :blobid="selectdata.f_blobid"
              :defname="selectdata.defname"
              :isdelete="true"
              :istakepic="true"
              :istype="true">

            </app-take-pic>
          </panel>
        </accordion>
      </div>
      <div class="col-xs-12 form-group auto" v-if="selectdata.f_meter_classify === '物联网表'">
        <div class="col-xs-5">
          <button style="width: 100%" class="btn btn-success" @click.prevent="openModal('退出强制状态')">退出强制状态</button>
        </div>
        <div class="col-xs-5 col-xs-offset-2">
          <button style="width: 100%" class="btn btn-danger" @click.prevent="openModal('关阀')">强制关阀</button>
        </div>
      </div>
      <div class="col-xs-12 auto">
        <accordion one-at-a-time="true">
          <panel header="用户签字" :is-open="false" type="primary">
            <survey-user-sign
              :title="'用户签字'"
              :selectdata="selectdata">
            </survey-user-sign>
          </panel>
        </accordion>
      </div>
      <div class="col-xs-12 form-group auto">
        <button style="width: 100%" class="btn btn-warning" :disabled="!$v1.valid" @click.prevent="saveApplyVentilate">保存</button>
        <button v-if="model.f_ignition_trouble === '有隐患'" style="width: 100%" class="btn btn-danger" :disabled="!$v1.valid" @click.prevent="cleanTrouble">消除隐患</button>
        <button style="width: 100%" class="btn btn-success" :disabled="!$v1.valid" @click.prevent="applyVentilate">提交</button>
      </div>
    </validator>
  </div>

  <validator name="v">
    <modal v-if="showModal" :show.sync="showModal" v-ref:modal :large="true" :backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
        <h4 class="modal-title">{{type}}操作</h4>
      </header>
      <article slot="modal-body" class="modal-body clearfix">
        <div class="form-group row vertical-center">
          <div class="col-xs-12" v-if="type !== '关阀'" :class="[$v.reason.required ? 'apply-has-error' : '']">
            <input
              type="checkbox"
              class=""
              :value.sync="boxReason"
              v-model="boxReason"
              :value="boxReason"
              @change="changeAllChecked()"
              ></input>{{ reasonOptions[0].label }}
          </div>
          <div class="col-xs-12" :class="[$v.reason.required ? 'apply-has-error' : '']">
            <textarea rows="2" style="width: 100%;height: 100%"
              :placeholder="type+'操作原因'" v-validate:reason = "['required']"
              v-model="reason"  :value="reason"
            ></textarea>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary" @click="onOffValve" :disabled="!$v.valid">确认</button>
      </footer>
    </modal>
  </validator>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import Vue from 'vue'
import {isEmpty} from '../../Util'

export default {
  title: '通气点火',
  props: ['selectdata'],
  data () {
    return {
      showModal: false,
      type: null,
      reason: null,
      boxReason: null,
      reasonOptions:[{label: '具备通气条件', value: '具备通气条件'}],
      model: {
        f_ignition_trouble: '',
        f_ignition_remarks: ''
      },
      ignition_trouble:[{label: '有隐患', value: '有隐患'}, {label: '无隐患', value: '无隐患'}]
    }
  },
  ready () {
    this.search()
  },
  methods: {
    changeAllChecked(){
      if (this.boxReason){
        this.reason = this.reasonOptions[0].value
      }else {
        this.reason = ''
      }
    },
    async applyVentilate () {
      let res = await this.$showMessage('是否需要继续此次操作')
      if (res === 'cancel') {
        return
      }else{
        if (this.model.f_ignition_trouble === '有隐患'){
          this.$showMessage("隐患未消除，无法提交")
          return
        }
        let http = new HttpResetClass()
        let data = {
          selectdata: this.selectdata,
          user: Vue.user,
          model:this.model
        }
        let res = await http.load(
          'POST',
          `${this.$androidUtil.getProxyUrl()}/rs/logic/applyVentilate`,
          {data: data},
          {resolveMsg: null, rejectMsg: `操作失败！！！`}
        )
        // 返回上层
        this.$dispatch('confirm')
      }
    },
    async saveApplyVentilate () {
      let res = await this.$showMessage('是否需要继续此次操作')
      if (res === 'cancel') {
        return
      }else{
        let http = new HttpResetClass()
        let data = {
          selectdata: this.selectdata,
          user: Vue.user,
          model:this.model
        }
        let res = await http.load(
          'POST',
          `${this.$androidUtil.getProxyUrl()}/rs/logic/saveApplyVentilate`,
          {data: data},
          {resolveMsg: null, rejectMsg: `操作失败！！！`}
        )
        // 刷新
        this.$dispatch('confirm')
      }

    },
    async cleanTrouble () {
      let http = new HttpResetClass()
      let data = {
        selectdata: this.selectdata,
        model:this.model
      }

      let res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/logic/cleanTrouble`,
        {data: data},
        {resolveMsg: null, rejectMsg: `清除隐患操作失败！！！`}
      )

      // 返回上层
      this.$dispatch('confirm')
    },
    async search(){
      console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>", this.selectdata.f_process_id + 'cs' + this.selectdata.defname + 'cs' + this.selectdata.f_apply_type)
      let data = {
        tablename: 't_ignition_record',
        condition: `f_userinfo_id = '${this.selectdata.f_userinfo_id}'`
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`,
        {data: data},
        {resolveMsg: null, rejectMsg: '点火记录查询失败！！！'}
      )
      if (res.data.length > 0) {
        this.model.f_ignition_trouble = res.data[0].f_ignition_trouble
        this.model.f_ignition_remarks = res.data[0].f_ignition_remarks
      }
    },
    async onOffValve () {
      let http = new HttpResetClass()
      let data = null
      let res = null
      let data2 = {
        condition: `ui.f_userinfo_id = '${this.selectdata.f_userinfo_id}'`
      }
      let http2 = new HttpResetClass()
      let res2 = await http2.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/sql/getApplyUserinfo`,
        {data: data2},
        {resolveMsg: null, rejectMsg: '档案获取失败！！！'}
      )
      let userinfo = res2.data[0]
      if (this.type !== '退出强制状态') {
        data = {
          condition: `t_userfiles.f_meternumber = '${this.selectdata.f_meternumber}'`,
          contentData: {
            isOpen: this.type === '开阀' ? 1 : 0
          },
          inputtor: Vue.user.name,
          instructTitle: this.type,
          instructType: '阀门控制',
          meterBrandName: userinfo.f_alias
        }
        res = await http.load(
          'POST',
          `${this.$androidUtil.getProxyUrl()}/rs/logic/saveInstruct`,
          {data: data},
          {resolveMsg: null, rejectMsg: `${this.type}失败！！！`}
        )
      }

      data = {
        f_user_id: this.selectdata.f_user_id,
        f_userinfo_id: this.selectdata.f_userinfo_id,
        record: {
          f_filiale: "榆林."+Vue.user.orgs,
          f_instruct_meta_data: this.type === '退出强制状态' ? '退出强制阀控' : '进入强制阀控',
          f_instruct_title: this.type === '退出强制状态' ? '退出强制阀控' : '进入强制阀控',
          f_instruct_type: '阀门控制',
          f_meternumber: this.selectdata.f_meternumber,
          f_operator: Vue.user.name,
          f_outlets: this.selectdata.f_outlets,
          f_reason: this.reason,
          f_user_id: this.selectdata.f_user_id,
          f_userinfo_id: this.selectdata.f_userinfo_id
        },
        state: this.type === '退出强制状态' ? 0 : 1
      }

      res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/logic/updateNetWorkValve`,
        {data: data},
        {resolveMsg: '执行成功！！！', rejectMsg: `执行失败！！！`}
      )

      this.closeModal()
    },
    openModal (type) {
      this.type = type
      this.showModal = true
    },
    closeModal () {
      this.showModal = false
      this.type = null

      this.reason = null
    }
  },
  events: {
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style scoped>
  .apply-has-error {
    border-bottom: 1px solid #a94442;
  }
  .control-label-justify {
    width: 30%;
    text-align: justify;
    text-align-last: justify;
    font-family: PingFang-SC-Bold;
    float: left;
  }
  textarea {
    padding: 8px 10px;
    outline: none;
    margin: 0px;
    background: #FFF;
    border: 1px solid #ccc;
  }
  textarea[readonly]{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  textarea:disabled{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  .button_spacing{margin: 0px  0px 0px 10px;}
</style>
<style lang="less">
.apply-has-error {
  border-bottom: 1px solid #a94442;
}
.app-input {
  label {
    float: left;
  }
  .select {
    button {
      border: none;
      outline: none;
      text-align: left;
      .btn-placeholder {
        color: #ACA899
      }
    }
  }
  .datepicker {
    .form-control:focus {
      border: none!important;
      outline: none!important;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
  }
  textarea {
    padding: 8px 10px;
    border: none;
    outline: none;
    margin: 0px;
  }
  input[readonly]{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  input:disabled{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  textarea[readonly]{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
  textarea:disabled{
    color: #ACA899!important;
    background: #FFFFFF;
    border: none;
    outline: none;
  }
}
</style>
