<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="isShow = true">添加</el-button>
        </template>
        <template #right>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        :current.sync="search.current"
        :size.sync="search.size"
        style="margin-top: 8px;"
        @getList="getList">
        <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>
        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
          <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">
        <ai-search-bar>
          <template #left>
            <el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small" @change="onMallChange">
              <el-option
                v-for="item in $store.state.mallList"
                :key="item.mallId"
                :label="item.mallName"
                :value="item.mallId">
              </el-option>
            </el-select>
          </template>
          <template #right>
          </template>
        </ai-search-bar>
        <ai-table
          height="400"
          :tableData="skuList"
          :col-configs="colConfigs"
          :total="skuTotal"
          :current.sync="skuSearch.current"
          :size.sync="skuSearch.size"
          style="margin-top: 8px;"
          @getList="getSkuList"
          :pageSizes="[10, 20, 50, 100, 500, 1000]"
          v-loading="isLoading">
          <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'
  export default {
    name: 'Template',

    data () {
      return {
        colConfigs: [
          // { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' },
          // { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' },
          { prop: 'mallName', label: '店铺名称', align: 'left' },
          { prop: 'labelCode', label: '条码编码', align: 'center' },
          // { prop: 'productSkcId', label: 'SKC', align: 'left' },
          { prop: 'productSkuId', label: 'SKU', align: 'center' },
          // { prop: 'extCode', label: 'SKC货号', align: 'left' },
          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
        ],
        tableData: [],
        total: 0,
        search: {
          current: 1,
          size: 100
        },
        skuSearch: {
          current: 1,
          size: 100,
          mallId: ''
        },
        skuTotal: 0,
        skuList: [],
        isShow: false,
        skuReqParams: {
          page: 1,
          pageSize: 100
        },
        isLoading: false
      }
    },

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

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

    created () {
      this.getList()
    },

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

      requestSKUList () {
        sendChromeAPIMessage({
          url: 'bg-visage-mms/labelcode/pageQuery',
          needMallId: true,
          mallId: this.skuSearch.mallId,
          anti: true,
          data: {
            page: this.skuSearch.size > 100 ? this.skuReqParams.page : this.skuSearch.current,
            pageSize: this.skuSearch.size > 100 ? 100 : this.skuSearch.size
          }
        }).then(async (res) => {
          if (res.errorCode == 1000000) {
            const list = res.result.pageItems.map(v => {
              return {
                mallName: this.currMall.mallName,
                productName: v.productName,
                productSkuId: v.labelCodeVO.productSkuId,
                labelCode: v.labelCodeVO.labelCode,
                skuExtCode: v.labelCodeVO.skuExtCode,
                skuSpecName: v.productSkuSpecList.map(item => {
                  return item.specName
                }).join(',')
              }
            })
            this.skuTotal = res.result.total
            this.skuList.push(...list)

            if (this.skuSearch.size > 100 && (res.result.total > this.skuList.length)) {
              this.skuReqParams.page++
              await this.$sleepSync(5000)
              this.requestSKUList()
            } else {
              this.isLoading = false
            }
          }
        })
      },

      onMallChange (e) {
        if (!e) {
          this.skuList = []

          return false
        }

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

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

        this.$userCheck(this.skuSearch.mallId).then(() => {
          this.skuList = []
          this.skuReqParams.page = 1
          this.isLoading = true

          this.requestSKUList()
        }).catch(() => {
          this.skuSearch.mallId = ''
        })
      },

      getList () {
        this.$http.post('/api/learning/pluginPage', null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      onConfirm () {

      }
    }
  }
</script>

<style scoped lang="scss">
</style>
