<template>
  <div>
    <vxe-modal
      title="批量审批"
      :z-index="zIndex"
      :value="isShow"
      @input="e => $emit('update:isShow', e)"
      :min-height="300"
      resize
      :width="defaultModalSize.sWidth"
      :height="defaultModalSize.sHeight"
      :fullscreen="$store.getters.device === 'mobile'"
      show-zoom
      draggable
      storage
      show-footer
    >
      <vxe-table
        ref="table"
        stripe
        keep-source
        show-overflow
        :column-config="{ resizable: true }"
        :print-config="{}"
        :export-config="{}"
        :row-config="{ keyField: 'id' }"
        :custom-config="{ mode: 'popup' }"
        :data="dealFlows"
      >
        <vxe-column
          min-width="140"
          header-align="center"
          field="title"
          title="工作名称"
        ></vxe-column>
        <vxe-column
          width="80"
          align="center"
          field="id"
          title="流水号"
        ></vxe-column>
        <vxe-column
          header-align="center"
          min-width="240"
          field="_simple"
          title="简要"
        ></vxe-column>
        <vxe-column
          width="80"
          title="发起人"
          align="center"
          field="creator.name"
        ></vxe-column>
        <vxe-column
          width="80"
          title="承办人员"
          align="center"
          field="last_log.user.name"
        ></vxe-column>
        <vxe-column
          header-align="center"
          min-width="120"
          field="custom_model.name"
          title="流程名称"
        ></vxe-column>
        <vxe-column
          width="164"
          field="no"
          align="center"
          title="编号"
        ></vxe-column>
        <vxe-column
          width="200"
          :visible="$route.params.type === 'all'"
          align="center"
          field="created_at"
          title="发起日期"
          :formatter="
                ({ cellValue }) =>
                  $moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
              "
          :export-method="
                ({ row, column, options }) =>
                  $moment(row['created_at']).format('YYYY-MM-DD HH:mm:ss')
              "
        ></vxe-column>
      </vxe-table>
      <template v-if="device === 'desktop'">
        <DesktopForm
          :device="device"
          ref="desktopForm"
          :config="config"
          :is-first-node="isFirstNode"
          :need-flow-title="false"
          :sub-form="subConfig"
          :fields="fields"
          :original-form="form"
          :readable="[]"
          :script-content="scriptContent"
          :writeable="writeableFields"
          :rules="rules"
          :sub-rules="subRules"
          :logs="config.logs"
        ></DesktopForm>
      </template>
      <template v-else>
        <MobileForm
          :device="device"
          ref="mobileForm"
          :config="config"
          :is-first-node="isFirstNode"
          :need-flow-title="false"
          :sub-form="subConfig"
          :fields="fields"
          :original-form="form"
          :readable="[]"
          :script-content="scriptContent"
          :writeable="writeableFields"
          :rules="rules"
          :sub-rules="subRules"
          :logs="config.logs"
        ></MobileForm>
      </template>
      <template #footer>
        <el-button
          icon="el-icon-document-add"
          type="info"
          size="small"
          @click="submit('only-submit')"
        >暂存不流转</el-button
        >
        <el-button type="primary" size="small" @click="submit('assign')"
        >保存并流转 <i class="el-icon-right"></i
        ></el-button>
      </template>
    </vxe-modal>

    <assign :visible.sync="isShowAssign" :result="result" multiple :multipleIds="dealFlows.map(flow => flow.id)" @refresh="$emit('update:isShow', false),$emit('refresh')" />
  </div>
</template>

