<template>
  <div>
    <el-dialog
      title="记录"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1100px"
      height="500px"
      @close="close"
      append-to-body
      @keyup.enter.native=""
      :visible.sync="visible">
      <el-tabs v-model="activeNameTop" type="border-card" @tab-click="tabHandleClickTop">
        <el-tab-pane label="入库记录" name="wareHouse">
          <div style="height: calc(100% - 80px);">
            <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
              <!-- 搜索框-->
              <el-form-item label="入库时间" prop="wareHouseDates">
                <el-date-picker
                  placement="bottom-start"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="searchForm.wareHouseDates"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
                <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
              </el-form-item>
            </el-form>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              height="400px"
              :loading="loading"
              size="small"
              ref="projectTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              @sort-change=""
              :sort-config="{remote:true}"
              :data="dataList"
              :row-config="{isCurrent: true}"
              :radio-config="{trigger: 'row'}"
            >
<!--              <vxe-column type="seq" width="60" title="序号"></vxe-column>-->
              <vxe-column min-width="160" align="center" title="入库编号" field="wareHouseNumber"></vxe-column>
              <vxe-column min-width="160" align="center" title="入库名称" field="wareHouseName">
                <template slot-scope="scope">
                  <el-link  type="primary" :underline="false" v-if="hasPermission('material:list')" @click="view(scope.row.wareHouseId)">{{scope.row.wareHouseName}}</el-link>
                  <el-link  type="primary" :underline="false" v-else-if="hasPermission('material:list')"  @click="view(scope.row.wareHouseId,)">{{scope.row.wareHouseName}}</el-link>
                  <span v-else>{{scope.row.wareHouseName}}</span>
                </template>
              </vxe-column>
              <vxe-column min-width="160" align="center" title="入库数量" field="tradeNumber"></vxe-column>
              <vxe-column min-width="160" align="center" title="经办人" field="wareHouseHandledBy"></vxe-column>
              <vxe-column min-width="160" align="center" title="经办人部门" field="wareHouseHandledByOff"></vxe-column>
              <vxe-column min-width="160" align="center" title="入库时间" field="wareHouseDate"></vxe-column>

            </vxe-table>
            <vxe-pager
              background
              size="small"
              :current-page="tablePage.currentPage"
              :page-size="tablePage.pageSize"
              :total="tablePage.total"
              :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="currentChangeHandle">
            </vxe-pager>
          </div>
        </el-tab-pane>
        <el-tab-pane label="领用记录" name="collect">
          <div style="height: calc(100% - 80px);">
            <el-form size="small" :inline="true" class="query-form" ref="searchForm2" :model="searchForm2" @keyup.enter.native="refreshList()" @submit.native.prevent>
              <!-- 搜索框-->
              <el-form-item label="领用时间" prop="collectDates">
                <el-date-picker
                  placement="bottom-start"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="searchForm2.collectDates"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="list2()" size="small" icon="el-icon-search">查询</el-button>
                <el-button @click="resetSearch2()" size="small" icon="el-icon-refresh-right">重置</el-button>
              </el-form-item>
            </el-form>
            <vxe-table
              border="inner"
              auto-resize
              resizable
              height="400px"
              :loading="loading"
              size="small"
              ref="projectTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :menu-config="{}"
              :print-config="{}"
              @sort-change=""
              :sort-config="{remote:true}"
              :data="collectList"
              :row-config="{isCurrent: true}"
              :radio-config="{trigger: 'row'}"
            >
