<template>
  <a-card style="width: 100%;">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="3">
            <a-form-item label="">
              <a-input
                  :allowClear="true"
                  placeholder="商品名称"
                v-model="queryParam.goodName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item label="">
              <a-select
                v-model="queryParam.depositoryId"
                style="width: 100%"
                :allowClear="true"
                placeholder="仓库">
                <a-select-option
                  v-for="(item, index) in depositoryList"
                  :key="index"
                  :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="3">
            <a-form-item label="" v-model="queryParam.goodTypeId">
              <a-cascader :options="stockTypeList " @change="stockTypeChange" :field-names="{ label: 'name', value: 'id', children: 'children' }" placeholder="商品类别" />
            </a-form-item>
          </a-col>
          <a-col :span="3" v-if="this.isIn == null">
            <a-form-item label="">
              <a-select
                  v-model="queryParam.warningState"
                  style="width: 100%"
                  :allowClear="true"
                  placeholder="预警状态">
                <a-select-option value="1">正常</a-select-option>
                <a-select-option value="2">预警</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="9" v-else>
            <a-form-item label="">
              <a-radio-group v-model="queryParam.timeFrame">
                <a-radio-button value="1">今日</a-radio-button>
                <a-radio-button value="2">昨日</a-radio-button>
                <a-radio-button value="3">本周</a-radio-button>
                <a-radio-button value="4">其他</a-radio-button>
              </a-radio-group>
              <a-range-picker v-if="queryParam.timeFrame === '4'" v-model="chooseTime" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="loadDate"
                icon="search"
              >查询</a-button
              >
              <a-button
                type="primary"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="goodDate"
        :pagination="ipagination"
        class="storage_collect"
        @change="pageChange">
        <template #footer >
          <a-table
              ref="table"
              size="middle"
              :bordered="true"
              :pagination="false"
              :columns="columns"
              :dataSource="totalData"
              :showHeader="false"
              style="padding: 0px"
          ></a-table>

          <template v-if="columns.dataIndex === 'num'">
            <a>1</a>
          </template>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
import { getAction } from '@api/manage'
import moment from 'moment'
export default {
  name: 'StorageCollectInfo',
  components: {
  },
  props: {
    // 是否是出库。true 入库，false 出库，null 全部
    isIn: {
      type: Boolean,
      default: false,
      required: false
    },
    columns: {
      type: Array,
      default: () => [],
      required: false
    },
    list: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {

      goodDate: [],
      depositoryList: [],
      stockTypeList: [],
      queryParam: {
        timeFrame: '1',
        startTime: '',
        endTime: '',
        goodTypeId: ''
      },
      totalData: [
        {
          depositoryName: '合计',
          allMoney: 0
        }
      ],

      chooseTime: [],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },

      url: {
        // delete: '/kc/kcDepositoryInGoods/delete',
        // deleteBatch: '/kc/kcDepositoryInGoods/deleteBatch',
        exportXlsUrl: '/kc/kcDepositoryInGoods/exportXls',
        importExcelUrl: '/kc/kcDepositoryInGoods/importExcel'
      },

    }
  },
  created() {
    this.loadDate()
    this.loadDepository()
    this.loadStockType()
  },
  methods: {
    loadDate() {
      if (this.isIn != null) {
        if (this.queryParam.timeFrame === '4' && this.chooseTime.length === 0) {
          this.$message.warning('请选择时间')
          return
        }
        this.getTimeFrame()
      }
      let params = {
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
        goodName: this.queryParam.goodName,
        depositoryId: this.queryParam.depositoryId,
        goodTypeId: this.queryParam.goodTypeId,
        startTime: this.queryParam.startTime,
        endTime: this.queryParam.endTime,
        isIn: this.isIn,
        warningState: this.queryParam.warningState
      }
      getAction(this.list, params).then((res) => {
        if (!res.success) {
          this.$message.warning('查询失败')
          return
        }
        this.goodDate = res.result.records
        let allNum = this.goodDate.reduce((accumulator, e) => accumulator + e.num, 0)
        let allMoney = this.goodDate.filter(e => e.price != null && e.num != null).reduce((accumulator, e) => accumulator + e.num * e.price, 0)
        // debugger
        console.log(this.goodDate)
        console.log(allMoney, 'allMoney')
        this.$set(this.totalData[0], 'num', allNum)
        this.$set(this.totalData[0], 'price', allMoney)
        // this.$set(this.totalDate[0], 'num', allNum)
        this.ipagination.pageNo = res.result.current
        this.ipagination.total = res.result.total
        this.expandedRowKeys = []
      }).finally(() => {
        // this.loading = false
      })
    },
    loadDepository() {
      let params = {
        pageSize: 9999,
        pageNo: 1
      }
      getAction('/kc/kcDepository/list', params).then((res) => {
        if (!res.success) {
          this.$message.warning('查询失败')
          return
        }
        this.depositoryList = res.result.records
      })
    },
    loadStockType() {
      let params = {
        pageSize: 9999,
        pageNo: 1
      }
      getAction('/rooms/cesStockType/tree', params).then((res) => {
        if (!res.success) {
          this.$message.warning('查询失败')
          return
        }
        this.stockTypeList = res.result
        console.log(this.stockTypeList)
      })
    },
    stockTypeChange(e) {
      console.log(e, 'e')
      this.queryParam.goodTypeId = e[e.length - 1]
      console.log(this.queryParam.goodTypeId)
    },
    // 获取时间范围
    getTimeFrame() {
      if (this.queryParam.timeFrame === '1') {
        // 今天
        this.queryParam.startTime = moment().format('YYYY-MM-DD')
        this.queryParam.endTime = moment().add(1, 'days').format('YYYY-MM-DD')
      } else if (this.queryParam.timeFrame === '2') {
        // 昨天
        this.queryParam.endTime = moment().format('YYYY-MM-DD')
        this.queryParam.startTime = moment().subtract(1, 'days').format('YYYY-MM-DD')
      } else if (this.queryParam.timeFrame === '3') {
        // 本周
        this.queryParam.startTime = moment().weekday(0).format('YYYY-MM-DD')
        this.queryParam.endTime = moment().weekday(6).format('YYYY-MM-DD')
      } else if (this.queryParam.timeFrame === '4') {
        // 自定义时间
        this.queryParam.startTime = this.chooseTime[0].format('YYYY-MM-DD')
        this.queryParam.endTime = this.chooseTime[1].format('YYYY-MM-DD')
      }
    },
    pageChange(page) {
      console.log(page)
      this.ipagination = page
      this.loadDate()
    },

  }
}
</script>

<style>
.storage_collect .ant-table-footer {
  padding: 0px 0px !important;
}
</style>
