<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
        >
        <Button
          type="primary"
          size="small"
          style="margin-right: 6px"
          @click="clone(scope)"
          >克隆</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, clone } 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 {
      inputValue: "",
      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,
    clone ({ row }) {
      const h = this.$createElement;
      this.$msgbox({
        title: "表克隆",
        message: h("div", [
          h("span", `克隆表:${row.name}`)
        ]),
        showCancelButton: true,
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            clone({
              table_name: row.table_name
            }).then(res => {
              instance.confirmButtonLoading = false;
              done();
              this.$refs['xyTable'].getTableData()
              this.$message({
                type: 'success',
                message: '克隆成功'
              })
            }).catch(err => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        },
      }).then((action) => {
      });
    },
  },
  computed: {},
  mounted() {},
};
</script>

<style scoped lang="scss">
.form-input {
  display: block;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  line-height: 2;
  transition: all 0.2s;
  padding: 0 15px;
  margin-top: 10px;
  &:hover {
    border-color: #c0c4cc;
  }
  &:focus {
    outline: none;
    border-color: #0077cc;
  }
}
</style>
