<template>
    <div>
        <div>
            <Row type="flex">
                <Col span="10" offset="3">
                    <template>
                        <Form :model="formItem" :label-width="100">
                            <FormItem label="角色名称：">
                                <Input v-model="formItem.name" placeholder="必填"></Input>
                            </FormItem>
                            <FormItem label="英文名称：">
                                <Input v-model="formItem.enname" placeholder="必填"></Input>
                            </FormItem>
                            <FormItem label="系统数据：">
                                <RadioGroup v-model="formItem.is_sys">
                                    <Radio label="1">是</Radio>
                                    <Radio label="0">否</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="是否可用：">
                                <i-switch v-model="formItem.useable" true-value="1" false-value="0" size="large">
                                    <span slot="1">On</span>
                                    <span slot="0">Off</span>
                                </i-switch>
                            </FormItem>
                            <Row>
                                <Col span="12">
                                    <FormItem label="数据范围：">
                                        <Select v-model="formItem.data_scope">
                                            <Option value="1">所有数据</Option>
                                            <Option value="2">所在公司及以下数据</Option>
                                            <Option value="3">所在公司数据</Option>
                                            <Option value="4">所在部门及以下数据</Option>
                                            <Option value="5">所在部门数据</Option>
                                            <Option value="8">仅本人数据</Option>
                                            <Option value="9">按明细设置</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <help-info content="给用户建立的角色默认应该选择所在公司数据，让用户只能看到自己和自己之下的机构内容"></help-info>
                                </Col>
                            </Row>

                            <Row>
                                <Col span="12">
                                    <FormItem label="生效范围：">
                                        <Select v-model="formItem.auth_start">
                                            <Option value="1">1</Option>
                                            <Option value="2">2</Option>
                                            <Option value="3">3</Option>
                                            <Option value="4">4</Option>
                                            <Option value="5">5</Option>
                                            <Option value="6">6</Option>
                                            <Option value="7">7</Option>
                                            <Option value="8">8</Option>
                                            <Option value="9">9</Option>
                                            <Option value="99">MAX</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                                <Col span="12">
                                    <FormItem>
                                        <Select v-model="formItem.auth_end">
                                            <Option value="1">1</Option>
                                            <Option value="2">2</Option>
                                            <Option value="3">3</Option>
                                            <Option value="4">4</Option>
                                            <Option value="5">5</Option>
                                            <Option value="6">6</Option>
                                            <Option value="7">7</Option>
                                            <Option value="8">8</Option>
                                            <Option value="9">9</Option>
                                            <Option value="99">MAX</Option>
                                        </Select>
                                    </FormItem>
                                </Col>
                            </Row>
                            <FormItem label="备注：">
                                <Input v-model="formItem.remarks" type="textarea"
                                       :autosize="{minRows: 2,maxRows: 5}"></Input>
                            </FormItem>
                        </Form>
                    </template>
                    <div class="button">
                        <Button type="primary" shape="circle" @click="saveRole" :loading="loading">保存</Button>
                        <Button shape="circle" @click="cancel">取消</Button>
                    </div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { getRoleByID, saveRole } from '../../../../../api/system/system'
import HelpInfo from '../../../../components/help-info/index'

export default {
  name: 'addRole',
  components: { HelpInfo },
  props: {
    row: Object
  },
  data () {
    return {
      formItem: {
        name: '',
        enname: '',
        is_sys: '1',
        useable: true,
        data_scope: '1',
        auth_start: '1',
        auth_end: '99',
        remarks: '',
        role_type: 'assignment'
      },
      udatemsg: {},
      loading: false
    }
  },
  methods: {
    saveRole () {
      this.loading = true
      const data = this.formItem
      saveRole(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.loading = false
          this.$emit('switchTab', '0')
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    cancel () {
      this.$emit('switchTab', '0')
    },
    getByID (value) {
      getRoleByID(value).then(ret => {
        this.formItem = ret.data.data
      })
    },
    clean () {
      this.formItem = {
        useable: '1',
        role_type: 'assignment',
        auth_start: '1',
        auth_end: '99',
        is_sys: '1',
        data_scope: '1'
      }
    }
  },
  mounted () {
  },
  watch: {
    row (row) {
      if (row !== undefined) {
        this.udatemsg = row
        this.getByID(this.udatemsg)
      }
    }
  }
}
</script>
<style scoped>
    .button {
        margin-right: 10px;
    }

    .button button {
        margin-left: 20px;
    }
</style>
