<template>
  <div>
    <div style="flex: 1.5" class="flex">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged @sort="sort">
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <!--              <div class="col-sm-2 form-group">-->
              <!--                <label class="font_normal_body">组织机构</label>-->
              <!--                <res-select :initresid='$parent.$parent.curorgid'-->
              <!--                            @res-select="$parent.$parent.getorg"-->
              <!--                            class="select select_list"-->
              <!--                            restype='organization'-->
              <!--                            style="width: 60%">-->
              <!--                </res-select>-->
              <!--              </div>-->
              <div class="row">
                <div :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                     class="form-group">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_userinfo_code"
                         condition="f_userinfo_code = '{}'" placeholder='客户编号'>
                </div>
                <div :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                     class="form-group">
                  <label class="font_normal_body">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_meternumber"
                         condition="f_meternumber = '{}'" placeholder='表号'>
                </div>
                <div class="span" style="float:right;">
                  <button class="button_search" @click="search()">查 询</button>
                  <export-excel v-if="$parent.$parent.excelTable"
                                class="auto"
                                :data="{condition: $parent.$parent.condition,orderitem: $parent.$parent.orderitem}"
                                :field="$parent.$parent.getfield"
                                sqlurl="rs/logic/saleExport" progress="saleGetExportProgress"  sql-name="changemeterFiles"
                                template-name='换表记录'
                                :choose-col="true"></export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()"
                    class="button_spacing"
                    style="float: right"></div>
                </div>
              </div>
              <div class="row" v-if="$parent.$parent.criteriaShow">
                <res-select-group :initres="$parent.$parent.initres" :show-component="['company','department']" @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                <div :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                     class="form-group">
                  <label class="font_normal_body">客户姓名</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_user_name"
                         condition="f_user_name = '{}'" placeholder='客户姓名'>
                </div>
                <div :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                     class="form-group">
                  <label class="font_normal_body">有无附件</label>
                  <v-select :disabled=false
                            :options='$parent.$parent.pj'
                            :value-single="true"
                            :value.sync="model.is_has_file"
                            close-on-select
                            placeholder='请选择'
                            v-model="model.is_has_file"
                            condition="is_has_file = '{}'"
                            search=fasle
                  >
                  </v-select>
                </div>
                <!--                <div-->
                <!--                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"-->
                <!--                  class="form-group">-->
                <!--                  <label class="font_normal_body">换表编号</label>-->
                <!--                  <input type="text" class="input_search"  style="width: 60%" v-model="model.id"-->
                <!--                         condition="id = '{}'" placeholder='用户编号'>-->
                <!--                </div>-->
                <div :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                     class="form-group">
                  <label class="font_normal_body">气表品牌</label>
                  <v-select id="f_meter_brand"
                            v-model="model.f_meter_brand"
                            placeholder='气表品牌'
                            :value.sync="model.f_meter_brand"
                            :options='$parent.$parent.meterbrand'
                            condition="f_meter_brand = '{}'"
                            close-on-select style="width: 60%"></v-select>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">开始日期</label>
                  <datepicker placeholder="开始日期" v-model="model.startDate" :value.sync="model.startDate" style="width:60%"
                              :format="'yyyy-MM-dd 00:00:00'" condition="f_operate_date >= '{}'">
                  </datepicker>
                </div>
                <div
                  :class="{'col-sm-2':!$parent.$parent.editList,'col-sm-4':$parent.$parent.editList}"
                  class="form-group">
                  <label class="font_normal_body">结束日期</label>
                  <datepicker placeholder="结束日期" v-model="model.endDate" :value.sync="model.endDate" style="width:60%"
                              :format="'yyyy-MM-dd 23:59:59'" condition="f_operate_date <= '{}'">
                  </datepicker>
                </div>
              </div>
            </div>

          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" 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>
                  <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>
                <th>
                  <nobr>状态</nobr>
                </th>
                <th>
                  <data-order field="f_operate_date" name="换表日期"></data-order>
                </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;"><nobr>{{$index + 1}}</nobr></td>
              <td style="text-align: center;"><nobr>
                {{row.f_userinfo_code}}
              </nobr> </td>
              <td style="text-align: center;">
                <nobr>{{row.f_user_name}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_address}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_type}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_changemeter_fee}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_serial_number}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_meternumber_old}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_meternumber}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_meter_brand_old}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_meter_brand}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_remanent_gas}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_remanent_money}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_comments}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_othereason}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_change_operator}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_state}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_operate_date}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_operator}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_depname}}</nobr>
              </td>
              <td style="text-align: center;">
                <nobr>{{row.f_orgname}}</nobr>
              </td>
              <td style="text-align: center;"><nobr>
                <button v-if="row.is_has_file=='是'" class="btn btn-link" @click.stop="$parent.$parent.$parent.view(row)">查看</button>
              </nobr></td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

