<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search-container">
      <el-input v-model="listQuery.search_name" type="text" placeholder="所属者昵称/姓名/手机号" style="width:300px" @keyup.enter.native="listQuery.page_index = 1; getList()" />
      <el-select v-model="listQuery.activity_id" style="width: 400px">
        <el-option label="全部" value="" />
        <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
      <!-- <el-cascader
        v-model="value"
        :options="options"
        placeholder="请选择排序"
        @change="handleChange"
      />
      <el-date-picker
        v-model="listQuery.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      /> -->
      <el-button type="primary" @click="listQuery.page_index = 1; getList()">搜索</el-button>
      <el-button type="primary" @click="toExport">导出</el-button>
    </div>
    <!-- <div class="total_money">
      <span>总订货金额: <i class="red">{{ parseMoney(total.all) }}</i></span>
      <span>总付款金额: <i class="red">{{ parseMoney(total.pay) }}</i></span>
      <span>总未付款金额: <i class="red">{{ parseMoney(total.no_pay) }}</i></span>
      <span>总资金账户余额: <i class="red">{{ parseMoney(total.all_money) }}</i></span>
    </div> -->
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="tablelist"
      @sort-change="toSort"
    >
      <el-table-column
        type="index"
        :index="index"
        label="序号"
        width="80"
        align="center"
      >
        <span slot-scope="{ row: { no_pay_account }, $index }" :class="no_pay_account > 0 ? 'red' : ''">{{ $index + 1 + Number(listQuery.page_size) * (Number(listQuery.page_index) - 1) }}</span>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="所属者昵称"
        align="center"
      >
        <span slot-scope="{ row: { nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ nickname }}</span>
      </el-table-column>
      <el-table-column
        prop="realname"
        label="所属者姓名"
        align="center"
      >
        <span slot-scope="{ row: { realname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ realname }}</span>
      </el-table-column>
      <el-table-column
        prop="level"
        label="所属者等级"
        align="center"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['level'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="所属者手机号"
        align="center"
      >
        <span slot-scope="{ row: { mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ mobile }}</span>
      </el-table-column>
      <el-table-column
        prop="u_nickname"
        label="下单人昵称"
        align="center"
      >
        <span slot-scope="{ row: { u_nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ u_nickname }}</span>
      </el-table-column>
      <el-table-column
        prop="u_mobile"
        label="下单人手机号"
        align="center"
      >
        <span slot-scope="{ row: { u_mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ u_mobile }}</span>
      </el-table-column>

      <el-table-column
        prop="精装版"
        label="精装版"
        sortable="custom"
        align="center"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['精装版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="简约版"
        label="简约版"
        sortable="custom"
        align="center"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['简约版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="老人版"
        label="老人版"
        sortable="custom"
        align="center"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['老人版'] || 0 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="纯棉老人版"
        label="纯棉老人版"
        sortable="custom"
        align="center"
      >
        <template slot-scope="{ row }">
          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['纯棉老人版'] || 0 }} </span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="account"
        label="订货金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(account) }}</span>
      </el-table-column>
      <el-table-column
        prop="pay_account"
        label="已付款金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { pay_account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(pay_account) }}</span>
      </el-table-column>
      <el-table-column
        prop="no_pay_account"
        label="未付款金额"
        sortable="custom"
      >
        <span slot-scope="{ row: { no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(no_pay_account) }}</span>
      </el-table-column> -->
      <!-- <el-table-column
        prop="money"
        label="账户余额"
        sortable="custom"
      >
        <span slot-scope="{ row: { money } }" :class="money > 0 ? 'red' : ''">{{ parseMoney(money) }}</span>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="listQuery.page_size"
      :page="listQuery.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
  </div>
</template>
<script>
// api
import { list, toExport } from '@/api/data/order_belong'
import { parseMoney } from '@/utils/index'
import { formatter } from '@/filters/index'
import { activityList } from '@/api/giftB'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 20,
        search_name: '',
        time: '',
        activity_id: '',
        type: '',
        sort: ''
      },
      value: [],
      options: [
        {
          value: '精装版',
          label: '精装版',
          children: [
            {
              value: 0,
              label: '倒序'
            },
            {
              value: 1,
              label: '正序'
            }
          ]
        },
        {
          value: '简约版',
          label: '简约版',
          children: [
            {
              value: 0,
              label: '倒序'
            },
            {
              value: 1,
              label: '正序'
            }
          ]
        },
        {
          value: '老人版',
          label: '老人版',
          children: [
            {
              value: 0,
              label: '倒序'
            },
            {
              value: 1,
              label: '正序'
            }
          ]
        },
        {
          value: '纯棉老人款',
          label: '纯棉老人款',
          children: [
            {
              value: 0,
              label: '倒序'
            },
            {
              value: 1,
              label: '正序'
            }
          ]
        }
      ],
      tablelist: [],
      tableTotal: 0,
      total: {
        all: 0,
        pay: 0,
        no_pay: 0,
        all_money: 0
      },
      activitys: []
    }
  },
  computed: {
  },
  created() {
    this.parseMoney = parseMoney
    this.activityList(() => {
      this.getList()
    })
  },
  methods: {
    toSort({ column, prop, order }) {
      const sortMap = new Map([
        ['简约版', this.totalSort],
        ['老人版', this.putTotalSort],
        ['精装版', this.outTootalSort],
        ['纯棉老人版', this.outSort]
      ])
      if (sortMap.get(prop)) {
        sortMap.get(prop)(order)
      }
    },
    outTootalSort(sort) {
      // 精装版
      this.listQuery.sort = sort && sort !== 'ascending' ? 1 : 0
      this.listQuery.type = '精装版'
      this.getList()
    },
    putTotalSort(sort) {
      // 老人版
      this.listQuery.sort = sort && sort !== 'ascending' ? 1 : 0
      this.listQuery.type = '老人版'
      this.getList()
    },
    totalSort(sort) {
      // 简约版
      this.listQuery.sort = sort && sort !== 'ascending' ? 1 : 0
      this.listQuery.type = '简约版'
      this.getList()
    },
    outSort(sort) {
      // 纯棉老人版
      this.listQuery.sort = sort && sort !== 'ascending' ? 1 : 0
      this.listQuery.type = '纯棉老人版'
      this.getList()
    },
    handleChange(value) {
      this.listQuery.type = value[0]
      this.listQuery.sort = value[1]
      this.getList()
    },
    async getList() {
      this.loadingFull = true
      const { page_index, page_size, search_name, time, activity_id, type, sort } = this.listQuery
      await list({
        page_index, page_size, search_name, activity_id, type, sort,
        start_time: (time && time.length > 0) ? time[0] : '',
        end_time: (time && time.length > 0) ? time[1] : ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tablelist = res.data.list.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    index(i) {
      const { page_index: a, page_size: b } = this.listQuery
      return (a - 1) * b + i + 1
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    async toExport() {
      this.loadingFull = true
      const { page_index, page_size, search_name, time, activity_id, sort, type } = this.listQuery
      toExport({
        page_index, page_size, search_name, activity_id, sort, type,
        start_time: (time && time.length > 0) ? time[0] : '',
        end_time: (time && time.length > 0) ? time[1] : ''
      }).then(res => {
        if (res.code === 200) {
          if (res.data === 0) {
            this.$message.error('没有可导出数据')
            return false
          } else {
            const exportData = res.data
              import('@/vendor/Export2Excel').then(excel => {
                const header = ['序号', '所属者昵称', '所属者姓名', '所属者等级', '所属者手机号', '下单人昵称', '下单人手机号', '精装版', '简约版', '老人版', '纯棉老人版']
                const exportK = ['index', 'nickname', 'realname', 'level', 'mobile', 'u_nickname', 'u_mobile', '精装版', '简约版', '老人版', '纯棉老人版']
                // , '精装版', '简约版', '老人版', '纯棉老人版'
                const exportV = exportData.map((item, i) => {
                  const obj = {
                    index: i + 1,
                    nickname: item.nickname || '',
                    realname: item.realname || '',
                    level: item.level || '',
                    mobile: item.mobile,
                    u_nickname: item.u_nickname || '',
                    u_mobile: item.u_mobile || '',
                    精装版: item.精装版 || 0,
                    简约版: item.简约版 || 0,
                    老人版: item.老人版 || 0,
                    纯棉老人版: item.纯棉老人版 || 0
                  }
                  return obj
                })
                const exportD = exportV.map(item => exportK.map(k => item[k]))
                excel.export_json_to_excel({
                  header,
                  data: exportD,
                  filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
                  autoWidth: true,
                  bookType: 'xlsx'
                })
              })
            // const header = Object.keys(res.data[0])
            // header.unshift('序号')
            // import('@/vendor/Export2Excel').then(excel => {
            //   excel.export_json_to_excel({
            //     header: header,
            //     data: res.data.map((listItem, i) => header.map(j => {
            //       if (j === '简约版' || j === '纯棉老人版' || j === '精装版' || j === '老人版') {
            //         listItem[j] = Number(listItem[j]) || 0
            //       }
            //       if (j === '序号') {
            //         listItem[j] = i + 1
            //       }
            //       return listItem[j]
            //     })),
            //     filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
            //     bookType: 'xlsx'
            //   })
            // })
          }
        }
      }).catch(e => {
        this.$message.error('导出失败')
      }).finally(() => {
        this.loadingFull = false
      })
    },
    MoneySort(column) {
      const fieldName = column.prop
      const sortingType = column.order
      if (sortingType === 'descending') {
        this.tablelist.sort((a, b) => Number(b[fieldName] || 0) - Number(a[fieldName] || 0))
      } else if (sortingType === 'ascending') {
        this.tablelist.sort((a, b) => Number(a[fieldName] || 0) - Number(b[fieldName] || 0))
      }
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-container {
    margin-bottom: 15px;
  }

  .red {
    color: crimson;
  }

  .total_money {
    margin-bottom: 15px;

    span {
      display: inline-block;
      margin-right: 15px;
    }

    .red {
      display: inline-block;
      color: crimson;
      font-size: 18px;
    }
  }
</style>
