<template>
    <el-container>
        <el-aside width="300px">
            <el-container>
                <el-main class="nopadding">
                    <div style="font-size: 20px; padding: 8px;">产品</div>
                    <el-tree node-key="id" :data="productOptions" @node-click="productClick"></el-tree>
                </el-main>
            </el-container>
        </el-aside>
        <el-main class="nopadding">
            <el-container>
                <el-aside width="200px">
                    <el-container>
                        <el-header>
                            <div style="font-size: 20px; padding: 8px;" v-if="selectedProduct">{{ selectedProduct.name }}
                            </div>
                        </el-header>
                        <el-main class="nopadding">
                            <div style="height: 90%; padding: 8px">
                                <el-steps direction="vertical" active="20">
                                    <el-step v-for="item in currentRoute" v-bind:key="item.id" :title="item.process_name" />
                                </el-steps>
                            </div>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-main class="nopadding">
                    <el-container>
                        <el-header>
                            <div class="left-panel">
                                <el-button type="primary" icon="el-icon-plus" @click="table_add"
                                    v-auth="'route.create'">新增</el-button>
                            </div>
                        </el-header>
                        <el-main class="nopadding">
                            <scTable ref="table" :data="currentRoute" row-key="id" hidePagination>
                                <el-table-column label="排序" prop="sort" min-width="80"></el-table-column>
                                <el-table-column label="工序" min-width="120">
                                    <template #default="scope">
                                        <span>{{ scope.row.process_cate }} - {{ scope.row.process_name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="自动排产" prop="is_autotask" min-width="80">
                                    <template #default="scope">
                                        <el-icon v-if="scope.row.is_autotask" color="green">
                                            <CircleCheckFilled />
                                        </el-icon>
                                    </template>
                                </el-table-column>
                                <el-table-column label="输入/输出" min-width="120">
                                    <template #default="scope">
                                        <span>{{ scope.row.material_in_name }} -> {{ scope.row.material_out_name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="出材率" prop="out_rate" min-width="80"></el-table-column>
                                <el-table-column label="统计工序" min-width="80">
                                    <template #default="scope">
                                        <el-icon v-if="scope.row.is_count_utask" color="green">
                                            <CircleCheckFilled />
                                        </el-icon>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" align="center" width="140">
                                    <template #default="scope">
                                        <el-button link size="small" @click="table_edit(scope.row)" v-auth="'route.update'"
                                            type="primary">编辑</el-button>
                                        <el-divider direction="vertical"></el-divider>
                                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                            <template #reference>
                                                <el-button link size="small" v-auth="'route.delete'"
                                                    type="danger">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">
        <el-form ref="dialogForm" :model="form" :rules="rules" label-position="right" label-width="80px">
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="form.sort" :min="1" />
            </el-form-item>
            <el-form-item label="工序" prop="process">
                <el-select v-model="form.process" placeholder="工序" clearable style="width: 100%;" :disabled="updateDisable">
                    <el-option v-for="item in processOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出材率" prop="out_rate">
                <el-input-number v-model="form.out_rate" :max="100" :precision="1" :step="0.1" />
            </el-form-item>
            <el-form-item label="统计工序">
                <el-switch v-model="form.is_count_utask" />
            </el-form-item>
            <el-form-item label="自动排产" prop="is_autotask">
                <el-switch v-model="form.is_autotask" />
            </el-form-item>
            <el-form-item label="主要输入" prop="material_in">
                <el-select v-model="form.material_in" placeholder="物料" clearable style="width: 100%;">
                    <el-option v-for="item in materialOptions" :key="item.id" :label="item.full_name" :value="item.id">
                        <span style="float: left">{{ item.full_name }}</span>
                        <span style="float: right;color: '#E6A23C';font-size: 13px;" v-if="item.is_hidden">{{
                            item.process_name }}-隐</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主要输出" prop="material_out">
                <el-select v-model="form.material_out" placeholder="物料" clearable style="width: 100%;">
                    <el-option v-for="item in materialOptions" :key="item.id" :label="item.full_name" :value="item.id">
                        <span style="float: left">{{ item.full_name }}</span>
                        <span style="float: right;color: '#E6A23C';font-size: 13px;" v-if="item.is_hidden">{{
                            item.process_name }}-隐</span></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" :loading="isSaveing" @click="form_save">保存</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
</template>
<script>
const defaultForm = {
    process: null,
    sort: 1,
    out_rate: 100,
    is_autotask: true,
    is_count_utask: false
};
export default {
    name: "route",
    components: {},
    data() {
        return {
            apiObj: null,
            query: {},
            productOptions: [],
            dialogVisible: false,
            form: {},
            rules: {
                process: [{ required: true, trigger: "blur" }],
                sort: [{ required: true, trigger: "blur" }],
                out_rate: [{ required: true, trigger: "blur" }]
            },
            processOptions: [],
            materialOptions: [],
            selectedProduct: { id: 0 },
            dialogTitle: '新增',
            updateDisable: false,
            currentRoute: [],
        }
    },
    mounted() {
        this.getProducts()
        this.getProcess()
        this.getMaterial()
    },
    methods: {
        getRoute() {
            this.$API.mtm.route.list({ material: this.selectedProduct.id, page: 0 }).then(res => {
                this.currentRoute = res
            })
        },
        //获取工序列表
        getProcess() {
            var res = this.$API.mtm.process.list.req({ page: 0 }).then(res => {
                this.processOptions = res;
            });
        },
        getMaterial() {
            this.$API.mtm.material.list.req({ page: 0, type__in: "10,20" }).then(res => {
                this.materialOptions = res
            })
        },
        getProducts() {
            this.$API.mtm.material.list.req({ page: 0, need_route: true }).then(res => {
                res.forEach(m => {
                    m.label = m.name+'|'+m.specification+'|'+m.model;
                })
                this.productOptions = res
            })
        },
        table_add() {
            if (this.selectedProduct.id === 0) {
                this.$message.error('请先选择左侧产品');
                return
            }
            this.dialogTitle = '新增'
            this.updateDisable = false;
            this.form = Object.assign({}, defaultForm);
            this.form.material = this.selectedProduct.id
            this.dialogVisible = true;
        },
        table_edit(row) {
            this.dialogTitle = '编辑'
            this.updateDisable = true;
            this.form = Object.assign({}, row);
            this.dialogVisible = true;
        },
        table_del(row) {
            this.$API.mtm.route.delete.req(row.id).then(res => {
                this.productClick()
            })
        },
        form_save() {
            if (this.dialogTitle == '新增') {
                this.$API.mtm.route.create.req(this.form).then(res => {
                    this.productClick()
                    this.dialogVisible = false
                    this.getMaterial()
                })
            } else if (this.dialogTitle == '编辑') {
                this.$API.mtm.route.update.req(this.form.id, this.form).then(res => {
                    this.productClick()
                    this.dialogVisible = false
                })
            }
        },
        productClick(data) {
            let materialId = this.selectedProduct.id
            if (data) {
                this.selectedProduct = data
                materialId = data.id
            }
            this.$API.mtm.route.list.req({ page: 0, material: materialId }).then(res => {
                this.currentRoute = res
            })
        }
    }
}
</script>