<template>
  <div class="flex bg-white p-10">
    <div class="span">
      <criteria-paged :model='model' v-ref:paged>
        <criteria :model='model' partial='criteria' v-ref:criteria @condition-changed='$parent.search'>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row" width="100%">
              <div class="col-sm-3 form-group form-input-group">
                <label class="button_search">表&nbsp;钢&nbsp;号&nbsp;</label>
                <input type="text" class="form-control"
                       v-model="model.f_meternumber"
                       placeholder='表钢号'
                       condition="f_meternumber like '%{}%'"
                >
              </div>
              <div v-if="$parent.$parent.searchshow">
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">组织机构</label>
                  <right-tree :userid.sync='$parent.$parent.obj.userid'
                              :source.sync='$parent.$parent.obj.source'
                              @re-res="$parent.$parent.getRes"></right-tree>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">用&nbsp;户&nbsp;号&nbsp;</label>
                  <input type="text" class="form-control fixed-width"
                         v-model="model.f_userinfo_code"
                         placeholder='用户号'
                         condition="f_userinfo_code like '%{}%'"
                  >
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">用户姓名</label>
                  <input type="text" class="form-control"
                         v-model="model.f_user_name"
                         placeholder='用户姓名'
                         condition="f_user_name like '%{}%'"
                  >
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">用气地址</label>
                  <input type="text" class="form-control fixed-width"
                         v-model="model.f_address"
                         placeholder='用气地址'
                         :size="model.f_address ? model.f_address.length : 6"
                         condition="f_address like '%{}%'"
                  >
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">用户类型</label>
                  <v-select
                    placeholder='用户类型'
                    value-single="true"
                    :value.sync="model.f_user_type"
                    v-model="model.f_user_type"
                    :options='$parent.$parent.Gasusertype'
                    close-on-select condition="f_user_type {}">
                  </v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">用气性质</label>
                  <v-select
                    placeholder='用气性质'
                    value-single="true"
                    :value.sync="model.f_gasproperties"
                    v-model="model.f_gasproperties"
                    :options='$parent.$parent.Gasproperties'
                    close-on-select condition="f_gasproperties {}">
                  </v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search" style="word-break:keep-all;">申请时间</label>
                  <datepicker placeholder="起始时间"
                              :value.sync="model.f_start_date"
                              v-model="model.f_start_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_apply_date > '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search" style="word-break:keep-all;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</label>
                  <datepicker placeholder="结束时间"
                              :value.sync="model.f_end_date"
                              v-model="model.f_end_date"
                              :format="'yyyy-MM-dd HH:mm:ss'"
                              condition="f_apply_date < '{}'"
                  ></datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">申请类型</label>
                  <v-select :value.sync="model.f_apply_type" v-model="model.f_apply_type"
                            placeholder='申请类型'
                            :options='$parent.$parent.applyType'
                            close-on-select
                            condition="f_apply_type = '{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group">
                  <label class="button_search">审核状态</label>
                  <v-select :value.sync="model.f_valvestate" v-model="model.f_valvestate"
                            placeholder='审核状态'
                            :options='$parent.$parent.approvalState'
                            close-on-select
                            condition="f_approval_state = '{}'"></v-select>
                </div>
              </div>
              <div class="col-sm-3 form-group">
                <label class="button_search"></label>
                <button class="btn btn-success width-100" @click="search()" v-el:cba>查询</button>
                <label class="button_search"></label>
                <button class="btn btn-default width-100" @click="$parent.$parent.clearmsg">清空</button>
                <label class="button_search" v-if="!$parent.$parent.excelTable">超过十万条限制导出</label>
                <export-excel v-if="$parent.$parent.excelTable"
                              :data="{condition: $parent.$parent.condition}"
                              :field="$parent.$parent.getfield"
                              sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="approvalHandleList"
                              template-name='approvalHandleList'
                              :choose-col="true"></export-excel>
              </div>
              <div class="col-sm-3 form-group">
              <!--<div class="col-sm-3 form-group" v-if="$parent.$parent.valveLimit">-->
                <label class="button_search"></label>
                <button class="btn btn-success width-100 " @click="$parent.$parent.showModal(true)">批量通过
                </button>
                <label class="button_search"></label>
                <button class="btn btn-success width-100" @click="$parent.$parent.showModal(false)">批量驳回
                </button>
              </div>
              <div v-show="!$parent.$parent.searchshow" @click="$parent.$parent.clickshow"
                   style="position: relative;float: right;margin-right: 1%;">
                <img src="../../../static/webMeter/shousuo.png"><span>展开</span>
              </div>
              <div v-show="$parent.$parent.searchshow" @click="$parent.$parent.clickshow"
                   style="position: relative;float: right;margin-right: 1%;">
                <img src="../../../static/webMeter/shangsheng.png"><span>收缩</span>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <th style="text-align:center">
                <nobr>组织机构</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用户号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用户类型</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气性质</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用户姓名</nobr>
              </th>
              <th style="text-align:center">
                <nobr>用气地址</nobr>
              </th>
              <th style="text-align:center;color:#3c763d">
                <nobr>表钢号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>表编号</nobr>
              </th>
              <th style="text-align:center">
                <nobr>审核状态</nobr>
              </th>
              <th style="text-align:center">
                <nobr>申请类型</nobr>
              </th>
              <th style="text-align:center">
                <nobr>申请值</nobr>
              </th>
              <th style="text-align:center">
                <nobr>申请时间</nobr>
              </th>
              <th style="text-align:center">
                <nobr>申请员</nobr>
              </th>
              <th style="text-align:center">
                <nobr>申请备注</nobr>
              </th>
              <th style="text-align:center">
                <nobr>审核时间</nobr>
              </th>
              <th style="text-align:center">
                <nobr>审核员</nobr>
              </th>
              <th style="text-align:center">
                <nobr>审核备注</nobr>
              </th>
              <th style="text-align:center">
                <nobr>全选</nobr>
                <input type="checkbox" v-model='checked1' checked="checked"
                       @click="$parent.$parent.$parent.checkedALL()">
              </th>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr>
              <td style="text-align:center">
                <nobr>{{row.f_filiale}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_userinfo_code}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_user_type}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_gasproperties}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_meternumber}}</nobr>
              </td>
              <td style="text-align:center">{{row.f_user_id}}</td>
              <td style="text-align:center">
                <nobr>{{row.f_approval_state}}</nobr>
              </td>
              <td>
                <nobr>{{row.f_apply_type}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_apply_value}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_apply_date}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_apply_operator}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_apply_beizhu}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_approval_date}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_approval_operator}}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{row.f_approval_beizhu}}</nobr>
              </td>
              <td style="text-align:center"><input type="checkbox" checked="checked" name="approvalinput"
                                                   @click="$parent.$parent.$parent.checked(row)"></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
  <modal :show.sync="isShowUserException" >
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close()"><span>&times;</span></button>
      <h4 class="modal-title" align="center">审批备注</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="form-group " style="padding-left: 8px">
        <label class="label-control">审批意见：</label>
        <textarea class="form-control" v-model="f_beizhu" rows="3" placeholder="备注信息"></textarea>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button  type="button" class="btn btn-success btn-ln fr" @click='approvalControl()'>提交</button>
      <button  type="button" class="btn btn-info btn-ln fr" @click='close()'>取消</button>
    </footer>
  </modal>
