<template>
  <div>
    <div class="row">
      <div class="col-md-12">
        <div class="h2 pull-left">归档记录</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-inline">
          <div class="form-group">
            <label for="help"> 标题 </label>
            <div class="input-group">
              <input
                id="help"
                v-model="help"
                autocomplete="off"
                type="text"
                class="form-control"
                @keydown.enter="queryRecords"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="archiveTypeName"> 归档类型 </label>
            <div class="input-group">
              <select
                v-model="archiveTypeName"
                class="form-control"
                @change="getCouponSelected"
              >
                <option v-for="coupon in couponList" :key="coupon.id" :value="coupon.id">
                  {{ coupon.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="productName"> 归档日期（开始） </label>
            <div class="input-group">
              <DateTime
                v-model="archiveDateStart"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="barCode"> 归档日期（结束） </label>
            <div class="input-group">
              <DateTime
                v-model="archiveDateEnd"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="barCode"> 归档人 </label>
            <div class="input-group">
              <SearchWidget
                :info-window-id="11531"
                :field="field"
                :field-value="fieldValue"
                :display-name="field.listFieldNames"
                :where-clause-source="whereClauseSource"
                @value-changed="valueChanged"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="description"> 备注 </label>
            <div class="input-group">
              <input
                id="description"
                v-model="description"
                autocomplete="off"
                type="text"
                class="form-control"
                @keydown.enter="queryRecords"
              />
            </div>
          </div>
          <button class="btn btn-primary" @click="queryRecords">查询</button>
          <button class="btn btn-primary" @click="clear">清空</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div id="table1" class="table-responsive">
          <table class="table table-striped table-bordered" height="40px">
            <thead>
              <tr>
                <th>序号</th>
                <th>标题</th>
                <th>归档类型</th>
                <th>归档日期</th>
                <th>归档人</th>
                <th>备注</th>
                <th>查看</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in archiveDtos" :key="item.id">
                <td>
                  {{
                    (pagination2.current_page - 1) * pagination2.per_page +
                      index +
                      1
                  }}
                </td>
                <td>{{ item.help }}</td>
                <td>{{ item.archiveTypeName }}</td>
                <td>{{ item.archiveDate }}</td>
                <td>{{ item.archiveUserName }}</td>
                <td>{{ item.description }}</td>
                <td>
                  <template v-for="(item2) in item.archiveLines" :key="item2.id">
                    <button
                    
                      v-if="item.archiveLines"
                    
                      class="btn btn-info"
                      @click="download(item2, '.pdf')"
                    >
                      PDF下载
                    </button>
                  </template>
                  
                  &nbsp;
                  <template v-if="item.archiveLines">
                    <button
                      v-for="(item2) in item.archiveLines"
                    
                      :key="item2.id"
                      class="btn btn-primary"
                      @click="download(item2, '.xls')"
                    >
                      EXCEL下载
                    </button>
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-12">
        <VueBootstrapPagination :pagination="pagination2" :callback="queryRecords" />
      </div>
    </div>
  </div>
</template>

<script>
import Common from '../common/Common.js';



export default {

  components: {
    
  },
  data: function () {
    return {
      userId: '',
      archiveDtos: [],
      archiveDateStart: '',
      archiveDateEnd: '',
      description: '',
      help: '',
      archiveTypeName: undefined,
      field: {
        name: '',
        listFieldNames: 'name',
      },
      fieldValue: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },
      whereClauseSource: {
        customerDataDimensions:[{
          fieldName: 'organization.id',
          dataDimensionTypeNo: '202201191700',
          defaultDataDimensionTypeValueNo: '1',
        }],
      },
      pagination2: {
        total: 0,
        per_page: 10, // required
        current_page: 1, // required
        last_page: 10, // required
      },
      couponList: [
        {
          id: 'CustomerReconciliation',
          name: '酒店对账单',
        },
        {
          id: 'CustomerCirculation',
          name: '酒店布草流转详表',
        },
        {
          id: 'CustomerInventorySum',
          name: '酒店库存汇总表',
        },
        {
          id: 'CustomerFloorInventory',
          name: '酒店库存楼层表',
        },
        {
          id: 'CustomerWashing',
          name: '工厂对账单详表',
        },
        {
          id: 'FactoryCustomerReconciliation',
          name: '工厂对账单',
        },
      ],
    };
  },

  mounted: function () {
    this.queryRecords();
  },

  methods: {
    /**
     * 获取选中的值
     */
    getCouponSelected: function () {
      var _self = this;
      _self.queryRecords();
    },
    /**
     * 下载文件
     */
    download: function (item, type) {
      var url = Common.getHostPageBaseURL() + '/' + item.reportUrl + type;
      window.open(url);
    },

    // 用户选择框change事件
    valueChanged: function (newFieldValue) {
      this.fieldValue = newFieldValue;
      this.userId = newFieldValue.id;
    },
    queryRecords: function () {
      var _self = this;
      _self.archiveDtos = [];
      $.ajax({
        url: Common.getApiURL('ArchiveResource/getArchiveRecord'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: {
          userId: _self.userId,
          archiveTypeName: _self.archiveTypeName,
          archiveDateStart: _self.archiveDateStart,
          archiveDateEnd: _self.archiveDateEnd,
          description: _self.description,
          help: _self.help,
          start:
            (_self.pagination2.current_page - 1) * _self.pagination2.per_page,
          length: _self.pagination2.per_page,
        },
        success: function (data) {
          if (data != undefined) {
            _self.archiveDtos = data.resultList;
            _self.pagination2.total = data.maxCount;
            _self.pagination2.last_page =
              _self.pagination2.total / _self.pagination2.per_page;
            if (_self.pagination2.total % _self.pagination2.per_page != 0) {
              _self.pagination2.last_page++;
            }
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    openReport: function (archiveLine) {
      return archiveLine.reportUrl + '.pdf';
    },
    clear: function () {
      (this.userId = ''),
      (this.archiveDtos = []),
      (this.archiveDateStart = ''),
      (this.archiveTypeName = undefined),
      (this.archiveDateEnd = ''),
      (this.description = ''),
      (this.help = ''),
      (this.field = {
        name: '',
        listFieldNames: 'name',
      }),
      (this.fieldValue = {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      }),
      (this.pagination2 = {
        total: 0,
        per_page: 10, // required
        current_page: 1, // required
        last_page: 10, // required
      }),
      this.queryRecords();
    },
  },
};
</script>
