<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    top="5vh"
    lock-scroll
  >
    <div class="title" slot="title">
      <div class="divider"></div>
      <div class="label">{{ title }}</div>
    </div>
    <div class="dialog-content">
      <el-tabs v-model="activeName" v-loading="dialogLoading">
        <!-- <el-tab-pane label="基本信息" name="info">
          <div class="container">
            <BaseInfo :displayDetail="displayDetail" :dicts="dicts" />
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="效果预览" name="page" v-if="!isBoutique">
          <div
            class="container"
            v-if="dicts && Object.keys(displayDetail).length > 0"
          >
            <NavBar />
            <NormalStyle
              v-if="displayDetail.themeType == '1'"
              :displayDetail="displayDetail"
              :dicts="dicts"
            />
            <ChStyle
              v-if="displayDetail.themeType == '2'"
              :displayDetail="displayDetail"
              :dicts="dicts"
            />
            <RedStyle
              v-if="displayDetail.themeType == '3'"
              :displayDetail="displayDetail"
              :dicts="dicts"
            />
            <Footer />
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批历史记录" name="history">
          <div class="container">
            <el-steps :active="displayDetail.historyChecks.length">
              <el-step
                v-for="(item, index) in displayDetail.historyChecks"
                :title="getStepTitle(item)"
                :key="index"
                :icon="getStepIcon(item)"
              >
                <div slot="description">
                  <div class="name">{{ item.createName }}</div>
                  <div class="time">{{ item.createTime }}</div>
                  <div class="desc">{{ item.remark }}</div>
                </div>
              </el-step>
            </el-steps>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="dialog-footer">
        <span v-if="displayDetail.checkStatus == 0">
          <el-button
            size="mini"
            @click.native="handleCancel"
            style="margin-right: 6px"
            >取消</el-button
          >
          <el-popover
            placement="top-end"
            width="400"
            trigger="manual"
            v-model="popoverVisible"
          >
            <div>
              <el-form
              size="mini"
                :model="dialogForm"
                prop="remark"
                :rules="rules"
                ref="form"
              >
                <el-form-item label="驳回意见" prop="remark">
                  <el-input
                    type="textarea"
                    placeholder="驳回意见"
                    v-model="dialogForm.remark"
                    size="mini"
                    :rows="4"
                  >
                  </el-input>
                  <el-button
                    size="mini"
                    type="primary"
                    style="float: right; margin-top: 16px"
                    @click.native="handleCheck(-2)"
                    >确定</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-button
              size="mini"
              slot="reference"
              type="danger"
              icon="el-icon-close"
              @click.native="handleShowPopover"
              >驳回</el-button
            >
          </el-popover>
          <el-button
            size="mini"
            style="margin-left: 6px"
            type="primary"
            icon="el-icon-check"
            @click.native="handleCheck(1)"
            >同意</el-button
          >
        </span>
        <span v-else>
          <el-button size="mini" type="primary" @click.native="handleClose">关闭</el-button>
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import NormalStyle from "@/views/display/components/templates/NormalStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "@/views/display/components/templates/ChStyle.vue";
import RedStyle from "@/views/display/components/templates/RedStyle.vue";
import BaseInfo from "./BaseInfo";
import { mapGetters } from "vuex";
import { postCheck } from "@/api/display";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import { titles } from "@/utils/boutiqueTitles";
export default {
  name: "PreviewDialog",
  components: {
    NormalStyle,
    ChStyle,
    RedStyle,
    BaseInfo,
    NavBar,
    Footer,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    displayDetail: {
      type: Object,
      default: () => ({}),
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapGetters(["dicts"]),
    title() {
      return "审批——" + this.displayDetail.title;
    },
    getStepTitle(item) {
      return (item) => {
        switch (item.checkStatus) {
          case 0:
            return "发起审核";
          case 1:
            return "审核通过";
          case -2:
            return "驳回";
        }
      };
    },
    getStepIcon(item) {
      return (item) => {
        switch (item.checkStatus) {
          case 0:
            return "el-icon-s-promotion";
          case 1:
            return "el-icon-s-claim";
          case -2:
            return "el-icon-circle-close";
        }
      };
    },
    isBoutique() {
      this.activeName = titles.includes(this.displayDetail.title)
        ? "history"
        : "page";
      return titles.includes(this.displayDetail.title);
    },
  },

  watch: {
    visible: {
      handler: function (value) {
        this.dialogVisible = value;
      },
      immediate: true,
      deep: true,
    },
    loading(value) {
      this.dialogLoading = value;
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogForm: {
        remark: "", //驳回意见
      },
      activeName: "page",
      historyChecks: [],
      dialogLoading: false,
      rules: {
        remark: [
          {
            required: true,
            message: "请输入驳回意见",
            trigger: "blur",
          },
        ],
      },
      popoverVisible: false,
    };
  },
  async mounted() {
    await this.$store.dispatch("dict/getDictList", [
      "displayType",
      "displayCharacter",
    ]);
  },
  methods: {
    handleClose(done) {
      this.$emit("handleClose");
      this.activeName = titles.includes(this.displayDetail.title)
        ? "history"
        : "page";
    },

    async handleCheck(checkStatus) {
      if (checkStatus == -2) {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.dialogLoading = true;
            const params = {
              sourceId: this.displayDetail.exhibitionId,
              checkStatus,
              remark: this.dialogForm.remark,
              sourceType: "biz_exhibition",
              sourceName: this.displayDetail.title,
            };
            let res = await postCheck(params);
            if (res.code == 0) {
              this.$message.success("操作成功！");
              this.handleClose();
              this.$emit("refresh");
              this.$refs.form.resetFields();
            }
            this.dialogLoading = false;
            this.popoverVisible = false;
          }
        });
      } else {
        this.dialogLoading = true;
        const params = {
          sourceId: this.displayDetail.exhibitionId,
          checkStatus,
          remark: this.dialogForm.remark,
          sourceType: "biz_exhibition",
          sourceName: this.displayDetail.title,
        };
        let res = await postCheck(params);
        if (res.code == 0) {
          this.$message.success("操作成功！");
          this.handleClose();
          this.$emit("refresh");
          this.$refs.form.resetFields();
        }
        this.dialogLoading = false;
        this.popoverVisible = false;
      }
    },

    handleShowPopover() {
      this.popoverVisible = true;
    },

    handleCancel() {
      this.handleClose();
      this.$emit("refresh");
      this.$refs.form.resetFields();
      this.popoverVisible = false;
      this.dialogLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-step.is-horizontal {
  max-width: 300px !important;
}
.title {
  display: flex;
  margin-bottom: 16px;

  .divider {
    width: 8px;
    border-left: 4px solid #409eff;
    margin-right: 8px;
  }

  .label {
    font-weight: bold;
  }
}

.dialog-content {
  padding: 0 32px;

  .container {
    border: 1px dashed #409eff;
    height: calc(64vh);
    overflow: auto;
    padding: 46px;

    .desc {
      color: #666 !important;
    }

    .name {
      color: #333 !important;
    }

    .time {
      color: #999 !important;
    }
  }
}

::v-deep .el-dialog__wrapper {
  overflow: hidden !important;
}

::v-deep .el-step__title {
  color: #333;
  font-weight: bold;
}

// ::v-deep .el-dialog__body {
//   position: relative;
// }

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  // position: absolute;
  // width:100%;
  bottom: 0;
  position: sticky;
  // height: 100px;
}

// ::v-deep .el-dialog__footer {
//   position: sticky !important;
// }

.video-container {
  background-color: #000;
  display: flex;
  justify-content: center;
}

.el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>
