<template>
<div>
  <el-dialog
    v-dialogDrag
    title=""
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-single"
    width="80%"
  >
    <section class="staffBoxFlex">
       <el-table :data="tableData" ref="districtTable"  max-height="500" default-expand-all  row-key="id">
           <el-table-column v-for="(item,index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" :width="item.width" >
                <template slot-scope="scope">                    
                    <span>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                min-width="180">
                <template slot="header" slot-scope="scope">
                   <span class="columnHeader">
                       <strong>操作</strong>
                   </span>
                </template>
                <template slot-scope="scope">                   
                    <el-button type="text" size="small" class="primaryColor" @click="editor(scope.row)">编辑</el-button>
                  <!--   <el-button @click="resetPWDStaff(scope.row)" type="text" size="small" class="primaryColor" v-if="domainAdmin||permissionsStr.indexOf('ResetPwd')>-1">重置密码</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </section>
  </el-dialog>
  <SqlEditor :editroshowdialog.sync="editroshowdialog" ref="popChildren"></SqlEditor>
</div>
</template>
<script>
import { getChangeMappingDetailsApi } from "@/api/staffApi.js"
import SqlEditor from './components/Editor.vue'
export default {
  components:{SqlEditor},
  data(){
    return {
      tableData:[],
      dialogFormVisible: this.showdialog,
      editroshowdialog:false,
      tableColumn:[
        {prop:"id",label:"id",width:"80",show:true,version:5},
        {prop:"mapKey",label:"mapKey",width:"150",show:true,version:5},
        {prop:"note",label:"note",width:"150",show:true,version:5},
        {prop:"online",label:"online",width:"150",show:true,version:5},
        {prop:"template",label:"template",width:"400",show:true,version:5},
      ]
    }
  },
  watch: {
    showdialog() {
      this.dialogFormVisible = this.showdialog;
    },
  },
  props:['showdialog'],
  methods:{
    getChangeMappingDetails(e){
      console.log(e)
      getChangeMappingDetailsApi({id:e}).then(res => {
        console.log(res)
        if(res){
          this.tableData = [res]
        }
      })
    },
   cancelForm() {
      //取消关闭
      this.$emit("update:showdialog", false);
    },
    editor(e){
            console.log(e)
            let params = JSON.stringify(e)
            this.$refs.popChildren.initialization(params);
            this.editroshowdialog = true
        }
  }

}
</script>
<style lang="scss">
 .staffBoxFlex{
     display: flex;
     flex-direction: column;
     width: 100%;
     .staffTitle{
         display: flex;
         justify-content: space-between;
         border-bottom: 1px solid #ebebeb;
         padding: 5px 0;
         margin-bottom: 10px;
         strong{
             color: #000;
             font-weight: normal;
         }
         em{
             margin-right:20px;
             i{color: #2e8ad7;margin-right:20px;cursor: pointer;}
         }
     }
    
 }   
</style>