<template>
  <div>
    <el-card class="panel-card">
      <div slot="header" class="clearfix">
        <span>节点属性</span>
      </div>
      <el-form label-width="70px">
        <el-form-item label="名称">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item v-show="type === 'Node'">
          <el-checkbox v-model="signJointly">会签模式</el-checkbox>
        </el-form-item>
        <el-form-item label="流程选项" class="checkbox-group" v-show="type === 'ActionNode'">
          <el-checkbox v-model="allowSelectUser">允许指定下一步操作人</el-checkbox><br />
          <el-checkbox v-model="allowAddActionMessage">允许添加动作消息</el-checkbox><br />
          <el-checkbox v-model="nodeallowRevoke" :disabled="disabledAllowRevoke">允许撤销</el-checkbox><br />
          <el-checkbox v-model="nodeallowRebut" :disabled="disabledAllowRebut">允许驳回</el-checkbox><br />
          <el-checkbox v-model="nodeallowReview" :disabled="disabledAllowReview">允许转审</el-checkbox>
        </el-form-item>
        <el-form-item label="权限" v-show="type === 'Node'">
          <el-tooltip class="item" effect="dark" content="权限设置分机构、角色、用户三种设置，最终具备权限的用户为既有机构权限又有角色权限的人再加上用户设置的用户" placement="right">
            <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="部门" v-show="type === 'Node'">
          <el-tooltip class="item" effect="dark" :content="organName" placement="top-start">
            <el-input v-model="organName" :disabled="true">
              <el-button slot="append" @click="selectBranch">选择</el-button>
            </el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="角色" v-show="type === 'Node'">
          <el-tooltip class="item" effect="dark" :content="roleNames" placement="top-start">
            <el-input disabled :value="roleNames">
              <el-button slot="append" @click="roleSelectDialogVisible=true">选择</el-button>
            </el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="用户" v-show="type === 'Node'">
          <el-tooltip class="item" effect="dark" :content="user.join()" placement="top-start">
            <el-input disabled :value="user.join()">
              <el-button slot="append" @click="userSelectDialogVisible=true">选择</el-button>
            </el-input>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <el-dialog title="选择部门" :visible.sync="branchSelectDialog" width="30%">
        <branch-tree :showCheckBox="true" :defaultChecked.sync="organ" @getCheckedNodes="getCheckedNodes">
        </branch-tree>
        <div slot="footer">
          <el-button type="primary" @click="branchSelectDialog = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <!-- 选择角色弹框 -->
    <role-select-dialog :role-select-show.sync="roleSelectDialogVisible" :role-codes="role.join()" @callback="roleSelectDialogCallback"></role-select-dialog>

    <!-- 选择用户弹框 -->
    <user-select-dialog :user-select-show.sync="userSelectDialogVisible" :to-users="user.join()" @callback="userSelectDialogCallback"></user-select-dialog>

  </div>
</template>

<script>
import { makeSourceAndTarget } from '../canvas/legendUtil.js'
import { getObjectValue } from './panelUtil'
import TreeSelect from '@src/components/TreeSelect.vue'
import branchTree from './branchTree.vue'
import userSelectDialog from '../../platform/components/UserSelectDialog.vue'
import roleSelectDialog from '../../platform/roleSelectDialog.vue'

export default {
  data() {
    return {
      organs: [],
      roles: [],
      users: [],
      treeItemsOptions: {
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      branchSelectDialog: false,
      roleSelectDialogVisible: false,
      userSelectDialogVisible: false,
      organName: ''
    }
  },
  computed: {
    userNames: {
      get(){
        return ''
      }
    },
    roleNames: {
      get(){
        let names = []
        let role = this.role || []
        role.forEach(i => {
          let role = this.roles.find(j => j.roleCode === i)
          let {name} = role || {}
          name && names.push(name)
        })
        return names.join()
      }
    },
    disabledAllowRevoke: {
      get() {
        return this.$store.state.workFlow.disabledAllowRevoke
      }
    },
    disabledAllowRebut: {
      get() {
        return this.$store.state.workFlow.disabledAllowRebut
      }
    },
    disabledAllowReview: {
      get() {
        return this.$store.state.workFlow.disabledAllowReview
      }
    },
    name: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'name')
      },
      set(value) {
        const { id } = this.$store.getters.currentNode
        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'name',
          value
        })

        let instance = window._jsPlumbInstance

        setTimeout(() => {
          if (!this.$store.getters.currentNode.lines.length) {
            const el = document.getElementById('legend' + this.$store.getters.currentNode.id)
            instance.unmakeSource(el)
            instance.unmakeTarget(el)
            makeSourceAndTarget(instance, el)
          }
          instance.repaintEverything()
        }, 100)
      }
    },
    type: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'type')
      }
    },
    signJointly: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'signJointly', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'signJointly',
          value
        })
      }
    },
    allowAddActionMessage: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'allowAddActionMessage', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'allowAddActionMessage',
          value
        })
      }
    },
    allowSelectUser: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'allowSelectUser', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'allowSelectUser',
          value
        })
      }
    },
    nodeallowRevoke: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'allowRevoke', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'allowRevoke',
          value
        })
      }
    },
    nodeallowRebut: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'allowRebut', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'allowRebut',
          value
        })
      }
    },
    nodeallowReview: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'allowReview', false)
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'allowReview',
          value
        })
      }
    },
    organ: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'organ', [])
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'organ',
          value
        })
      }
    },
    role: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'role', [])
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'role',
          value
        })
      }
    },
    user: {
      get() {
        return getObjectValue(this.$store.getters.currentNode, 'user', [])
      },
      set(value) {
        const { id } = this.$store.getters.currentNode

        this.$store.dispatch('updateNodeField', {
          id,
          fieldName: 'user',
          value
        })
      }
    }
  },
  methods: {
    userSelectDialogCallback(userNames){
      this.user = (userNames || '').split(',')
    },
    roleSelectDialogCallback(roleCodes){
      this.role = (roleCodes || '').split(',')
    },
    getCheckedNodes(val) {
      this.organName = val.map(item => item.name).join(',')
      this.organ = val.map(item => item.branchInnerCode)
    },
    selectBranch() {
      this.branchSelectDialog = true
    }
  },
  watch: {
    organ(val) {
      let nameArr = []
      function getOrganName(data, codeArr) {
        for (let i = 0; i < data.length; i++) {
          if (codeArr.includes(data[i].branchInnerCode)) {
            nameArr.push(data[i].name)
          }
          if (data[i].children && data[i].children.length > 0) {
            getOrganName(data[i].children, codeArr)
          }
        }
      }
      getOrganName(this.organs, val)
      this.organName = nameArr.join(',')
    }
  },
  async created() {
    let branchesResp = await axios.get('/ui/branches')
    this.organs = branchesResp.data.data
    let rolesResp = await axios.get('/ui/roles')
    this.roles = rolesResp.data.data
    let usersResp = await axios.get('/ui/users')
    this.users = usersResp.data.data
  },
  components: {
    'tree-select': TreeSelect,
    'branch-tree': branchTree,
    'user-select-dialog': userSelectDialog,
    'role-select-dialog': roleSelectDialog
  }
}
</script>

<style>

</style>
