<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view v-if="!$route.meta.link" :key="key"/>
      </keep-alive>
    </transition>
    <iframe-toggle/>
    <!--<floating-component />-->
    <DialogPage ref="auditStatusDialog" title="审批履历" maxWidth="500px" @close="auditHistory = []">
      <template>
        <div v-loading="loading" class="container">
          <div v-for="item in auditHistory" style="font-size: 0;">
            <div class="left">
              <div class="step"><img :src="finished" width="25px"/></div>
              <div class="line" :style="{ height: item.auditUser ? '180px' : '30px' }"></div>
            </div>
            <div class="right">
              <div class="head">
                <span class="date" v-if="item.auditTime">{{
                    item.auditTime.split(' ')[0].replaceAll('-', '/')
                  }}<br/><span class="time">{{
                      item.auditTime.split(' ')[1]
                    }}</span></span>
                <span
                  :class="{ status: true, success: item.status == AuditStatus.PASS, fail: item.status == AuditStatus.REJECT }">{{
                    item.desc
                  }}</span>
              </div>
              <div class="audit-info" v-if="item.auditUser">
                <span class="name">{{ item.nickName }}</span>
                <img :src="pin" width="25px" class="attachment"
                     v-if="item.attachmentList && item.attachmentList.length > 0"
                     @click="$refs.auditAttachmentDialog.open(null, { attachmentList: item.attachmentList })"/>
                <div class="remark">{{ item.remark }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </DialogPage>
    <DialogPage ref="auditAttachmentDialog" title="附件" maxWidth="550px" disabled label-position="top">
      <FileUploadItem label="附件" prop="attachmentList" :module="module" :func="func" :category="category"/>
    </DialogPage>

    <DialogPage ref="dialog" :title="title()" maxWidth="800px" :disabled="disabled" label-position="top" :header="true">
      <FileUploadItem :button-style="{ marginLeft: '5px' }" :label="label" class="normalClass" :prop="prop"
                      :module="module" :func="func" :category="category" :disabled="disabled"/>
    </DialogPage>
    <DialogPage ref="dialogWatch" :title="title()" maxWidth="550px" :disabled="disabled" label-position="top"
                :header="true">
      <FileUploadItem :button-style="{ marginLeft: '5px' }" :label="label" class="watchClass" :prop="prop"
                      :module="module" :func="func" :category="category" :disabled="disabled"/>
    </DialogPage>
    <!--聊天室 图片预览-->
    <DialogPage ref="previewDialog" :modalAppendToBody="true" :appendToBody="true"
                :close-on-click-modal="true"
                :title="'图片预览'" maxWidth="550px" :disabled="disabled" label-position="top">
      <el-image :src="imageSrc"/>
    </DialogPage>


  </section>
</template>

<script>
import iframeToggle from "./IframeToggle/index";
import FloatingComponent from "../../components/FloatingComponent/index";
import {getAuditHistory} from "@/api/audit/flow.js";
import finished from "@/assets/audit/finished-green.png";
import pin from "@/assets/audit/pin.png";
import DialogPage from "../../components/element/Dialog.vue";

export default {
  name: "AppMain",
  components: {DialogPage, FloatingComponent, iframeToggle},
  provide: function () {
    return {
      main: this,
    };
  },
  data() {
    return {
      loading: false,
      module: undefined,
      func: undefined,
      category: undefined,
      auditHistory: [],
      finished,
      pin,
      disabled: false,
      label: "",
      prop: "",
      imageSrc: "",
    };
  },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
  },
  methods: {
    showAuditHistory(businessId, auditFlows, module, func, category) {
      this.module = module;
      this.func = func;
      this.category = category;
      this.loading = true;
      this.$refs.auditStatusDialog.open();
      getAuditHistory({businessId, auditFlows, module, func, category})
        .then((res) => {
          if (res.code === 200) {
            this.auditHistory = res.rows;
          }
        })
        .finally(() => (this.loading = false));
    },
    title() {
      return this.disabled ? "�鿴�ļ�" : "�ϴ�����";
    },
    handleOpen(row, disabled, label, prop, module, func, category) {
      this.disabled = disabled;
      this.label = label;
      this.prop = prop;
      this.module = module;
      this.func = func;
      this.category = category;
      if (this.disabled === true) {
        this.$refs.dialogWatch.open(
          (form) => {
            this.$set(row, this.prop, form[this.prop]);
            this.showIcon = true;
          },
          {[this.prop]: row[this.prop]}
        );
      } else {
        this.$refs.dialog.open(
          (form) => {
            this.$set(row, this.prop, form[this.prop]);
            this.showIcon = true;
          },
          {[this.prop]: row[this.prop]}
        );
      }
    },
    messagePreview(src) {
      this.imageSrc = src;
      this.$refs.previewDialog.open();
    }
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(80vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    //min-height: calc(100vh - 84px);
    min-height: calc(100vh - 94px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 6px;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
</style>

<style scoped>
.step {
  width: 25px;
  height: 25px;
  margin: auto;
  font-size: 14px;
  text-align: center;
  line-height: 25px;
}

.line {
  width: 1px;
  border-left: 1px solid #2a73ff;
  margin: 10px auto;
}

.left {
  width: 50px;
  display: inline-block;
}

.right {
  display: inline-block;
  width: calc(100% - 100px);
  vertical-align: top;
  font-size: 14px;
}

.head {
  font-size: 16px;
}

.date {
  display: inline-block;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.time {
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.73);
}

.name {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}

.status {
  float: right;
  line-height: 100%;
}

.audit-info {
  margin-top: 20px;
}

.success {
  color: #419b07;
}

.fail {
  color: #e74a4a;
}

.attachment {
  float: right;
  cursor: pointer;
}

.remark {
  margin-top: 10px;
  padding: 10px;
  min-height: 100px;
  background: #f8f9fc;
  border-radius: 2px;
  border: 1px solid #e5e8f1;
}

.container {
  max-height: 70vh;
  min-height: 100px;
  overflow: auto;
}

.el-dialog__wrapper >>> .el-dialog .el-dialog__header {
  background-color: #304156;
}

.el-dialog__wrapper >>> .el-dialog .el-dialog__header .el-dialog__title {
  color: #ffffff !important;
}
</style>
