<template>
  <div class="container">
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader icon="md-apps" text="自定义表单" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content"></div>
          <slot>
            <div>
              <Button type="primary" style="margin-left: 10px" @click="$refs['xyTable'].getTableData()">查询</Button>
              <Button type="primary"  style="margin-left: 10px" @click="$refs['addForm'].type = 'add',$refs['addForm'].show()">新增</Button>
            </div>
          </slot>
        </LxHeader>
      </div>
    </div>

    <xy-table
      ref="xyTable"
      :auths="auths_auth_mixin"
      :action="index"
      :destroy-action="destroy"
      :border="true"
      :table-item="table"
      @editor="row => {
        $refs['addForm'].setType('editor');
        $refs['addForm'].setId(row.id);
        $refs['addForm'].show();
      }">
      <template #setting="scope">
        <Button type="primary"
                size="small"
                style="margin-right: 6px;"
                @click="$refs['formEditor'].set(['custom_form_id','custom_form'],[scope.row.id,scope.row]),$refs['formEditor'].show()">字段</Button>
        <Button type="primary"
                size="small"
                style="margin-right: 6px;"
                @click="$refs['linkWith'].set(['tableName','copyTable'],[scope.row.table_name,deepCopy(scope.row)]),$refs['linkWith'].show();">关联</Button>
      </template>
    </xy-table>

    <addForm ref="addForm" @refresh="$refs['xyTable'].getTableData()"></addForm>
    <formEditor ref="formEditor"></formEditor>
    <linkWith ref="linkWith"></linkWith>
  </div>
</template>

<script>
import { index,destroy } from '@/api/system/customForm'
import { authMixin } from "@/mixin/authMixin";

import LxHeader from "@/components/LxHeader/index.vue";
import addForm from "./components/addForm.vue";
import formEditor from "@/views/system/components/formEditor.vue";
import linkWith from "@/views/system/components/linkWith.vue";
import { deepCopy } from "@/utils";
export default {
  components:{
    LxHeader,addForm,formEditor,linkWith

  },
  mixins: [authMixin],
  data() {
    return {
      select:{
        page:1,
        page_size:10
      },
      list:[],
      table:[
        {
          type: 'index',
          label:'编号',
          width:100
        },
        {
          prop:'table_name',
          label:'表名',
          //width:180,
          sortable:'custom',
        },
        {
          prop:'name',
          label:'名称',
         // width:200,
          sortable:'custom',
        },
      ]
    }
  },
  methods: {
    deepCopy,
    index,destroy,

  },
  computed: {},
  mounted() {
  }
}
</script>

<style scoped lang="scss">

</style>
