<template>
  <div style="flex: 1.5" class="datapanel">
  <div class="flex" >
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline auto" partial>
          <div class="row">
          <div class="form-group">
            <div class="col-sm-2 form-group">
            <label for="startDate">开始日期:</label>
              <datepicker id="startDate" placeholder="开始日期"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          condition=""
                          :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="col-sm-2 form-group">
            <label for="endDate">结束日期:</label>
            <datepicker id="endDate" placeholder="结束日期"
                        v-model="model.endDate"
                        :value.sync="model.endDate"
                        :disabled-days-of-Week="[]"
                        :format="'yyyy-MM-dd'"
                        :show-reset-button="reset">
            </datepicker>
            </div>
            <div class="span" style="float:right;">
              <button class="button_search" @click="$parent.$parent.selfSearch()">查询</button>
              <button class="button_search" style="transform: translate(0px, 2px);" @click=" $parent.$parent.splitInfo= true">模板上传</button>
            </div>
          </div>
        </div>
        </div>
      </criteria>
      <accordion :one-at-atime="true" type="info" partial="list">
        <div class="col-sm-12">
          <div class="col-sm-2" v-for="row in model.rows">
            <div class="row"  style="padding-bottom: 8px">
              <img src="../../assets/template.png" style="height: 200px;width: 150px">
              <div class="title">
                <label>模板名称：{{row.f_filename.split("_")[0]}}</label>
              </div>
              <div class="buttion" style="display: flex-row">
                <button class=" button_search" style="transform: translate(0px, 2px);" @click=" $parent.$parent.getFiles(row)">下载模板</button>
                <button class="button_delete" title="权限名称:删除模板" style="transform: translate(0px, 2px);" @click=" $parent.$parent.deleteFiles(row)">删除模板</button>
              </div>
            </div>
          </div>

        </div>
      </accordion>
    </criteria-paged>
    <modal :show.sync="splitInfo" width="480px"
           title="请输入模板类型并选择上传的文件" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body">
        <div class="col-sm-12" style="display: flex;margin-bottom: 1em">
          <label style="width: 20%">模板名称</label>
          <input type="text" class="form-control _zoom6" v-model="headers.fusetype"
                 placeholder='模板名称'>
        </div>
        <file-upload class="my-file-uploader" name="my-file"
                     accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                     action="rs/file/uploadFile" :headers="headers" tagname="确定" v-ref:file>
        </file-upload>
      </article>
      <footer slot="modal-footer" style="display: none">
      </footer>
    </modal>
    <work-busy :is-busy="iswork"></work-busy>
  </div>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import axios from 'axios'
  import fileDownload from 'js-file-download'
  export default {
    title: '模板管理',
    data () {
      return {
        model: new PagedList('rs/sql/singleTable_OrderBy', 8, {
          items: '"*"',
          tablename: '"t_files"',
          orderitem: '"id"'
        }),
        iswork: false,
        headers: {'username': this.$login.f.name, 'blodid': '模板管理', 'fusetype': ''},
        splitInfo: false
      }
    },
    ready () {
    },
    events: {
      'onFileError' (file, error) {
        this.iswork = false
        this.$showAlert('文件上传失败请检查格式' + JSON.stringify(error), 'warning', 3000)
      },
      'beforeFileUpload' () {
        this.iswork = true
      },
      'closeFileUpload' () {
        this.iswork = false
      },
      onFileChange: function (file) {
        console.log('onFileChange', file)
      },
      onFileUpload: function (file, res) {
        console.log('上传完毕' + JSON.stringify(res))
        this.headers.f_usetype = ''
        this.iswork = false
        this.splitInfo = false
        console.log(res)
        this.$showMessage('成功上传')
        setTimeout(() => {
          this.selfSearch()
        }, 1000)
      }
  },
    methods: {
      // 下载文件
      getFiles (row) {
        let data = {filepath: row.f_downloadpath}
        let name = `${row.f_filename.split('_')[0]}.xlsx`
        axios.post('rs/file/getUploadFile', data, {responseType: 'arraybuffer'}).then(res => {
          fileDownload(res.data, name)
          this.iswork = false
        })
      },
      // 删除部分需要调整，这块是删除文件，还需要在t_files中删除记录。目前未完成
      deleteFiles (row) {
        if(this.$login.r.includes('删除模板')){
          row.path = row.f_downloadpath
          row.blobid = row.f_blobid
          this.$resetpost('rs/logic/deletefiles', row).then((res) => {
            setTimeout(() => {
            this.selfSearch()
            }, 1000)
          })
        }else{
          this.$showMessage('当前登录用户没有删除模板权限, 请联系管理员!')
        }
      },
      // 查询条件这块后面根据需求调整
      selfSearch () {
        this.model.search("f_blobid= '模板管理'")
      }
    }
  }
</script>
<style scoped>
  .title-td{
    font-weight: bold;
  }
  .content-td{
    padding-left: 2em;
  }
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>