<!--              <vxe-column type="seq" width="60" title="序号"></vxe-column>-->
              <vxe-column min-width="160" align="center" title="领用编号" field="collectNo"></vxe-column>
              <vxe-column min-width="160" align="center" title="领用物品名称" field="goodsName">
                <template slot-scope="scope">
                  <el-link  type="primary" :underline="false" v-if="hasPermission('material:list')" @click="view2(scope.row.collectId)">{{scope.row.goodsName}}</el-link>
                  <el-link  type="primary" :underline="false" v-else-if="hasPermission('material:list')"  @click="view2(scope.row.collectId,)">{{scope.row.goodsName}}</el-link>
                  <span v-else>{{scope.row.goodsName}}</span>
                </template>
              </vxe-column>
              <vxe-column min-width="160" align="center" title="领用数量" field="collectNumber"></vxe-column>
              <vxe-column min-width="160" align="center" title="经办人" field="collectHandleBy"></vxe-column>
              <vxe-column min-width="160" align="center" title="经办人部门" field="collectHandleByOff"></vxe-column>
              <vxe-column min-width="160" align="center" title="领用时间" field="collectDate"></vxe-column>

            </vxe-table>
            <vxe-pager
              background
              size="small"
              :current-page="tablePage2.currentPage"
              :page-size="tablePage2.pageSize"
              :total="tablePage2.total"
              :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
              :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
              @page-change="currentChangeHandle2">
            </vxe-pager>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
    </span>
    </el-dialog>
    <WareHouseAddForm ref="wareHouseAddForm"></WareHouseAddForm>
    <UpdateCollectInfoForm ref="updateCollectInfoForm"></UpdateCollectInfoForm>
  </div>
</template>

<script>
  import WareHouseAddForm from '../wareHouse/WareHouseAddForm'
  import InputNumber from '@/views/modules/sys/workContract/InputNumber.vue'
  // import ProjectRecordsService from '@/api/cw/projectRecords/ProjectRecordsService'
  import WareHouseService from '@/api/materialManagement/WareHouseService'
  import SelectUserTree from '@/views/modules/utils/treeUserSelect'
  import UpdateCollectInfoForm from '../collect/UpdateCollectInfoForm'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: []
        },
        tablePage2: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: []
        },
        tableKey: '',
        dataList: [],
        collectList: [],
        searchForm: {
          tradeName: '',
          contractDates: []
        },
        searchForm2: {
          tradeName: '',
          collectDates: []
        },
        activeNameTop: 'wareHouse'
      }
    },
    // projectRecordsService: null,
    wareHouseService: null,
    created () {
      // this.projectRecordsService = new ProjectRecordsService()
      this.wareHouseService = new WareHouseService()
    },
    components: {
      SelectUserTree,
      WareHouseAddForm,
      InputNumber,
      UpdateCollectInfoForm
    },
    methods: {
      // 查看
      view (id) {
        this.$refs.wareHouseAddForm.init('view', id)
      },
      // 查看2
      view2 (id) {
        this.$refs.updateCollectInfoForm.init('view', id)
      },
      init (tradeName) {
        this.activeNameTop = 'wareHouse'
        this.visible = true
        this.searchForm.tradeName = tradeName
        this.searchForm2.tradeName = tradeName
        this.list()
        this.list2()
      },
      list () {
        this.loading = true
        // this.searchForm.createId = this.$store.state.user.id
        this.wareHouseService.wareHouseHistoryList({
          ...this.searchForm
        }).then(({data}) => {
          this.dataList = data.records
          // this.collectList = data.collectList
          this.tablePage.total = data.total
          this.tableKey = Math.random()
          this.loading = false
        })
      },
      list2 () {
        this.wareHouseService.collectHistoryList({
          ...this.searchForm2
        }).then(({data}) => {
          this.collectList = data.records
          // this.collectList = data.collectList
          this.tablePage2.total = data.total
          this.tableKey = Math.random()
          this.loading = false
        })
      },
      // 当前页
      currentChangeHandle ({currentPage, pageSize}) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.list()
      },
      currentChangeHandle2 ({currentPage, pageSize}) {
        this.tablePage2.currentPage = currentPage
        this.tablePage2.pageSize = pageSize
        this.list2()
      },
      resetSearch () {
        this.$refs.searchForm.resetFields()
        this.list()
      },
      resetSearch2 () {
        this.$refs.searchForm2.resetFields()
        this.list2()
      },
      close () {
        this.visible = false
        this.$refs.searchForm.resetFields()
        this.$refs.searchForm2.resetFields()
      },
      tabHandleClickTop (event) {
        // console.log(event)
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 15px;
  }
</style>
