<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{ $t("960443") }}：</label>
                <Select
                    v-model="title"
                    clearable
                    filterable
                    class="searchSelect"
                >
                    <Option
                        v-for="item in titleList"
                        :value="item"
                        :key="item"
                        >{{ item }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label>{{ $t("960444") }}：</label>
                <Input class="searchInput" type="number" v-model="cycle" />
            </div>

            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search(1, pagesize)"
                    >{{ $t("1001") }}</Button
                >
                <Button
                    type="success"
                    class="twoWord"
                    icon="md-add-circle"
                    @click="add()"
                    >{{ $t("1002") }}</Button
                >
                <Button
                    type="warning"
                    class="twoWord"
                    icon="ios-create-outline"
                    @click="edit()"
                    >{{ $t("1003") }}</Button
                >
                <Button
                    type="error"
                    class="twoWord"
                    icon="md-close-circle"
                    @click="del()"
                    >{{ $t("1004") }}</Button
                >
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-build"
                    @click="setcycle()"
                    >{{ $t("960445") }}</Button
                >
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10, 20, 30, 40, 100]"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal
            class="newModalClass"
            :title="$t('1002')"
            v-model="addmodal"
            :styles="{ width: '620px' }"
        >
            <div class="modal_body">
                <div class="filter">
                    <label><i>*</i>{{ $t(960443) }}：</label>
                    <!-- <span style="color: red;display: inline-block;width: 5px;">*</span> -->
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="addobj.title"
                    />
                </div>
                <div class="filter">
                    <label><i>*</i>{{ $t(700100) }}：</label>
                    <!-- <span style="color: red;display: inline-block;width: 5px;">*</span> -->
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="addobj.approval_user"
                    />
                </div>
                <div class="filter">
                    <label><i>*</i>{{ $t(100007) }}：</label>
                    <!-- <span style="color: red;display: inline-block;width: 5px;"></span> -->
                    <Input
                        class="searchInput"
                        type="email"
                        v-model="addobj.mail"
                    />
                </div>
            </div>
            <div slot="footer">
                <Button
                    type="text"
                    size="large"
                    @click="addmodelcancel"
                    v-text="$t('1033')"
                    >取消</Button
                >
                <Button
                    type="primary"
                    size="large"
                    @click="adddata"
                    v-text="$t('1011')"
                    >确定</Button
                >
            </div>
        </Modal>

        <Modal
            class="newModalClass"
            :title="$t('1003')"
            v-model="editmodal"
            :styles="{ width: '620px' }"
        >
            <div class="modal_body">
                <div class="filter">
                    <label><i>*</i>{{ $t(960443) }}：</label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="obj.title"
                        disabled
                    />
                </div>
                <div class="filter">
                    <label><i>*</i>{{ $t(700100) }}：</label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="obj.approval_user"
                    />
                </div>
                <div class="filter">
                    <label><i>*</i>{{ $t(100007) }}：</label>
                    <Input class="searchInput" type="text" v-model="obj.mail" />
                </div>
            </div>
            <div slot="footer">
                <Button
                    type="text"
                    size="large"
                    @click="editmodelcancel"
                    v-text="$t('1033')"
                    >取消</Button
                >
                <Button
                    type="primary"
                    size="large"
                    @click="editdata"
                    v-text="$t('1011')"
                    >确定</Button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import axios from "@/libs/api.request";

