<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">
      <component v-if="showWfContent && wfContent" :is="wfContent" visible-key="showWfContent" :outParam.sync="outParam"
                 :_dataId.sync="dataId" :defaultShowWfContent="defaultShowWfContent" :_isOutLink="true"
                 :parent-target="_self"
                 @reload="$reloadHandle" v-bind="queryParam" v-on="listeners"></component>
    </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">
				<i class="el-icon-check el-icon"></i>
				{{ $t2('确 定', 'system.button.confirm2') }}
			</el-button>
		</span>
  </el-dialog>
</template>

<script>

export default {
  // name: "vabSearchDialog",
  components: {},
  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,

      showWfContent: true,
      wfContent: null,
      outParam: null,
      // dataId: null,
      defaultShowWfContent: null,
      queryParam: {},
      listeners:null
    };
  },
  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;*/

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

    // this.selectMulti = this.option.multiple ?? true;
    this.initData();
  },
  methods: {
    initData() {
      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
      let queryParam = this.$baseLodash.cloneDeep(this.dialogParam);
      let murl = queryParam.urlmobile;
      let purl = murl && isMobile ? murl : queryParam.url;
      let dataId = queryParam.dataId??null;
      if (purl == '/index') {
        location.hash = '/home';
        location.reload();
        return;
      }

      this.dataId = dataId;
      if (queryParam.showWfContent == 'true') {
        this.defaultShowWfContent = true;
      }

      delete queryParam.urlmobile;
      delete queryParam.url;

      if (purl.indexOf('.html') >= 0) {
        let eUrl = purl;
        let pstr = Object.keys(queryParam).map(key => {
          return key + "=" + queryParam[key]
        }).join("&")

        if (pstr) {
          if (purl.indexOf('.html?') >= 0) {
            eUrl = eUrl + '&' + pstr
          } else {
            eUrl = eUrl + '?' + pstr
          }
        }

        location.href = eUrl;
        return
      }

      delete queryParam.dataId;
      delete queryParam.showWfContent;
      delete queryParam.access_token;
      delete queryParam.tp;
      delete queryParam.thirdparty_info;
      delete queryParam.i18nLang;

      let url = purl + '.vue';
      this.queryParam = queryParam;
      let listeners= this.option?.on;
      this.listeners = listeners;

      this.showWfContent = true;

      let t = "@base/views";
      let urlArr = [
        '/user/bill_setting/h5_view.vue',
        '/user/form/view/list.vue',
        '/user/form/view/edit.vue'
      ]

      if (urlArr.includes(url)) {
        this.wfContent = require('@base/views' + url).default;
      } else if (url.startsWith(t)) {
        let path = url.slice(t.length);
        this.wfContent = require('@base/views' + path).default;
      } else {
        this.wfContent = require('@/views' + url).default;
      }
    },


    reload(e, option) {
      let updateParam = option?.updateParam || {};
      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();
      }
    }
  }
}
</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>
