<template>
  <Modal v-model="showModalUser" :mask-closable="false" :closable="false" :value="value" width="820"
         v-draggable="options">
    <Tabs ref="tabs" :value="tabName" @on-click="changeTab">
      <TabPane :label="'用户'+modalTitle" name="1" >
        <userEdit v-show="tabName == '1'" :value="value" @cancel="cancel"></userEdit>
      </TabPane>
     <!-- <TabPane label="已开通系统" name="2">
        &lt;!&ndash;<workflowDone v-show="tabName == '2'"></workflowDone>&ndash;&gt;
      </TabPane>-->
      <TabPane label="关联角色" name="3">
        <objRolePage v-show="tabName == '3'" :nowObj="value.bean"></objRolePage>
      </TabPane>
      <TabPane label="关联单位/区域" name="4">
        <userBindingPage v-show="tabName == '4'" :nowObj="value.bean"></userBindingPage>
      </TabPane>
      <!--<TabPane label="关联区域" name="5">
        <userBindingPage v-show="tabName == '5'" :nowObj="value.bean"></userBindingPage>
      </TabPane>-->
    </Tabs>
    <div slot="footer">
      <Button @click="cancel">关闭</Button>
    </div>

  </Modal>

</template>

<script>
  import userEdit from './user-edit.vue'
  import objRolePage from '../obj-role/obj-role-list.vue'
  import userBindingPage from './userBinding-list.vue'
  let $this
  export default {
    name: 'userModal',
    components: {
      userEdit,
      objRolePage,
      userBindingPage,
    },
    props: {
      show: Boolean,
      value: Object
    },
    data () {
      return {
        tabName: '1',
        showModalUser: false,
        flag: '',
        modalTitle: '用户管理',
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        }
      }
    }, methods: {
      cancel (type) {
        this.showModalUser = false
        this.$emit('update:show', false)
        //如果需要刷新,就触发
        if (type === 'refresh'){
          this.$emit('reload-data')
        }
      },
      changeTab(name){
        this.tabName = name;
      }
    },
    mounted () {
      $this = this
    },
    watch: {
      show: {
        immediate: true,
        handler: function () {
          this.showModalUser = this.show
        }
      },
      value: {
        immediate: true,
        handler: function () {
          this.flag = this.value.flag
          this.modalTitle = this.value.title
          //如果时查看的功能，要将所有input框只读，并且去掉保存按钮
          if (this.flag == 'view') {
            this.disabled = true
            this.showSaveBtn = false
          } else {
            this.disabled = false
            this.showSaveBtn = true
          }
        }
      }
    }

  }
</script>

<style scoped>
  .ivu-form-item-search {
    margin-bottom: 21px;
  }
</style>
