<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="18" :xs="24">
                <div style="width: 100%" class="verticle-view">
                    <el-table :data="orderClothItemVOS" fit highlight-current-row border stripe @cell-click="onOrderClothItemSelect">
                        <el-table-column label="序号" type="index" align="center" fixed="left" width="80"></el-table-column>
                        <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="150">
                            <template slot-scope="scope">
                                <span>{{ scope.row.clothItemName }}</span>
                                <span style="color: red" v-if="scope.row.refundId !=null">
                                    [已撤销]
                                </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" class-name="small-padding fixed-width" fixed="right" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" @click="rollbackOrderClothItem(scope.$index, scope.row.washCode)">删除 </el-button>
                              <el-button type="text" @click="cancelOrderClothItem(scope.$index, scope.row.washCode)">撤单 </el-button>
<!--                                <el-button type="text" @click="selectClothWashProblems(scope.$index)" :v-if="isAdjunct == 'N'">问题</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>衣服信息</span>
                    </div>

                    <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" label-width="40px">
                        <el-form-item label="条码" prop="washCode">
                            <el-input v-model="queryParams.washCode" placeholder="请输入条码" clearable @keyup.enter.native="searchCloth" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="searchCloth">查询</el-button>
                            <el-button type="success" icon="el-icon-s-operation" @click="showBatchEntryDialog">批量入厂</el-button>
                        </el-form-item>
                    </el-form>

                    <el-descriptions title="衣物信息" :column="1">
                        <el-descriptions-item label="衣物条码">{{ orderClothItemVO ? orderClothItemVO.washCode : '' }} </el-descriptions-item>
                        <el-descriptions-item label="衣物名称">{{ orderClothItemVO ? orderClothItemVO.clothItemName : '' }} </el-descriptions-item>
                        <el-descriptions-item label="是否重洗">
                            <template v-if="orderClothItemVO">
                                <span v-if="orderClothItemVO && orderClothItemVO.repeatCount > 0" style="color: red"> 重洗 {{ orderClothItemVO.repeatCount }} 次 </span>
                                <span v-else> 否 </span>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="颜色">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothColors">
                                    {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="瑕疵">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothFlaws">
                                    {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="特殊处理">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothCrafts">
                                    {{ index == 0 ? color.clothCraftName : ',' + color.clothCraftName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="附件" v-if="orderClothItemVO && orderClothItemVO.isAdjunct == 'N'">
                            <template v-if="orderClothItemVO">
                                <template v-for="(color, index) in orderClothItemVO.orderClothAdjuncts">
                                    {{ index == 0 ? color.adjunctName : ',' + color.adjunctName }}
                                </template>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="收衣门店">{{ orderClothItemVO ? orderClothItemVO.orgName : '' }} </el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <template v-if="orderClothItemVO">
                                <span style="color: red">
                                    <template v-if="orderClothItemVO.refundId !=null"> 已撤销 </template>
                                    <template v-if="orderClothItemVO.refundId ==null && orderClothItemVO.flowStatus == 0"> 待入场 </template>
                                    <template v-if="orderClothItemVO.refundId ==null && orderClothItemVO.flowStatus == 1"> 已入厂 </template>
                                    <template v-if="orderClothItemVO.refundId ==null && orderClothItemVO.flowStatus == 2"> 已检查 </template>
                                    <template v-if="orderClothItemVO.refundId ==null && orderClothItemVO.flowStatus == 3"> 已出厂 </template>
                                </span>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-button type="primary" icon="el-icon-s-order" @click="showClothItemDetail">详情</el-button>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="入厂信息" :visible.sync="clothItemDetailOpen" width="50%" :before-close="handleClose" center append-to-body>
            <el-descriptions :column="3">
                <el-descriptions-item label="衣物条码" :span="3">{{ orderClothItemVO ? orderClothItemVO.washCode : '' }} </el-descriptions-item>
                <el-descriptions-item label="衣物名称" :span="3">{{ orderClothItemVO ? orderClothItemVO.clothItemName : '' }} </el-descriptions-item>
                <el-descriptions-item label="天数">{{ orderClothItemVO ? orderClothItemVO.clothWashDayNum : '' }}天 </el-descriptions-item>
                <el-descriptions-item label="总额">{{ orderClothItemVO ? orderClothItemVO.totalPrice : '' }}元 </el-descriptions-item>
                <el-descriptions-item label="洗衣方式">{{ orderClothItemVO ? orderClothItemVO.clothWashModeName : '' }} </el-descriptions-item>
                <el-descriptions-item label="特殊处理">{{ orderClothItemVO ? orderClothItemVO.clothSpeedName : '' }} </el-descriptions-item>
                <el-descriptions-item label="是否保值">
                    {{ orderClothItemVO ? (orderClothItemVO.isHedging == 'Y' ? '是' : '否') : '' }}
                </el-descriptions-item>
                <el-descriptions-item label="保值金额">{{ orderClothItemVO ? orderClothItemVO.hedgingPrice : '' }}元 </el-descriptions-item>
                <el-descriptions-item label="颜色">
                    <template v-if="orderClothItemVO">
                        <template v-for="(color, index) in orderClothItemVO.orderClothColors">
                            {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
                        </template>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="瑕疵">
                    <template v-if="orderClothItemVO">
                        <template v-for="(color, index) in orderClothItemVO.orderClothFlaws">
                            {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
                        </template>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="特殊工艺">
                    <template v-if="orderClothItemVO">
                        <template v-for="(color, index) in orderClothItemVO.orderClothCrafts">
                            {{ index == 0 ? color.clothCraftName : ',' + color.clothCraftName }}
                        </template>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item label="附件" v-if="orderClothItemVO && orderClothItemVO.isAdjunct == 'N'">
                    <template v-if="orderClothItemVO">
                        <template v-for="(color, index) in orderClothItemVO.orderClothAdjuncts">
                            {{ index == 0 ? color.adjunctName : ',' + color.adjunctName }}
                        </template>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="衣服问题" :visible.sync="selectClothWashProblemOpen" width="50%" :before-close="handleClose" center append-to-body>
            <el-row :gutter="15">
                <el-form size="small" label-width="120px">
                    <el-col :span="24">
                        <el-form-item label="检查的问题" prop="washCode">
                            <el-input v-model="clothProblemContent" placeholder="请输入检查的问题" type="textarea" :rows="5" maxlength="500" show-word-limit :style="{ width: '100%' }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-table :data="washProblems" style="width: 100%" max-height="400" highlight-current-row @cell-dblclick="addSelectWashProblem">
                            <el-table-column label="问题" align="center" prop="content" />
                        </el-table>
                    </el-col>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectClothWashProblemOpen = false">取 消</el-button>
                <el-button type="primary" @click="saveWashProblem">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="一键入厂" :visible.sync="batchEntryDialogVisible" width="80%" :before-close="handleClose" center append-to-body>
            <el-form :model="batchQueryParams" ref="batchQueryForm" @submit.native.prevent :inline="true" label-width="68px">
              <el-form-item prop="clothType">
                <el-select v-model="batchQueryParams.clothType" style="width: 200px" placeholder="请选择类型" clearable>
                  <el-option   label="全部" value="" />
                  <el-option   label="衣服" value="1" />
                  <el-option   label="附件" value="2" />
                </el-select>
              </el-form-item>
                <el-form-item prop="dateRange">
                    <el-date-picker v-model="batchDateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item prop="orgId">
                    <el-select v-model="batchQueryParams.orgId" style="width: 200px" placeholder="请选择门店" clearable>
                        <el-option v-for="item in storelist" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleBatchQuery">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="batchEntryList" @selection-change="handleSelectionChange" border stripe>
                <el-table-column label="衣物条码" align="center" prop="washCode" />
                <el-table-column label="所属门店" align="center" prop="orgName">
                    <template slot-scope="scope">
                        {{ scope.row.storeName ? scope.row.storeName : '--' }}
                    </template>
                </el-table-column>
              <el-table-column label="衣物类型" align="center" prop="clothType">
                <template slot-scope="scope">
                  <span v-if="scope.row.clothType == 1" style="color: darkgoldenrod"> 衣服 </span>
                  <span v-else  style="color: darkgoldenrod"> 附件 </span>
                </template>
              </el-table-column>
                <el-table-column label="衣物名称" align="center" prop="clothItemName" />

<!--                <el-table-column label="颜色" align="center" prop="clothColorName">-->
<!--                    <template slot-scope="scope">-->
<!--                        {{ getColor(scope.row.orderClothColors) }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column label="状态" align="center" prop="flowStatus">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.refundId !=null">已撤销</el-tag>
                        <dict-tag v-else :options="dict.type.order_cloth_flow_status" :value="scope.row.flowStatus" />
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                @size-change="handleBatchSizeChange"
                @current-change="handleBatchCurrentChange"
                :current-page="batchQueryParams.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="batchQueryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="batchTotal"
                style="margin-top: 20px; text-align: right"
            >
            </el-pagination>

            <span slot="footer" class="dialog-footer">
                <el-button @click="batchEntryDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleBatchEntry" :disabled="batchTotal==0">一键入厂</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  inFactory,
  deleteInFactory,
  cancelOrderInFactory,
  setClothProblem,
  oneInFactory
} from '../../../api/order/clothItem'
import { allWashProblem } from '@/api/cloth/washProblem'
import { listfindAllFactoryClothPage, listfindFactoryClothPage } from '@/api/system/inquiry'
import { allOrg } from '@/api/system/store'
import order from '@/views/recharge/order/index.vue'

export default {
    name: 'InFactory',
    computed: {},
    dicts: ['sys_yes_no', 'cloth_type', 'cloth_send_type', 'order_cloth_flow_status'],
    data() {
        return {
            // 查询参数
            queryParams: {},
            orderClothItemVO: null,
            orderClothItemVOS: [],
            clothItemDetailOpen: false,
            washProblems: [],
            selectClothWashProblemOpen: false,
            selectClothItemIndex: null,
            clothProblemContent: '',
            // 批量入厂相关
            batchEntryDialogVisible: false,
            batchQueryParams: {
                pageNum: 1,
                pageSize: 10,
                washCode: undefined,
                orgId: undefined,
                clothType: '',
                beginInFactoryTime: undefined,
                endInFactoryTime: undefined,
                flowStatus: 0
            },
            batchDateRange: this.getYesterdayDateRange(),
            batchEntryList: [],
            batchTotal: 0,
            selectedRows: [],
            storelist: []
        }
    },
    created() {
        allWashProblem().then((res) => {
            this.washProblems = res.data
        })
        this.getStoreList()
    },
    methods: {
        getYesterdayDateRange() {
            const yesterday = new Date()
            yesterday.setDate(yesterday.getDate() - 1)
            const formattedDate = yesterday.toISOString().split('T')[0]
            return [formattedDate, formattedDate]
        },
        searchCloth() {
            if (this.isEmpty(this.queryParams.washCode)) {
                this.$message.error('请先输入衣服条码')
                return
            }
            inFactory(this.queryParams).then((res) => {
                this.orderClothItemVO = res.data
                //如果衣服条码重复，则替换后，在新增一份
                if (this.orderClothItemVOS.some(item => item.washCode === this.orderClothItemVO.washCode)) {
                    this.orderClothItemVOS = this.orderClothItemVOS.filter(item => item.washCode !== this.orderClothItemVO.washCode)
                }
                this.orderClothItemVOS.push(res.data)
            })
        },
        showClothItemDetail() {
            this.clothItemDetailOpen = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done()
                })
                .catch((_) => {})
        },
        rollbackOrderClothItem(index, washCode) {
            this.$confirm('确定要删除这条入厂记录吗？')
                .then((_) => {
                    deleteInFactory({ washCode: washCode }).then((res) => {
                        this.orderClothItemVOS.splice(index, 1)
                    })
                })
                .catch((_) => {})
        },
      cancelOrderClothItem(index, washCode) {
        this.$confirm('确定要撤销这件衣服吗，撤单后将无法入厂清洗？')
          .then((_) => {
            cancelOrderInFactory({ washCode: washCode }).then((res) => {
              this.orderClothItemVOS.splice(index, 1)
            })
          })
          .catch((_) => {})
      },
        selectClothWashProblems(index) {
            this.selectClothItemIndex = index
            this.clothProblemContent = this.orderClothItemVOS[index].clothProblem
            this.selectClothWashProblemOpen = true
        },
        addSelectWashProblem(row, column, cell, event) {
            if (this.clothProblemContent == null) {
                this.clothProblemContent = ''
            }
            if (!this.isEmpty(this.clothProblemContent)) {
                this.clothProblemContent += '，'
            }
            this.clothProblemContent += row.content
        },
        saveWashProblem() {
            setClothProblem({
                id: this.orderClothItemVOS[this.selectClothItemIndex].id,
                clothProblem: this.clothProblemContent
            }).then((res) => {
                this.orderClothItemVOS[this.selectClothItemIndex].clothProblem = this.clothProblemContent
                this.selectClothWashProblemOpen = false
                this.$message.success('设置成功')
            })
        },
        onOrderClothItemSelect(row) {
            this.orderClothItemVO = row
            this.queryParams.washCode = this.orderClothItemVO.washCode
        },
        // 批量入厂相关方法
        showBatchEntryDialog() {
            this.batchEntryDialogVisible = true
            this.getBatchEntryList()
        },
        getBatchEntryList() {
            if (this.batchDateRange && this.batchDateRange.length === 2) {
                this.batchQueryParams.beginInFactoryTime = this.batchDateRange[0]
                this.batchQueryParams.endInFactoryTime = this.batchDateRange[1]
            } else {
                this.batchQueryParams.beginInFactoryTime = undefined
                this.batchQueryParams.endInFactoryTime = undefined
            }
            if (this.batchQueryParams.orgId) {
                const obj = this.storelist.find((item) => item.id === this.batchQueryParams.orgId)
                this.batchQueryParams.sourceType = obj.sourceType
            }
            console.log("this.batchQueryParams",this.batchQueryParams)
            listfindAllFactoryClothPage(this.batchQueryParams).then(response => {
                this.batchEntryList = response.rows
                this.batchTotal = response.total
            })
        },
        handleBatchQuery() {
            this.batchQueryParams.pageNum = 1
            this.getBatchEntryList()
        },
        resetBatchQuery() {
            this.resetForm('batchQueryForm')
            this.batchDateRange = []
            this.handleBatchQuery()
        },
        handleBatchSizeChange(val) {
            this.batchQueryParams.pageSize = val
            this.getBatchEntryList()
        },
        handleBatchCurrentChange(val) {
            this.batchQueryParams.pageNum = val
            this.getBatchEntryList()
        },
        handleSelectionChange(selection) {
            this.selectedRows = selection
        },
        handleBatchEntry() {
            this.$confirm('确认要将所有查询的衣物批量入厂吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              oneInFactory(this.batchQueryParams).then(response => {
                this.$message.success('批量入厂成功')
                this.getList()
              })
            }).catch(() => {})
        },
        getStoreList() {
            allOrg({
                sourceType: '02'
            }).then((response) => {
                this.storelist = response.data
            })
        }
    }
}
</script>

<style scoped></style>