export default {
    data() {
        return {
            cycle: 0,
            titleList: [],
            addtitleList: [],
            title: "",
            obj: {},
            addmodal: false,
            editmodal: false,
            editobj: {},
            addobj: {},
            total: 0, // 初始化数据总数
            page: 1, // 初始页码
            pagesize: 10, // 初始页码条数
            tableData1: [], // 表格数据
            tableColumns1: [
                {
                    type: "index2",
                    title: this.$t("1008"), // 序号
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 65,
                },
                {
                    title: this.$t("960443"), // 紧急采购审核流程
                    key: "title",
                },
                {
                    title: this.$t("700100"), // 审核人
                    key: "approval_user",
                },
                {
                    title: this.$t("100007"), // 邮箱
                    key: "mail",
                },
            ],
        };
    },
    created() {
        this.initTitle();
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        initTitle() {
            axios
                .request({
                    url: "tpm/PartsProcurement/GetApprovalProcessTitle",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.titleList = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        initaddTitle() {
            axios
                .request({
                    url: "tpm/PartsProcurement/GetApprovalProcessTitle",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.addtitleList = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        handleRowChange(currentRow, oldCurrentRow) {
            // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow;
            this.editobj = this.$time.deepClone(currentRow);
            console.log(this.obj);
        },
        changePage(value) {
            // 改变页码出发函数
            this.page = value;
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.search(this.page, this.pagesize);
        },
        handlePageSize(value) {
            // 改变数据条数触发函数
            this.pagesize = value;
            this.search(this.page, this.pagesize);
        },
        handleaddCreate(val) {
            this.addtitleList.push({
                value: val,
                label: val,
            });
        },
        search(page, pagesize) {
            this.obj = {}; // 查询时清空选中对象
            var params = {
                title: this.title,
                page: page,
                pagesize: pagesize,
            };
            axios
                .request({
                    url: "/tpm/PartsProcurement/GetApprovalProcess",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total;
                        this.page = res.data.page;
                        this.tableData1 = res.data.data;
                        if (this.total > 0) {
                            this.cycle = res.data.data[0].cycle;
                        } else {
                            this.cycle = 0;
                        }
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            this.initTitle();
        },
        add() {
            this.addmodal = true;
            this.initaddTitle();
            this.addobj = {};
        },
        adddata() {
            var data = this.addobj;
            // console.log(data);
            if (data.title === undefined || data.title === "") {
                this.$Message.error(this.$t(960443) + this.$t(150000));
                return;
            }
            if (data.approval_user === undefined || data.approval_user === "") {
                this.$Message.error(this.$t(700100) + this.$t(150000));

                return;
            }
            if (data.mail === undefined || data.mail === "") {
                this.$Message.error(this.$t(100007) + this.$t(150000));
                return;
            }
            
            this.axios
                .request({
                    url: "/tpm/PartsProcurement/AddApprovalProcess",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("1"));
                        this.search(1, this.pagesize);
                        this.addmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            this.addtitleList = [];
        },
        addmodelcancel() {
            this.addmodal = false;
        },
        edit() {
            if (this.obj.id === undefined) {
                this.$Message.error(this.$t("1017"));
                return false;
            }
            if (this.obj.node_name < 5) {
                this.$Message.error(this.$t("960442"));
                return false;
            }
            this.initaddTitle();
            this.obj = this.$time.deepClone(this.editobj);
            this.editmodal = true;
        },
        editmodelcancel() {
            // 编辑模态框取消
            this.editmodal = false;
        },
        editdata() {
            // 编辑
            var data = this.obj;
            if (data.approval_user === undefined || data.approval_user === "") {
                this.$Message.error(this.$t(700100) + this.$t(150000));

                return;
            }
            if (data.mail === undefined || data.mail === "") {
                this.$Message.error(this.$t(100007) + this.$t(150000));
                
                return;
            }
            if (data.title === undefined || data.title === "") {
                this.$Message.error(this.$t(960443) + this.$t(150000));
                return;
            }
            this.axios
                .request({
                    url: "/tpm/PartsProcurement/ModifyApprovalProcess",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("1"));
                        this.search(1, this.pagesize);
                        this.editmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            this.addtitleList = [];
        },
        setcycle() {
            if (
                this.title === undefined ||
                this.cycle === undefined ||
                this.title === "" ||
                this.cycle === 0
            ) {
                this.$Message.error(this.$t("9000136"));
                return;
            }
            var params = { title: this.title, cycle: this.cycle };
            this.axios
                .request({
                    url: "/tpm/PartsProcurement/SetApprovalProcessCycle",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("1"));
                        this.search(1, this.pagesize);
                        this.editmodal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
            this.addtitleList = [];
        },
        del() {
            if (JSON.stringify(this.obj) === "{}") {
                this.$Message.error(this.$t("1017"));
                return false;
            } else {
                this.$Modal.confirm({
                    title: this.$t("1018"),
                    content: "",
                    width: "290px",
                    closable: true,
                    okText: this.$t("1004"),
                    onOk: () => {
                        var params = { id: this.obj.id };
                        axios
                            .request({
                                url:
                                    "tpm/PartsProcurement/DeleteApprovalProcess",
                                params,
                                method: "get",
                            })
                            .then((res) => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t("1058"));
                                    this.page = 1;
                                    this.search(1, this.pagesize);
                                } else {
                                    this.$Message.error(this.$t(res.data.msg));
                                    this.search(1, this.pagesize);
                                }
                            });
                    },
                });
            }
        },
    },
};
</script>
<style lang="less" scoped>
label {
    width: 120px !important;
    display: inline-block;
    text-align: right;
}
</style>
