<template>
  <div style="flex:1;width: 100%" class="flex" id="user-query">
    <button class="btn btn-xs" v-show="!this.criteriaShow" @click="this.show()">
      <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
    </button>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri v-show="$parent.criteriaShow">
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="col-sm-3 form-group form-input-group" style="width: 20%">
              <label class="control-label">用户编号</label>
              <input  type="text" class="form-control" v-model="model.f_userinfo_code"
                      condition="f_userinfo_code = '{}' " placeholder="用户编号"
                      :size="model.f_userinfo_code ? model.f_userinfo_code.length : 1">
            </div>
            <div class="col-sm-3 form-group form-input-group" style="width: 20%">
              <label class="control-label">开始时间</label>
              <datepicker id="f_operate_date" placeholder="开始时间" width='100%'
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="f_submit_time >= '{}'">
              </datepicker>
            </div>
            <div class="col-sm-3 form-group form-input-group" style="width: 20%">
              <label class="control-label">结束时间</label>
              <datepicker  placeholder="结束时间" width='100%'
                           v-model="model.endDate"
                           :value.sync="model.endDate"
                           :format="'yyyy-MM-dd 23:59:59'"
                           :show-reset-button="true"
                           condition="f_submit_time <= '{}'">
              </datepicker>
            </div>

            <div class="col-sm-3 form-group form-input-group" style="width: 20%">
              <label class="control-label">处理状态</label>
              <v-select :value.sync="model.f_orderstate" v-model='model.f_orderstate'
                        :options='$parent.$parent.f_orderstate' placeholder='处理状态'
                        close-on-select
                        condition="f_orderstate = '{}'" ></v-select>
            </div>
            <div class="span" style = "float:right;margin-top:10px">
              <button class="btn btn-success" style="border-radius: 2px;margin-right: 10px" @click="search()">查询</button>
              <button class="btn btn-success" style="border-radius: 2px;margin-right: 10px" @click="$parent.$parent.clear()">清空</button>
<!--              <button class="btn btn-default" style="border-radius: 2px;margin-right: 10px"-->
<!--              type="button" @click="$parent.$parent.stamp()">打印</button>-->

              <export-excel :data="$parent.$parent.getCondition"
              :field="$parent.$parent.getfield"
              sqlurl="rs/logic/exportfile" sql-name="getScheduleRepair" template-name='预约维修导出' :choose-col="true"></export-excel>

              <button class="btn" @click="$parent.$parent.hidden()" style="margin-left: 10px">
                <span class="glyphicon glyphicon-chevron-up"></span>
              </button>

              <button class="btn" @click="$launchFullscreen('user-query')" style="padding-left: 10px">
                <span class="glyphicon glyphicon-fullscreen" style="color: #337ab7"></span>
              </button>
            </div>
          </div>
        </div>
      </criteria>

      <data-grid  :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th><nobr>ID</nobr></th>
            <th><nobr>用户姓名</nobr></th>
            <th><nobr>用户编号</nobr></th>
            <th><nobr>用户类型</nobr></th>
<!--            <th><nobr>用户标识</nobr></th>-->
            <th><nobr>联系电话</nobr></th>
            <th><nobr>地址</nobr></th>
            <th><nobr>预约类型</nobr></th>
            <th><nobr>预约提交时间</nobr></th>
            <th><nobr>预约维修日期</nobr></th>
            <th><nobr>用户预约备注</nobr></th>
<!--            <th><nobr>预约来源</nobr></th>-->
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center"  v-for="item in $parent.$parent.$parent.bodyData"><nobr>{{row[item]}}</nobr></td>
        </template>
        <template partial='foot'>
        </template>
      </data-grid>
    </criteria-paged>

    <!--<table class="table-hover">
      <tr style="position: relative" class="table-bordered">
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px;color: #5CB95C;font-weight: bold">汇总信息</td>
        <td style="display: inline-block;width: auto;border-right: 1px solid #F2F6FA;padding: 0px 10px 0px 10px">结余合计:&emsp;{{sumsmodel.f_balance}}</td>
      </tr>
    </table>-->
    <modal :show.sync="printshow" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header text-center">
        <h4 class="modal-title">打印列选择</h4>
        <input type="checkbox" class="" id="f_generations" v-model="all">
        <label for="f_generations" class="font-size">全选</label>
      </header>
      <article slot="modal-body">
        <div class="auto col-sm-11 col-md-offset-1"  style="margin-top: 10px;">
          <div class="col-sm-3" v-for="f in fields">
            <input type="checkbox" class="" :id="'water-owe-details-'+$index" v-model="modelval" :value="$key">
            <label :for="'water-owe-details-'+$index" class="font-size">{{f}}</label>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <center>
          <button v-show="printshow" type="button" class="btn btn-default" @click='close()'>取消</button>
          <button v-show="printshow" type="button" class="btn btn-success" @click='print()'>打印</button>
          <print-table :model='model' v-show="false" v-ref:print
                       :top='40' :left='60' :right='40' :bottom='60'
                       :thead="thead" :tfoot='tfoot' :attach="yangsen"
                       :fields="modelval" :printpage="true">
          </print-table>
        </center>
      </footer>
    </modal>

  </div>
</template>

<script>
import {HttpLoad, PagedList} from 'vue-client'
import defaultPrint from './config/DefaultPrint'

