<template lang='pug'>
    el-dialog(  :visible.sync='visible' :append-to-body='true' width='72%' :before-close='handleClose' :destroy-on-close='true')
        div( slot="title")
            span.title-bold  配置动作
        div( class="div_my_body" v-loading="diaLoading")
            el-transfer(
                ref='my_transfer'
                id='my_transfer'
                v-model="dataIds"
                filterable
                filter-placeholder="请输入动作名称"
                :titles="['动作列表', '已选中动作']"
                :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"
                :filter-method="filterMethod"
                :props="transferProps"
                @change="handleChange"
                :data="actionData")
                template(slot-scope='{option}')
                    el-row(type="flex" justify="start")
                        el-col(:span="8" style="margin-right:0")
                            span {{option.actionInfo}}
                        el-col(:span="8" style="margin-right:0")
                            span {{option.paramsName1}}
                        el-col(:span="8" style="margin-right:0")
                            span {{option.paramsName2}}
                    //div()
                       // div(style='width:33%;float:left') {{option.actionInfo}}
                        div(style='width:33%;float:left') {{option.paramsName1}}
                        div(style='width:33%;float:left') {{option.paramsName2}}
                    //span(:title="option.actionInfo + '\t' + option.paramsName1 + option.paramsName2") {{option.actionInfo}} &emsp; {{option.paramsName1}} &emsp; {{option.paramsName1}}
        span.dialog-footer(slot='footer')
            el-button(type='primary' size='medium' @click='cancel') 取消
            el-button(type='primary' size='medium' @click='saveAction' v-prevent-re-click) 保存
</template>

<script>
    export default {
        data() {
            return {
                diaLoading: false,
                selResourceType: '',
                dataIds: [],
                visible: false,
                actionData: [],
                transferProps: {
                    key: 'id',
                    label: 'actionInfo'
                }
            }
        },
        methods: {
            init(row) {
                this.selResourceType = row.id
                // console.log('row', row)
                this.visible = true
                this.getAction()
                this.$http({
                    url: this.$http.adornUrlAlarm(`/linkResourceAction/getActionByResourceType`),
                    method: 'get',
                    params: this.$http.adornParams({
                        resourceType: row.id
                    })
                }).then(data => {
                    // console.log('data', data)
                    this.dataIds = data.list.map(item => {
                        return item.action_id
                    })
                    // console.log(this.dataIds)
                })
            },
            handleChange(value, direction, movedKeys) {
                // console.log('dataIds', this.dataIds)
                // console.log('value=', value)
                // console.log('direction=', direction)
                // console.log('movedKeys=', movedKeys)
            },
            getAction() {
                this.$http({
                    url: this.$http.adornUrlAlarm(`/linkAction/actionList`),
                    method: 'post',
                    data: {}
                }).then(data => {
                    // console.log('actionData', data)
                    if (data && data.code === 0) {
                        this.actionData = data.list
                    }
                })
            },
            //条件过滤
            filterMethod(query, item) {
                return item.actionInfo.indexOf(query) > -1 || item.paramsName1.indexOf(query) > -1 || item.paramsName2.indexOf(query) > -1
            },
            //配置动作
            saveAction() {
                if (!this.selResourceType) {
                    this.$message.error('请先选择资源点类型！')
                    return
                }
                this.diaLoading = true
                this.$http({
                    url: this.$http.adornUrlAlarm(`/linkResourceAction/updateResourceAction`),
                    method: 'post',
                    data: this.$http.adornData({
                        resource_type: this.selResourceType,
                        actions: this.dataIds
                    })
                }).then(data => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                    this.diaLoading = false
                    this.visible = false
                })
            },
            //关闭前
            handleClose() {
                this.visible = false
                // this.$refs.my_transfer.clearQuery('left')
                // this.$refs.my_transfer.clearQuery('right')
            },
            //取消
            cancel() {
            this.$confirm('确认取消?', '配置动作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                this.handleClose()
                })
                .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                })
                })
            }
        }
    }
</script>

<style lang="scss">
    .div_my_body {
        margin: 0 auto;
        display: flex;

        .el-checkbox {
            margin-right: 0;
        }
    }

    #my_transfer {
        justify-content: center;
        margin: 0 auto;
        display: table-cell;

        .el-transfer-panel {
            width: 600px;
            height: 500px;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            overflow: hidden;
            background: #FFF;
            display: inline-block;
            vertical-align: middle;
            max-height: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
        }

        .el-transfer__buttons button {
            margin: 0 auto;
            margin-bottom: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: block;
            padding: 0px;

        }
    }

    /*.right-box-one {*/
    /*    margin: 20px 0;*/
    /*    width: 40%;*/
    /*}*/

    /*.left-box {*/
    /*    width: 90%;*/
    /*    border: 1px solid #ebeef5;*/
    /*    height: 500px;*/
    /*    padding: 20px;*/

    /*    .search-box {*/
    /*        margin-bottom: 20px;*/
    /*    }*/
    /*}*/
</style>