<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged >
      <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch">
        <div novalidate class="form-inline" partial>
          <div class="form-group">
              <input class="form-control" v-model="model.YQDZ_YQZH" condition="YQDZ_YQZH = '{}'" placeholder="客户号"/>
            <input class="form-control" v-model="model.RQB_GH" condition="RQB_GH = '{}'" placeholder="旧表钢号"/>
            <input class="form-control" v-model="model.NEW_RQB_GH" condition="NEW_RQB_GH = '{}'" placeholder="新表钢号"/>
            <v-select v-model="model.DQ_NAME"
                      :value.sync="model.DQ_NAME"
                      :options='$parent.$parent.DQ_NAME' placeholder='区/县'
                      condition="DQ_NAME = '{}'"
                      close-on-select>
            </v-select>
            <input class="form-control" v-model="model.YQDZ_SM" condition="YQDZ_SM like '%{}%'" placeholder="地址模糊查询"/>
              <datepicker id="startDate" placeholder="起始日期" width='100%'
                          v-model="model.f_start_date"
                          :value.sync="model.f_start_date"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="true"
                          condition="f_newtabledate >= '{} 00:00:00'">
              </datepicker>
            <datepicker id="endDate" placeholder="结束日期" width='100%'
                        v-model="model.f_end_date"
                        :value.sync="model.f_end_date"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="true"
                        condition="f_newtabledate <= '{} 23:59:59'">
              </datepicker>
              <v-select v-model="model.f_state"
                        :value.sync="model.f_state"
                        :options='$parent.$parent.states' placeholder='换表状态'
                        condition="f_state = '{}'"
                        close-on-select>
              </v-select>
          </div>
          <div class="form-group">
            <button class="btn btn-primary" style="border-radius: 2px;margin-right: 10px" @click="search()">查询</button>
          </div>
          <div class="form-group" v-if="HostApp==undefined">
            <button class="btn btn-primary" style="border-radius: 2px;margin-right: 10px"
                    @click="$parent.$parent.SaveAsFile('daochu6')">导出当前页面为xls
            </button>
          </div>
        </div>
      </criteria>
      <data-grid id="daochu6" :model="model" v-ref:grid partial='list'>
        <template partial='head'>
          <tr>
            <th><nobr>序号</nobr></th>
            <th>
              <nobr>换表照片</nobr>
            </th>
            <th>
              <nobr>异常信息</nobr>
            </th>
            <th><nobr>换表状态</nobr></th>
            <th><nobr>换表日期</nobr></th>
            <th v-for="item in $parent.$parent.$parent.headData"><nobr>{{item}}</nobr></th>
            <th>
              <nobr>置为无效</nobr>
            </th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index + 1}}</td>
          <td style="text-align: center;">
            <button type="button" @click="$parent.$parent.$parent.showImages(row.meterimages)" class="btn btn-lg"
                    :class="{'btn-primary':row.meterimages.length > 0,'btn-success':row.meterimages.length == 0,'btn-success':row.meterimages.length == null,'btn-success':row.meterimages.length == '[]'}"
                    :disabled="row.meterimages==0||row.meterimages==null||row.meterimages=='[]'">
              {{row.meterimages==0 || row.meterimages==null || row.meterimages=='[]'? '无照片':'查看照片'}}
            </button>
          </td>
          <td style="text-align: center;">
            {{row.f_exceptionmessage==null ? '无信息' : row.f_exceptionmessage}}
          </td>
          <td style="text-align: center;">
            <button type="button" class="btn btn-lg"
                    :class="{'btn-primary':row.f_state=='换表','btn-success':row.f_state=='已换表','btn-block':row.f_state=='无效'}">
              {{row.f_state}}
            </button>
          </td>
          <td style="text-align: center;">{{row.f_newtabledate}}</td>
          <td style="text-align: center;" v-for="item in $parent.$parent.$parent.bodyData"><nobr>{{row[item]? row[item]:0}}</nobr></td>
          <td style="text-align: center;">
            <button type="button" class="btn btn-danger" @click="$parent.$parent.$parent.invalidState(row)"
                    :disabled="row.f_state=='已换表'||row.f_state=='无效'">置为无效
            </button>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
  <!-- <card-list :btns="operatebtn" :userinfoid="row ? row.f_userinfo_id : ''" v-ref:card :is-operate="false"></card-list> -->
</template>

