<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
        <div novalidate class="form-inline auto" partial>
          <div class="form-group">
          用户名:
          <input type="text" class="form-control" v-model="model.f_username"
           v-on:keyup.enter="search">
          用户编号:
          <input type="text" class="form-control" v-model="model.f_userid"
          v-on:keyup.enter="search">
          用户类型:
          <v-select id="f_subcompany"
          placeholder='请选择'
          :value.sync="$parent.$parent.f_user_type"
          :options='$parent.$parent.user_type'
          v-on:keyup.enter="search"
          close-on-select clear-button>
        </v-select>
          小区:
          <input type="text" class="form-control" v-model="model.f_districtname"
          v-on:keyup.enter="search">
          </div>
          <button class="btn btn-primary" @click="search()">
            <span class="glyphicon glyphicon-search"></span>查询
          </button>
          <button class="btn btn-primary" @click="$parent.$parent.add()">
            增加
          </button>
          &nbsp;&nbsp;选择导入文件：<file-uploader title="点击选择导入文件" accept=".xls,.xlsx" post-action="rs/db/importExcel" v-ref:loader></file-uploader>&nbsp;&nbsp;
          <button class="btn btn-primary" @click="$parent.$parent.import" :disabled="$parent.$parent.disableUpload">
            导入
          </button>
          </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>用户编号</th>
            <th>用户姓名</th>
            <th>用户电话</th>
            <th>用户类型</th>
            <th>详细地址</th>
            <th>所属分公司</th>
            <th>最后安检日期</th>
            <th>最后安检状态</th>
            <th>安检负责人</th>
            <th>修改</th>
            <th>删除</th>
           </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_userid}}</td>
          <td>{{row.f_username}}</td>
          <td>{{row.f_phone}}</td>
          <td>{{row.f_user_type}}</td>
          <td>{{row.f_address}}</td>
          <td>{{row.f_subcompany}}</td>
          <td>{{row.f_last_check_date}}</td>
          <td>{{row.f_last_check_state}}</td>
          <td>{{row.f_checker}}</td>
          <td class="nopadding">
            <a   @click='$parent.$parent.$parent.change(row)'>修改</a>
          </td>
          <td class="nopadding">
            <a   @click='$parent.$parent.$parent.del(row, $index)'>删除</a>
          </td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import AppData from '../../stores/AppData'
export default {
  title: '用户基本档案',
  props: ['f'],
  data () {
    return {
      model: new PagedList('rs/sql/getuser', 20, {f_username: 'this.model.f_username',
      f_user_type: 'this.f_user_type[0]', f_userid: 'this.model.f_userid',
        f_districtname: 'this.model.f_districtname'}),
      f_user_type: [''],
      disableUpload: true
    }
  },
  events: {
    addFileUpload (e) {
      this.$refs.paged.$refs.criteria.$refs.loader.active = false
      this.$refs.paged.$refs.criteria.$refs.loader.title = e.name
      this.disableUpload = false
    },
    fileUploadProgress(file, component) {
      this.disableUpload = true
      if(file.progress > 99)
        this.$refs.paged.$refs.criteria.$refs.loader.title = '正在导入，请耐心等待......'
      else
        this.$refs.paged.$refs.criteria.$refs.loader.title = '上传文件:' + file.progress + '%'
    },
    afterFileUpload(file, component) {
      this.$refs.paged.$refs.criteria.$refs.loader.title = '点击选择导入文件'
      let result = JSON.parse(file.data)
      if(result.code == 200)
        window.alert('导入成功！')
      else
        window.alert(result.result)
    }
  },
  computed: {
    user_type () {
      return this.$appdata.getParam('用户类型')
    }
  },
  methods: {
    import () {
      if(this.$refs.paged.$refs.criteria.$refs.loader.files.length == 0) {
        window.alert('请选择一个导入文件')
        return
      }
       this.$refs.paged.$refs.criteria.$refs.loader.active = true
    },
    change (row) {
      this.$goto('userfileschange', {f: this.f, row: row, flag: 1}, 'self', this.callback)
    },
    add () {
      this.$goto('userfileschange', {f: this.f, flag: 0}, 'self', this.callback)
    },
    del (row, index) {
      this.$resetpost('rs/logic/人工录入删除', {data: row}, {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        this.model.rows.splice(index, 1)
      })
      //tag

      this.model.search('1=1', {f_user_name: this.model.model.f_username,
    f_user_type: this.f_user_type[0], f_userid: this.model.model.f_userid,
        f_districtname: this.model.model.f_districtname})
    },

    callback () {
      this.model.search('1=1', {f_user_name: this.model.model.f_username,
    f_user_type: this.f_user_type[0], f_userinfoid: this.model.model.f_userid,
        f_districtname: this.model.model.f_districtname})
    }
  },
  ready () {
    this.model.f_user_type = this.f_user_type
    this.$watch('f_user_type', function (val) {
      this.model.f_user_type = val
    })
  }
}
</script>
