/**
*  @Author      LiuShaolong
*  @Description 编辑弹窗
*  @CreateDate  2020/5/6
*/
<template>
  <el-dialog class="general-edit-dialog" :visible="show" :title="button.name" :width="button['dialogWidth']"
             @close="close" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="general-edit-dialog-body" v-loading="loading">
      <zy-form ref="form" class="general-edit-dialog-form" v-for="(form, index) in button.forms" :key="index"
               :filters="forms[form] ? forms[form].filters : []" :mode="button.action"
               :label-width="forms[form].labelWidth ? forms[form].labelWidth  : undefined">
        <el-divider v-if="button.forms.length > 1 && forms[form] && forms[form].title" slot="title"
                    content-position="left">
          {{ forms[form].title }}
        </el-divider>
        <template slot="footer" v-if="button['submitEach']">
          <el-button type="primary" @click="save(form, index, forms[form].code)">保存</el-button>
        </template>
      </zy-form>
      <slot name="after"></slot>
    </div>
    <div slot="footer" v-if="button.action === '_view' || button['submitEach']">
      <el-button @click="close">关 闭</el-button>
    </div>
    <div slot="footer" v-else>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {WebpageDataService} from "../../../assets/webpage";

  export default {
    name: 'EditDialog',
    components: {},
    props: ['show', 'button', 'businessType', 'params', 'forms', 'id'],
    data() {
      return {
        datas: {},
        loading: false,
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      show: {
        handler: function (nv) {
          if (nv) {
            this.loadData()
          } else {
            this.$refs['form'][0].resetFields();
            document.getElementsByClassName('el-dialog__body')[0].scrollTop = 0;
          }
        }
      },
    },
    computed: {},
    methods: {
      loadData() {
        this.loading = true;
        WebpageDataService.webpage_data_load({
          businessType: this.businessType,
          buttonCode: this.button.code,
          criteria: this.params,
          id: this.id
        }, res => {
          this.assignFormValue(res.content);
          this.loading = false;
        })
      },
      assignFormValue(datas) {
        this.button.forms.forEach((form, index) => {
          let setData = this.$refs['form'][index].setData;
          if (this.forms[form]) {
            _.map(this.forms[form].filters, f => {
              setData(f.key, datas[form][f.key]);
              if (f.type === 'expand_selection') {
                setData(f.key + 'Label', datas[form][f.key + 'Label']);
              }
            });
            this.$nextTick(() => {
              this.$refs['form'][index].$refs['form'].clearValidate(_.map(this.forms[form].filters, 'key'))
            })
          }
        })
      },
      close() {
        this.$emit('close')
      },
      save(form, index, formCode) {
        let _this = this;
        _this.$refs['form'][index].validateForm(valid => {
          if (valid) {
            let params = _.merge({formCode: formCode, id: this.id}, this.params);
            params[form] = _this.$refs['form'][index].formData;
            let loading = this.$globalLoading();
            WebpageDataService.webpage_data_save(params, () => {
              _this.$message.success('保存成功');
              loading.close();
            }, () => loading.close())
          }
        })
      },
      submit() {
        let _this = this;
        let valid = true;
        let jsonData = {};
        _this.$refs['form'].forEach(form => form.validateForm(v => valid = valid && v));
        _this.$refs['form'].forEach((form, index) => jsonData[_this.button.forms[index]] = form.formData);
        valid && _this.$emit('submit', jsonData)
      }
    },
  }
</script>
<style lang="scss">
  .general-edit-dialog {
    .el-dialog {
      margin-top: 60px !important;
    }
    .el-dialog__body {
      max-height: calc(80vh - 60px);
      overflow-y: auto;
    }
    .general-edit-dialog-body {
      height: calc(100% - 10px);
    }
    .general-edit-dialog-form {
      height: auto !important;
      padding: 5px 15px;
      margin-bottom: 10px;
    }
  }
</style>