<template>
  <div class="flex-container" >
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="24">
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
               <a-button type="primary" style="margin-right:15px;" @click="showModalMeun('add')">添加菜单</a-button>
              <a-button type="primary" style="margin-right:15px;" @click="showModal('add')">添加</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="small"
      class="flex-filling"
      style="word-break: break-all;"
      :columns="columns"
      :data="rowdata"
      bordered
    >
      <template slot="TandF" slot-scope="text">
        {{text|tableList}}
      </template>
      <template slot="status" slot-scope="text">
        {{text|tableList(["关闭","启用"])}}
      </template>
      <template slot="operation" slot-scope="text, record">
        <span >
          <a @click="showModal(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm :title="record.status == 0?'是否启用此菜单？':'是否关闭此菜单'" @confirm="freeze(record.id,record.status)">
            <a>{{record.status|tableList(["启用","关闭"])}}</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" v-if="record.pcodes.split(',').length<4"/>
          <a @click="showModalNext(record.id)" v-if="record.pcodes.split(',').length<4">添加下一级</a>
        </span>
      </template>
    </s-table>
    <meunmodal ref="model1" @ok="reflashTable()"></meunmodal>
    <meunmodal-meun ref="modelmeun" @ok="reflashTable()"></meunmodal-meun>
    <meunmodal-next ref="modelnext" @ok="reflashTable()"></meunmodal-next>
  </div>
</template>

<script>
import { menuManage,menuRemove,freeze,unfreeze } from '@/api/system'
import STable from '@/components/table/'
import meunmodal from './modal/meunModal'
import meunmodalMeun from './modal/meunModalMeun'
import meunmodalNext from './modal/meunModalNext'


export default {
  name:"menuManage",
  components: {
    STable,
    meunmodal,
    meunmodalMeun,
    meunmodalNext
  },
  data() {
    return {

      columns: [
        { dataIndex: 'name', hide: true, sort: true, title: '菜单名称', description: '123', width: 220 },
        { dataIndex: 'code', sort: true, title: '菜单编号', width: 120 },
        { dataIndex: 'pcode', sort: true, title: '菜单父编号', width: 120 },
        { dataIndex: 'url', sort: true, title: '请求地址', width: 200 },
        { dataIndex: 'num', sort: true, title: '排序', width: 120 },
        { dataIndex: 'levels', sort: true, title: '层级', width: 100 },
        { dataIndex: 'ismenu', sort: true, title: '是否是菜单', width: 120 , scopedSlots: { customRender: 'TandF'} },
        { dataIndex: 'status', sort: true, title: '状态', width: 120, scopedSlots: { customRender: 'status'} },
        { title: '操作', key: 'action', width: 250,scopedSlots: { customRender: 'operation' } }
      ],
      queryParam: {
        menuName: '',
        level: ''
      },

      rowdata: parameter => {
        let params = {
          page: parameter.pageNo,
          limit: parameter.pageSize
        }
        return menuManage(Object.assign(params, this.queryParam)).then(res => {
          // let data_tmp = new Array()
          // data_tmp.push({ code: 0, name: '系统' })
          // res.rows.forEach(element => {
          //   if (!element['pcode']) {
          //     element['pcode'] = 0
          //   }
          //   data_tmp.push(element)
          // })
          // let list = FlatToNested(data_tmp, { idProperty: 'code', parentProperty: 'pcode' })
          let data = {
            data: res.rows,
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            totalCount: res.total
          }

          return data
        })
      }
    }
  },
  methods: {

    //搜索
    reflashTable() {
      this.$refs.table.refresh({ search: true })
    },
    showModal(type) {
      this.$refs.model1.showModal(type)
    },
    showModalMeun(){
      this.$refs.modelmeun.showModal()
    },
    showModalNext(id){
      this.$refs.modelnext.showModal(id)
    },
    //删除
    remove(menuId) {
      let that = this
      menuRemove({ menuId }).then(() => {
        that.$refs.table.refresh({ search: true })
      })
    },
    //冻结菜单
    freeze(menuId,status){
      let params = { menuId }
      if(status == 1){//冻结
        freeze(params).then(res =>{
          if(res.code == 200){
            this.$refs.table.refresh()
          }
        })
      }else{ //解冻
        unfreeze(params).then(res =>{
          if(res.code == 200){
            this.$refs.table.refresh()
          }
        })
      }
    }
  }
}
</script>
<style scoped>
th.column-money,
td.column-money {
  text-align: right !important;
}

.ant-table.ant-table-bordered .ant-table-title {
  border: none !important;
}

.card {
  margin-bottom: 24px;
}

.ant-card-body {
  padding: 0 !important;
}
</style>