<script>
import { PopupManager } from 'element-ui/lib/utils/popup'
import { defaultModalSize } from '@/settings'
import {create, deal, fieldConfig, preDeal} from '@/api/flow'
import { validation, validationName } from "@/utils/validate";
import MobileForm from "@/views/flow/MobileForm.vue";
import DesktopForm from "@/views/flow/DesktopForm.vue";
import assign from './assign.vue'
import {deepCopy} from "@/utils";
export default {
  components: {
    DesktopForm, MobileForm,assign
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    dealFlows: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      defaultModalSize,
      zIndex: PopupManager.nextZIndex(),

      form: {},
      subConfig: new Map(),
      config: {},
      rules: {},
      subRules: {},
      flows: [],

      isShowAssign: false,
      result: {},
    }
  },
  methods: {
    generateForm(object, fields, relation = false, pname) {
      fields.forEach((field) => {
        if (field.rules && field.rules.length > 0 && this.writeableFields.find(i => i === field.id) && !relation) {
          this.rules[field.name] = field.rules.map((rule) => {
            switch (rule) {
              case "required":
                if (field.type === 'relation') {
                  return {
                    validator: (myRule, value, callback) => {
                      if (value instanceof Array && value.length > 0) {
                        callback()
                      } else {
                        callback(`请填写${field.label}`)
                      }
                    },
                    message: `请填写${field.label}`,
                    trigger: "blur",
                  };
                } else {
                  return {
                    required: true,
                    message: `请填写${field.label}`,
                    trigger: "blur",
                  };
                }
              default:
                return {
                  validator: (myRule, value, callback) => {
                    if (validation.get(rule).test(value) || value === '') {
                      callback();
                    } else {
                      callback(
                        new Error(
                          `${field.label}必须为${validationName.get(rule)}`
                        )
                      );
                    }
                  },
                  trigger: "blur",
                  pattern: validation.get(rule),
                  message: `${field.label}必须为${validationName.get(rule)}`,
                };
            }
          });
        }
        if (relation) {
          this.subRules[`${pname}_rules`][field.name] = field.rules.map((rule) => {
            switch (rule) {
              case "required":
                return {
                  required: true,
                  message: `请填写${field.label}`,
                };
              default:
                return {
                  validator: ({ cellValue }) => {
                    return new Promise((resolve, reject) => {
                      if (validation.get(rule).test(cellValue) || cellValue === '') {
                        resolve()
                      } else {
                        reject(
                          new Error(
                            `${field.label}必须为${validationName.get(rule)}`
                          )
                        );
                      }
                    })
                  },
                  trigger: "blur",
                  pattern: validation.get(rule),
                  message: `${field.label}必须为${validationName.get(rule)}`,
                };
            }
          });
        }
        if (field.type === "relation") {
          this.subRules[`${field.name}_rules`] = {}
          object[field.name] = [{}];

          this.generateForm(
            object[field.name][0],
            this.subConfig.get(field.sub_custom_model_id)?.customModel?.fields,
            true,
            field.name
          );
        } else {
          if (/\/detail/.test(this.$route.path) && this.$route.query.flow_id) {
            object[field.name] = "";
          } else {
            if (this.writeableFields.indexOf(field.id) !== -1 || this.readableFields.indexOf(field.id) !== -1) {
              object[field.name] = (this.writeableFields.indexOf(field.id) !== -1 && field.default_value) ? field.default_value : (field.type === 'file' ? [] : "");
            }
          }
        }
      });
    },

    async getConfig() {
      const firstFlow = this.dealFlows[0]
      const loading = this.$loading({
        lock: true,
        text: "拼命加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)",
      });
      try {
        const res = await preDeal(firstFlow.id);
        const { fields } = res?.customModel;
        let subFormRequest = [];
        const getSubForm = (id) => {
          subFormRequest.push(fieldConfig(id));
        };
        fields.forEach((field) => {
          if (field.sub_custom_model_id) {
            getSubForm(field.sub_custom_model_id);
          }
        });
        const subConfigs = await Promise.all(subFormRequest);
        subConfigs.forEach((sub) => {
          if (sub.customModel?.id) {
            this.subConfig.set(sub.customModel?.id, sub);
          }
        });
        this.config = res;
        this.generateForm(this.form, fields);
        const { data } = res?.flow;
        for (let key in data) {
          try {
            let jsonObj = JSON.parse(data[key]);
            jsonObj.forEach(item => {
              // 遍历对象中的每个键值对
              for (const key in item) {
                if (typeof item[key] === 'string') {
                  try {
                    // 尝试解析字符串为 JSON 对象
                    const parsedValue = JSON.parse(item[key]);
                    // 如果解析成功，替换原始字符串
                    item[key] = parsedValue;
                  } catch (e) {
                    // 如果解析失败，继续保持原始字符串
                  }
                }
              }
            })
            if (this.form.hasOwnProperty(key)) {
              this.form[key] = jsonObj;
            }
          } catch (err) {
            if (this.form.hasOwnProperty(key)) {
              if (data[key] instanceof Array) {
                if (data[key].length > 0) {
                  this.form[key] = data[key];
                } else {
                  this.form[key] = ''
                }
              }
              if (data[key] && data[key] !== 'null' && data[key] !== 'undefined') {
                this.form[key] = data[key];
              }
            }
          }
        }
        this.form = Object.assign({}, this.form);
        loading.close();
      } catch (err) {
        console.error(err);
        this.$message.error("配置失败");
        loading.close();
      }
    },

    async submit(type) {
      if (window.$_uploading) {
        this.$message.warning("文件正在上传中")
        return
      }
      let copyForm;
      if (this.device === "desktop") {
        try {
          await this.$refs['desktopForm'].validate()
        } catch (err) {
          console.warn(err)
          this.$message.warning('数据校验失败')
          return
        }
        copyForm = deepCopy(this.$refs["desktopForm"].form);
      } else {
        try {
          await this.$refs['mobileForm'].validate()
        } catch (err) {
          console.warn(err)
          this.$message.warning('数据校验失败')
          return
        }
        copyForm = deepCopy(this.$refs["mobileForm"].form);
      }
      const uploadHandler = (form, fields) => {
        let keys = Object.keys(form)
        keys.forEach(key => {
          if (form[key] instanceof Array) {
            if (form[key].length > 0 && typeof form[key][0] === 'object') {
              const myField = fields.find(field => field.name === key)
              if (myField) {
                if (myField.type === 'file') {
                  form[key] = form[key].map(i => i.hasOwnProperty('response') ? i.response : i)
                } else {
                  form[key].forEach(i => {
                    uploadHandler(i, this.subConfig.get(myField.sub_custom_model_id)?.customModel?.fields)
                  })
                }
              }
            } else {
              form[key] = ''
            }
          } else {
            if (form[key] === 'null' || form[key] === 'undefined') {
              form[key] = ''
            }
          }
        })
      }
      uploadHandler(copyForm, this.fields)
      for (let key in copyForm) {
        let myField = this.fields.find(i => i.name === key)
        if (myField && this.writeableFields.indexOf(myField.id) === -1) {
          delete copyForm[key]
        }
      }
      copyForm["current_node_id"] = this.config.currentNode.id;
      try {
        let callback;
        switch (type) {
          case "only-submit":
            if (this.$route.query.flow_id) {
              copyForm["temporary_save"] = 1;
            }
            callback = () => {
              this.$emit('update:isShow', false)
              this.$emit('refresh')
            }
            break;
          case "assign":
            if (this.$route.query.flow_id) {
              copyForm["temporary_save"] = 0;
            }
            callback = () => (this.isShowAssign = true);
            break;
        }

        const resArr = await Promise.all(this.dealFlows.map(flow => deal(flow.id, copyForm)))
        const { flow, is_last_handled_log } = resArr[0]
        this.result = flow;
        if (!is_last_handled_log) {
          await this.$alert(
            "办理成功，其他会签办理完成后，由最后办理的成员流转到下一节点。",
            "提示",
            {
              showClose: false,
            }
          );
          callback = () => {
            this.$emit('update:isShow', false)
            this.$emit('refresh')
          }
        }
        callback();
      } catch (err) {
        console.error(err);
      }
    },
  },
  computed: {
    device() {
      return this.$store.state.app.device;
    },
    fields() {
      return this.config?.customModel?.fields || [];
    },
    scriptContent() {
      if (this.config?.customModel?.view_js && this.$route.query.flow_id && /\/detail/.test(this.$route.path)) {
        return this.config?.customModel?.view_js;
      } else if (this.config?.customModel?.js && !/\/detail/.test(this.$route.path)) {
        return this.config?.customModel?.js;
      }
    },
    readableFields() {
      return []
    },
    writeableFields() {
      return this.config?.currentNode?.writeable || [];
    },
    isFirstNode() {
      return this.config?.logs?.length === 0 || this.config?.currentNode?.category === 'start'
    }
  },
  watch: {
    isShow(newVal) {
      if (newVal) {
        this.zIndex = PopupManager.nextZIndex()

        if (this.dealFlows instanceof Array && this.dealFlows.length > 0) {
          this.getConfig()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
