<template>
  <transition-group name="fade">
    <!-- 蒙版 -->
    <div
      class="mask"
      key="1"
      @click="show = false"
      v-if="show"
      @touchmove.prevent
    ></div>
    <div class="pop" v-show="show" key="2">
      <div class="title">
        <span>{{ title }}</span>
      </div>

      <div class="content">
        <div class="content_1">
          <img
            src="../../assets/Popup/alert.png"
            alt="正在加载.."
            class="alertImg"
          />
        </div>

        <div class="content_2">
          <p>
            购货订单<span style="color: #46a3ff">{{ content }}</span
            >已有以下关联数据,不能反审核
          </p>
          <div v-for="(item, index) in orderList" :key="index">
            <li>
              购货单 {{ item.good_number}}<a @click="toClick(item.id)">点击查看</a>
            </li>
            <li>购货单 <a @click="toClick(item.id)">点击查看</a></li>
          </div>
        </div>
      </div>

      <div class="btn">
        <el-button @click="btnClick">{{ btnText }}</el-button>
      </div>
    </div>
  </transition-group>
</template>

<script>
export default {
  name: "Popup",
  data() {
    return {
      show: false,
      imgUrl: "",
      title: "系统提示",
      content: "",
      btnText: "关闭",
      orderList: [],
    };
  },
  created() {},
  methods: {
    btnClick() {
      this.click();
      this.show = false;
    },
    toClick(id) {
      this.$router.push("/good/order/edit?id=" + id);
    },
  },
};
</script>


<style lang="scss" scoped>
// 渐变过渡
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.35s;
}
// 全局弹窗
.mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.pop {
  height: 205px;
  width: 435px;
  background: #fff;
  border-radius: 8px;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  text-align: center;
  .title {
    height: 40px;
    line-height: 40px;
    span {
      float: left;
      margin-left: 15px;
    }
  }
  .content {
    height: 125px;
    display: flex;
    .content_1 {
      width: 20%;
      .alertImg {
        width: 45px;
        height: 45px;
      }
    }

    .content_2 {
      p {
        line-height: 43px !important;
        text-align: left !important;
      }

      li {
        list-style: disc;
        text-align: left;
        a {
          float: right;
          margin-right: 60px;
        }
      }
    }
  }

  .btn {
    height: 40px;
    line-height: 40px;
    button {
      float: right;
      margin-right: 15px;
    }
  }
  // button {
  //   background: #f95644;
  //   border-radius: 32px;
  //   width: 30px;
  //   height: 20px;
  //   font-size: 18px;
  //   color: #ffffff;
  // }
  .close {
    top: 0;
    right: 10px;
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
  }
}
</style>
