<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" show-elevator 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: "商品",
          width: 180,
          render: (h, { row }) => {
            return h(ProductImage, {
              props: {
                src: row.product.url,
                skn: row.product.productSkn
              }
            });
          },
          className: 'top'
        },
        {
          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>

<style scoped>
.ivu-table .top td{
  vertical-align: top;
}
</style>