<template>
  <a-spin :spinning="confirmLoading">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="12" :lg="9" :md="10" :sm="24">
            <a-form-item label="时间">
              <j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.operTime_begin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.operTime_end"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="7" :lg="9" :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select placeholder="请选择状态" v-model="queryParam.depotType" allow-clear>
                <a-select-option value="">请选择</a-select-option>
                <a-select-option value="入库">入库</a-select-option>
                <a-select-option value="出库">出库</a-select-option>
                <a-select-option value="更新">更新</a-select-option>
              </a-select> 
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="6" :md="10" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    
    <a-table
      ref="table"
      size="middle"
      :scroll="{x:true}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange">
      
      <template slot="numberSlot" slot-scope="text,record">
        <a-badge v-if="record.depotType === '出库'" :count="text" :overflowCount="Number.MAX_SAFE_INTEGER"/>
        <a-badge v-else :count="text" :number-style="{ backgroundColor: '#52c41a' } " :overflowCount="Number.MAX_SAFE_INTEGER"/>
      </template>
    </a-table>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue,filterObj } from '@/utils/util'
  
  export default {
    name: 'ViewDepotStockForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* 数据源 */
        dataSource:[],
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* table加载状态 */
        loading:false,
        defaultQuery:{
          partNumber:''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        url: {
          list: "/depot/tblDepot/infoList",
          edit: "/depot_stock/viewDepotStock/edit",
          queryById: "/depot_stock/viewDepotStock/queryById"
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'partNumber'
          },
          {
            title:'品名',
            align:"center",
            dataIndex: 'productName'
          },
          {
            title:'入库/出库时间',
            align:"center",
            dataIndex: 'operTime'
          },
          {
          title: '工作令',
          align: "center",
          dataIndex: 'workOrder'
        },
          {
            title:'数量',
            align:"center",
            dataIndex: 'operNumber',
            scopedSlots: { customRender: 'numberSlot' } 
          },
          {
            title:'当前库存',
            align:"center",
            dataIndex: 'currentInventory',
            // scopedSlots: { customRender: 'currentInventorySlot' } 
          },
          {
            title:'操作人',
            align:"center",
            dataIndex: 'createBy'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'depotType'
          },
        ],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      // this.updateData()
      this.$nextTick(()=>{
        this.loadData()
      })
      
    },
    methods: {
      updateData() {
        var params = null
        getAction("/depot/tblDepot/updateData", params).then((res) => {
          
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.queryParam.partNumber = record.partNumber;
        this.defaultQuery.partNumber = record.partNumber;
        this.visible = true;
      },
      loadData() {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        // if (arg === 1) {
        //   this.ipagination.current = 1;
        // }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleTableChange(pagination, filters, sorter){
        this.ipagination = pagination;
        this.loadData()
      },
      searchQuery(){
        this.ipagination.current = 1
        this.loadData();
      },
      searchReset() {
        this.queryParam = {...this.defaultQuery}
        this.ipagination.current = 1
        this.loadData();
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        //TODO 字段权限控制
        var str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },
    }
  }
</script>