let readySomething = async function (self) {
  // self.$refs.paged.$refs.cri.model.startDate = self.$login.toStandardDateString()
  // self.$refs.paged.$refs.cri.model.endDate = self.$login.toStandardDateString()
  await self.$refs.paged.$refs.cri.search()
  // self.sumsmodel = self.$refs.paged.$refs.grid.model.sums
}
export default {
  data() {
    return {
      affLoader: new HttpLoad(),
      f_address: '',
      residential: [],
      operators:[],
      custTemplate: '{{item.f_address}}',
      userinfocode:"",
      showinfo: false,
      orderFields: {
        f_residential_area: 'asc'
      },
      sortstr:'',
      orderDefault: 'id',
      model: new PagedList('rs/sql/getScheduleRepair', 20),
      criteriaShow: true,
      classname: 'table table-bordered table table-hover',
      headData: [],
      bodyData: [],
      tableData: [
        ["id", "ID"], ["f_user_name", "用户姓名"], ["f_userinfo_code", "用户编号"], ["f_user_type", "用户类型"], ["f_phone", "联系电话"],
        ["f_address", "地址"],["f_ordertype","预约类型"],["f_submit_time", "预约提交时间"],["f_orderdate", "预约维修日期"],["f_orderremark", "用户预约备注"]
      ],
      filialeNameStr: null,
      filialeCodeStr: this.$login.f.f_orgids,
      userid: this.$login.f.id,
      source:`tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() != $role$))`,
      modelval: [],
      printshow: false,
      all: false,
      fields: {},
      thead: '',
      tfoot: '',
      //合计数据
      sumsmodel: {}
    }
  },
  async ready(){
    await this.getOperators()
    // await this.getArea()
    // this.sort()
    let map = new Map(this.tableData)
    console.log("1:"+map)
    for (let [key, value] of map) {
      console.log("2:"+key)
      console.log("2:"+value)
      this.bodyData.push(key)
      this.headData.push(value)
    }
    readySomething(this).then(() => {
      this.$emit('ready')
    }).catch((error) => {
      this.$emit('error', error)
    })
  },
  methods: {
    async getOperators(){
      this.operators = []
      let oprts =  await this.$resetpost('rs/sql/singleTableParam',{data:{items:'*',tablename:'t_order_center',condition:'1=1'}},{rejectMsg:null,resolveMsg:null})
      for(let index in oprts.data){
        let json = {label:'',value:''}
        json.label = oprts.data[index].name
        json.value= oprts.data[index].name
        this.operators.push(json)
      }
    },
    selfSearch (args) {
      args.condition = args.condition + "and f_ordertype = '热力报修' "
      this.model.search(args.condition, args.model)
    },
    clear(){
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = ''
      })
    },
    show(){
      this.criteriaShow = true
    },
    hidden(){
      this.criteriaShow = false
    },
    getRes(obj) {
      this.filialeNameStr = obj.res
      this.filialeCodeStr = obj.resids
    },
    stamp () {
      this.all = false
      //默认选择要打印的列
      this.modelval = defaultPrint.config
      this.fields = this.getfield
      console.log('所有打印字段',this.fields)
      this.printshow = true
      this.put()
    },
    put () {
      // 对Modelval进行排序
      this.sortModelval()
      this.thead = `<tr><th colspan=${this.modelval.length}>用户查询统计报表</th></tr><tr>`
      for (let key of this.modelval) {
        this.thead += '<th>' + this.fields[key] + '</th>'
      }
      this.thead += '</tr>'
    },
    print () {
      this.$refs.print.PrintAsFile()
      this.printshow = false
    },
    close () {
      this.printshow = false
    },
    // 对选择的列进行排序
    sortModelval () {
      let sortModel = []
      Object.keys(this.fields).forEach((key) => {
        if (this.modelval.includes(key)) {
          sortModel.push(key)
        }
      })
      this.modelval = sortModel
      console.log('选择的打印的字段', this.modelval)
    }
  },
  watch:{
    'all' (val) {
      if (val) {
        this.modelval = this.bodyData
      } else {
        this.modelval = defaultPrint.config
        this.put()
      }
    },
    'modelval.length' () {
      this.put()
    },
  },
  computed:{
    // operatTypes () {
    //   return [{label: '全部', value: ''},{label: '营业收费', value: '营业收费'},{label: '营业收费撤销', value: '营业收费撤销'},{label: '营业收费退费', value: '营业收费退费'} ]
    // },
    f_orderstate () {
      return [{label: '待处理', value: ''},{label: '预约成功', value: '预约成功'},{label: '预约失败', value: '预约失败'} ]
    },
    operatores () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('操作员')]
    },
    getCondition(){
      return {condition: `${this.$refs.paged.$refs.cri.condition}`}
    },
    getfield(){
      let data = {}
      this.bodyData.forEach((value, index)=>{
        console.log(value)
        console.log(index)
        data[this.bodyData[index]] = this.headData[index]
      })
      //合计字段打印
      this.tfoot = `<tr><th colspan=${this.modelval.length}>全表汇总信息: `
      if(this.sumsmodel){
        Object.keys(this.sumsmodel).forEach((key) => {
          this.tfoot += this.fields[key] + '合计: ' + `<font color="blue">${this.sumsmodel[key]} </font>`
        })
      }else{
        this.tfoot += '暂无'
      }
      this.tfoot += '</th></tr>'
      console.log(data)
      return data
    },
    userstates () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户状态')]
    },
    usertypes () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    gasproperties () {
      let rs = []
      if (this.$refs.paged.$refs.cri.model.f_user_type.length === 1) {
        rs = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
      }
      return [{label: '全部', value: ''}, ...rs]
    },
  },
  events: {
    'dblclick' (row) {
      // this.showinfo = true
      // this.userinfocode = row
      // this.$refs.changedetails.changedsearch(row)
    }
  }
}
</script>
