<template>
  <el-dialog
    :visible.sync="showDialog"
    v-el-drag-dialog
    v-el-dialog-center
    v-bind="dialogConfig"
    @close="close"
  >
    <div class="cont designer-view" v-bind="bodyConfig" id="containt">
      <v-form-render
        :form-json.sync="formJson"
        :form-data="formData"
        :option-data="optionData"
        ref="vFormRef"
        :reportTemplate.sync="formTemplate"
        :conditionParam.sync="conditionParam"
        :formInsData.sync="formInsData"
        v-if="showRender"
        visible-key="showRender"
        :parent-target="_self"
        @reload="reload"
        v-bind="formConfig"
        :param="dialogParam"
        class="data-table_height"
      />
    </div>
    <span
      slot="footer"
      class="dialog-footer"
      v-if="option.showFooter !== false"
      v-bind="option.footerConfig"
    >
      <el-button type="primary" plain class="button-sty" @click="close">
        <i class="el-icon-close el-icon"></i>
        {{ $t2("取 消", "system.button.cancel2") }}
      </el-button>
      <el-button type="primary" @click="dialogSubmit" class="button-sty" v-if="confirmButtonVisible">
        <i class="el-icon-check el-icon"></i>
        {{ $t2("确 定", "system.button.confirm2") }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import VFormRender from "../../../../../components/xform/form-render/index.vue";

export default {
  // name: "vabSearchDialog",
  components: { VFormRender },
  props: {
    visiable: Boolean,
    option: Object,
  },
  mixins: [],
  inject: ["getFormConfig"],

  mounted() {},
  data() {
    var that = this;
    return {
      showFormField: "_tt",
      showDialog: true,
      falseValue: false,
      selectMulti: true,

      formJson: {},
      formData: {},
      optionData: {},
      showRender: false,
      formTemplate: {},
      /*      formCode: null,*/
      layoutType: null,
      conditionParam: null,
      formInsData: null,
      $grid: null,
      currentLayoutType: null,
      dataId: null,
      formConfig: {},
      confirmButtonVisible: true
    };
  },
  computed: {
    formCode() {
      return this.option.formCode;
    },
    dialogParam() {
      return this.option?.param;
    },
    /* formConfig() {
      return this.option?.formConfig;
    }, */
    dialogConfig() {
      let customClass = "dialog-style list-dialog dialog-checkbox pd_0";
      if (this.option.dialogConfig?.customClass) {
        customClass = customClass + " " + this.option.dialogConfig.customClass;
      }
      let config = {
        title: this.formTemplate.formName,
        appendToBody: true,
        modalAppendToBody: true,
        closeOnClickModal: false,
        modal: false,
        width: "1200px",
        fullscreen: this.option.fullscreen,
      };
      config = Object.assign({}, config, this.option.dialogConfig, { customClass });
      config.title = this.$t1(config.title);
      return config;
    },
    bodyConfig() {
      let config = {};
      let classStr = this.currentLayoutType;
      if (this.option.bodyConfig?.class) {
        classStr = classStr + " " + this.option.bodyConfig.class;
      }
      if (this.option.showFooter == false) {
        classStr = classStr + " nfootBtn";
      }
      config = Object.assign({}, config, this.option.bodyConfig, { class: classStr });
      return config;
    },
  },
  created() {
    /*let dataId = this.option?.formConfig?.dataId??null
    delete this.option?.formConfig?.dataId
    this.dataId = dataId;*/

    this.formConfig = this.option?.formConfig || {};

    let currentFormConfig = this.getFormConfig();
    this.currentLayoutType = currentFormConfig.layoutType;

    this.selectMulti = this.option.multiple ?? true;
    this.getReportTemplate();
  },
  methods: {
    reload(e, option) {
      let updateParam = option?.updateParam || {};
      if (this.formConfig) Object.assign(this.formConfig, updateParam);
      this.showRender = false;
      this.getReportTemplate();
    },
    async getReportTemplate(callback) {
      let param = {
        objTypeCode: this.$attrs.objTypeCode,
        objId: this.$attrs.objId,
        taskId: this.$attrs.taskId,
      };
      this.conditionParam = param;
      let url, data;
      url = USER_PREFIX + `/formTemplate/getByFormCode`;
      data = { stringOne: this.formCode };

      let that = this;
      this.$http({
        url: url,
        method: `post`,
        data: data,
        isLoading: true,
        loadingTarget: document.body,
        modalStrictly: true,
        success: (res) => {
          let formTemplate = res.objx || {};
          this.formTemplate = formTemplate;
          this.formJson = formTemplate.formViewContent
            ? JSON.parse(formTemplate.formViewContent)
            : {};
          this.layoutType = this.formJson.formConfig.layoutType;
          let formConfig = this.formJson.formConfig;
          if (formConfig.searchDialogUniqueField) {
            this.fieldKey = formConfig.searchDialogUniqueField;
          }

          this.showRender = true;
        },
      });
    },
    close() {
      let formRef = this.$refs.vFormRef;
      this.showDialog = false;
      this.$emit("update:visiable", false);
      this.option.close && this.option.close(formRef, this);
    },
    dialogSubmit() {
      let formRef = this.$refs.vFormRef;
      if (this.option.confirm) {
        if (this.option.confirm(formRef, this) !== false) {
          this.close();
        }
      } else {
        this.close();
      }
    },
    setConfirmButtonHidden(val){
      this.confirmButtonVisible = val || false;
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .H5 .h5-fixed-bottom-btns {
  bottom: 95px;
}

.list-dialog {
  .el-dialog__body {
    height: calc(100% - 42px);
    .cont {
      height: calc(100vh - 210px);

      &.nfootBtn {
        height: calc(100vh - 158px);
      }
      &#containt {
        padding: 0;
        ::v-deep .grid-container {
          outline: none;
          &.detail-wrap .d-cont {
            height: calc(100vh - 150px);
            .title .field-wrapper {
              display: inline-block !important;
            }
          }
        }
      }
    }
  }

  &.is-fullscreen .el-dialog__body {
    .cont {
      height: calc(100vh - 110px);

      &.nfootBtn {
        height: calc(100vh - 58px);
      }
    }
  }
}
</style>
