<template>
    <div class="demo-wrap min-flex-right">
        <div class="flex-between">
            <h2>{{ pageTitle }}</h2>
            <el-button type="primary" @click="openDialog">新增</el-button>

            <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
                        :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
                        @close="handleClose"
                        @dialogVisibleChange="dialogVisibleChange">
                <el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
                    <el-form-item label="检测类型" prop="type">
                        <GuipSelect v-model="form.type" :options="type2nameOptions"
                                    :defaultValue="type2name[form.type]"/>
                    </el-form-item>
                    <el-form-item label="采购单价" prop="type" label-width="73px">
                        <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
                            <GuipInput v-model="form.unit_price" style="flex: 1;" :default-value="form.unit_price"/>
                            <span>元 /</span>
                            <GuipInput v-model="form.unit_num" style="flex: 1;" :default-value="form.unit_num"/>
                            <span>字（篇/页）</span>
                        </div>
                    </el-form-item>

                    <template v-if="type != 'purchase'">
                        <el-form-item label="阶段成本" prop="type" label-width="73px">
                            <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
                                <GuipInput v-model="form.cost" style="flex: 1;" :default-value="form.cost"/>
                                <span>元</span>
                            </div>
                        </el-form-item>
                        <el-form-item label="起止日期" prop="date" label-width="73px">
                            <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                                            style="width: 100%;" :default-value="form.date">
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-form>
            </GuipDialog>
        </div>
        <div class=" flex-common" v-if="type2nameOptions.length > 0">
            <el-form>
                <el-table :data="tableData" style="width: 100%">
                    <template v-if="type == 'purchase'">
                        <el-table-column prop="type">
                            <template slot="header">
                                <GuipSelect class="custom-select" v-model="chktype" :options="type2nameOptions"
                                            defaultValue="检测类型" @change="changeSelectType"/>
                            </template>

                            <template slot-scope="scope">
                                {{ type2name[scope.row.type] }}
                            </template>
                        </el-table-column>

                        <el-table-column label="采购单价">
                            <template slot-scope="scope">
                                {{ scope.row.unit_price }} 元 / {{
                                    scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <a @click="editPurchase(scope.row)" style="color: #006aff;cursor: pointer;">编辑</a>
                            </template>
                        </el-table-column>
                    </template>

                    <template v-else>
                        <el-table-column prop="type">
                            <template slot="header">
                                <GuipSelect class="custom-select" v-model="chktype" :options="type2nameOptions"
                                            defaultValue="检测类型" @change="changeSelectType"/>
                            </template>

                            <template slot-scope="scope">
                                {{ type2name[scope.row.type] }}
                            </template>
                        </el-table-column>

                        <el-table-column label="采购价">
                            <template slot-scope="scope">
                                <template v-if="scope.row.unit_price>0">
                                    单价：{{ scope.row.unit_price }} 元 / {{
                                        scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }}
                                </template>
                                <template v-else>
                                    成本：{{ scope.row.cost }} 元
                                </template>
                            </template>
                        </el-table-column>

                        <el-table-column label="起止日期">
                            <template slot-scope="scope">
                                {{ scope.row.start_date.substring(0, 10) }} - {{ scope.row.end_date.substring(0, 10) }}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <a @click="editStagePurchase(scope.row)"
                                   style="color: #006aff;cursor: pointer;">编辑</a>
                                <a v-if="scope.row.is_sync == 0" @click="syncStagePurchase(scope.row)"
                                   style="color: #006aff;margin-left: 20px;cursor: pointer;">同步</a>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>

                <el-pagination background
                               @size-change='handleSizeChange'
                               @current-change='handleCurrentChange'
                               :current-page="currentPage"
                               :page-size=pageSize
                               layout="prev, pager, next,jumper"
                               :total="total">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>

import GuipDialog from "@/components/GuipDialog.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";

export default {
    name: 'purchase',
    props: {
        pageTitle: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        },
        showDateSelect: {
            type: Boolean,
            default: true
        }
    },
    components: {
        GuipInput,
        GuipSelect,
        GuipDialog
    },
    data() {
        return {
            id: 0,
            chktype: 0,
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            tableData: [],
            type2name: [],
            dialogTitle: '新增',//弹框标题
            dialogVisible: false,//是否展示弹框
            showCancelButton: true, // 控制是否显示取消按钮
            showCloseButton: true, // 控制是否显示关闭按钮
            form: {
                id: '',
                type: '',
                unit_price: '',
                unit_num: '',
                cost: '',
                date: '',
                sdate: '',
                edate: '',
            },
        }
    },
    mounted() {
        this.init()
    },
    computed: {
        type2nameOptions() {
            if(this.type2name.length == 0) return true

            let options = Object.entries(this.type2name).map(([value, label]) => ({
                label,
                value: Number(value)  // 如果你需要 value 是数字
            }));

            return [{ label: '检测类型', value: '' }, ...options];
        }
    },
    watch: {
        '$route'() {
            this.init()
        },
        'form.date'(newVal) {
            if (Array.isArray(newVal) && newVal.length === 2) {
                this.form.sdate = this.formatDateTime(new Date(newVal[0]));
                this.form.edate = this.formatDateTime(new Date(newVal[1]));
            } else {
                this.form.sdate = '';
                this.form.edate = '';
            }
        }
    },
    methods: {
        init() {
            document.title = this.pageTitle;

            if (this.type == 'purchase') {
                this.getPurchase()
            } else {
                this.getStagePurchase()
            }
        },
        changeSelectType() {
            this.init()
        },
        getPurchase() {
            const that = this
            that.tableData = []
            this.$http('POST', '/supernew/ajax_get_purchase_list', {
                type: that.chktype,
                cur_page: that.currentPage,
                page_size: that.pageSize,
            }).then(response => {
                this.$nextTick(() => {
                    that.tableData = response.data.list
                    that.type2name = response.data.type2name
                    that.total = response.data.total
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getStagePurchase() {
            const that = this
            that.tableData = []
            this.$http('POST', '/supernew/ajax_get_stage_purchase', {
                type: that.chktype,
                cur_page: that.currentPage,
                page_size: that.pageSize,
            }).then(response => {
                this.$nextTick(() => {
                    that.tableData = response.data.list
                    that.type2name = response.data.type2name
                    that.total = response.data.total
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.init()
        },
        openDialog() {
            this.form = {
                id: '',
                type: '',
                unit_price: '',
                unit_num: '',
                cost: '',
                date: '',
                sdate: '',
                edate: '',
            }
            this.dialogVisible = true;
        },  // 确认按钮事件
        handleConfirm() {
            console.log('提交成功:', this.form);
            const that = this
            if (!that.form.type) {
                this.$message.warning('请选择检测类型');
                return
            }
            if (that.type == 'purchase') {
                if (!that.form.unit_price || !that.form.unit_num) {
                    this.$message.warning('请输入采购单价');
                    return
                }

                this.$http('POST', '/supernew/ajax_save_purchase', {
                    id: that.form.id,
                    type: that.form.type,
                    unit_price: that.form.unit_price,
                    unit_num: that.form.unit_num,
                }).then(response => {
                    this.$nextTick(() => {
                        if (!response.status) {
                            this.$message.warning(response.info);
                        } else {
                            if(that.form.id > 0){
                                this.$set(this.tableData, this.tableData.findIndex(item => item.id === this.form.id), {...this.form});
                            }else{
                                that.form.id = response.data
                                this.tableData.unshift(that.form);
                            }
                        }
                        this.dialogVisible = false;
                    })
                }).catch(error => {
                    this.$message.warning(error);
                    this.dialogVisible = false;
                })
            } else {
                if ((!that.form.unit_price || !that.form.unit_num) && !that.form.cost) {
                    this.$message.warning('请输入采购单价或阶段成本');
                    return
                }

                if (!that.form.sdate || !that.form.edate) {
                    this.$message.warning('请选择起止日期');
                    return
                }

                this.$http('POST', '/supernew/ajax_save_stage_purchase', {
                    id: that.form.id,
                    type: that.form.type,
                    unit_price: that.form.unit_price,
                    unit_num: that.form.unit_num,
                    cost: that.form.cost,
                    sdate: that.form.sdate,
                    edate: that.form.edate,
                }).then(response => {
                    this.$nextTick(() => {
                        if (!response.status) {
                            this.$message.warning(response.info);
                        } else {
                            if(that.form.id > 0){
                                this.$set(this.tableData, this.tableData.findIndex(item => item.id === this.form.id), {...this.form});
                            }else{
                                that.form.id = response.data
                                this.tableData.unshift(that.form);
                            }
                        }
                        this.dialogVisible = false;
                    })
                }).catch(error => {
                    this.$message.warning(error);
                    this.dialogVisible = false;
                })
            }
        },
        // 取消按钮事件
        handleCancel() {
            // this.$message.warning('点击了取消按钮');
            this.dialogVisible = false;
        },
        // 关闭弹框事件
        handleClose() {
            // this.$message.info('弹框已关闭');
            this.dialogVisible = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        formatDateTime(date) {
            const pad = n => n.toString().padStart(2, '0');
            const Y = date.getFullYear();
            const M = pad(date.getMonth() + 1);
            const D = pad(date.getDate());
            return `${Y}-${M}-${D}`;
        },
        editPurchase(row) {
            this.form = {...row};
            this.dialogVisible = true;
        },
        editStagePurchase(row) {
            this.form = {...row};
            this.form.date = [row.start_date, row.end_date]
            this.dialogVisible = true;
        },
        syncStagePurchase(row) {
            this.$http('POST', '/supernew/ajax_sync_order_cost', {
                id: row.id,
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        row.is_sync = 1;
                    }
                    this.$message.warning(response.info);
                })
            }).catch(error => {
                this.$message.warning(error);
            })
        },
    }
}
</script>
<style scoped lang="scss">
.custom-select {
  width: 200px;
}
</style>