<template>
<div>
    <div class="header">
        <template>
            <Form :model="tittleformItem" :label-width="120">
                <Row>
                    <Col span="6">
                        <FormItem label="用户侧接口：">
                            <Select v-model="tittleformItem.type">
                                <Option value="1">新增</Option>
                                <Option value="0">已有</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="模块编码：">
                            <Select v-model="tittleformItem.center_code">
                                <Option v-for="(item,index) in menuList" :key="index" :value="item.center_code">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="URL：">
                            <Input v-model="tittleformItem.url"></Input>
                        </FormItem>
                    </Col>
                    <Col span="4" offset="2">
                            <Button @click="selectList" type="success">搜索</Button>
                    </Col>
                </Row>
            </Form>
        </template>
    </div>
    <div class="body">
        <template>
            <Table :loading="loading" border :columns="columns" :data="dataList">
                <template slot-scope="{ row }" slot="state">
                    <div v-if="row.state==='1'">不可用</div>
                    <div v-if="row.state==='0'">可用</div>
                </template>
                <template slot-scope="{ row }" slot="type">
                    <div v-if="row.type==='1'">需要登录</div>
                    <div v-if="row.type==='0'">无需登录</div>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div v-if="row.state==='1'">
                        <Button type="success" size="small" style="margin-right: 5px" @click="saveuservisit(row)">启用</Button>
                    </div>
                    <div v-if="row.state==='0'">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="updateuservisit(row)">修改</Button>
                        <Button type="error" size="small" @click="deleteuservisit(row)">删除</Button>
                    </div>
                </template>
            </Table>
        </template>
        <br>
        <Row type="flex" justify="end">
            <Page :total="total" @on-change="pageChange" :page-size="pageSize"/>
        </Row>
        <Modal
                v-model="modal1"
                @on-ok="ok"
        >
            <p style="margin-top: 20px">确实要删除此用户侧接口吗？</p>
        </Modal>
        <modal @init="init" ref="modal" :row="row" :updaterow="updaterow"></modal>
    </div>
</div>
</template>

<script>
import { delUserVisit, getDictInfoList, getUserVisitList } from '../../../api/system/sys-user-port-list'
import modal from './components/modal'

export default {
  name: 'WlUserPortList',
  components: {
    modal
  },
  data () {
    return {
      updatemodal: false,
      modal1: false,
      loading: true,
      buttonSize: 'large',
      tittleformItem: {
        type: '1',
        center_code: '',
        url: ''
      },
      menuList: [],
      dataList: [],
      columns: [
        {
          title: '接口',
          key: 'id',
          width: 200,
          align: 'center'
        },
        {
          title: '接口地址',
          key: 'url',
          width: 200,
          align: 'center'
        },
        {
          title: '状态',
          slot: 'state',
          align: 'center'
        },
        {
          title: '登录类型',
          slot: 'type',
          align: 'center'
        },
        {
          title: '说明',
          key: 'name',
          align: 'center'
        },
        {
          title: '更新时间',
          key: 'update_date',
          width: 200,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      total: 0,
      pageNo: 1,
      pageSize: 12,
      deleteRow: {},
      row: {},
      updaterow: {}
    }
  },
  methods: {
    init () {
      getDictInfoList().then(ret => {
        if (ret.data.errcode === 0) {
          this.menuList = ret.data.data
          this.getUserVisitList()
        }
      })
    },
    getUserVisitList () {
      this.loading = true
      let data = {
        center_code: this.tittleformItem.center_code,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: this.tittleformItem.type,
        url: this.tittleformItem.url
      }
      getUserVisitList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.total = ret.data.data.totalRecord
          this.dataList = ret.data.data.results
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    pageChange (value) {
      this.pageNo = value
      this.getUserVisitList()
    },
    selectList () {
      this.pageNo = 1
      this.getUserVisitList()
    },
    saveuservisit (row) {
      this.row = row
      this.$refs.modal.change()
    },
    updateuservisit (row) {
      this.updaterow = row
      this.$refs.modal.change()
    },
    deleteuservisit (row) {
      this.modal1 = true
      this.deleteRow = row
    },
    ok () {
      delUserVisit(this.deleteRow).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success(ret.data.errmsg)
          this.getUserVisitList()
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.header{
    margin-top: 25px;
}
</style>
