<template>
  <div id="outlink-list-config" class="outlink-list-config">
    <div class="outlink-top-button-zone">
      <el-button type="primary" @click="addOutlink" 
      v-permission="permissionBtn.outlinkConfigPermission.outlinkListConfig_add">添加菜单</el-button>
    </div>
    <el-table :data="outlinkData" border @sort-change="sortChange">
      <el-table-column label="菜单名称" prop="Title" align="center">
        <template slot-scope="{ row }">
          {{ row.Title }}
        </template>
      </el-table-column>
      <el-table-column label="页面链接" prop="Url" align="center">
        <template slot-scope="{ row }">
          {{ row.Url }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="CreateTime" align="center" sortable >
        <template slot-scope="{ row }">
          {{ row.CreateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <span class="table-button" @click="editOutlink(row)" 
          v-permission="permissionBtn.outlinkConfigPermission.outlinkListConfig_edit">编辑</span>
          <span class="table-button" style="color: #C54322;" @click="deleteOutlink(row)"
          v-permission="permissionBtn.outlinkConfigPermission.outlinkListConfig_del">删除</span>
        </template>
      </el-table-column>
      <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
        <tableNoData text="暂无数据" size="mini"/>
      </div>
    </el-table>
    <m-page
      :page_no="queryParams.CurrentIndex"
      :pageSize="queryParams.PageSize"
      :total="total"
      @handleCurrentChange="pageChange"
      style="margin-top: 20px;"
    />
    <el-dialog 
    :append-to-body="true" 
    :visible.sync="addOutlinkShow" 
    width="600px" 
    :title="dialogTitle"
    :close-on-click-modal="false"
    center @close="resetForm">
      <div class="form-box">
        <el-form
        :model="outlinkForm"
        ref="outlinkFormRef"
        label-width="90px">
          <el-form-item prop="Title" label="菜单名称" :rules="{required:true,message:'菜单名称不能为空',trigger:'blur'}">
              <el-input v-model="outlinkForm.Title" placeholder="请输入菜单名称" style="width: 295px;"></el-input>
          </el-form-item>
          <el-form-item prop="Url" label="页面链接" :rules="{required:true,message:'URL不能为空',trigger:'blur'}">
              <el-input v-model="outlinkForm.Url" placeholder="请输入URL" style="width: 295px;"></el-input>
          </el-form-item>
          <div class="form-box-buttons-zone">
            <el-button style="width: 120px;height: 40px;" @click="addOutlinkShow=false">取消</el-button>
            <el-button type="primary" @click="addOutlinkSave" style="margin-left:30px;width: 120px;height: 40px;">确定</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {outlinkConfigInterence} from "@/api/modules/etaBaseConfigApi.js"
import mPage from '@/components/mPage.vue';

  export default {
    name:"outlinkListConfig",
    components:{mPage},
    data() {
      return {
        outlinkData:[],
        queryParams:{
          CurrentIndex:1,
          PageSize:10,
          SortParam:'create_time',
          SortType:''
        },
        total:0,
        dialogTitle:"",
        addOutlinkShow:false,
        outlinkForm:{
          Title:"",
          Url:""
        }
      }
    },
    created(){
      this.getOutlinkData()
    },
    methods: {
      getOutlinkData(){
        if(!this.permissionBtn.checkPermissionBtn(this.permissionBtn.outlinkConfigPermission.outlinkListConfig_list)) return 
        outlinkConfigInterence.getOutlinkList(this.queryParams).then(res=>{
          if(res.Ret == 200){
            this.outlinkData = res.Data.List || []
            this.total =res.Data.Paging?res.Data.Paging.Totals || 0:0
          }
        })
      },
      pageChange(page_no){
        this.queryParams.CurrentIndex=page_no
        this.getOutlinkData()
      },
      sortChange({ prop,order }){
        // console.log(prop,order);
        this.queryParams.SortType = order?order=="descending"?"desc":"asc":""
        this.getOutlinkData()
      },
      addOutlink(){
        this.dialogTitle="添加菜单"
        this.addOutlinkShow=true
      },
      editOutlink(item){
        this.outlinkForm=item
        this.dialogTitle="编辑菜单"
        this.addOutlinkShow=true
      },
      resetForm(){
        this.outlinkForm={
          Title:"",
          Url:""
        }
        this.$refs.outlinkFormRef.clearValidate()
      },
      addOutlinkSave(){
        this.$refs.outlinkFormRef.validate((valid)=>{
          if(valid){
            outlinkConfigInterence.outlinkSave(this.outlinkForm).then(res=>{
              if(res.Ret == 200){
                this.$message.success(`${this.dialogTitle}成功`)
                this.addOutlinkShow=false
                this.getOutlinkData()
              }
            })
          }
        })
      },
      deleteOutlink(item){
        this.$confirm("删除后不可恢复，确认删除吗？", "提示", {
          type: "warning"
        }).then(() => {
          outlinkConfigInterence.outlinkDelete({Id:item.Id}).then(res=>{
            if(res.Ret == 200){
              this.$message.success("删除菜单成功")
              this.getOutlinkData()
            }
          })
        }).catch(() => {});
      }
    },
  }
</script>

<style lang="scss" scoped>
  .outlink-list-config{
    min-height: calc(100vh - 120px);
    height:calc(100vh - 120px);
    background-color: white;
    border: solid 1px #DCDFE6;
    box-sizing: border-box;
    padding: 30px;
    .outlink-top-button-zone{
      margin-bottom: 30px;
    }
    .table-button{
      font-size: 14px;
      cursor: pointer;
      color: #0052D9;
      margin-right: 8px;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .form-box{
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 30px;
      .form-box-buttons-zone{
        text-align:center;
        margin-bottom:35px;
        margin-top:120px;
      }
    }
</style>