<script>
import {PagedList} from 'vue-client'
const myMap = new Map()
let asyncReadyGen = async function (self) {
  await self.initQueryParam()
}
export default {
  'title': '',
  data () {
    return {
      model: new PagedList('rs/sql/changemeterFiles', 20, {orderitem: '"f_operate_date DESC"'}),
      pj: this.$appdata.getParam('是否有附件') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('是否有附件')] : [],
      // 控制查询条件显示
      searchshow: true,
      curorgid: [this.$login.f.orgid],
      criteriaShow: false,
      f_orgid: '',
      condition: '',
      // 排序
      orderitem: 'f_operate_date desc',
      orderFields: {
        f_operate_date: 'no'
      },
      // 控制样式
      editList: false,
      excelTable: true,
      getfield: {
        'f_userinfo_code': '客户编号',
        'f_user_name': '客户名称',
        'f_address': '客户地址',
        'f_type': '换表类型',
        'f_changemeter_fee': '换表费',
        'f_meternumber_old': '旧表号',
        'f_meternumber': '新表号',
        'f_meter_brand_old': '旧气表品牌',
        'f_meter_brand': '新气表品牌',
        'f_remanent_gas': '旧表剩余补气量',
        'f_remanent_money': '旧表剩余金额',
        'f_comments': '换表原因',
        'f_othereason': '其他备注',
        'f_change_operator': '换表人',
        'f_state': '状态',
        'f_operate_date': '换表日期',
        'f_operator': '人员',
        'f_depname': '所属部门',
        'f_orgname': '所属公司',
        'f_serial_number': '换表单号'
      },
      meterbrand: [],
      initres: {
        org: [this.$login.f.orgid],
        dep: [],
        user: []
      },
      whetherPay: [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}],
      da: {
        rows: []
      },
      f_meternumber: ''
    }
  },
  ready () {
    asyncReadyGen(this)
    this.search()
    // this.getwarehouse()
  },
  props: ['showMessage'],
  methods: {
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeid = val[0]
    },
    async getRes (condition, obj) {
      this.orgCondtionStr = condition
      this.orgname = obj.orgnames[0]
      this.depname = obj.depnames[0]

    },
    initQueryParam () {
      let arr = []
      this.$GetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        arr.push(temp)
      })
      this.meterbrand = [{label: '全部', value: ''}, ...arr]
    },
    view (row) {
      this.$parent.showupload = true
      this.$parent.row = row
    },
    init () {
      this.f_meternumber = ''
      this.da.rows = []
      myMap.clear()
    },
    cancelSet () {
      this.showSetModal = false
      this.init()
    },

    jump () {
      this.joinshow2 = false
      this.showSetModal = true
    },
    async getwarehouse () {

    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    join1 (row) {
      this.joinrow = row
      this.joinshow = true
    },

    joinclose () {
      this.joinshow = false
    },
    joinclose2 () {
      this.joinshow2 = false
    },

    sort (field, rule) {
      // 将所有排序方式设为不排序，实现相互排斥
      for (let key in this.orderFields) {
        if (key === field) {
          this.orderFields[key] = rule
        } else {
          this.orderFields[key] = 'no'
        }
      }
      // 如果新规则不排序，还原为默认排序
      if (rule === 'no') {
        this.model.paramSource.orderitem = `'${this.orderitem}'`
      } else {
        this.model.paramSource.orderitem = `'${field} ${rule}'`
      }

      this.search()
    },
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    importFile () {
      this.show = true
    },
    selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      console.log('查询。。。', this.f_orgid)
      if (!this.orgCondtionStr) {
        args.condition = `${args.condition}` + ' and f_orgid = ' + this.$login.f.orgid
      } else {
        args.condition = `${args.condition}` + this.orgCondtionStr
      }
      this.model.search(args.condition, args.model)
      this.condition = args.condition
    },
    mergeRowData (joinrows) {

    },
    // 多选框初始化
    selectInit () {
      this.rowsdata = []
      this.all = []
      this.radio = []
    },
    select () {
      let index = this.model1.pageIndex - 1
      console.log('全选', this.all[index])
      if (!this.radio[index]) {
        this.radio.$set(index, [])
      }
      if (this.all[index]) {
        // 数据
        this.rowsdata[index] = Object.assign([], this.model1.rows)
        // 勾选
        for (var i = 0; i < this.model1.rows.length; i++) {
          this.radio[index].$set(i, true)
        }
      } else {
        // 数据
        this.rowsdata[index] = []
        // 不勾选
        for (var i = 0; i < this.model1.rows.length; i++) {
          this.radio[index].$set(i, false)
        }
      }
    },
    selectOne (event, row, i) {
      console.log('单选', event.target.checked)
      let index = this.model1.pageIndex - 1
      if (!this.rowsdata[index]) {
        this.rowsdata[index] = []
      }
      if (!this.radio[index]) {
        this.radio.$set(index, [])
      }
      if (event.target.checked) {
        // 数据
        this.rowsdata[index][i] = row
        // 勾选
        this.radio[index].$set(i, true)
        // 判断是否全部选中
        var allState = true
        if (this.model1.rows.length != this.radio[index].length) {
          allState = false
        }
        for (var state of this.radio[index]) {
          if (!state) {
            allState = false
          }
        }
        if (allState) {
          this.all.$set(index, true)
        } else {
          this.all.$set(index, false)
        }
      } else {
        // 数据
        this.rowsdata[index][i] = []
        // 不勾选
        this.radio[index].$set(i, false)
        // 任意取消一个则全选状态设为false
        this.all.$set(index, false)
      }
    }
  },
  computed: {
    ischecked () {
      return function (index, i) {
        // console.log("计算属性")
        if (!this.radio[index]) {
          return false
        }
        return this.radio[index][i]
      }
    },
    distributionstate () {
      return [{label: '全部', value: ''}, {label: '待分配', value: 'is null'}, {label: '已入库', value: 'is not null'}]
    }
  }
}
</script>
<style>
.datapanel {
  color: #333;
  background-color: white;
  padding: 10px 20px;
  border-radius: 15px;
}
</style>
