<template>
    <div class="app-container">
        <!-- 查询 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item prop="brandId">
                <el-select v-model="queryParams.orgId" placeholder="请选择门店" clearable filterable>
                    <el-option v-for="org in orgList" :key="org.id" :label="org.name" :value="org.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="goodsName">
                <el-input v-model="queryParams.washCode" placeholder="请输入衣服编码" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-upload2" @click="onOutFactoryClick()">批量出厂</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-tabs v-model="queryParams.clothType" @tab-click="handleQuery">
            <el-tab-pane label="衣服" name="1"></el-tab-pane>
            <el-tab-pane label="附件" name="2"></el-tab-pane>
        </el-tabs>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <div style="width: 100%" class="verticle-view">
                    <el-table ref="table" :data="orderClothItemVOS" fit highlight-current-row border stripe row-key="id" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" align="center" reserve-selection="true" />
                        <el-table-column label="衣服条码" align="center" prop="name" width="200">
                            <template slot-scope="scope">
                                <span>{{ scope.row.washCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服名称" align="center" prop="name" width="250">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothItemName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服品牌" align="center" prop="name" width="120">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothBrandName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服颜色" align="center" prop="name" width="150">
                            <template slot-scope="scope">
                                <template v-for="(item, index) in scope.row.orderClothColors">
                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="衣服瑕疵" align="center" prop="name">
                            <template slot-scope="scope">
                                <span>
                                    <template v-for="(item, index) in scope.row.orderClothFlaws">
                                        {{ index == 0 ? item.clothFlawName : ',' + item.clothFlawName }}
                                    </template>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="送返门店" align="center" prop="storeName">
                            <template slot-scope="scope">
                                <span>{{ scope.row.orgName }}</span>
                            </template>
                        </el-table-column>
                        <!--                        <el-table-column label="附件" align="center">-->
                        <!--                            <template slot-scope="scope">-->
                        <!--                                <span>-->
                        <!--                                    <template v-for="(item, index) in scope.row.orderClothAdjuncts">-->
                        <!--                                        {{ index == 0 ? item.adjunctName + ' * ' + item.num : ',' + item.adjunctName + ' * ' + item.num }}-->
                        <!--                                    </template>-->
                        <!--                                </span>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                        <el-table-column label="状态" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.flowStatus == '0'">待入厂</span>
                                <span v-if="scope.row.flowStatus == '1'">已入厂</span>
                                <span v-if="scope.row.flowStatus == '2'">已检查</span>
                                <span v-if="scope.row.flowStatus == '3'">已出厂</span>
                                <span v-if="scope.row.flowStatus == '100'">重洗</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { findOutFactoryPageByFlowStatus, outFactory } from '../../../api/order/clothItem'
import { allOrg } from '../../../api/system/store'
import { delType } from '@/api/coupon/type'

export default {
    name: 'InFactory',
    computed: {},
    dicts: ['sys_yes_no', 'cloth_type', 'cloth_send_type'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                clothType: '1'
            },
            orgList: [],
            orderClothItemVOS: [],
            total: 0
        }
    },
    created() {
        allOrg({ sourceType: '02' }).then((res) => {
            this.orgList = res.data
        })
        this.getList()
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.ids = []
            this.queryParams.pageNum = 1
            this.$refs.table.clearSelection()
            this.$forceUpdate()
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        showClothItemDetail() {
            this.clothItemDetailOpen = true
        },
        getList() {
            findOutFactoryPageByFlowStatus(this.queryParams).then((res) => {
                this.orderClothItemVOS = res.data.records
                this.total = res.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        onOutFactoryClick() {
            if (this.ids.length == 0) {
                this.$message.error('请先选择出厂的衣服')
                return
            }
            this.$modal
                .confirm('确定要对这些衣服进行出厂处理吗？')
                .then(() => {
                    return outFactory({ ids: this.ids, clothType: this.queryParams.clothType })
                })
                .then((res) => {
                    this.$message.success('出厂成功')
                    this.handleQuery()
                })
                .catch(() => {})
        }
    }
}
</script>

<style scoped></style>
