<template>
    <div>
        <div>
            <Form inline>
                <FormItem>
                    <Input type="text" v-model="name" clearable>
                        <span slot="prepend">角色名称</span>
                    </Input>
                </FormItem>
                <FormItem>
                    <Input type="text" v-model="enname" clearable>
                        <span slot="prepend">英文名称</span>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button :loading="tableLoading" @click="search" type="success">搜索</Button>
                </FormItem>
            </Form>
            <!--<Row type="flex" justify="start">
                <Col span="8">
                        <span>角色名称</span>
                        <Input v-model="name"/>
                </Col>
                <Col span="8">
                    <span>英文名称</span>
                    <Input v-model="enname"/>
                </Col>
                <Col span="4">
                    <Button @click="search" type="success">搜索</Button>
                </Col>
            </Row>-->
        </div>
        <div class="body">
            <!--        <role-list-table ref="roleListTab"></role-list-table>-->
            <template>
                <Table :loading="tableLoading" stripe :columns="tittle" :data="data1">
                    <!--&lt;!&ndash;                    <Button type="primary" size="small" style="margin-right: 5px">设置模板</Button>&ndash;&gt;-->
                    <!--&lt;!&ndash;                    <Button type="primary" size="small" style="margin-right: 5px">设置销售品</Button>&ndash;&gt;-->
                    <!--&lt;!&ndash;                    <Button type="primary" size="small" style="margin-right: 5px">绑定渠道</Button>&ndash;&gt;-->
                    <template slot="action" slot-scope="{ row}">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="allocation(row)">分配
                        </Button>
                        <Button type="primary" size="small" style="margin-right: 5px" @click="updateRole(row)">修改
                        </Button>
                        <Button type="primary" size="small" style="margin-right: 5px" @click="warranty(row)">授权</Button>
                        <Button v-has="'SYS_role_shanchu'" type="error" size="small" @click="delAction(row)">删除</Button>
                    </template>
                </Table>
            </template>
        </div>
        <Modal
                :title="oldStyle?'':'选择菜单'"
                v-model="warrantymodal1"
                :width="oldStyle?1200:600">
            <template>
                <div class="modal" v-if="oldStyle">
                    <Tabs type="card" name="tab2" @on-click="tabChange" v-model="tabvalue">
                        <TabPane v-for="(item,index) in this.label" :key="index" tab="tab2" :label="item.name"
                                 v-model="tabvalue">
                            <div class="bodymsg">
                                <Card class="cardStyleOne" v-for="(item1,index) in menudata" :key="index">
                                    <Row>
                                        <Col span="4">
                                            <div class="cardStyleOnediv" style="text-align: center">
                                                {{item1.name}}
                                            </div>
                                        </Col>
                                        <Col span="12">
                                            <div class="cardStyleTwo">
                                                <List header="菜单" border>
                                                    <ListItem v-for="(item2,index) in item1.children" :key="index">
                                                        <div style="cursor: pointer" @click="Threemenu(item1,item2)">
                                                            <Icon class="icon trueIcon" v-if="item2.contain===true"
                                                                  type="md-checkmark"/>
                                                            <Icon class="icon falseIcon" v-else type="md-close"/>
                                                            {{item2.name}}
                                                        </div>
                                                        <div v-if="item2.contain===true" class="menuType4">
                                                                    <span v-for="(item3,index) in item2.children"
                                                                          :key="index" style="margin-right: 10px">
                                                                        <span style="cursor: pointer"
                                                                              @click="Fourmenu(item3)">
                                                                                    <Icon class="icon trueIcon"
                                                                                          v-if="item3.contain===true"
                                                                                          type="md-checkmark"/>
                                                                                     <Icon class="icon falseIcon" v-else
                                                                                           type="md-close"/>
                                                                            {{item3.name}}
                                                                            </span>
                                                                    </span>
                                                        </div>
                                                    </ListItem>
                                                </List>
                                            </div>
                                        </Col>
                                    </Row>
                                </Card>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                <template v-else>
                    <Alert>温馨提示：<span style="color: red">红色</span>的字体是菜单，<span style="color: green">绿色</span>的字是按钮</Alert>
                    <add-role-menu ref="addRoleMenu" :roleId="role_id"></add-role-menu>
                    <div slot="footer">
                        <Button type="error" @click="cancelAction">取消</Button>
                        <Button type="success" :loading="loading" @click="okAction">保存</Button>
                    </div>
                </template>
            </template>
        </Modal>
    </div>
</template>

<script>
import {
  getRoleList,
  getMenuForRoleList,
  getOneList,
  deleteRole,
  setMenuForRole,
  setRoleMenu
} from '../../../../../api/system/system'
import AddRoleMenu from '../add-role-menu/index'

