<template>
  <div class="content">
    <!-- table切换 -->
    <div class="tab">
      <div>
        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
          收件人
        </p>
      </div>
    </div>
    <!-- 寄件人 -->
    <div v-if="index == 1">
      <div class="jjinfo" v-for="item in addressList">
        <div>
          <div class="jj">
            <div class="jjaddress" @click="adressLink(item)">
              <p>寄</p>
              <div>
                <p>{{ item.name }} {{ item.phone }}</p>
                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
              </div>
            </div>
            <div class="cz">
              <p @click="del(item.id)">
                <img src="../assets/images/del.png" alt="" />
                <span>删除</span>
              </p>
              <p>
                <img src="../assets/images/whrite.png" alt="" />
                <span>编辑</span>
              </p>
              <p>
                <img src="../assets/images/copy.png" alt="" />
                <span>复制</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 寄件 -->
      <div class="btn-jj">
        <van-button @click="link(1)" type="info" color="#0c2469"
          >添加寄件人</van-button
        >
      </div>
    </div>

    <!-- 收件人 -->
    <div v-if="index == 2">
      <div class="jjinfo" v-for="item in addressList">
        <div>
          <div class="jj">
            <div class="jjaddress" @click="adressLinkSj(item)">
              <p style="background: #fa9c22;">收</p>
              <div>
                <p>{{ item.name }} {{ item.phone }}</p>
                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
              </div>
            </div>
            <div class="cz">
              <p @click="del(item.id)">
                <img src="../assets/images/del.png" alt="" />
                <span>删除</span>
              </p>
              <p>
                <img src="../assets/images/whrite.png" alt="" />
                <span>编辑</span>
              </p>
              <p>
                <img src="../assets/images/copy.png" alt="" />
                <span>复制</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 寄件 -->
      <div class="btn-jj">
        <van-button type="info" @click="link(2)" color="#fa9c22"
          >添加收件人</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      titlename: "地址簿",
      index: 1,
      openid: "",
      addressList: []
    };
  },
  created: function() {
    this.openid = this.$store.state.openId;
    //获取参数
    this.index = this.$route.query.active;
    this.getData();
  },
  methods: {
    tab(obj) {
      this.index = obj;
      this.getData();
    },
    link(obj) {
      this.$router.push({ path: "/Newaddress", query: { type: obj } });
    },
    getData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      this.$http
        .post(
          this.$store.state.host + "/personal/getAddressList.do",
          { user_id: this.openid, type: this.index },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              this.addressList = res.body.addressList;
            }
            Toast.clear();
          },
          res => {
            //发送失败
            Toast("网络错误!");
          }
        );
      Toast.clear();
    },
    del(id) {
      Dialog.confirm({ title: "", message: "确定删除吗" })
        .then(() => {
          Toast.loading({
            message: "删除中...",
            forbidClick: true,
            duration: 0
          });
          this.$http
            .post(
              this.$store.state.host + "/personal/deleteAddressInfoById.do",
              { id: id },
              { emulateJSON: true }
            )
            .then(
              res => {
                //发送成功
                if (res.body.msg == "success") {
                  this.getData();
                } else {
                  Toast("删除失败!");
                }
                Toast.clear();
              },
              res => {
                //发送失败
                Toast("网络错误!");
              }
            );
          Toast.clear();
        })
        .catch(() => {
          //  on cancel
        });
    },
    adressLink(item) {
      let jjInfo = {};
      jjInfo.jjname = item.name + " " + item.phone;
      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
      this.$store.commit("getJjInfo", jjInfo);
      this.$router.push({ path: "/Express" });
    },
    adressLinkSj(item) {
      let sjInfo = {};
      sjInfo.jjname = item.name + " " + item.phone;
      sjInfo.jjadd = item.provinceAndCity + " " + item.address;
      this.$store.commit("getSjInfo", sjInfo);
      this.$router.push({ path: "/Express" });
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
.content {
  .tab {
    font-size: 0.36rem;
    color: #0c2469;
    padding: 0.33rem;

    div {
      display: flex;
      border: 0.01rem solid #0c2469;
      text-align: center;
      border-radius: 0.05rem;

      p {
        flex: 1;
        padding: 0.1rem 0rem;
      }

      p.active {
        background: #0c2469;
        color: white;
      }
    }
  }

  .jjinfo {
    font-size: 0.36rem;
    color: #999999;
    padding: 0rem 0.33rem 0.33rem;

    > div {
      background: white;
      border-radius: 0.05rem;
      padding: 0.1rem 0.3rem;

      .jj {
        display: flex;
        justify-content: space-between;
        padding: 0.2rem 0rem;
        flex-wrap: wrap;

        .jjaddress {
          display: flex;
          padding: 0.1rem 0rem 0.2rem;

          > p {
            font-size: 0.24rem;
            font-weight: bold;
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background: #0c2469;
            text-align: center;
            line-height: 0.5rem;
            color: white;
            border-radius: 50%;
            margin-right: 0.3rem;
          }

          div {
            //font-weight: bold;
            max-width: 4.2rem;

            p:nth-of-type(1) {
              font-size: 0.3rem;
              color: #333;
              margin-bottom: 0.2rem;
            }

            p:nth-of-type(2) {
              font-size: 0.3rem;
            }
          }
        }

        .cz {
          border-top: 0.01rem solid #ededed;
          width: 100%;
          display: flex;
          flex-direction: row-reverse;
          font-size: 0.24rem;
          color: #999999;
          padding-top: 0.2rem;

          p {
            margin-left: 0.2rem;

            img {
              width: 0.22rem;
              height: 0.24rem;
            }

            span {
              position: relative;
              top: -0.01rem;
            }
          }
        }
      }
    }
  }

  .btn-jj {
    padding: 0.33rem;

    button {
      width: 100%;
    }
  }
}
</style>
