<template>
    <div>
        <template>
            <Table border :columns="columns" :data="dataList" :loading="loading">
                <template slot-scope="{ row }" slot="url">
                    <div v-html="row.url"></div>
                </template>
                <template slot-scope="{ row }" slot="type">
                    <div v-if="row.type==='s'">
                        XML
                    </div>
                    <div v-if="row.type==='c'">
                        Class
                    </div>
                </template>
                <template  slot-scope="{ row }"  slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="getRoleList(row)">权限范围</Button>
                    <!--<Button type="primary" size="small" style="margin-right: 5px">设置权限</Button>-->
                    <Button type="primary" size="small" @click="update(row)">编辑</Button>
                </template>
            </Table>
        </template>
        <Page style="margin-top: 20px" :total="total" @on-change="pageChange" :page-size="pageSize"/>
        <Modal
                v-model="modal1"
                title="权限范围"
                width="800"
                @on-cancel="cancel1">
            <Row>
                <Col span="12">
                    <Card style="width:350px;height: 350px; overflow: auto;overflow-x: hidden;">
                        <List header="接口授权的菜单："  border>
                            <ListItem v-for="(item,index) in menuList" :key="index">{{item.name}}</ListItem>
                        </List>
                    </Card>
                </Col>
                <Col span="12">
                    <Card style="width:350px;height: 350px; overflow: auto;overflow-x: hidden;">
                        <List header="接口授权的角色："  border>
                            <ListItem v-for="(item,index) in roleList" :key="index">{{item.name}}</ListItem>
                        </List>
                    </Card>
                </Col>
            </Row>
        </Modal>
        <Modal
                v-model="modal2"
                title="权限设置"
                @on-ok="ok2"
                @on-cancel="cancel2">
        </Modal>
        <Modal
                v-model="modal3"
                title="接口基本信息"
                width="1200"
                @on-ok="ok3"
                @on-cancel="cancel3">
            <template>
                <Form :model="updateformItem" :label-width="120">
                    <FormItem label="接口名称："  >
                        <Input v-model="updateformItem.name" disabled ></Input>
                    </FormItem>
                    <FormItem label="接口标识：">
                        <Input v-model="updateformItem.id" disabled ></Input>
                    </FormItem>
                    <FormItem label="接口类型：">
                        <RadioGroup v-model="updateformItem.type"  >
                            <Radio label="c" disabled>方法类接口</Radio>
                            <Radio label="s" disabled>XML类接口</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="权限表示：">
                        <Input v-model="updateformItem.auth_code"></Input>
                    </FormItem>
                    <FormItem label="请求头信息：">
                        <RadioGroup v-model="updateformItem.gain_header">
                            <Radio label="1">获取</Radio>
                            <Radio label="0">不获取</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="开启缓存：">
                        <i-switch v-model="updateformItem.cache_flag" true-value="1" false-value="0" size="large">
                            <span slot="1">On</span>
                            <span slot="0">Off</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="描述：">
                        <Input v-model="updateformItem.description"></Input>
                    </FormItem>
                    <FormItem label="排序：">
                        <Input v-model="updateformItem.description"></Input>
                    </FormItem>
                    <FormItem label="备注信息：">
                        <Input v-model="updateformItem.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>
                    <FormItem label="接口添加时间：" >
                        <Input v-model="updateformItem.update_date" disabled ></Input>
                    </FormItem>
                </Form>
            </template>
        </Modal>
    </div>
</template>

<script>
import { getList, getRoleList, getById, save } from '../../../../../api/system/sys-port-list'

export default {
  name: 'tableList',
  props: {
    tittleformItem: Object
  },
  data () {
    return {
      columns: [
        {
          title: '接口标识',
          key: 'name',
          width: 200
        },
        {
          title: 'URL',
          slot: 'url'
        },
        {
          title: '类型',
          slot: 'type'
        },
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      dataList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      loading: true,
      modal1: false,
      modal2: false,
      modal3: false,
      roleList: [],
      menuList: [],
      updateformItem: {},
      formloading: false
    }
  },
  methods: {
    update (row) {
      this.modal3 = true
      let data = {
        id: row.id
      }
      getById(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.updateformItem = ret.data.data
        } else {
          this.modal3 = false
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    getRoleList (row) {
      let data = row
      getRoleList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.roleList = ret.data.data.roleList
          this.menuList = ret.data.data.menuList
          this.modal1 = true
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    ok2 () {},
    ok3 () {
      save(this.updateformItem).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal3 = false
          this.$Message.success(ret.data.errmsg)
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    cancel1 () {
      this.modal1 = false
    },
    cancel2 () {
      this.modal2 = false
    },
    cancel3 () {
      this.modal3 = false
    },
    init () {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        center_code: this.tittleformItem.center_code,
        auth_type: this.tittleformItem.auth_type,
        type: this.tittleformItem.type,
        url: this.tittleformItem.url
      }
      getList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.total = ret.data.data.totalRecord
          this.dataList = ret.data.data.results
          this.loading = false
        }
      })
    },
    pageChange (value) {
      this.pageNo = value
      this.init()
    }
  }
}
</script>

<style scoped>

</style>
