<template>
    <div class="mySelection">
        <el-table :data="tableData" style="width: 100%;" align="center" border row-key="id"
            :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
            :tree-props="{ children: 'childs' }">
            <!-- <el-table-column prop="productId" align="center" label="商品id" show-overflow-tooltip width="80" /> -->
            <el-table-column align="center" label="店铺名称" width="220">
                <template slot-scope="scope">{{ scope.row.shopName }}</template>
            </el-table-column>
            <el-table-column align="center" prop="shopCode" label="店铺编码" />
            <el-table-column align="center" prop="chargePersonName" label="负责人" />
            <el-table-column align="center" prop="chargePersonPhone" label="联系电话" />
            <el-table-column align="center" label="合同状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.contractState === 0">无效</span>
                    <span v-if="scope.row.contractState === 1">有效</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" />
            <el-table-column label="操作" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div class="btnList">
                        <el-button type="text" @click="seeMore(scope.row)">
                            查看商家选品
                        </el-button>
                        <!-- <el-button type="text" @click="edit(scope.row)">
                            编辑
                        </el-button>
                        <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
                            禁用
                        </el-button>
                        <el-button v-else type="text" @click="del(scope.row)">
                            启用
                        </el-button>
                        <el-button type="text" @click="delBusiness(scope.row)">
                            删除
                        </el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="fenye">
            <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <el-dialog width="70%" title="商家选品列表" :visible.sync="showDialog" center :close-on-click-modal="false"
            @close="closeDialog">
            <!-- <div class="select-box">
                <span>请选择要查看的类型：</span>
                <el-select v-model="value" placeholder="请选择" @change="selectBlur">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div> -->
            <el-table :data="dataProduct" style="width: 100%;" align="center" border row-key="id"
                :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
                :tree-props="{ children: 'childs' }" v-loading="loading">
                <el-table-column prop="productId" align="center" label="商品id" show-overflow-tooltip />
                <el-table-column label="商品主图" width="150" align="center">
                    <template slot-scope="scope">
                        <img height="80" width="80" :src="scope.row.image" alt srcset>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" align="center" label="商品名称" width="220" />
                <el-table-column prop="manufacturerBasePriceInterval" align="center" label="供货价区间" width="220" />
                <el-table-column prop="sectionOriginalPrice" align="center" label="原价区间" width="220" />
                <el-table-column prop="sectionPrice" align="center" label="售价区间" width="220" />
                <el-table-column prop="stockNumber" align="center" label="库存" show-overflow-tooltip />
                <el-table-column prop="volume" align="center" label="销量" show-overflow-tooltip />
                <el-table-column prop="volume" align="center" label="上架状态" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.shelveState == 0">未上架</span>
                        <span v-if="scope.row.shelveState == 1">已上架</span>
                        <span v-if="scope.row.shelveState == 2">待审核</span>
                        <span v-if="scope.row.shelveState == 3">审核失败</span>
                    </template>
                </el-table-column>
                <el-table-column prop="reject" align="center" label="驳回原因" show-overflow-tooltip />
                <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
            </el-table>
            <div class="dialog-footer">
                <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalDia" @size-change="handleSizeDialog"
                    @current-change="handleCurrentDialog" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getProductMerchant, getProductMerchantList } from "@/api/platformProduct"

export default {
    created() {
        this.getMyBusiness()
    },
    data() {
        return {
            tableData: [],
            searchBusiness: {
                shopName: "",
                shopCode: "",
                chargePersonName: "",
                contractState: "",
                page: 1,
                pageSize: 10,
                shopType: "2"
            },
            currentPage: 1,
            total: null,
            showDialog: false,
            options: [
                {
                    value: 0,
                    label: '自己'
                },
                {
                    value: 1,
                    label: '团长'
                },
                {
                    value: 2,
                    label: '合伙人'
                },
                {
                    value: 3,
                    label: '加盟商'
                },
                {
                    value: 4,
                    label: '代理商'
                },
            ],
            value: 0,
            //  选品商家的商品查询参数
            selectionProduct: {
                shelveState: "",
                productName: "",
                productId: "",
                shopName: "",
                page: 1,
                pageSize: 5,
                shopId: "",
                type: 0
            },
            //  选品商家的商品列表
            dataProduct: [],
            //  加载
            loading: true,
            totalDia: null
        }
    },
    methods: {
        // 获取我的选品列表
        async getMyBusiness() {
            let res = await getProductMerchant(this.searchBusiness)
            // console.log(res);
            this.tableData = res.data.list
            this.total = res.data.total
        },
        handleSizeChange(val) {
            this.searchBusiness.pageSize = val
            this.getMyBusiness()
        },
        handleCurrentChange(val) {
            this.searchBusiness.page = val
            this.getMyBusiness()
        },
        //  下拉选择
        selectBlur() {
            // console.log(this.value);
            this.selectionProduct.type = this.value
            this.getBusinessProduct()
        },
        //  发起请求获取当前商家下面的选品
        async getBusinessProduct() {
            this.loading = true
            try {
                let res = await getProductMerchantList(this.selectionProduct)
                this.dataProduct = res.data.list
                this.totalDia = res.data.total
                //  关闭 loading
                this.loading = false
            } catch (error) {
                this.loading = false
            }
        },
        seeMore(item) {
            this.selectionProduct.shopId = item.shopId
            this.showDialog = true
            this.getBusinessProduct()
        },
        //  弹框里面的分页
        handleSizeDialog(val) {
            this.selectionProduct.pageSize = val
            this.getBusinessProduct()
        },
        handleCurrentDialog(val) {
            this.selectionProduct.page = val
            this.getBusinessProduct()
        },
        //  关闭弹框 重置数据
        closeDialog() {
            this.value = 0
            this.selectionProduct = {
                shelveState: "",
                productName: "",
                productId: "",
                shopName: "",
                page: 1,
                pageSize: 5,
                shopId: "",
                type: 0
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.mySelection {
    padding: 80px 50px 0;
}

.fenye {
    margin: 50px auto;
    display: flex;
    justify-content: center;
}

.select-box {
    margin: 20px 0;

    span {
        font-size: 16px;
        margin-right: 30px;
    }
}

.dialog-footer {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>