<script>
  import { PagedList } from 'vue-client'
  import getLodop from '../../plugins/LodopFuncs'

  let newTableInfoObj
export default {
    /*
    * 屏蔽按钮 √
    * 无效状态的显示 √
    * 置为无效的按钮 √
    * */
    'title': '收费汇总',
    data () {
      return {
        filiales: [],
        model: new PagedList('rs/sql/newTableInfo', 20, {}),
        criteriaShow: true,
        classname: 'table table-bordered table table-hover',
        headData: ['用户号', '表钢号', '最后抄表读数', '累计购买量', '旧表读数', '补气量', '调节气量', '新表号', '区/县', '换表人姓名', '换表人电话', '街道、路', '小区', '地址全名', '客户类型', '客户名称', '联系电话', '表类型', '表类型说明', '表型ID', 'IC卡号', '新表型号', '新表类型', '新表厂'],
        bodyData: ['yqdz_yqzh', 'rqb_gh', 'rqb_zuihou_bjs', 'rqb_ljgql', 'f_oldreading', 'f_cmaddgas', 'f_gasflowadjust', 'new_rqb_gh', 'dq_name', 'f_displacemeteroperator', 'f_phone', 'jd_name', 'xq_name', 'yqdz_sm', 'khlx', 'yqdz_hz_mc', 'yqdz_lxdh', 'rqb_rqblx_id', 'rqblx_ms', 'rqb_wz_id', 'rqb_kh', 'new_rqb_wz', 'new_rqb_rqblx_id', 'new_rqb_bc'],
        f_state: '换表'
      }
    },
    ready () {
      this.search()
      newTableInfoObj = this
      setInterval(() => {
        console.log('一分钟刷新一次')
        newTableInfoObj.search()
      }, 60000)
  },
    methods: {
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        args.condition = `${args.condition} `
        console.log('condition==', args.condition)
        this.model.search(args.condition, args.model)
      },
      invalidState (row) {
        this.$showMessage('确认要将该条信息置为无效？(只有将该信息置为无效之后，同物联网表号的信息才能再次上传)', ['confirm', 'cancel']).then(res => {
          if (res === 'confirm') {
            this.$resetpost('rs/logic/newTableInfo', {
              id: row.id,
              operation: '为无效'
            }, {rejectMsg: null, resolveMsg: null}).then(res => {
              if (res.data.state == 'success') {
                row.f_state = '无效'
              }
              newTableInfoObj.search()
            })
          }
        })
      },
      changeState (row) {
        console.log('row', row)
        this.$showMessage('请确认是否换表！', ['confirm', 'cancel']).then(
          (res) => {
            if (res === 'confirm') {
              this.$resetpost('rs/logic/newTableInfo', {
                YQDZ_YQZH: row.yqdz_yqzh,
                RQB_GH: row.rqb_gh,
                operation: '修改'
              }, {resolveMsg: null, rejectMsg: null}
              ).then((res) => {
                if (res.data.state == 'success') {
                  row.f_state = '已换表'
                }
                newTableInfoObj.search()
              })
            }
          })
      },
      showImages (data) {
        data = JSON.parse(data)
        window.open('/shangchuan/images/' + data[0])
      },
      SaveAsFile (str) {
        let style = '<style>' +
          'td {border-width: 1px;padding: 2px;border-style: solid; border-color:black; border-collapse:collapse;} .tdright{text-align: right;}  .tdcenter{text-align: center;}</style>'
        let strHtml = style + document.getElementById(str).innerHTML
        console.log(strHtml)
        let LODOP = getLodop()
        LODOP.PRINT_INIT('')
        LODOP.ADD_PRINT_TABLE(5, 5, '99%', '100%', strHtml)
        LODOP.SAVE_TO_FILE('新文件名.xls')
      }
    },
    computed: {
      states () {
        return [{label: '全部', value: ''}, {label: '换表', value: '换表'}, {label: '已换表', value: '已换表'}, {label: '异常', value: '异常'}, {label: '无效', value: '无效'}]
      },
      DQ_NAME () {
        return [{label: '全部', value: ''}, {label: '永清县', value: '永清县'}, {label: '燕郊镇', value: '燕郊镇'}, {
          label: '香河县',
          value: '香河县'
        }, {label: '三河市', value: '三河市'}, {label: '大厂县', value: '大厂县'}, {label: '武清区', value: '武清区'}, {
          label: '固安县',
          value: '固安县'
        }]
      }
    }
  }
</script>
