<template>
  <a-modal
    :title="this.BaseTool.String.isBlank(roleId)?'添加':'编辑'"
    :width="640"
    :visible="visible"
    class="ant-modal2"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="角色名称"
        v-show="false"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['roleId']" type="hidden" />
      </a-form-item>

      <a-form-item
        label="角色名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['roleName', {rules: [{required: true}]}]" />
      </a-form-item>
      <a-form-item
        label="角色标识"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['roleCode', {rules: [{required: true}]}]" />
      </a-form-item>

      <a-form-item
        label="客户端"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select :disabled="true" v-decorator="['clientId', {rules: [{required: true}]}]">
          <a-select-option
            v-for="item in clientIds"
            :key="item.clientId"
            :label="item.name"
            :value="item.clientId">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="正常"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-switch @change="onSwitchChange" :checked="checked" />
      </a-form-item>

      <a-form-item
        label="排序"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['sort', {initialValue:1,rules: [{required: true, message: '排序不能为空'}]}]" type="number" />
      </a-form-item>

      <a-form-item
        label="描述"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['remark']" />
      </a-form-item>
      <a-form-item
        label="选择菜单"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-tree
          checkable
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          v-model="checkedKeys"
          @check="onCheck"
          @select="onSelect"
          :selectedKeys="selectedKeys"
          :treeData="treeData"
        />
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addRole, updateRole } from '@/api/upms/role'
import { queryClientDetail } from '@/api/upms/oauth-client-detail'

export default {
  name: 'RoleBase',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      checked: true,
      confirmLoading: false,
      currentStep: 0,
      mdl: {},
      roleId: null,
      menuList: [],
      parentMenus: [],
      autoExpandParent: true,
      expandedKeys: [],
      selectedKeys: [],
      halfCheckedKeys: [],
      changed: false,
      checkedKeys: [],
      clientIds: [],
      form: this.$form.createForm(this),
      visible: false,
      treeData: []
    }
  },
  props: {
    menus: {
      type: Array,
      default: () => ({})
    }
  },
  created () {
    // 查询客户端
    this.getClientIds()
  },
  methods: {
    base (record, clientId) {
      const { form: { setFieldsValue } } = this
      this.treeData = this.renderTreeNodes(this.menus)
      this.visible = true
      // 如果是空标识添加
      if (this.BaseTool.Object.isBlank(record)) {
        this.$nextTick(() => {
          setFieldsValue({ clientId: clientId })
        })
        return
      }

      this.$nextTick(() => {
        this.roleId = record.roleId
        if (record.status === 1) {
          this.checked = true
        }
        this.menuList = record.menus
        if (this.BaseTool.Object.isNotBlank(record.menus)) {
          this.checkedKeys = record.menus.map(item => {
            return item.value
          })
        }
        if (this.BaseTool.Object.isNotBlank(record.parentMenus)) {
          this.halfCheckedKeys = record.parentMenus
        }
        setFieldsValue(pick(record, ['roleId', 'roleName', 'roleCode', 'remark', 'clientId', 'sort']))
      })
    },
    getClientIds () {
      queryClientDetail().then(res => {
        this.clientIds = res.data
      })
    },
    onSwitchChange (checked) {
      this.checked = !this.checked
    },
    save () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        if (this.BaseTool.String.isBlank(this.roleId)) {
          addRole({ ...values, menuIdList: [...this.checkedKeys, ...this.halfCheckedKeys], status: this.checked ? 1 : 2 })
            .then(() => {
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        } else {
          updateRole({ ...values, menuIdList: [...this.checkedKeys, ...this.halfCheckedKeys], status: this.checked ? 1 : 2 })
            .then(() => {
              this.handleCancel()
            }).catch(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    handleCancel (values) {
      this.visible = false
      this.form.resetFields()
      this.checked = true
      this.roleId = null
      this.checkedKeys = []
      this.confirmLoading = false
      this.$emit('ok', values)
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.halfCheckedKeys = info.halfCheckedKeys
      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
    renderTreeNodes (data) {
      if (this.BaseTool.Object.isBlank(data)) {
        return null
      }

      return data.map(item => {
        return { key: item.key, title: item.title, children: this.renderTreeNodes(item.children) }
      })
    }

  }
}
</script>