</template>

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

  let fun = (json) => {
    let array = []
  array.push({label: '无', value: undefined})
  for (let i = 0; i < json.length; i++) {
    if (json[i] == null) {
      continue
    }
    array.push({label: json[i], value: json[i]})
  }
    return array
  }
export default {
    title: '指令审核',
    name: 'approvalHandleList',
    data () {
      return {
        model: new PagedList('rs/sql/iot_approvalHandleList', 20),
        searchshow: false,
        Gasusertype: [],
        Gasproperties: [],
        condition: '',
        checked1: true,
        isShowUserException: false,
        val1: '',
        f_beizhu: '',
        ifFeeDeduction: false,
        excelTable: true,
        getfield: {
          'f_filiale': '组织机构',
          'f_userinfo_code': '用户号',
          'f_user_type': '用户类型',
          'f_gasproperties': '用气性质',
          'f_user_name': '用户姓名',
          'f_address': '用气地址',
          'f_meternumber': '表钢号',
          'f_user_id': '表编号',
          'f_approval_state': '审核状态',
          'f_apply_type': '申请类型',
          'f_apply_value': '申请值',
          'f_apply_date': '申请时间',
          'f_apply_operator': '申请员',
          'f_apply_beizhu': '申请备注',
          'f_approval_date': '审核时间',
          'f_approval_operator': '审核员',
          'f_approval_beizhu': '审核备注'
        },
        f_apply_type1: '',
        obj: {
          userid: this.$login.f.id,
          source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
          res: this.$login.f.f_fengongsi,
          resids: this.$login.f.f_orgids
        },
        // 审批权限
        valveLimit: false,
        map: new Map()
      }
    },
    ready () {
      // this.valveLimit = this.$login.r.includes('审批权限')
      this.obj.userid = vue.$login.f.id
      this.obj.res = `${vue.$login.f.f_fengongsi}.${vue.$login.f.f_parentname}`
      this.obj.resids = `${vue.$login.f.f_orgids}`
      this.$refs.paged.$refs.criteria.model.f_start_date = Util.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.f_end_date = Util.toStandardDateString() + ' 23:59:59'
      this.$refs.paged.$refs.criteria.search()
      // 初始化用户类型，用气性质，下拉框
      this.getTypes()
    },
    methods: {
      search (args) {
        this.obj.resids = this.obj.resids
        args.condition = `${args.condition} and f_filialeids like '${this.obj.resids}%'`
        this.condition = args.condition
        this.model.search(args.condition, args.model)
        this.f_apply_type1 = args.model.f_apply_type
        if (args.model.f_apply_type == '补费扣费') {
          this.ifFeeDeduction = true
        } else {
          this.ifFeeDeduction = false
        }
        this.mapset(this.model.rows)
      },
      mapset (array) {
        this.map.clear()
        for (let i = 0; i < array.length; i++) {
          let userid = array[i].f_user_id
          let alias = array[i].f_alias
          let userinfoid = array[i].f_userinfo_id
          let f_apply_type = array[i].f_apply_type
          let id = array[i].id
          this.map.set(id, {id: id, f_user_id: userid, f_alias: alias, f_userinfo_id: userinfoid, f_apply_type: f_apply_type})
        }
      },
      back () {
        this.$parent.msg = ''
      },
      clickshow () {
        this.searchshow = !this.searchshow
      },
      getRes (msg) {
        this.obj.res = msg.res
        this.obj.resids = msg.resids
      },
      checkedALL () {
        this.checked1 = !this.checked1
        let box = document.getElementsByName('approvalinput')
        for (var i = 0; i < box.length; i++) {
          box[i].checked = this.checked1
        }
      },
      checked (val) {
        let userid = val.id
        if (this.map.has(userid)) {
          this.map.delete(userid)
        } else {
          this.map.set(userid, {id: userid, f_user_id: val.f_user_id, f_alias: val.f_alias, f_userinfo_id: val.f_userinfo_id, f_apply_type: val.f_apply_type})
        }
      },
      showModal (val) {
        if (this.f_apply_type1 == '' || this.f_apply_type1 == null) {
          this.$showMessage('请先选择申请类型')
          return
        }
        this.val1 = val
        this.isShowUserException = true
      },
      clearmsg () {
        this.$refs.paged.$refs.criteria.model = {}
      },
      close () {
        this.isShowUserException = false
      },
      approvalControl () {
        let res = {}
        let valve = this.val1 ? '已同意' : '已驳回'
        let array = []
        this.map.forEach((value, key, map) => {
          array.push(map.get(key))
        })
        console.log('批量操作array======', array.length)
        console.log('批量操作valve======', valve)
        console.log('批量操作 vue.$login.f.name======', vue.$login.f.name)
        if (this.ifFeeDeduction) {
          this.$resetpost('rs/logic/iot_ApplyManualDeduction', {
            f_apply_type: null,
            userid: array,
            f_sell_id: null,
            f_approval_state: valve,
            f_approval_beizhu: this.f_beizhu,
            f_approval_operator: vue.$login.f.name
          }, {rejectMsg: null, resolveMsg: null}).then((res) => {
            let str = `执行完成,总共执行了${array.length}户的审批${valve == '已同意' ? '同意' : '驳回'}操作`
            this.$showMessage(str)
          }).catch((e) => {
            console.log('返回值:' + e)
            this.$showMessage('执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！')
          })
        } else {
          this.$resetpost('rs/logic/iot_addAndUpdateApprovalInformation', {
            f_apply_type: null,
            userid: array,
            nowDate: new Date(),
            f_approval_state: valve,
            f_approval_beizhu: this.f_beizhu,
            f_approval_operator: vue.$login.f.name
          }, {rejectMsg: null, resolveMsg: null}).then((res) => {
            let str = `执行完成,总共执行了${array.length}户的审批${valve == '已同意' ? '同意' : '驳回'}操作`
            this.$showMessage(str)
          }).catch((res) => {
            console.log('返回值:' + res)
            this.$showMessage('执行失败，具体失败原因请查看后台日志文件！本次操作已被回滚！')
          })
        }
        this.isShowUserException = false
      },
      getTypes () {
        let f_user_type = []
        let f_gasproperties = []
        let load = new HttpResetClass()
        let self = this
        load.load('POST', 'rs/sql/iot_getTypes', {data: {}}, {warnMsg: null, resolveMsg: null}).then((res) => {
          let i = 0
          for (i = 0; i < res.data.length; i++) {
            f_user_type[i] = res.data[i].f_user_type == null ? 'n' : res.data[i].f_user_type
            f_gasproperties[i] = res.data[i].f_gasproperties == null ? 'n' : res.data[i].f_gasproperties
          }
          self.Gasusertype = self.uniq(f_user_type)
          self.Gasproperties = self.uniq(f_gasproperties)
        })
      },
      uniq (array) {
        array.sort()
        let arraytype = [{label: '全部', value: ''}]
        let dr = {label: '', value: ''}
        if (array[0] == 'n') {
          dr = {label: '空值', value: 'is null'}
        } else {
          dr = {label: array[0], value: "='" + array[0] + "'"}
        }
        arraytype.push(dr)
        let temp = [array[0]]
        console.log(array[0] + 'array[0]')
        for (var i = 1; i < array.length; i++) {
          if (array[i] !== temp[temp.length - 1]) {
            if (array[i] == 'n') {
              dr = {label: '空值', value: 'is null'}
            } else {
              dr = {label: array[i], value: "='" + array[i] + "'"}
            }
            arraytype.push(dr)
            temp.push(array[i])
          }
        }
        /* console.log(arraytype[1].label + "label")
        console.log(arraytype[1].value + "value") */
        return arraytype
      }
    },
    computed: {
      applyType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('申请类型')]
      },
      approvalState () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('审核状态')]
      }
    },
    watch: {
      'model.pageIndex' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'model.rows' () {
        console.log('weeweweq')
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'checked1' (val) {
        if (val) {
          this.mapset(this.model.rows)
        } else {
          this.map.clear()
        }
      }
    }
  }
</script>

<style scoped>
  .PanelTR {
    width: 100%;
    height: 40px;
  }

  .PanelTD {
    width: 5%;
  }

  .btn-relative {
    position: relative;
    left: 25px;
    top: 15px;
  }
</style>
