<template>
  <div class="tshirt">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search-container">
      <el-input v-model="listQuery.crown_mobile" type="text" :clearable="true" placeholder="下单人手机号/昵称" style="width:300px" />
      <el-input v-model="listQuery.mobile" type="text" :clearable="true" placeholder="收货人手机号/昵称/姓名" style="width:300px" />
      <el-button type="primary" @click="listQuery.page_index=1;getList()">搜索</el-button>
      <el-button type="primary" @click="toExport">导出</el-button>
      <el-button type="primary" @click="$refs.updateTs.show()">新增</el-button>
      <el-badge :value="res.total" class="item">
        <el-button size="mini">需填写人数</el-button>
      </el-badge>
      <el-badge :value="res.write_count" class="item">
        <el-button size="mini">已填写人数</el-button>
      </el-badge>
      <el-badge :value="res.surplus_count" class="item">
        <el-button size="mini">未填写人数</el-button>
      </el-badge>
      <el-badge :value="''" class="item">
        <el-button size="mini">填写率 : {{ res.percent }}</el-button>
      </el-badge>
      <el-badge :value="res.total_all" class="item">
        <el-button size="mini">总数量</el-button>
      </el-badge>
      <el-badge :value="res.total_L" class="item">
        <el-button size="mini">L数量</el-button>
      </el-badge>
      <el-badge :value="res.total_XL" class="item">
        <el-button size="mini">XL数量</el-button>
      </el-badge>
      <el-badge :value="res.total_3XL" class="item">
        <el-button size="mini">3XL数量</el-button>
      </el-badge>
    </div>
    <el-table v-if="res.list" :data="res.list" border stripe>
      <el-table-column v-for="(item, index) in Object.keys(res.list[0] ? res.list[0] : {})" :key="index" :prop="item" :label="item" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button size="mini" type="text" @click="$refs.updateTs.show(JSON.parse(JSON.stringify(row)))">修改</el-button>
          <el-button size="mini" type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="res.total || 0" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
    <UpdateTSInfoDialog ref="updateTs" :visible="dialogs.updateTs" @open="dialogs.updateTs = true" @close="dialogs.updateTs = false" @reget="getList()" />
  </div>
</template>

<script>
import { delT } from '@/api/data/tshsirt'
import { getList, getExcel } from '@/api/data/tshsirt'
import UpdateTSInfoDialog from './components/ChangeTShitrtDialog'
export default {
  name: 'Tshirt',
  components: { UpdateTSInfoDialog },
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 50,
        crown_mobile: '',
        mobile: ''
      },

      res: {},
      dialogs: {
        updateTs: false
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() { // 获取数据
      this.loadingFull = true
      const { page_index, page_size, crown_mobile, mobile } = this.listQuery
      await getList({ page_index, page_size, mobile, crown_mobile }).then(res => {
        this.loadingFull = false
        this.res = res.data
      }).finally(e => {
        this.loadingFull = false
      })
    },
    toExport() { // 导出 Excel
      this.$request(getExcel(), ({ list }) => this.$excel(list, 'T恤名单'))
    },
    changePagination(data) { // 翻页
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    del(row) {
      this.$confirm('确定删除？', '提示').then(() => {
        this.$request(delT(row), () => {
          this.getList()
          this.dialogs.updateTs = false
          this.$message.success('删除成功!')
        })
      }).catch(() => this.$message.info('取消删除'))
    }
  }
}
</script>

<style lang="scss" scoped>
  .tshirt{
    padding: 8px;
    .search-container {
      .el-badge {
        >>> .el-badge__content {
          z-index: 1;
          right: 32px;
        }
      }
      display: flex;
      margin-bottom: 15px;

      /deep/ .el-input {
        margin-right: 10px;
      }

      /deep/ .el-button {
        margin-left: 10px;
      }
    }
  }
</style>
