<template>
    <div>
        <Form :model="product" :label-width="80">
             <Row>
                <Col span="8">
                    <Form-item>
                        <span>商品基本信息</span>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="品 牌*">
                        <span>{{product.brandName}}</span>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="类目*">
                        <span>{{product.sortName}}</span>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="商品名称*">
                        <Input v-model="product.productName" placeholder="请输入..."/>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="商品卖点*">
                        <Input v-model="product.phrase" type="textarea" :rows="4" placeholder="请输入..."/>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="商品编码*">
                        <Input v-model="product.factoryCode" placeholder="请输入..."/>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="货品年*">
                        <Date-picker type="year" placeholder="选择年" style="width: 200px"></Date-picker>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                    <Form-item label="货品季*">
                        <Select v-model="product.goodsSeason" placeholder="请选择">
                            <Option value="1">春季</Option>
                            <Option value="2">夏季</Option>
                            <Option value="3">秋季</Option>
                            <Option value="4">冬季</Option>
                            <Option value="5">春夏季</Option>
                            <Option value="6">秋冬季</Option>
                        </Select>
                    </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                <Form-item label="上市日期*">
                    <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
                </Form-item>
                </Col>
            </Row>

            <Form-item label="性别*">
                <Radio-group v-model="product.gender">
                    <Radio label="1">
                        <span>男</span>
                    </Radio>
                    <Radio label="2">
                        <span>女</span>
                    </Radio>
                    <Radio label="3">
                        <span>通用</span>
                    </Radio>
                </Radio-group>
            </Form-item>

            <Form-item label="适销季*">
                <Radio-group v-model="product.seasons">
                    <Radio label="1">
                        <span>春秋</span>
                    </Radio>
                    <Radio label="2">
                        <span>夏</span>
                    </Radio>
                    <Radio label="3">
                        <span>冬</span>
                    </Radio>
                    <Radio label="4">
                        <span>四季</span>
                    </Radio>
                </Radio-group>
            </Form-item>


            <Form-item label="年龄层*">
                <Checkbox-group v-model="product.ageLevel">
                    <Checkbox label="1">
                        <span>成人</span>
                    </Checkbox>
                    <Checkbox label="2">
                        <span>大童</span>
                    </Checkbox>
                    <Checkbox label="4">
                        <span>中童</span>
                    </Checkbox>
                    <Checkbox label="3">
                        <span>小童</span>
                    </Checkbox>
                    <Checkbox label="5">
                        <span>幼童 </span>
                    </Checkbox>
                </Checkbox-group>
            </Form-item>

            <Row>
                <Col span="8">
                    <span>商品规格</span>
                </Col>
            </Row>

            <Row>
                <Form-item label="颜色*">
                    <span class='squre' v-for="color in colors" @click="clickColor(color)">
                        <span class="squre-color" :style="{ 'background-color': '#' + color.colorCode}"></span>
                        <span class="squre-name">{{color.colorName}}</span>
                    </span>
                </Form-item>
            </Row>

            <Row>
                <Form-item label="尺寸*">
                    <Checkbox-group v-model="table.selectedSizes" @on-change="clickSize">
                        <Checkbox v-for="size in sizes" :key="size" :label="size.id" >
                            <span>{{size.sizeName}}</span>
                        </Checkbox>
                    </Checkbox-group>
                </Form-item>
            </Row>

            <Row>
                <Form-item >
                    <Table :columns="table.columns" :data="table.data"></Table>
                </Form-item>
            </Row>

            <Row>
                <Col span="8">
                <Form-item>
                    <span>商品价格</span>
                </Form-item>
                </Col>
            </Row>

            <Row>
                <Col span="8">
                <Form-item label="吊牌价*">
                    <Input v-model="product.retailPrice" placeholder="请输入..."/>
                </Form-item>
                </Col>
            </Row>


            <Row>
                <Col span="8">
                <Form-item label="销售价*">
                    <Input v-model="product.salesPrice" placeholder="请输入..."/>
                </Form-item>
                </Col>
            </Row>

        </Form>

        <div>
            <Button type="primary" @click="backStep">上一步</Button>
            <Button type="primary" @click="nextStep">下一步</Button>
        </div>
    </div>
</template>

<script>

    import api from '../api';

    export default {
        props: ['step', 'product'],
        data() {
            return {
                colors: [],
                sizes: [],
                table: {
                    columns: [
                        {
                            title: '色系名称',
                            key: 'colorName'
                        },
                        {
                            title: '颜色展示名称*',
                            key: 'color'
                        },
                        {
                            title: '色卡图片*',
                            key: 'address'
                        },
                        {
                            title: '类型编码',
                            key: 'name'
                        },
                        {
                            title: '尺码*',
                            key: 'age'
                        },
                        {
                            title: '商品条码*',
                            key: 'address'
                        },
                        {
                            title: '操作',
                            key: 'address'
                        }
                    ],
                    data: [

                    ],
                    selectedSizes: [],
                    selectedColors: []
                }
            }
        },
        mounted: function() {
            console.log(this.product);
            this.getColor();
            this.getSize();
        },
        methods: {
            nextStep: function() {
                this.step.value = 2;
                this.$router.push({name:'product.create.step3'})
            },
            backStep: function() {
                this.step.value = 0;
                this.$router.push({name:'product.create.step1'})
            },
            getColor: function() {
                return api.getColor().then((result) => {
                      if (result.code === 200) {
                        this.colors = result.data;
                      }
                });
            },
            getSize: function() {
                return api.getSize(119).then((result) => {
                    if(result.code === 200) {
                        this.sizes = result.data;
                    }
                });
            },
            clickColor: function(color) {
                console.log(color)
            },
            clickSize: function(size) {
                console.log(size);
            },

        },
        watch: {
            'table.selectedSizes': function() {
                console.log(this.table.selectedSizes);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .squre {
        display: inline-block;
        height: 30px;
        margin-right: 10px;
        cursor: pointer;
    }

    .squre-color {
        display: inline-block;
        height: 30px;
        width: 30px;
        border: 1px solid gainsboro;
    }

    .squre-name {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        vertical-align: top;
    }
</style>