<style scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: visible;
  min-height: 500px;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
.title {
  text-align: center;
  color: white;
  font-size: 28px;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="title">YOHO！人工智能平台</div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>首页</BreadcrumbItem>
                    <BreadcrumbItem>标注</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                        <div>
                            <Form ref="from" inline :label-width="70">
                                <FormItem label="品类">
                                    <SelectCategory v-model="sortList"></SelectCategory>
                                </FormItem>
                                <FormItem label="skn">
                                    <Input type="text" placeholder="skn" v-model="searchItem.productSkn">
                                    </Input>
                                </FormItem>
                                <FormItem label="开始skn">
                                    <Input type="text" placeholder="skn" v-model="searchItem.startSkn">
                                    </Input>
                                </FormItem>
                                <FormItem label="结束skn">
                                    <Input type="text" placeholder="skn" v-model="searchItem.endSkn">
                                    </Input>
                                </FormItem>
                                <FormItem label="来源">
                                    <Select v-model="searchItem.source">
                                        <Option :value="0">全部</Option>
                                        <Option :value="1">有货</Option>
                                        <Option :value="2">天猫</Option>
                                    </Select>
                                </FormItem>
                                <Button type="primary" @click="onClickForSearch">搜索</Button>
                                <Button type="error" @click="onClickForClear">清除</Button>
                            </Form>
                        </div>
                        <Table :columns="columns" :data="list"></Table>
                        <Page :total="pager.rows" :current="pager.page" :page-size="pager.size" @on-change="onPageChange" style="margin-top:20px;text-align: right;"></Page>
                </Card>
            </Content>
            <Footer class="layout-footer-center">2011-2018 &copy; YOHO</Footer>
        </Layout>
        <BackTop ref="backtop"></BackTop>
    </div>
</template>
<script>
    import ApiService from 'service/api'
    import ProductImage from './components/product-image'
    import CheckImage from './components/check-image'
    import SelectCategory from './components/select-category'
    
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'skn',
                        width: 100,
                        render: (h, {row}) => {
                            return (
                                <span>{row.product.productSkn}</span>
                            )
                        }
                    },
                    {
                        title: '商品',
                        width: 180,
                        render: (h, {row}) => {
                            return h(ProductImage, {
                                props: {
                                    src: row.product.url,
                                }
                            })
                        }
                    },
                    {
                        title: '相似图',
                        key: 'imgs',
                        render: (h, {row}) => {
                            let self = this

                            return h(CheckImage, {
                                props: {
                                    list: row.imageList,
                                },
                                on: {
                                    'on-change': self.onClickForOne
                                }
                            })
                        }
                    },
                    {
                        title: '操作',
                        width: 150,
                        render: (h, {row}) => {
                            return (
                                <div>
                                    <i-button onClick={() => this.onClickForAll(row)}>全部通过</i-button>
                                </div>
                            )
                        }

                    }
                ],
                list: [],
                searchItem: {
                    productSkn: '',
                    startSkn: '',
                    endSkn: '',
                    source: 0,
                    maxSortId: 0,
                    middleSortId: 0
                },
                sortList: [],
                pager: {
                    rows : 0,
                    size : 10,
                    page: 1
                }
            }
        },
        created() {
            this.api = new ApiService()
            this.getList()
        },
        methods: {
            onPageChange(page) {
                this.pager.page = page
                this.getList()
            },
            onClickForSearch() {
                this.getList()
            },
            onClickForClear() {
                this.searchItem.productSkn = ''
                this.searchItem.startSkn = ''
                this.searchItem.endSkn = ''
                this.searchItem.source = 0
                this.sortList = []
            },
            onClickForAll(row) {
                let imageList = row.imageList.map(r => r.imageId)

                let product = {
                    imageId: imageList,
                    isMark: 1,
                    productId: row.product.productId
                }

                this.api.confirmAll(product).then((result) => {
                    row.imageList.forEach(i => {
                        i.isMark = 1
                    })

                    this.$Message.info('更新成功')
                }).catch(() => {
                    this.$Message.error('更新失败')
                })
            },
            onClickForOne() {
            },
            getList() {
                const msg = this.$Message.loading({
                    content: '查询中......',
                    duration: 0
                });

                this.api.list(Object.assign({}, this.searchItem, this.pager)).then((result) => {
                    this.list = result.boList
                    this.pager.page = result.page
                    this.pager.rows = result.rows
                    this.pager.size = result.size

                    this.$nextTick(() =>{
                        this.$refs.backtop.back()
                    })

                    msg()
                }).catch(() => {
                    msg()
                    this.$Message.error('查询失败')
                })
            },
        },
        components: {
            ProductImage,
            CheckImage,
            SelectCategory
        },
        watch: {
            sortList: {
                handler(newVal){
                    this.searchItem.maxSortId = newVal[0] && newVal[0].value || ''
                    this.searchItem.midSortId = newVal[1] && newVal[1].value || ''
                },
                deep: true
            }
        }
    }
</script>