<template>
  <page-header-wrapper v-if="loading" :title="pageTitle">
    <!-- 有操作权限 -->
    <!-- v-if="$store.getters.hasPromissionsShow.permission" -->
    <a-card :bordered="false" class="card">
      <a-row>
        <a-col :span="24" v-if="queryParam.state == 'role'">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :md="6" :sm="24">
                  <a-form-item label="用户角色">
                    <a-select
                      label-in-value
                      default-value=""
                      placeholder="请选择"
                      @change="handleRoleChange">
                      <a-select-option
                        v-for="item in departs"
                        :key="item.key"
                        :value="item.key">{{ item.title }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="用户姓名">
                    <a-input v-model="userQueryParam.name" placeholder="" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-form-item label="用户手机">
                    <a-input v-model="userQueryParam.username" placeholder="" />
                  </a-form-item>
                </a-col>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button class="ml8" type="primary" @click="addPromissions">新增</a-button>
                <a-button
                  class="ml8"
                  @click="() => ((this.queryParam = { state: 'role' }), $refs.table.refresh(true))">重置</a-button>
              </a-row>
            </a-form>
          </div>
          <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            :rowKey="(row) => row.staff_id"
            showPagination="auto"
            bordered
            size="default">

            <div slot="name" slot-scope="text, record">
              <div>{{ record.name }}</div>
              <div>{{ record.username }}</div>
            </div>
            <div slot="type" slot-scope="text, record">{{ record.type }}</div>
            <!-- <div slot="status" class="status">
              <div class="status-item">初审中 <a> (0) </a></div><a-divider type="vertical" />
              <div class="status-item">复审中 <a> (0) </a></div>
              <a-divider type="vertical" />
              <div class="status-item">待签收 <a> (0) </a></div><a-divider type="vertical" />
              <div class="status-item">办理中 <a> (0) </a></div>
            </div> -->
            <div slot="actions" slot-scope="text, record">
              <a @click="EditPromissions(record)">修改</a>
              <a-divider type="vertical" />
              <a-popconfirm
                placement="left"
                title="是否确认删除该角色?"
                ok-text="OK"
                cancel-text="NO"
                @confirm="delPromissions(record)">
                <a>删除</a>
              </a-popconfirm>
            </div>
          </s-table>
        </a-col>

      </a-row>
    </a-card>
    <!-- 没有操作权限限制 -->
    <!-- <NoPromissions v-else /> -->
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import {
    staffDeparts, delDepartsUser, getDepartsUser, getDepartsOrder
} from '@/api/promissions'
import AddPromissions from './modules/AddPromissions'
import EditPromissions from './modules/EditPromissions'
import AssignmentChange from './modules/AssignmentChange'
// import NoPromissions from '@/views/exception/noRight'

const columns = [
    {
        title: '用户ID',
        dataIndex: 'staff_id',
        align: 'center',
        width: 120
    }, {
        title: '用户姓名',
        key: 'name',
        scopedSlots: { customRender: 'name' },
        align: 'center',
        width: 200
    },
    {
        title: '用户角色',
        scopedSlots: { customRender: 'type' },
        align: 'center',
        width: 160
    },
    // {
    //     title: '待处理订单',
    //     scopedSlots: { customRender: 'status' },
    //     // width: 400,
    //     align: 'center'
    // },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        align: 'center',
        width: 140
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'actions' },
        align: 'center',
        width: 120
    }
]

