<template>
    <div class="sampleTemplateManagement">
        <div class="block_wrap">
            <LayoutConditinal :opts="opts" @submit="handleQuery" />
        </div>
        <div class="contantContent">
            <div class="hetongxinxi">
                <h3>样品模板管理</h3>
                <div class="rightside">
                    <el-button class="createBtn" type="primary" @click="jumpDetails()" size="small" icon="el-icon-plus">新增</el-button>
                </div>
            </div>
            <el-table v-loading="loading" :data="tableData">
                <el-table-column align="left" prop="dept" label="所属分厂">
                </el-table-column>
                <el-table-column align="left" prop="sampleType" label="样品分类">
                </el-table-column>
                <el-table-column align="left" prop="sampleName" label="样品名称">
                </el-table-column>
                <el-table-column width="160px" align="left" prop="status" label="启用状态">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.flag" @change="updatesampleTemplateInfoStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px" align="left" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-link @click="jumpDetails(scope.row,'编辑')" class="link1" type="primary">编辑</el-link>
                        <el-popconfirm title="确认删除该条记录？" @onConfirm="deleteSampleTemplateInfo(scope.row.id)">
                            <el-link type="primary" slot="reference">删除</el-link>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" @size-change="handleSizeChange" :page-size="pageObj.pageSize" @current-change="handleCurrentChange" :current-page="pageObj.pageNum" background layout="total, prev, pager, next, sizes, jumper" :total="pageObj.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import LayoutConditinal from '@/layout/business/LayoutConditinal'
export default {
    data() {
        return {
            pageObj: {
                pageNum: 1,
                pageSize: 20,
                total: 0,
                current: 1
            },
            tableData: [],
            loading: false,
            //筛选参数
            queryParams: {},
            //筛选头结构
            opts: {
                branchName: {
                    label: '所属分厂',
                    comp: 'el-input',
                    bind: {
                        clearable: true
                    },
                },
                sampleType: {
                    label: '样品分类',
                    comp: 'el-input',
                    bind: {
                        clearable: true
                    },
                },
                sampleName: {
                    label: '样品名称',
                    comp: 'el-input',
                    bind: {
                        clearable: true
                    },
                }
            },
        }
    },
    components: {
        LayoutConditinal
    },
    methods: {
        //筛选查询
        handleQuery(v) {
            this.queryParams = v
            this.pageObj.pageNum = 1
            this.pageObj.current = 1
            this.listSampleTemplateInfo(this.queryParams)
        },
        //编辑
        jumpDetails(record, text) {
            this.$router.push({
                query: {
                    type: 'details',
                    status: text ? 1 : 0,
                    ...record
                }
            })
        },
        //每一页显示数量
        handleSizeChange(size) {
            this.pageObj.pageSize = size
            this.listSampleTemplateInfo(this.queryParams)
        },
        //切换页码
        handleCurrentChange(val) {
            this.pageObj.pageNum = val
            this.listSampleTemplateInfo(this.queryParams)
        },
        //列表查询
        async listSampleTemplateInfo(query = {}) {
            this.loading = true
            query.pageNum = this.pageObj.pageNum
            query.pageSize = this.pageObj.pageSize
            const res = await this.$api.sampleTemplateManagement.listSampleTemplateInfo(query).then(response => {
                if (response.code === 200) {
                    this.tableData = response.data.records.map(item => {
                        item.flag = item.status ? true : false
                        return item
                    })
                    this.pageObj.total = response.data.total
                }
            })
            this.loading = false
        },
        //列表删除
        async deleteSampleTemplateInfo(query) {
            const res = await this.$api.sampleTemplateManagement.deleteSampleTemplateInfo(query).then(response => {
                if (response.code === 200) {
                    this.pageObj.pageNum = this.tableData.length == 1 && this.pageObj.pageNum > 1 ? this.pageObj.pageNum - 1 : this.pageObj.pageNum
                    this.listSampleTemplateInfo(this.queryParams)
                }
            })
        },
        //列表启用开关
        async updatesampleTemplateInfoStatus(query = {}) {
            console.log(query);
            let data = {}
            data.id = query.id
            data.status = query.flag ? 1 : 0
            const res = await this.$api.sampleTemplateManagement.updatesampleTemplateInfoStatus(data).then(response => {
                if (response.code === 200) {
                    this.listSampleTemplateInfo(this.queryParams)
                }
            })
        }
    },
    mounted() {
        this.listSampleTemplateInfo()
    }
}
</script>

<style lang="scss">
.sampleTemplateManagement {
    background: #ecf0f3;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
    padding: 16px;

    .contantContent {
        background-color: #ffffff;
        padding: 24px;
        border-radius: 4px;

        .hetongxinxi {
            display: flex;
            justify-content: space-between;
            padding-bottom: 24px;

            h3 {
                margin: 0;
                font-size: 20px;
                line-height: 32px;
            }
        }

        .pagination {
            position: relative;
            right: -5px;
            margin-top: 16px;
            padding: 0;
            text-align: right;
        }

        .el-link {
            margin-right: 16px;
        }
    }
}
</style>
