<template>
    <div>
        <!-- 搜索项 -->
        <search-bar ref="searchbar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
        <!-- 操作栏 -->
        <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
        <!-- 表格 -->
        <new-table
            ref="table"
            :tableUrl="tableUrl"
            :tableHeader="tableHeader"
            :condition="condition"
            :tableOptList="tableOptList"
            @submitTableOpt="receviceOpt"
        >
        </new-table>
    </div>
</template>

<script>
import newTable from "@/components/new-table"
import searchBar from "@/components/search-bar"
import operateBar from "@/components/operate-bar"
import { searchOpt, addEditOpt } from "@/mixins/page-opt"
import * as Api from "@/api/environment-manage"
const labelWidth = "120px"
const area = ["500px", "400px"]
export default {
    components: {
        newTable,
        searchBar,
        operateBar
    },
    mixins: [searchOpt, addEditOpt],
    data() {
        return {
            tableUrl: Api.tableUrl,
            tableHeader: [
                {
                    prop: "envElementType",
                    label: "环境要素类型",
                    code: "DM_ENV_ELE_TYPE"
                },
                {
                    prop: "envElementName",
                    label: "环境要素名称"
                },
                {
                    prop: "createTime",
                    label: "创建时间"
                }
            ],
            pageOptList: ["新增"],
            tableOptList: ["修改", "删除", "关联用户"],
            conditionForm: [
                {
                    label: "环境要素类型",
                    name: "envElementType",
                    op: "=",
                    component: "DgSelect",
                    attr: {
                        code: "DM_ENV_ELE_TYPE"
                    }
                },
                {
                    label: "环境要素名称",
                    name: "envElementName",
                    op: "like",
                    component: "ElInput"
                }
            ],
            editForm: [
                {
                    label: "环境要素类型",
                    prop: "envElementType",
                    component: "DgSelect",
                    value: "",
                    rules: [{ required: true, message: "请选择环境要素类型", trigger: "change" }],
                    attr: {
                        code: "DM_ENV_ELE_TYPE"
                    },
                    code: "DM_ENV_ELE_TYPE",
                    span: 24
                },
                {
                    label: "环境要素名称",
                    prop: "envElementName",
                    component: "ElInput",
                    value: "",
                    rules: [{ required: true, message: "请输入环境要素名称", trigger: "change" }],
                    span: 24
                }
            ]
        }
    },
    computed: {},
    methods: {
        receviceOpt(opt, row) {
            const otherParams = {
                config: this.editForm,
                labelWidth,
                area
            }
            if (opt == "新增") {
                this.handleOpenEditForm("新增", "add", otherParams)
            }
            if (opt == "修改") {
                this.handleOpenEditForm("修改", "update", { ...otherParams, detailInfo: row })
            }
            if (opt == "删除") {
                this.handleDelete(row)
            }
            if (opt == "关联用户") {
                this.handleRelUsers(row)
            }
        },
        handleDelete(row) {
            this.$dgConfirm(`是否确定删除这条数据！`, "提示", {}).then(() => {
                Api.deleteEnvElement(row.id).then(res => {
                    this.$message.success("删除成功!")
                    this.handleSearch()
                })
            })
        },
        /**
         * @description: 保存表单
         * @param { 表单数据 } form
         * @param { 新增还是编辑 } type
         * @param { 弹框 } layer
         */
        async saveForm(form, type, layer) {
            const res = type == "update" ? await this.update(form) : await this.add(form)
            if (res.data.result == "200") {
                this.$message.success("保存成功")
                layer.close(layer.dialogIndex)
                this.handleSearch()
            } else {
                this.$message.warning(res.data.msg)
            }
        },
        add(form) {
            return new Promise(resolve => {
                Api.saveEnvElement(form).then(res => {
                    resolve(res)
                })
            })
        },
        update(form) {
            return new Promise(resolve => {
                const { createTime, ...otherInfo } = form
                Api.updateEnvElement({ ...otherInfo }).then(res => {
                    resolve(res)
                })
            })
        },
        // 关联用户
        handleRelUsers({ id }) {
            const vm = this
            const layer = this.$dgLayer({
                title: "关联用户",
                content: require("./related-user.vue"),
                props: {
                    elementId: id
                },
                on: {
                    success() {
                        vm.hendleSearch()
                        layer.close(layer.dialogIndex)
                    }
                },
                area: ["1100px", "700px"]
            })
        }
    },
    created() {},
    mounted() {}
}
</script>

<style lang="scss"></style>
