<template>
  <ai-list class="Template">
    <ai-title
      slot="title"
      title="管理SKU"
      isShowBack
      isShowBottomBorder
      @onBackClick="$router.go(-1)">
    </ai-title>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <el-button type="primary" size="small" @click="chooseSkuList = [], isShow = true">添加</el-button>
          <el-upload
            action
            :limit="1"
            :show-file-list="false"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="onExcelChange">
            <el-button size="small" type="danger">Excel导入</el-button>
          </el-upload>
          <json-excel
            :data="skuList"
            :fields="jsonFields"
            name="SKU列表.xls"
            worksheet="SKU列表">
            <el-button size="small" type="warning" :disabled="!skuList.length">Excel导出</el-button>
          </json-excel>
        </template>
        <template #right>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="skuList"
        :col-configs="colConfigs"
        :total="total"
        :current.sync="search.current"
        :size.sync="search.size"
        style="margin-top: 8px;"
        @getList="getList"
        @selection-change="handleSelectionChange"
        v-loading="pageShow">
        <el-table-column
          v-for="(item, index) in relationList"
          :key="index"
          :prop="item.field"
          :show-overflow-tooltip="true"
          :label="item.name"
          align="center">
        </el-table-column>
        <!-- <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
          <template v-slot="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
              <el-button type="text" @click="toDetail(row.url)">删除</el-button>
            </div>
          </template>
        </el-table-column> -->
      </ai-table>
      <ai-dialog
        :visible.sync="isShow"
        title="添加SKU"
        width="1400px"
        @confirm="onConfirm">
        <div class="search-item__wrapper">
          <div class="left">
            <div class="search-item">
              <label>添加方式：</label>
              <el-radio-group v-model="addType" size="small" @change="onSearchRest">
                <el-radio-button label="1">按类目添加</el-radio-button>
                <el-radio-button label="2">按SKC添加</el-radio-button>
                <el-radio-button label="3">按SKU添加</el-radio-button>
              </el-radio-group>
            </div>
            <div class="search-item">
              <label>店铺：</label>
              <el-select v-model="lableSearch.mallId" placeholder="请选择店铺" size="small">
                <el-option
                  v-for="item in $store.state.mallList"
                  :key="item.mallId"
                  :label="item.mallName"
                  :value="item.mallId">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right"></div>
        </div>
        <div class="search-item__wrapper">
          <div class="left">
            <div class="search-item" v-show="addType === '1'">
              <label>商品分类：</label>
              <el-cascader
                style="width: 280px;"
                v-model="targetCatId"
                :props="props"
                size="small"
                filterable
                :show-all-levels="false"
                collapse-tags
                clearable>
              </el-cascader>
              <el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
            </div>
          <div class="search-item" v-show="addType === '2'">
            <label>SKC：</label>
            <el-input
              v-model="skuReqParams.SKC"
              style="width: 250px"
              size="small"
              placeholder="多个查询请用户逗号分割"
              clearable
              @clear="getSkuList()"
              suffix-icon="iconfont iconSearch">
            </el-input>
            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
          </div>
          <div class="search-item" v-show="addType === '3'">
            <label>SKU：</label>
            <el-input
              v-if="addType === '3'"
              v-model="skuReqParams.SKU"
              style="width: 250px"
              size="small"
              placeholder="多个查询请用户逗号分割"
              clearable
              @clear="getSkuList()"
              suffix-icon="iconfont iconSearch">
            </el-input>
            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
          </div>
          </div>
        </div>
        <ai-table
          height="370"
          :tableData="lableList"
          :col-configs="colConfigs"
          :total="lableTotal"
          :current.sync="lableSearch.current"
          :size.sync="lableSearch.size"
          style="margin-top: 8px;"
          :pageSizes="[10, 20, 50, 100, 500, 1000]"
          v-loading="isLoading"
          :isShowPagination="false"
          @getList="() => {}"
          @selection-change="handleSelectionChange">
          <el-table-column slot="productName" width="300px" :show-overflow-tooltip="true" label="商品名称"  fixed="left">
            <template slot-scope="scope">
              <div>
                <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
                {{ scope.row.productName }}
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
  import { sendChromeAPIMessage } from '@/api/chromeApi'
  import * as XLSX from 'xlsx'
  import JsonExcel from 'vue-json-excel'
  export default {
    name: 'SkuManage',

    components: {
      JsonExcel
    },

    data () {
      return {
        total: 0,
        search: {
          current: 1,
          size: 100
        },
        lableSearch: {
          current: 1,
          size: 100,
          mallId: ''
        },
        lableTotal: 0,
        lableList: [],
        isShow: false,
        skuReqParams: {
          page: 1,
          pageSize: 100,
          SKC: '',
          SKU: ''
        },
        isLoading: false,
        addType: '1',
        props: {
          value: 'catId',
          label: 'catName',
          multiple: true,
          checkStrictly: true,
          lazy: true,
          lazyLoad (value, resolve) {
            sendChromeAPIMessage({
              url: 'bg-anniston-mms/category/children/list',
              needMallId: true,
              data: {
                parentCatId: value.level === 0 ? '' : value.value
              }
            }).then(res => {
              if (res.errorCode === 1000000) {
                resolve(res.result.categoryNodeVOS.map(v => {
                  return {
                    ...v,
                    leaf: v.isLeaf
                  }
                }))
              }
            })
          }
        },
        targetCatId: [],
        skuList: [],
        chooseSkuList: [],
        id: '',
        fileList: [],
        pageShow: false,
        relationList: []
      }
    },

    computed: {
      currMall () {
        if (!this.$store.state.mallList.length) {
          return {}
        }

        return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0]
      },

      colConfigs () {
        const arr = this.isShow ? [] : this.relationList.map(v => {
          return {
            prop: v.field,
            label: v.name,
            align: 'center'
          }
        })

        return [
          { type: 'selection' },
          { prop: 'mallName', label: '店铺名称', align: 'left' },
          { prop: 'productName', label: '商品名称', align: 'center' },
          { prop: 'labelCode', label: '条码编码', align: 'center' },
          { prop: 'productSkcId', label: 'SKC', align: 'center' },
          { prop: 'productSkuId', label: 'SKU', align: 'center' },
          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
          { prop: 'skuSpecName', label: '次销售属性', align: 'center' },
          ...arr
        ]
      },

      jsonFields () {
        const obj = {}
        this.colConfigs.filter(v => !!v.prop).forEach(v => {
          obj[v.label] = v.prop
        })

        return {
          ...obj
        }
      }
    },

    created () {
      this.id = this.$route.query.id || ''
      this.getRelation()
      this.getList()
    },

    methods: {
      toAdd () {
        this.$router.push('/addLabelsTemplate')
      },

      getRelation () {
        this.$http.post(`/api/templateRelation/getRelation?templateId=${this.$route.query.id}`).then(res => {
          if (res.code === 0) {
            this.relationList = res.data

            console.log(this.relationList)
          }
        })
      },

      readXLSX(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()

          reader.readAsBinaryString(file)
          reader.onload = evt => {
            const data = evt.target.result
            const workbook = XLSX.read(data, { type: 'binary' })
            const ws = workbook.Sheets[workbook.SheetNames[0]]
            const jsonData = XLSX.utils.sheet_to_json(ws)
            resolve(jsonData)

            this.fileList = []
          }
        })
      },

      onExcelChange (file) {
        this.pageShow = true
        this.readXLSX(file.raw).then(res => {
          console.log(res)
          this.$http.post(`/api/templateSku/updateBatchSku`, res.map(v => {
            const result = {
              templateId: this.id
            }
            Object.keys(this.jsonFields).forEach(item => {
              result[this.jsonFields[item]] = v[item]
            })

            console.log(result)
            return result
          })).then(res => {
            if (res.code === 0) {
              this.$message.success('导入成功')
              this.isShow = false
              this.getList()
            }
            this.pageShow = false
          })
        })
      },

      onSearchRest() {
        this.skuReqParams.SKC = ''
        this.skuReqParams.SKU = ''
      },

      handleSelectionChange(e) {
        console.log(e)
        this.chooseSkuList = e
      },

      getSKCList(catIds, page) {
        return new Promise(resolve => {
          sendChromeAPIMessage({
            url: 'bg-visage-mms/product/skc/pageQuery',
            needMallId: true,
            mallId: this.lableSearch.mallId,
            anti: true,
            data: {
              page: 1,
              pageSize: 200,
              catIds: catIds
            }
          }).then(res => {
            if (res.errorCode == 1000000) {
              resolve({
                list: res.result.pageItems.map(v => v.productSkcId),
                isHasNext: page * 200 < res.result.total
              })
            } else {
              resolve({ list: [], isHasNext: false })
            }
          }).catch(() => {
            resolve({ list: [], isHasNext: false })
          })
        })
      },

      async onCateChange() {
        this.$userCheck(this.lableSearch.mallId).then(async () => {
          let page = 1
          let list = []
          let isHasNext = true
          this.lableList = []
          this.isLoading = true
          while (isHasNext) {
            const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
            page = page + 1
            isHasNext = result.isHasNext ? true : false
            list.push(...result.list)

            await this.$sleepSync(5000)
          }

          const skcList = [...new Set(list)]
          const len = Math.ceil(skcList.length / 100)
          for (let i = 0; i < len; i++) {
            this.skuReqParams.page = 1
            this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
            await this.requestSKUList(true)
            await this.$sleepSync(2000)
          }

          console.log(111)
          this.isLoading = false
        }).catch(() => {
          this.lableSearch.mallId = ''
        })
      },

      requestSKUList(flag) {
        return sendChromeAPIMessage({
          url: 'bg-visage-mms/labelcode/pageQuery',
          needMallId: true,
          mallId: this.lableSearch.mallId,
          anti: true,
          data: {
            page: this.skuReqParams.page,
            pageSize: 200,
            productSkcIdList: (['2', '1'].includes(this.addType)) ? this.skuReqParams.SKC.split(',') : [],
            productSkuIdList: this.addType === '3' ? this.skuReqParams.SKU.split(',') : []
          }
        }).then(async (res) => {
          if (res.errorCode == 1000000) {
            const list = res.result.pageItems.map(v => {
              return {
                mallId: this.lableSearch.mallId,
                mallName: this.currMall.mallName,
                productName: v.productName,
                productSkcId: v.labelCodeVO.productSkcId,
                productSkuId: v.labelCodeVO.productSkuId,
                labelCode: v.labelCodeVO.labelCode,
                skuExtCode: v.labelCodeVO.skuExtCode,
                skuSpecName: v.productSkuSpecList.map(item => {
                  return item.specName
                }).join(',')
              }
            })
            this.lableTotal = res.result.total
            this.lableList.push(...list)

            if (res.result.total > this.lableList.length) {
              this.skuReqParams.page++
              await this.$sleepSync(5000)
              await this.requestSKUList()
            } else {
              !flag && (this.isLoading = false)
            }
          }
        })
      },

      getSkuList () {
        if (!this.lableSearch.mallId) {
          return this.$message.error('请选择店铺')
        }

        this.$userCheck(this.lableSearch.mallId).then(() => {
          this.lableList = []
          this.skuReqParams.page = 1
          this.isLoading = true
          this.requestSKUList()
        }).catch(() => {
          this.lableSearch.mallId = ''
        })
      },

      getList () {
        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
          if (res.code === 0) {
            this.skuList = res.data.records
            // this.total = res.data.total
          }
        })
      },

      onConfirm () {
        if (!this.chooseSkuList.length) {
          return this.$message.error('请选择SKU')
        }

        this.$http.post(`/api/templateSku/addBatchSku`, this.chooseSkuList.map(v => {
          return {
            ...v,
            templateId: this.id
          }
        })).then(res => {
          if (res.code === 0) {
            this.$message.success('添加成功')
            this.isShow = false
            this.getList()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .Template {
    .search-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &>div {
        display: flex;
        align-items: center;
      }
    }
  }
</style>
