<template>
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label="分类">
                <el-select v-model="dataForm.dictType" placeholder="请选择分类">
                    <el-option v-for="(item,index) in typeList" :key="index" :label="item.dictValue" :value="item.dictType">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="书名">
                <el-input v-model="dataForm.bookName" placeholder="请输入书名"></el-input>
            </el-form-item>
        <el-form-item>
            <el-button @click="pageIndex = 1;getDataList()">查询</el-button>
            <el-button v-if="isAuth('book:shopproduct:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
        </el-form>
        <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
            header-align="center"
            align="center"
            label="分类">
            <template slot-scope="scope"> 
                {{ filterAA(scope.row.typeId) }}
            </template>
        </el-table-column>
        <el-table-column label="书名" align="center">
            <template slot-scope="scope"> 
                {{ scope.row.book.name }}
            </template>
        </el-table-column> 
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
            <el-button type="text" size="small" @click="editOrUpdateHandle(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog :visible.sync="addOrUpdateVisible" :append-to-body="true" :title="titlesub" width="50%" @close="cancleClose">
            <el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule">
                <el-row type="flex" justify="center">
                    <el-form-item label="分类" prop="typeId">
                        <el-select v-model="addForm.typeId" placeholder="请选择分类" style="width: 500px;">
                            <el-option v-for="(item,index) in typeList" :key="index" :label="item.dictValue" :value="item.dictType">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-form-item label="书名" prop="bookId">
                        <el-select v-model="addForm.bookId" placeholder="请选择书名" style="width: 500px;">
                            <el-option v-for="item in booknameList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-form-item label="排序" label-width="48px">
                        <el-input style="width:500px" v-model="addForm.sort"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleClose">取 消</el-button>
                <el-button type="primary" @click="addOreEditCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @showchooseBookf = "showchooseBookf"></add-or-update>
        <choose-book v-if="chooseBookVisible" :bookIds = bookIds ref="chooseBook" :chooseBookVisible = chooseBookVisible @closeBookf = "closeBookf"></choose-book>   -->
    </div>
</template>
<script>
export default {
    data () {
        return {
            typeList: [], //类型列表
            booknameList: [],
            dataForm: {
                dictType: '',//分类
                bookName: '',//书名
            },
            addForm: {
                "id": '',//新增不传
                "bookId": '',
                "typeId": '',
                "sort": ''
            },
            editId: '',
            addFormRule: {
                typeId: [{required: true, message: "请选择分类" }],
                bookId: [{required: true, message: "请选择书名"}]
            },
            dataList: [],
            // publishStatus: false,
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false,
            bookIds:[],
            titlesub: '新增'
        }
    },
    components: {
    // AddOrUpdate,
    // chooseBook
    },
    activated () {
        this.gettypeList()
        this.getDataList()
    },
    methods: {
        gettypeList () {
            this.$http({
                url: this.$http.adornUrl('/book/medicaldes/typeList?label=medicaldesBookType'),
                method: 'post',
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.typeList = data.result
                
                } else {
                    this.typeList = []
                }
            })
        },
        // 获取数据列表
        getDataList () {
            this.dataListLoading = true
            this.$http({
            url: this.$http.adornUrl('/book/medicaldes/bookRelationListByType'),
            method: 'post',
            data: this.$http.adornData({
                "dictType": this.dataForm.dictType,
                "bookName": this.dataForm.bookName,
                "current": this.pageIndex,
                "limit": this.pageSize
            })
            }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataList = data.result.records
                this.totalPage = data.result.total
            } else {
                this.dataList = []
                this.totalPage = 0
            }
            this.dataListLoading = false
            })
        },
        getbookname() {
            // 获取数据列表
        this.$http({
            url: this.$http.adornUrl('/book/book/list'),
            method: 'get',
            params: this.$http.adornParams({
            'page': 1,
            'limit': 1000000,
            'bookName': '',
            'publisherName' : '',
            'authorName' : ''
            })
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.booknameList = data.page.list
                } else {
                    this.booknameList = []
                }
            })
            
        },
        filterAA(val){
            var aa = this.typeList.filter(obj => obj.dictType == val)
            return aa[0].dictValue
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle (val) {
            this.dataListSelections = val
        },
        // 新增 / 修改
        editOrUpdateHandle (row) {
            this.titlesub = '修改'
            this.getbookname()
            this.editId = row.id
            this.addForm.bookId = row.bookId
            this.addForm.typeId = row.typeId.toString()
            this.addForm.sort = row.sort
            this.addOrUpdateVisible = true
            
        },
        addOrUpdateHandle() {
            this.getbookname()
            this.editId = ''
            this.titlesub = '新增'
            this.addOrUpdateVisible = true
        },
        cancleClose() {
            this.addOrUpdateVisible = false
            this.$refs["addFormRef"].resetFields();
            this.addForm = {
                "id": '',//新增不传
                "bookId": '',
                "typeId": '',
                "sort": ''
            }
        },
        // 删除
        deleteHandle (id) {
            this.$confirm('请确认是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$http({
                url: this.$http.adornUrl(`/book/medicaldes/delBookRelation?id=${id}`),
                method: 'post',
            }).then(({data}) => {
                if (data && data.code === 0) {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                    this.getDataList()
                    }
                })
                } else {
                this.$message.error(data.msg)
                }
            })
            })
        },
        addOreEditCate() {
            this.$refs["addFormRef"].validate(valid => {
                if(valid) {
                    this.$http({
                        url: this.$http.adornUrl('/book/medicaldes/saveOrUpdateBookRelation'),
                        method: 'post',
                        data: this.$http.adornData({
                            "id": this.editId, //新增不传
                            "bookId": this.addForm.bookId,
                            "typeId": this.addForm.typeId,
                            "sort": this.addForm.sort
                        })
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message.success("成功");
                            this.addOrUpdateVisible = false
                            this.getDataList()
                        } else {
                            this.$message.error("失败");
                        }
                    })
                }
            })
        }
    }
}
</script>
