<template>
  <div class="app-container">
    <el-input
      v-model="params.search_name"
      type="text"
      placeholder="所属人昵称 / 手机号"
      style="width: 250px"
      clearable
    />
    <el-input
      v-model="params.code"
      type="text"
      placeholder="防伪码"
      style="width: 300px"
      :readonly="true"
    >
      <template slot="append">
        <el-upload
          style="display: inline-block;"
          action=""
          :show-file-list="false"
          :http-request="uploadQrocdeDecode"
          accept=".jpeg, .jpg, .png"
        >
          <span style="cursor: pointer">上传图片</span>
        </el-upload>
      </template>
    </el-input>
    <el-select v-model="params.op_phone" placeholder="请选择仓库" clearable>
      <el-option
        v-for="item in opNames"
        :key="item.phone"
        :label="item.name"
        :value="item.phone"
      />
    </el-select>
    <el-select v-model="params.good_select_id" placeholder="请选择商品类型" clearable>
      <el-option
        v-for="item in goodSelects"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-date-picker
      v-model="params.time"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd hh:mm:ss"
    />
    <el-button type="primary" @click="toSearch">搜索</el-button>
    <el-button type="primary" @click="toSearchclear">清空</el-button>
    <el-button type="primary" @click="toExport">导出</el-button>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      border
      stripe
      style="margin-top: 20px"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        :index="i => (params.page_index - 1) * params.page_size + i + 1"
        align="center"
      />
      <el-table-column
        label="发货仓库"
        align="center"
        prop="op_name"
      />
      <el-table-column
        prop="accept_name"
        label="所属人昵称"
        align="center"
      />
      <el-table-column
        prop="accept_phone"
        label="所属人手机号"
        align="center"
      />
      <el-table-column
        label="商品名称"
        align="center"
      >
        <template slot-scope="{ row: { code } }">
          {{ code.get_goods.good_name }}
        </template>
      </el-table-column>
      <el-table-column
        label="数量(小码)"
        align="center"
      >
        <template slot-scope="{ row: { code } }">
          {{ code.all_childnum }}{{ code.get_goods.good_name==='大卫博士精装版'?'套':'件' }}
        </template>
      </el-table-column>
      <el-table-column
        label="等级"
        align="center"
      >
        <template slot-scope="{ row: { code } }">
          {{ code.code_level }}
        </template>
      </el-table-column>
      <el-table-column
        label="防伪码类型"
        align="center"
      >
        <template slot-scope="{ row: { code } }">
          {{ code.model }}
        </template>
      </el-table-column>
      <el-table-column
        label="发货时间"
        align="center"
        prop="created_at"
      />
    </el-table>
    <pagination
      :total="total"
      :limit="params.page_size"
      :page="params.page_index"
      @pagination="changeTracePagination"
      @update:limit="changeTracePagination"
    />
  </div>
</template>
<script>
import Qrcode from 'qrcode-decoder'
import { sendList, ExportSendGoodLog } from '@/api/rtp/send_log'
// import { formatter } from '@/filters/index'
export default {
  data() {
    return {
      opNames: [
        { phone: '15220141101', name: '公司仓库' },
        { phone: '17333738670', name: '吴桥体验店' },
        { phone: '13581056035', name: '临沭体验店' }
      ],
      goodSelects: [
        { id: 1, name: '精装版' },
        { id: 2, name: '简约版' },
        { id: 3, name: '老人版' },
        { id: 4, name: '纯棉版' }
      ],
      params: {
        page_index: 1,
        page_size: 20,
        search_name: '',
        op_phone: '',
        code: '',
        start_time: '',
        end_time: '',
        good_select_id: '',
        time: ''
      },
      list: [],
      total: 0
    }
  },
  mounted() {
    this.getSendList()
  },
  methods: {
    toSearch() {
      this.params.page_index = 1
      this.getSendList()
    },
    // 导出
    async toExport() {
      this.loadingFull = true
      const params = {
        search_name: this.params.search_name,
        op_phone: this.params.op_phone,
        code: this.params.code,
        start_time: this.params.start_time,
        end_time: this.params.end_time,
        good_select_id: this.params.good_select_id,
        time: this.params.time
      }
      if (params.search_name || params.op_phone || params.code || params.start_time || params.end_time || params.good_select_id || params.time) {
        this.$request(ExportSendGoodLog(params), (res) => {
          const exportData = res
          console.log(exportData)
          import('@/vendor/Export2Excel').then(excel => {
            const header = ['序号', '发货仓库', '所属人昵称', '所属人手机号', '商品名称', '数量(小码)', '等级', '防伪码类型', '发货时间']
            const exportK = ['index', 'op_name', 'accept_name', 'accept_phone', 'good_name', 'all_childnum', 'code_level', 'model', 'created_at']
            const exportV = exportData.map((item, i) => {
              if (item.code.get_goods.good_name === '大卫博士精装版') {
                item.code.all_childnum = item.code.all_childnum + '套'
              } else {
                item.code.all_childnum = item.code.all_childnum + '件'
              }
              const obj = {
                index: i + 1,
                op_name: item.op_name || '',
                accept_name: item.accept_name || '',
                accept_phone: item.accept_phone || '',
                good_name: item.code.get_goods.good_name || '',
                all_childnum: item.code.all_childnum,
                code_level: item.code.code_level,
                model: item.code.model,
                created_at: item.created_at
              }
              return obj
            })
            const exportD = exportV.map(item => exportK.map(k => item[k]))
            excel.export_json_to_excel({
              header,
              data: exportD,
              filename: '发货日志',
              autoWidth: true,
              bookType: 'xlsx'
            })
          })
          this.loadingFull = false
        })
      } else {
        this.$message.error('请选择筛选条件再进行导出')
        return
      }
    },
    toSearchclear() {
      this.params = {
        page_index: 1,
        page_size: 20,
        search_name: '',
        op_phone: '',
        code: '',
        start_time: '',
        end_time: '',
        good_select_id: '',
        time: ''
      }
      this.getSendList()
    },
    changeTracePagination({ page, limit }) {
      this.params.page_index = page
      this.params.page_size = limit
      this.getSendList()
    },
    getSendList() {
      const { time } = this.params
      const _p = Object.assign({}, this.params)
      Reflect.deleteProperty(_p, 'time')
      _p.start_time = time ? time[0] : ''
      _p.end_time = time ? time[1] : ''
      const loading = this.$loading()
      sendList(_p).then(res => {
        loading.close()
        if (res.code === 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message || '获取发货日志失败')
        }
      }).catch(e => {
        loading.close()
        this.$message.error('获取发货日志失败')
      })
    },
    uploadQrocdeDecode({ file }) {
      const url = window.URL.createObjectURL(file)
      const qrcode = new Qrcode()
      qrcode.decodeFromImage(url).then(({ data }) => {
        if (data) {
          const _a = data.split('/')
          const _c = _a[_a.length - 1]
          this.params.code = _c
        } else {
          this.$message.error('该图片未解析出任何内容')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
