<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-input v-model="searchParams.search_name" placeholder="请输入代理公司昵称/手机号" size="small" style="width:250px" />
      <el-button
        type="primary"
        size="small"
        @click="searchParams.page_index = 1;getCrownStock()"
      >
        查询
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="user"
        label="代理公司"
        width="250"
        align="center"
      >
        <template slot-scope="{ row }">
          <!-- <el-button type="text" style="cursor:text">{{ row.user.nickname }}</el-button> -->
          {{ row.user.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.user.mobile }}
        </template>
      </el-table-column>
      <el-table-column
        prop="goods"
        label="商品名称"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.goods ? row.goods.name : '' }}
        </template>
      </el-table-column>
      <el-table-column
        label="商品规格"
        align="center"
      >
        <template slot-scope="{ row }">
          <div v-for="(item, i) in row.style" :key="i" style="line-height: 30px;">
            <span>{{ Object.values(item.style).join('-') }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="库存数量"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          <div v-for="(item, i) in row.style" :key="i" style="line-height: 30px;">
            <span>{{ item.total }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="产品单价"
        align="center"
      >
        <template slot-scope="{ row }">
          <div v-for="(item, i) in row.style" :key="i" style="line-height: 30px;">
            <span>￥{{ item.price }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="库存价值"
        align="center"
      >
        <template slot-scope="{ row }">
          <div v-for="(item, i) in row.style" :key="i" style="line-height: 30px;">
            <span>￥{{ item.total * Number(item.price) }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div 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 { getCrownStock } from '@/api/stock/crown'
export default {
  data() {
    return {
      searchParams: {
        search_name: '',
        page_index: 1,
        page_size: 10
      },
      table: [],
      tableTotal: 0,
      loadingFull: false
    }
  },
  created() {
    this.getCrownStock()
  },
  methods: {
    // 获取皇冠库存
    async getCrownStock() {
      this.loadingFull = true
      try {
        const res = await getCrownStock(this.searchParams)
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error('获取皇冠库存失败!!')
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getCrownStock()
    }
  }
}
</script>
<style lang="scss" scoped>
    .tableBorder{
        border: 1px solid #EBEEF5;
        margin: 20px 0;
    }
</style>
