<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-input
        v-model="searchParams.search_content"
        placeholder="请输入代理公司昵称/手机号"
        style="width: 250px"
      />
      <el-select v-model="searchParams.status">
        <el-option label="全部" value="all" />
        <el-option label="已盘库" value="0" />
        <el-option label="未盘库" value="1" />
      </el-select>
      <el-date-picker
        v-model="searchParams.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-button
        type="primary"
        @click="
          searchParams.page_index = 1;
          getCrownStock();
        "
      >
        查询
      </el-button>
      <el-button type="primary" @click="exportStock">导出(款式汇总)</el-button>
      <el-button
        type="primary"
        @click="exportAllStockDetail"
      >导出(尺码明细)</el-button>
      <el-button type="primary" @click="GetSmsTime">设置短信发送</el-button>
    </div>
    <el-dialog title="短信发送设置" :visible.sync="drawer" width="30%">
      <div class="mesborder">
        <div class="mes-title">
          <div class="title-left">短信发送周期:</div>
          <div class="title-right">
            <el-input v-model="smsRange" placeholder="请输入内容" />
          </div>
        </div>
        <div class="mes-title">
          <div class="title-left">短信发送开始计算时间:</div>
          <div class="title-right">
            <el-date-picker
              v-model="smsTime"
              type="date"
              placeholder="选择日期"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drawer = false">取 消</el-button>
        <el-button type="primary" @click="smsSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
      @sort-change="toSort"
    >
      <el-table-column prop="nickname" label="昵称" align="center" />
      <el-table-column prop="realname" label="真实姓名" align="center" />
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column label="所属站区" align="center">
        <template slot-scope="{ row }">
          {{ row.warea && row.warea.name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="total"
        label="库存数量(套)"
        align="center"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="toSeeSku(row)">{{
            row.total
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="put_total"
        label="入库数量(套)"
        align="center"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="getPutOutStorage(0, row)">{{
            row.put_total
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="out_total"
        label="出库数量(套)"
        align="center"
        sortable="custom"
      >
        <template slot-scope="{ row }">
          <el-button type="text" @click="getPutOutStorage(1, row)">{{
            row.out_total
          }}</el-button>
        </template>
      </el-table-column>
      <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="put_time"
        label="最新入库时间"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.put_time || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="out_time"
        label="最新出库时间"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ row.out_time || '暂无' }}
        </template>
      </el-table-column> -->
      <el-table-column label="是否盘库" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="row.sure_storage ? 'success' : 'info'">{{
            row.sure_storage ? "已盘库" : "未盘库"
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 库存详情 -->
    <el-drawer
      title="库存详情"
      :visible.sync="dialogSku.vis"
      direction="rtl"
      :before-close="resetDialogSku"
    >
      <div style="width: 100%; padding: 0 20px; box-sizing: border-box">
        <el-button
          type="primary"
          style="margin-bottom: 20px"
          @click="toExportTotal"
        >
          导出
        </el-button>
        <el-table
          :data="dialogSku.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-drawer
      title="入库详情"
      :visible.sync="dialogSku.putVis"
      direction="rtl"
      :before-close="resetDialogSku"
    >
      <div style="width: 100%; padding: 0 20px; box-sizing: border-box">
        <el-button
          type="primary"
          style="margin-bottom: 20px"
          @click="toExportPut"
        >
          导出
        </el-button>
        <el-table
          :data="dialogSku.putList"
          :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-column prop="created_at" label="入库时间" align="center" />
        </el-table>
      </div>
    </el-drawer>
    <!-- 出库详情 -->
    <el-drawer
      title="出库详情"
      :visible.sync="dialogSku.outVis"
      direction="rtl"
      :before-close="resetDialogSku"
    >
      <div style="width: 100%; padding: 0 20px; box-sizing: border-box">
        <el-button
          type="primary"
          style="margin-bottom: 20px"
          @click="toExportOut"
        >
          导出
        </el-button>
        <el-table
          :data="dialogSku.outList"
          :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-column prop="out_time" label="出库时间" align="center" />
        </el-table>
      </div>
    </el-drawer>
    <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,
  getPutOutStorage,
  exportStock,
  exportAllStockDetail,
  GetSmsTime,
  SetSmsTime
} from '@/api/stock/crown'
export default {
  data() {
    return {
      smsRange: '', // 短信周期
      smsTime: '', // 短信时间
      direction: 'ttb',
      drawer: false,
      smsList: '',
      dialogSku: {
        vis: false,
        list: [],
        putList: false,
        putVis: false,
        outList: false,
        outVis: false,
        title: ''
      },
      searchParams: {
        search_content: '',
        page_index: 1,
        page_size: 10,
        status: 'all',
        sort: 0,
        sort_type: 0,
        time: ''
      },
      table: [],
      tableTotal: 0,
      loadingFull: false
    }
  },
  watch: {
    'searchParams.status'() {
      this.searchParams.page_index = 1
      console.log('ppp11111111111')
      this.getCrownStock()
    }
  },
  created() {
    this.getCrownStock()
  },
  methods: {
    exportAllStockDetail() {
      // 导出所有人明细
      const loading = this.$loading()
      exportAllStockDetail({
        status: this.searchParams.status,
        search_content: this.searchParams.search_content
      })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            const header = [
              '昵称',
              '真实姓名',
              '手机号',
              '战区',
              '商品',
              '款式',
              '尺码',
              '数量',
              '是否盘库'
            ]
            const data = res.data.list.map((item) => [
              item.nickname,
              item.realname,
              item.mobile,
              (item.warea && item.warea.name) || '',
              item.sure_storage
                ? item.type
                  ? item.type === 1
                    ? '简约版'
                    : item.type === 2
                      ? '老人版'
                      : '纯棉老人版'
                  : '精装版'
                : '',
              item.sure_storage ? (item.sex ? '男款' : '女款') : '',
              item.sure_storage ? item.size : '',
              item.sure_storage ? item.num : '',
              item.sure_storage ? '已盘库' : '未盘库'
            ])
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_json_to_excel({
                header,
                data,
                filename: '老大库存明细',
                bookType: 'xlsx'
              })
            })
          } else {
            this.$message.error(res.message || '导出失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('导出失败')
        })
    },
    toExportTotal() {
      // 导出所有
      if (this.dialogSku.list.length === 0) {
        this.$message.error('没有可导出数据')
        return false
      }
      const header = ['商品', '款式', '尺码', '数量']
      const data = this.dialogSku.list.map((item) => [
        item.type
          ? item.type === 1
            ? '简约版'
            : item.type === 2
              ? '老人版'
              : '纯棉老人版'
          : '精装版',
        item.sex ? '男款' : '女款',
        item.size,
        item.num
      ])
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header,
          data: data,
          filename: `${this.dialogSku.title}_${
            this.searchParams.time
              ? this.searchParams.time[0] + '至' + this.searchParams.time[1]
              : ''
          }库存详情`,
          bookType: 'xlsx'
        })
      })
    },
    toExportPut() {
      // 导出入库
      if (this.dialogSku.putList.length === 0) {
        this.$message.error('没有可导出数据')
        return false
      }
      const header = ['商品', '款式', '尺码', '数量', '入库时间']
      const data = this.dialogSku.putList.map((item) => [
        item.type
          ? item.type === 1
            ? '简约版'
            : item.type === 2
              ? '老人版'
              : '纯棉老人版'
          : '精装版',
        item.sex ? '男款' : '女款',
        item.size,
        item.num,
        item.created_at
      ])
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header,
          data: data,
          filename: `${this.dialogSku.title}_${
            this.searchParams.time
              ? this.searchParams.time[0] + '至' + this.searchParams.time[1]
              : ''
          }入库详情`,
          bookType: 'xlsx'
        })
      })
    },
    toExportOut() {
      // 导出出库
      if (this.dialogSku.outList.length === 0) {
        this.$message.error('没有可导出数据')
        return false
      }
      const header = ['商品', '款式', '尺码', '数量', '出库时间']
      const data = this.dialogSku.outList.map((item) => [
        item.type
          ? item.type === 1
            ? '简约版'
            : item.type === 2
              ? '老人版'
              : '纯棉老人版'
          : '精装版',
        item.sex ? '男款' : '女款',
        item.size,
        item.num,
        item.out_time
      ])
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header,
          data: data,
          filename: `${this.dialogSku.title}_${
            this.searchParams.time
              ? this.searchParams.time[0] + '至' + this.searchParams.time[1]
              : ''
          }出库详情`,
          bookType: 'xlsx'
        })
      })
    },
    exportStock() {
      // 导出
      const loading = this.$loading()
      const {
        search_content,
        page_index,
        page_size,
        status,
        sort,
        sort_type,
        time
      } = this.searchParams
      exportStock({
        search_content,
        page_index,
        page_size,
        status,
        sort,
        sort_type,
        start_time: time ? time[0] : '',
        end_time: time ? time[1] : ''
      })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            console.log(res)
            const headers = [
              '昵称',
              '真实姓名',
              '手机号',
              '所属战区',
              '库存数量(套)',
              '精装版(套)',
              '简约版(套)',
              '老人版(套)',
              '纯棉老人版(套)',
              '是否盘库'
            ]
            const data = res.data.list.map((item) => [
              item.nickname,
              item.realname,
              item.mobile,
              (item.warea && item.warea.name) || '',
              item.total,
              item.hard,
              item.simple,
              item.old,
              item.new_old,
              item.sure_storage ? '已盘库' : '未盘库'
            ])
            import('@/vendor/Export2Excel').then((excel) => {
              excel.export_json_to_excel({
                header: headers,
                data: data,
                filename: '老大库存',
                bookType: 'xlsx'
              })
            })
          } else {
            this.$message.error(res.message || '导出失败')
          }
        })
        .catch((e) => {
          console.log(e)
          loading.close()
          this.$message.error('导出失败')
        })
    },
    GetSmsTime() {
      // 设置短信发送
      this.drawer = true
      GetSmsTime().then((res) => {
        console.log(res, '短信发送周期')
        this.smsTime = res.data.sms_storage_time
        this.smsRange = res.data.sms_remind_cycle
        console.log(this.smsRange)
      })
    },
    smsSure() {
      // 短信周期修改
      this.$confirm('此操作将修改短信发送设置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            time: this.smsTime,
            time_cycle: this.smsRange
          }
          SetSmsTime(params).then((res) => {
            if (res.code === 200) {
              this.drawer = false
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              alert(res.message)
            }
          })
        })
        .catch(() => {
          this.drawer = false
          this.$message({
            type: 'info',
            message: '操作取消'
          })
        })
    },
    getPutOutStorage(type, data) {
      // 入库/出库详情
      const { time } = this.searchParams
      const loading = this.$loading()
      this.dialogSku.title = data.nickname
      getPutOutStorage({
        id: data.id,
        type,
        start_time: time ? time[0] : '',
        end_time: time ? time[1] : ''
      })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            if (type) {
              this.dialogSku.outList = res.data.list
              this.dialogSku.outVis = true
            } else {
              this.dialogSku.putList = res.data.list
              this.dialogSku.putVis = true
            }
          } else {
            this.$message.error(res.message || '查看库存详情失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('查看库存详情失败')
        })
    },
    toSort({ column, prop, order }) {
      const sortMap = new Map([
        ['total', this.totalSort],
        ['put_total', this.putTotalSort],
        ['out_total', this.outTootalSort]
      ])
      console.log(sortMap, 'sortMap22')
      if (sortMap.get(prop)) {
        sortMap.get(prop)(order)
      }
    },
    outTootalSort(sort) {
      // 入存排序
      this.searchParams.sort = sort && sort === 'ascending' ? 0 : 1
      this.searchParams.sort_type = 2
      this.getCrownStock()
    },
    putTotalSort(sort) {
      // 入存排序
      this.searchParams.sort = sort && sort === 'ascending' ? 0 : 1
      this.searchParams.sort_type = 1
      console.log(this.searchParams)
      this.getCrownStock()
    },
    totalSort(sort) {
      // 总库存排序
      this.searchParams.sort = sort && sort === 'ascending' ? 0 : 1
      this.searchParams.sort_type = 0
      this.getCrownStock()
    },
    // 查看库存
    toSeeSku(data) {
      if (Number(data.total) === 0) {
        this.$message.error('该代理公司暂无库存')
        return false
      }
      this.dialogSku.title = data.nickname
      this.dialogSku.list = data.get_storage
      this.dialogSku.vis = true
    },
    // 重置库存
    resetDialogSku() {
      this.dialogSku = {
        vis: false,
        outVis: false,
        putVis: false,
        list: [],
        outList: [],
        putList: [],
        title: ''
      }
    },
    // 获取皇冠库存
    async getCrownStock() {
      const loading = this.$loading()
      const {
        search_content,
        page_index,
        page_size,
        status,
        sort,
        sort_type,
        time
      } = this.searchParams
      getCrownStock({
        search_content,
        page_index,
        page_size,
        status,
        sort,
        sort_type,
        start_time: time ? time[0] : '',
        end_time: time ? time[1] : ''
      })
        .then((res) => {
          loading.close()
          if (res.code === 200) {
            this.table = res.data.list
            this.tableTotal = res.data.total
          } else {
            this.$message.error(res.message || '获取老大库存失败')
          }
        })
        .catch(() => {
          loading.close()
          this.$message.error('获取老大库存失败')
        })
    },
    // 分页页码变化
    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;
}
.mes-title {
  display: flex;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  margin-left: 50px;
}
.title-left {
  flex: 0 0 35%;
}
.title-right {
  flex: 0 0 30;
}
</style>
