<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="27%">
    <div class="pop">
      <div class="content">
        <div class="content_1">
          <img
            src="../../../assets/Popup/alert.png"
            alt="正在加载.."
            class="alertImg"
          />
        </div>
        <div class="content_2">
          <p>
            {{content}}<span style="color: #46a3ff">{{ number }}</span
            >{{content_1}}
          </p>
          <div v-for="(item, index) in orderList" :key="index">
            <li>
              {{content_2}} {{ item.good_number }}  
             <span v-if="type == 1"><a style="color: blue" @click="toClick_1(item.id)">点击查看</a> </span> 
             <span v-if="type == 2"><a style="color: blue" @click="toClick_2(item.id)">点击查看</a> </span> 
            </li>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button @click="btnClick">{{ btnText }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["content_2", "content_1","content","number", "orderList","type"], //props接收
  name: "Popup",
  data() {
    return {
      dialogVisible: false,
      show: false,
      title: "系统提示",
      content: "",
      btnText: "关闭",
      id: 0,
    };
  },
  created() {},
  methods: {
    btnClick() {
      this.dialogVisible = false;
    },
    toClick_1(id) {
      this.$router.push({path:"/good/order/edit?id=" + id});
    },
    toClick_2(id){
      this.$router.push({path:"/good/return/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: relative;
  left: 45%;
  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;
    transform: translateY(30px);
    button {
      float: right;
      margin-right: 15px;
    }
  }

  .close {
    top: 0;
    right: 10px;
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
  }
}
</style>
