<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />

    <div v-if="activeName !== 'fourth'" class="top">
      <el-input
        v-model="search_content"
        placeholder="请输入代理公司昵称/手机号"
        style="width: 250px"
      />
      <el-date-picker
        v-if="activeName == 'first'"
        v-model="time"
        type="datetime"
        placeholder="选择日期时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        :clearable="false"
      />
      <el-date-picker
        v-else
        v-model="rangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-button type="primary" @click="search"> 查询 </el-button>
    </div>
    <el-tabs
      v-model="activeName"
      style="margin-top: 10px"
      @tab-click="handleClick"
    >
      <el-tab-pane label="库存详情" name="first">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <div class="totalNum">{{ totalNum.total }}</div>
              <div class="totalText">总库存数</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <div class="totalNum">{{ totalNum.hard }}</div>
              <div class="totalText">精装版库存总数</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <div class="totalNum">{{ totalNum.simple }}</div>
              <div class="totalText">简约版库存总数</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <div class="totalNum">{{ totalNum.old }}</div>
              <div class="totalText">老人版库存总数</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <div class="totalNum">{{ totalNum.new_old }}</div>
              <div class="totalText">纯绵版库存总数</div>
            </div>
          </el-col>
        </el-row>
        <el-table
          :data="totalList.list"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
        >
          <el-table-column prop="mobile" label="手机号" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="realname" label="真实姓名" align="center" />
          <el-table-column prop="hard" label="精装版数量" align="center" />

          <el-table-column prop="simple" label="简约版数量" align="center" />
          <el-table-column prop="old" label="老人版数量" align="center" />
          <el-table-column prop="new_old" label="纯棉版数量" align="center" />
          <el-table-column prop="total" label="四种款式总和" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="getJingZhuang(1, row)">{{
                row.total
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer
          title="库存详情"
          :visible.sync="drawer"
          direction="rtl"
          :before-close="handleClose"
        >
          <div style="width: 100%; padding: 0 20px; box-sizing: border-box">
            <el-table
              :data="childList.list"
              :header-cell-style="{ background: '#f8fbfc' }"
              border
              stripe
            >
              <el-table-column label="商品" align="center">
                <template slot-scope="{ row }">
                  {{
                    row.type
                      ? row.type === 1
                        ? "简约版"
                        : row.type === 2
                          ? "老人版"
                          : "纯棉老人版"
                      : "精装版"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="款式" align="center">
                <template slot-scope="{ row }">
                  {{ row.sex ? "男款" : "女款" }}
                </template>
              </el-table-column>
              <el-table-column prop="size" label="尺码" align="center" />
              <el-table-column prop="num" label="数量" align="center" />
            </el-table>
          </div>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="出库汇总" name="second">
        <el-table
          :data="chukuList.list"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
        >
          <el-table-column prop="mobile" label="手机号" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="realname" label="真实姓名" align="center" />
          <el-table-column
            prop="hard_total"
            label="精装版数量"
            align="center"
          />

          <el-table-column
            prop="simple_total"
            label="简约版数量"
            align="center"
          />
          <el-table-column prop="old_total" label="老人版数量" align="center" />
          <el-table-column
            prop="newold_total"
            label="纯棉版数量"
            align="center"
          />
          <el-table-column prop="total" label="四种款式总和" align="center" />
          <el-table-column prop="money" label="四种款式总金额" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                plain
                @click="ExportOutPutRecord(1, row)"
              >导出详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="入库汇总" name="third">
        <el-table
          :data="rukuList.list"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
        >
          <el-table-column prop="mobile" label="手机号" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="realname" label="真实姓名" align="center" />
          <el-table-column
            prop="hard_total"
            label="精装版数量"
            align="center"
          />

          <el-table-column
            prop="simple_total"
            label="简约版数量"
            align="center"
          />
          <el-table-column prop="old_total" label="老人版数量" align="center" />
          <el-table-column
            prop="newold_total"
            label="纯棉版数量"
            align="center"
          />
          <el-table-column prop="total" label="四种款式总和" align="center" />
          <el-table-column prop="money" label="四种款式总金额" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                plain
                @click="ExportOutPutRecord(0, row)"
              >导出详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="统计图表" name="fourth" :lazy="true">
        <template>
          <charts width="100%" />
        </template>
      </el-tab-pane>
    </el-tabs>
    <div v-if="activeName !== 'fourth'" class="batch-container">
      <pagination
        :total="tableTotal"
        :limit="searchParams.page_size"
        :page="searchParams.page_index"
        style="margin-top: 0"
        @pagination="changePagination"
        @update:limit="changePagination"
      />
    </div>
  </div>
</template>
<script>
// api
import {
  stockStatistics,
  stockPersonal,
  outStock,
  putStock,
  ExportOutPutRecord
} from '@/api/stock/statistics'
import Charts from './components/Charts'
// import { readFile } from 'xlsx/types';
export default {
  components: {
    Charts
  },
  data() {
    return {
      timeSelect: ['一周', '两周', '三周', '一月'],
      tableTitle: [],
      drawer: false,
      searchParams: {
        page_index: 1,
        page_size: 10
      },
      table: [],
      tableTotal: 0,
      loadingFull: false,
      search_content: '',
      time: '',
      totalList: '',
      activeName: 'first',
      id: '',
      childList: '', // 个人数据侧边栏列表
      rangeTime: '',
      startTime: '',
      endTime: '',
      chukuList: '',
      rukuList: '',
      lengedMap: ['出库', '入库'],
      proTime: '',
      totalNum: {
        total: 0,
        hard: 0,
        simple: 0,
        old: 0,
        new_old: 0
      }
    }
  },
  created() {
    const myDate = new Date()
    const date = myDate.toLocaleDateString()
    const date1 = date.replace(/\//g, '-')
    const time1 = myDate.toLocaleTimeString()
    const time2 = time1.split('午')
    const time = time2[1]
    const data1 = date1 + ' ' + time
    this.time = data1
    this.startTime = data1
    this.endTime = data1
    this.rangeTime = data1 + '至' + data1
    console.log(data1, 'time')
    this.stockStatistics()
    this.proTime = {
      startTime: this.startTime,
      endTime: this.endTime
    }
  },
  methods: {
    // 查询
    search() {
      console.log(this.time, 'this.time')
      if (this.rangeTime === null) {
        this.startTime = ''
        this.endTime = ''
      } else {
        this.startTime = this.rangeTime[0]
        this.endTime = this.rangeTime[1]
      }
      if (this.time === null) {
        this.time = ''
      }
      console.log(this.search_content, 'this.time')
      console.log(this.rangeTime, 'rangeTime')

      console.log(this.endTime, 'rangeTime')
      if (this.activeName === 'first') {
        this.stockStatistics()
      } else if (this.activeName === 'second') {
        this.outStock()
      } else if (this.activeName === 'third') {
        this.putStock()
      }
    },
    // 库存详情
    async stockStatistics() {
      this.loadingFull = true
      console.log(this.time, 'time')
      const params = {
        page_index: this.searchParams.page_index,
        page_size: this.searchParams.page_size,
        search_content: this.search_content,
        time: this.time
      }
      const { data } = await stockStatistics(params)
      this.totalList = data
      console.log(this.totalList, 'pppp')
      console.log(data, 'pppp')
      this.tableTotal = data.total
      this.totalNum = data.all_total
      this.loadingFull = false
      console.log(this.startTime, 'startTime')
    },
    // 个人库存详情
    getJingZhuang(tab, event) {
      this.id = event.id
      this.stockPersonal()
    },
    async stockPersonal() {
      this.loadingFull = true
      const params = {
        id: this.id,
        time: this.time
      }
      stockPersonal(params).then((res) => {
        this.childList = res.data
        this.drawer = true
        this.loadingFull = false
      })
    },

    // 出库汇总汇总
    async outStock() {
      this.loadingFull = true
      const params = {
        page_index: this.searchParams.page_index,
        page_size: this.searchParams.page_size,
        search_content: this.search_content,
        start_time: this.startTime,
        end_time: this.endTime
      }
      outStock(params).then((res) => {
        this.chukuList = res.data
        this.tableTotal = res.data.count
        this.totalNum = res.data.all_total
        this.loadingFull = false
      })
    },
    // 入库汇总汇总
    async putStock() {
      this.loadingFull = true
      const params = {
        page_index: this.searchParams.page_index,
        page_size: this.searchParams.page_size,
        search_content: this.search_content,
        start_time: this.startTime,
        end_time: this.endTime
      }
      putStock(params).then((res) => {
        this.rukuList = res.data
        this.tableTotal = res.data.count
        this.totalNum = res.data.all_total
        this.loadingFull = false
      })
    },
    // 导出某个时间段个人出入库详情
    ExportOutPutRecord(rows, events) {
      const loading = this.$loading()
      console.log(rows, 'rows')
      console.log(events, 'events')
      if (rows === 1) {
        this.tableTitle = ['商品', '出库数量', '尺码', '款式', '时间']
      } else if (rows === 0) {
        this.tableTitle = ['商品', '入库数量', '尺码', '款式', '时间']
      }
      const params = {
        start_time: this.startTime,
        end_time: this.endTime,
        user_id: events.id,
        type: rows
      }
      ExportOutPutRecord(params)
        .then((res) => {
          loading.close()
          console.log(res, '导出详情')
          if (res.code === 200) {
            if (res.data.list.length === 0) {
              this.$message.error('没有可导出数据')
              return false
            }
            const header = this.tableTitle
            const data = res.data.list.map((item) => [
              item.type
                ? item.type === 1
                  ? '简约版'
                  : item.type === 2
                    ? '老人版'
                    : '纯棉老人版'
                : '精装版',
              item.num,
              item.size,
              item.sex ? '男款' : '女款',
              item.time
            ])
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_json_to_excel({
                header: header,
                data: data,
                filename: `${this.startTime}__${this.endTime}(${events.realname})`,
                bookType: 'xlsx'
              })
            })
          } else {
            this.$message.error(res.message || '导出失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('导出失败')
        })
    },
    // 重置库存
    handleClose(done) {
      done()
      console.log(this.drawer)
    },

    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      if (this.activeName === 'first') {
        this.stockStatistics()
      } else if (this.activeName === 'second') {
        this.outStock()
      } else if (this.activeName === 'third') {
        this.putStock()
      }
    },
    handleClick(tab, event) {
      if (this.activeName === 'first') {
        this.totalNum.total = 0
        this.totalNum.hard = 0
        this.totalNum.simple = 0
        this.totalNum.new_old = 0
        this.totalNum.old = 0
        this.stockStatistics()
      }
      if (this.activeName === 'second') {
        this.outStock()
      }
      if (this.activeName === 'third') {
        this.putStock()
      }
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  margin-top: 10px;
}
.tableBorder {
  border: 1px solid #ebeef5;
  margin: 10px 0;
}
.title {
  height: 50px;
  width: 200px;
  line-height: 50px;
  font-size: 18px;
  /*margin-top: 20px;*/
  color: #409eff;
  /*background-color: #409EFF;*/
  text-align: center;
  margin-top: 10px;
  border-bottom: solid 2px #409eff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-right: 40px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  text-align: center;
  min-height: 36px;
  padding: 20px;
  margin: 20px 0;
  background-color: #409eff;
}
.row-bg {
  padding: 10px 0;
}
.totalNum {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
}
.totalText {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  color: #ffffff;
}
.tabs__header {
  margin-top: 20px !important;
}
</style>
