<style>
  .zk-table--level-2-cell{
    margin-left: 0px;
  }
</style>
<template>
<div>
    <Row type="flex" justify="center" align="middle">
        <Col span="20">
            <Button @click="addinfo">新增</Button>
        </Col>
        <Col span="20">
            <tree-table expand-key="id" :expand-type="false" :selectable="false"  :is-fold="false" :columns="columns" :data="list" >
                <template slot="option" slot-scope="scope">
                <Button @click="edit(scope)">编辑</Button>
                </template>
                <template slot="is_active" slot-scope="scope">
                {{ $t('isactive_' + scope.row.is_active) }}
                </template>
            </tree-table>
        </Col>
    </Row>
    <Modal v-model="isadd" :closable="false">
         <Form ref="form" :model="formdata" :rules="formrule" :label-width="100">
            <Form-item label="标志名" prop="flag_bit">
                <Input type="text" v-model="formdata.flag_bit"></Input>
            </Form-item>
            <Form-item label="名称" prop="name">
                <Input type="text" v-model="formdata.name"></Input>
            </Form-item>
            <Form-item label="分组" prop="pre_id">
                <Select v-model="formdata.pre_id" >
                    <Option :value="0" selected>无分组</Option>
                    <Option v-for="item in groupnamelist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </Form-item>
            <Form-item label="可用" prop="is_active">
                <i-switch v-model="formdata.is_active" @on-change="setisactive">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                </i-switch>
            </Form-item>
        </Form>
        <div slot="footer">
            <Button type="primary" size="large" @click="save">保存</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import { getwebusergrouplist, getgroupname, saverole, updaterole } from '@/api/user'
import { exit } from 'process'
export default {
  name: 'grouplist',
  data () {
    var self = this
    return {
      isadd: false,
      isupdate: false,
      formdata: {
        id: 0,
        flag_bit: '',
        name: '',
        pre_id: 0,
        is_active: true
      },
      formrule: {
        flag_bit: [
          { required: true, message: '标志名必填', trigger: 'blur' },
          { type: 'string', pattern: /^[a-z0-9]{4,}$/, message: '英文或数字 最少4位', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '组名必填', trigger: 'blur' }
        ]
      },
      groupnamelist: [],
      list: [],
      columns: [
        {
          title: 'ID',
          key: 'id',
          width: '80px'
        },
        {
          title: '标志名',
          key: 'flag_bit'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '状态',
          key: 'is_active',
          type: 'template',
          template: 'is_active'
        },
        {
          title: '操作',
          key: 'option',
          type: 'template',
          template: 'option'
        }
      ]
    }
  },
  methods: {
    getList () {
      getwebusergrouplist().then(res => {
        const data = res.data
        if (data.code === 200) {
          this.list = data.data
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    edit (scope) {
      this.getgroupname()
      this.$refs['form'].resetFields()
      this.isadd = true
      this.isupdate = true
      this.formdata = scope.row
      if (this.formdata.is_active === 1) {
        this.formdata.is_active = true
      } else {
        this.formdata.is_active = false
      }
    },
    getgroupname () {
      getgroupname().then(res => {
        const data = res.data
        if (data.code === 200) {
          this.groupnamelist = data.data
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    setisactive (result) {
      if (result) {
        this.formdata.is_active = 1
      } else {
        this.formdata.is_active = 0
      }
    },
    save () {
      if (this.formdata.id > 0) {
        updaterole(this.formdata).then(res => {
          const data = res.data
          if (data.code === 200) {
            this.getList()
            this.isadd = false
            this.$refs['form'].resetFields()
          } else {
            this.$Message.error(data.msg)
          }
        })
      } else {
        saverole(this.formdata).then(res => {
          const data = res.data
          if (data.code === 200) {
            this.getList()
            this.isadd = false
            this.$refs['form'].resetFields()
            this.getgroupname()
          } else {
            this.$Message.error(data.msg)
          }
        })
      }
    },
    addinfo () {
      this.getgroupname()
      this.formdata.id = 0
      this.isadd = true
      this.isupdate = false
      this.$refs['form'].resetFields()
    }
  },
  mounted () {
    this.getList()
    this.getgroupname()
  }
}
</script>
