<template>
    <div class="main">
        <div class="header">
            <el-button type="success" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true;">
                添加类型
            </el-button>
        </div>
        <div class="container">
            <el-table :data="contractTypeList" style="width: 100%;text-align: center;" border>
                <el-table-column label="序号" width="50px">
                    <template slot-scope="scope">
                        {{ (contractTypeQuey.pageNum - 1) * contractTypeQuey.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="类别名称" />
                <el-table-column prop="state" label="启用状态" width="100px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state"
                            @change="update({ ...scope.row, state: Math.abs(scope.row.state - 1) })"
                            active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="footer">
            <el-pagination @current-change="getContractTypeList" :current-page.sync="contractTypeQuey.pageNum"
                :page-size="contractTypeQuey.pageSize" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="(isEdit ? '修改' : '添加') + '合同类型'" :visible.sync="dialogFormVisible" @closed="resetData">
            <el-form ref="form" :model="dynamicValidateForm" label-width="130px">
                <el-form-item label="合同类型名称" prop="name" :rules="[{ required: true, message: '请输入合同类型名称' }]">
                    <el-input v-model="dynamicValidateForm.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-show="!isEdit" v-for="(name, index) in dynamicValidateForm.names"
                    :label="'合同类型名称' + (parseInt(index) + 1)" :prop="'names.' + index + '.value'" :key="index" :rules="[{
                        required: true, message: '合同类型名称不能为空', trigger: 'blur'
                    }]">
                    <el-input v-model="name.value">
                        <el-button slot="append" icon="el-icon-delete"
                            @click.prevent="dynamicValidateForm.names.splice(index, 1)">删除
                        </el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="!isEdit" @click="dynamicValidateForm.names.push({ value: '' });">增加类型</el-button>
                <el-button @click="resetData">取 消</el-button>
                <el-button v-if="isEdit" type="primary" @click="update(dynamicValidateForm)">确 定</el-button>
                <el-button v-else type="primary" @click="addContractType">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    selectContractTypeList,
    addContractType as insert,
    updateContractType
} from '@/api/contract'
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters([
            'companyId'
        ])
    },
    data() {
        return {
            contractTypeQuey: {
                pageSize: 10,
                pageNum: 1,
            },
            total: 0,
            contractTypeList: [],
            typeList: [],
            dialogFormVisible: false,
            dynamicValidateForm: { names: [] },
            isEdit: false
        }
    },
    mounted() {
        this.getContractTypeList()
    },
    methods: {
        resetData() {
            this.isEdit = false;
            this.dialogFormVisible = false
            this.dynamicValidateForm = { names: [], name: '' }
            this.$refs.form.resetFields();
        },
        edit(data) {
            this.isEdit = true;
            this.dialogFormVisible = true;
            this.dynamicValidateForm = { ...data }
        },
        getContractTypeList(data) {
            const params = {
                companyId: this.companyId || this.$store.getters.companyId,
                // "name": "string", //select
                // "searchCount": true, //select
                // "state": 0, //select
                ...this.contractTypeQuey,
                ...data
            }
            selectContractTypeList(params).then((res) => {
                if (res.success) {
                    this.contractTypeList = res.data.list.map(item => { return { ...item, state: parseInt(item.state) === 0 } })
                    this.total = res.data.total
                } else {
                    this.contractTypeList = []
                    this.total = 0
                }

            })
        },
        update(data) {
            function updateCore() {
                const params = {
                    companyId: this.companyId || this.$store.getters.companyId,
                    ...data
                }
                !Number.isInteger(data.state) && (params.state = Number(!data.state))
                updateContractType(params).then(res => {
                    if (res.success) {
                        this.$message.success("修改成功")
                        this.dialogFormVisible && (this.dialogFormVisible = false)
                        this.getContractTypeList()
                    }
                })
            }
            if (this.$refs.form) {
                this.$refs.form.validate((valida) => {
                    if (valida) {
                        updateCore.call(this)
                    }
                })
            } else {
                updateCore.call(this)
            }

        },
        addContractType() {
            this.$refs.form.validate((valida) => {
                if (valida) {
                    const data = {
                        state: 0,//默认开启,
                        companyId: this.companyId || this.$store.getters.companyId,
                    }
                    let params = [{
                        ...data,
                        name: this.dynamicValidateForm.name
                    }]
                    if (this.dynamicValidateForm.names.length) {
                        params = params.concat(this.dynamicValidateForm.names.map(name => { return { ...data, name: name.value } }))
                    }
                    insert(params).then((res) => {
                        if (res.success) {
                            this.$message.success("添加成功")
                            this.resetData()
                            this.getContractTypeList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    padding: 15px;

    .header {
        margin-bottom: 10px;
    }

    .footer {
        text-align: right;
    }
}
</style>