export default {
    name: 'PermissionsIndex',
    components: {
        STable,
        UserInfo,
        DeriveButton,
        AddPromissions,
        EditPromissions,
        AssignmentChange
        // NoPromissions
    },
    data () {
        this.columns = columns
        return {
            dataList: [],
            tabsList: [
                { key: 'role', tab: '权限管理-新增身份' }
            ],
            pageTitle: '权限管理-新增身份',
            tabActiveKey: 'role',
            promissions: [], // 权限列表
            departs: [],
            queryParam: {
                state: 'role',
                phone: '',
                nickname: '',
                type: ''
            },
            userQueryParam: {
                name: '',
                username: '',
                key: ''
            },
            listCount: 0,
            loading: false,
            permission: false, // 展示展示分配权限
            dispatch: false, //  可展示可指派订单
            loadData: (parameter) => {
                const requestParameters = Object.assign({}, parameter, this.queryParam)
                const userQueryParams = Object.assign({}, parameter, this.userQueryParam)
                return this.tabActiveKey === 'role' ? getDepartsUser(userQueryParams) : getDepartsOrder(requestParameters)
            }
        }
    },
    watch: {
        $route (to, from) {
            if (
                (from.name === 'Detail' && to.name === 'SignInrderIndex') ||
                (from.name === 'DetailLogistics' && to.name === 'SignInrderIndex') ||
                (from.name === 'Home' && to.name === 'SignInrderIndex') ||
                (from.name === 'AssignrderIndex' && to.name === 'SignInrderIndex') ||
                (from.name === 'FristCheckrderIndex' && to.name === 'SignInrderIndex') ||
                (from.name === 'ReCheckrderIndex' && to.name === 'SignInrderIndex') ||
                (from.name === 'HandleService' && to.name === 'SignInrderIndex') ||
                (from.name === 'CompleteOrder' && to.name === 'SignInrderIndex')
            ) {
                this.$refs.table.loadData()
            }
        }
    },
    activated () {
        this.staffDeparts()
    },
    methods: {
        // 获取当前用户的组织
        staffDeparts () {
            this.loading = true
            staffDeparts().then(res => {
                console.log(res)
                this.promissions = res
                this.loading = true
                if (res.length > 0) {
                    this.departs = [{ key: '', title: '全部角色' }, ...res[0].departs]
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 角色更改
        handleRoleChange (e) {
            this.userQueryParam.key = e.key
            // this.$refs.table.refresh(true) // 从第一页开始刷新
        },
        handleTabChange (key) {
            this.tabActiveKey = key
            this.queryParam.state = key
            this.$refs.table.refresh(true) // 刷新列表
            this.pageTitle = this.tabsList.find((item) => item.key === key).tab
        },
        // 确认删除权限
        delPromissions (item) {
            delDepartsUser(item.staff_id).then(res => {
                this.$refs.table.loadData()
                this.$notification.success({
                    message: '成功',
                    description: '删除成功'
                })
                this.staffDeparts()
            }).catch(err => {
                this.$notification.error(err)
            })
        },
        // 新增权限
        addPromissions () {
            this.$dialog(AddPromissions,
                {
                    on: {
                        ok: () => {
                            this.$refs.table.refresh(true)
                            this.staffDeparts()
                        }
                    }
                },
                {
                    title: '新增用户',
                    width: 500,
                    maskClosable: true,
                    closable: true,
                    okText: '确认新增',
                    cancelText: '取消'
                }
            )
        },
        // 编辑权限
        EditPromissions (item) {
            this.$dialog(EditPromissions,
                {
                    item,
                    on: {
                        ok: () => {
                            this.$refs.table.loadData()
                        }
                    }
                },
                {
                    title: '编辑权限',
                    width: 500,
                    maskClosable: true,
                    closable: true,
                    okText: '确认修改',
                    cancelText: '取消'
                }
            )
        },
        // 指派订单
        Assignment (item) {
            console.log(item)
            const order = {
                item: item,
                orderId: this.id,
                type: this.promissions
            }
            this.$dialog(AssignmentChange
                ,
                {
                    order,
                    on: {
                        ok: () => {
                            this.$refs.table.loadData()
                            // this.getInfo()
                        }
                    }
                },
                {
                    title: '指派订单',
                    width: 500,
                    maskClosable: true,
                    closable: true,
                    okText: '确认指派',
                    cancelText: '取消'
                }
            )
        }
    }
}
</script>

<style lang="less" scoped>
.ml8 {
    margin-left: 8px;
}

.right {
    min-height: 80vh;
    margin-right: 30px;
    background-color: #f9f9f9;
    padding: 20px;
}

.ant-card-body {
    padding: 0px !important;
}

.title_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: solid 1px rgba(#1890ff, 0.2);
}

.icon_title {
    padding: 10px 0;
}

.a_tree_title {
    font-weight: bold;
    font-size: 15px;
}

.a_tree_node {
    margin-top: 10px;
}

.status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;

    .status-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex-wrap: wrap;
        // div{
        //   width: 49%;
        //   display: flex;
        //   flex-direction: row;
        //   align-items: center;
        //   justify-content: center;
        //   box-sizing: border-box;
        //   flex-wrap: wrap;
        //   margin: 2px 10px;
        // }
    }
}
</style>