export default {
  name: 'roleList',
  components: { AddRoleMenu },
  props: {
    oldStyle: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      tableLoading: false,
      loading: false,
      tabvalue: 0,
      switch1: false,
      menutittle: [{
        title: '菜单',
        key: 'name'
      }],
      menudata: [],
      name: '',
      enname: '',
      tittle: [
        {
          title: '角色名称',
          key: 'name'
        },
        {
          title: '英文名称',
          key: 'enname'
        },
        {
          title: '归属机构',
          key: 'office_name'
        },
        {
          title: '数据范围',
          key: 'data_scope_name'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          minWidth: 350
        }
      ],
      data1: [],
      warrantymodal1: false,
      label: [],
      menuloading: false,
      role_id: '',
      exist: ''
    }
  },
  methods: {
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    init () {
      this.getList()
    },
    search () {
      const data = {
        name: this.name,
        enname: this.enname
      }
      this.getList(data)
    },
    getList (data) {
      this.tableLoading = true
      getRoleList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
          this.tableLoading = false
        } else {
          this.$Message.error(ret.data.errmsg)
          this.tableLoading = false
        }
      })
    },
    delAction (row) {
      this.$Modal.confirm({
        title: '确认删除此角色么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteRoleAction(row.id)
        }
      })
    },
    deleteRoleAction (val) {
      deleteRole({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.getList()
          this.success()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    updateRole (value) {
      this.$emit('switchTab1', '2', value)
    },
    allocation (value) {
      this.$emit('switchTab2', '3', value)
    },
    warranty (value) {
      this.warrantymodal1 = true
      if (this.oldStyle) {
        const data = {
          parent_id: '1'
        }
        getOneList(data).then(ret => {
          this.label = ret.data.data
          this.role_id = value.id
          const data = {
            parent_id: this.label[0].id,
            role_id: value.id
          }
          this.getMenuForRoleList(data)
        })
      } else {
        this.role_id = value.id
      }
    },
    getMenuForRoleList (value) {
      getMenuForRoleList(value).then(ret => {
        this.menudata = this.$common.xeUtils.clone(this.$common.toTree(ret.data.data, 'children', 'id', 'parent_id'), true)
      })
    },
    tabChange (value) {
      const data = {
        parent_id: this.label[value].id,
        role_id: this.role_id
      }
      getMenuForRoleList(data).then(ret => {
        this.menudata = []
        this.menudata = this.$common.xeUtils.clone(this.$common.toTree(ret.data.data, 'children', 'id', 'parent_id'), true)
      })
    },
    Threemenu (value1, value2) {
      let children = ''
      if (value2.children === undefined) {
        children = ''
      } else {
        let x = ''
        value2.children.forEach(item => {
          x = x + ',' + item.id
        })
        let y = x.substring(1, x.length)
        children = y
      }
      let exist = ''
      if (value2.exist === undefined) {
        exist = ''
      } else {
        exist = value2.exist
      }
      let menu_idsmsg = ''
      if (value1.children !== undefined) {
        let i = ''
        value1.children.forEach(item => {
          i = i + ',' + item.id
        })
        menu_idsmsg = i.substring(1, i.length)
      }
      const data = {
        role_id: this.role_id,
        type: '3',
        exist: exist,
        children: children,
        id: value2.id,
        parentId: value2.parent_id,
        parentOne: value2.parent_ids.split(',')[2],
        menu_ids: menu_idsmsg
      }
      setMenuForRole(data).then(ret => {
        if (ret.data.errcode === 0) {
          const date = {
            parent_id: this.label[this.tabvalue].id,
            role_id: this.role_id
          }
          this.getMenuForRoleList(date)
        }
      })
    },
    Fourmenu (value) {
      let contain1 = ''
      if (value.contain === undefined) {
        contain1 = false
      } else {
        contain1 = value.contain
      }
      const data = {
        contain: contain1,
        id: value.id,
        role_id: this.role_id,
        type: '4'
      }
      setMenuForRole(data).then(ret => {
        if (ret.data.errcode === 0) {
          const date = {
            parent_id: this.label[this.tabvalue].id,
            role_id: this.role_id
          }
          this.getMenuForRoleList(date)
        }
      })
    },
    okAction () {
      this.loading = true
      let treeData = this.$refs.addRoleMenu.getTreeSelectNodes()
      console.log(this.$common.xeUtils.map(treeData, item => item.id))
      setRoleMenu({ role_id: this.role_id, menus: this.$common.xeUtils.map(treeData, item => item.id) }).then(ret => {
        this.loading = false
        if (ret.data.errcode === 0) {
          this.$Message.success('权限菜单授权成功！')
          this.warrantymodal1 = false
        } else {
          this.$Message.error('保存失败，请检查网络')
        }
      })
    },
    cancelAction () {
      this.warrantymodal1 = false
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .body {
        margin-top: 25px;
    }

    .modal {
        margin-left: 20px;
        margin-right: 20px;

    }

    .bodymsg {
        overflow: auto;
        height: 500px;
    }

    .cardStyleOne {
        width: 1000px;
        margin-bottom: 20px;
        height: 140px;
    }

    .cardStyleOnediv {
        line-height: 110px;
        font-size: 14px;
        font-weight: bold;
    }

    .cardStyleTwo {
        width: 700px;
        height: 110px;
        overflow: auto;
    }

    .cardStyleTwo p {
        text-align: center;
        margin-bottom: 5px;
    }

    .cardStyleTwo >>> .ivu-list-item {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .cardStyleTwo >>> .ivu-list-header {
        padding-top: 6px;
        padding-bottom: 6px;
        background: lightskyblue;
        text-align: center;
    }

    .icon {
        margin-right: 12px;
    }

    .menuType4 {
        margin-left: 70px;
    }

    .trueIcon {
        color: green;
    }

    .falseIcon {
        color: red;
    }
</style>
