<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :before-close="handleClose"
    >
      <template #title>
        <div class="btns">
          <span class="title">{{ custom_form.name }}</span>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh-right"
            circle
            @click="$store.dispatch('form/getFormList', custom_form_id)"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            circle
            @click="update({ id:custom_form_id })"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-check"
            circle
            @click="submit"
          ></el-button>
        </div>
      </template>
      <template>
        <div style="height: 100%">
          <Split v-model="splitL" :min="0.05">
            <template #left>
              <draggable
                v-model="types"
                :sort="false"
                :group="{ name: 'items', pull: 'clone' }"
              >
                <div class="type-item" v-for="item in types">
                  {{ item.name }}
                </div>
              </draggable>
            </template>
            <template #right>
              <Split v-model="splitR" :min="0.2">
                <template #left>
                  <div style="height: 100%">
                    <el-dialog
                      id="template-dialog"
                      :title="custom_form.name || '模板表单'"
                      style="position: relative; inset: 0 0 0 0; height: 100%"
                      width="600px"
                      top="40px"
                      :visible="true"
                      :modal="false"
                      :append-to-body="false"
                      :modal-append-to-body="false"
                    >
                      <template>
                        <el-form
                          style="min-height: 200px;"
                          label-width="80px"
                          label-position="right"
                          size="small"
                        >
                          <draggable
                            :value="formList"
                            group="items"
                            @change="changeHandler"
                          >
                            <el-form-item
                              :label="i.name || '字段名称'"
                              :required="
                                i.validation instanceof Array ? !!i.validation.find(i => i === 'required') : false
                              "
                              v-for="(i, index) in formList"
                              @click.native="selectPick(i, index)"
                            >
                              <formSlotRender
                                :config="i"
                                :index="index"
                              ></formSlotRender>
                            </el-form-item>
                          </draggable>
                        </el-form>
                      </template>

                      <div slot="footer">
                        <div>
                          <el-button>取 消</el-button>
                          <el-button type="warning" plain>重 置</el-button>
                          <el-button type="primary">确 定</el-button>
                        </div>
                      </div>
                    </el-dialog>
                  </div>
                </template>
                <template #right>
                  <editPane :rules="rules" :types="types"></editPane>
                </template>
              </Split>
            </template>
          </Split>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { index, config } from "@/api/system/customFormField";
import { mapState } from "vuex";
import { deepCopy } from "@/utils";
import { update } from "@/api/system/customForm";

import formSlotRender from "../components/formSlotRender.vue";
import editPane from "../components/editPane.vue";
export default {
  components: {
    formSlotRender,
    editPane,
  },
  data() {
    return {
      //分割面板
      splitL: 0.13,
      splitR: 0.7,

      custom_form: {},
      custom_form_id: "",
      dialogVisible: false,

      types: [], //输入类型
      rules: [],
    };
  },
  methods: {
    deepCopy,update,
    show() {
      this.dialogVisible = true;
    },
    hidden() {
      this.dialogVisible = false;
    },
    /**
     * @param key:string | array
     * @param value:string | array
     **/
    set(key, value) {
      if (
        key instanceof Array &&
        value instanceof Array &&
        key?.length === value?.length
      ) {
        key.forEach((k, i) => {
          this[k] = value[i];
        });
      } else if (typeof key === "string") {
        this[key] = value;
      } else {
        throw new Error("参数key类型错误");
      }
    },
    handleClose(done) {
      this.$confirm("确认退出？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //获取列表数据
    async getConfig() {
      const { edit_to_migration, validation_rules } = await config(false);
      this.types = edit_to_migration;
      this.rules = validation_rules;
    },

    selectPick(i, index) {
      this.$store.commit("form/SET_SELECTED_INDEX", index);
      this.$store.commit("form/SET_SELECTED", deepCopy(i));
    },
    //拖拽
    changeHandler(e) {
      if (e.added) {
        const { element, newIndex } = e.added;
        const originalData = element;
        const newItem = {
          id: "",
          custom_form_id: this.custom_form_id,
          field: "",
          name: "",
          parameter_id: "",
          search_input: originalData.edit_input,
          edit_input: originalData.edit_input,
          sort: newIndex,
          help: "",
          validation: "",
          select_item: "",
          list_show: 1,
          form_show: 1,
          is_fix: "",
          width: ""
        };

        this.$store.commit("form/SPLICE_FORM_LIST", {
          index: newIndex,
          length: 0,
          config: newItem,
        });
      }
      if (e.moved) {
        const { element, newIndex, oldIndex } = e.moved;

        if (element?.sort) {
          element.sort = newIndex;
        }

        this.$store.commit("form/SPLICE_FORM_LIST", {
          index: oldIndex,
          length: 1,
        });
        this.$store.commit("form/SPLICE_FORM_LIST", {
          index: newIndex,
          length: 0,
          config: element,
        });
      }
    },

    submit() {
      this.$store.dispatch("form/submit").then((res) => {
        setTimeout(() => {
          update({ id: this.custom_form_id })
            .then((res) => {
              this.$message({
                type: "success",
                message: "数据库同步成功",
              });
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "数据库同步失败，请手动同步",
              });
            });
        }, 2000);
      });
    },
  },
  computed: {
    ...mapState("form", ["selectedForm", "formList", "selectedIndex"]),
  },
  watch: {
    async dialogVisible(newVal) {
      if (newVal) {
        await this.$store.dispatch("form/getFormList", this.custom_form_id);
      }
    },
  },
  created() {
    this.getConfig();
  },
};
</script>

<style scoped lang="scss">
.title {
  font-weight: 600;
  letter-spacing: 2px;

  padding: 0 20px;
}
.type-item {
  min-width: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  color: $primaryColor;
  border: solid 1px $primaryColor;
  border-radius: 0.4em;
  position: relative;
  transition: all 0.2s ease-out;

  padding: 0.5em 1em;
  margin: 0.6em 1em;

  &:hover {
    color: #fff;
    background: $primaryColor;
  }
}
::v-deep .el-dialog__headerbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
::v-deep .el-dialog__header {
  padding: 10px !important;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  position: relative;
}
::v-deep .el-dialog__body {
  height: calc(100% - 62px);
  padding: 8px 0 !important;
}
#template-dialog {
  ::v-deep .el-dialog__header {
    box-shadow: none;
    padding: 20px;
    position: relative;
  }
  ::v-deep .el-dialog__body {
    padding: 30px 20px !important;
  }
}
::v-deep .ivu-split-trigger-vertical {
  width: 2px;
}
::v-deep .ivu-split-trigger-bar-con.vertical {
  display: none;
}
::v-deep .ivu-split-horizontal > .ivu-split-trigger-con {
  width: 2px;
}
::v-deep .ivu-split-pane {
  height: 100%;
  overflow: scroll;

  &::-webkit-scrollbar {
    width: 2px;
  }
}
</style>
