<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">
          <div class="container" v-if="dicts">
            <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" />
          </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 @click.native="handleCancel" style="margin-right:6px">取消</el-button>
          <el-popover placement="top-end" width="400" trigger="manual" v-model="popoverVisible">
            <div>
              <el-form :model="dialogForm" prop="remark" :rules="rules" ref="form">
                <el-form-item label="驳回意见" prop="remark">
                  <el-input type="textarea" placeholder="驳回意见" v-model="dialogForm.remark" size="small" :rows="4"
                    >
                  </el-input>
                  <el-button type="primary" style="float:right;margin-top:16px" @click.native="handleCheck(-2)"
                    size="small">确定</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-close"
              @click.native="handleShowPopover">驳回</el-button>
          </el-popover>
          <el-button style="margin-left:6px" type="primary" icon="el-icon-check"
            @click.native="handleCheck(1)">同意</el-button>
        </span>
        <span v-else>
          <el-button 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'
export default {
  name: "PreviewDialog",
  components: {
    NormalStyle,
    ChStyle,
    RedStyle,
    BaseInfo
  },
  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'
        }
      }
    },

  },

  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");
    },

    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>
.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>