<template>
  <van-popup
    v-model="visible"
    position="bottom"
    round
    transfer
  >
  <div class="main">
    <div class="top">
      <div class="top-title">地址选择</div>
    </div>
    <div class="operate">
      <div class="operate-left">常用地址</div>
      <div class="operate-right">
        <div v-if="mode === 'normal'" class="item" @click.stop="mode = 'edit'">
          <img src="./img/edit.png" alt="">
          <div class="name">管理</div>
        </div>
        <div v-if="mode === 'edit'" class="item" @click.stop="mode = 'normal'">
          <img src="./img/edit.png" alt="">
          <div class="name">完成</div>
        </div>
        <div class="item">
          <img src="./img/add.png" alt="" @click.stop="editItem = {id: ''}; isShowAddPopup = true">
          <div class="name">新增</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="list">
        <div v-for="item in addressList" :key="item.id" class="item" @click="chooseItem = item">
          <div class="item-status">
            <img v-if="item.id !== chooseItem.id" src="./img/unchoose.png" alt="">
            <img v-else src="./img/choosed.png" alt="">
          </div>
          <div class="item-content">
            <div class="item-content__info">
              <span class="item-content__info-name">{{ item.name }}</span>
              <span class="item-content__info-mobile">{{ item.mobile }}</span>
            </div>
            <div class="item-content__address">
              {{ item.province }} {{ item.city }} {{ item.area }} {{ item.detail }}
            </div>
          </div>
          <div v-if="mode === 'edit'" class="item-operate">
            <img src="./img/edit-gray.png" alt="" @click.stop="editItem = item; isShowAddPopup = true">
            <img src="./img/delete.png" alt="" @click.stop="delAddress(item)">
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="confirmAddress">
      确认地址
    </div>
  </div>
  <AddAddressPopup
    v-model="isShowAddPopup"
    :edit-item="editItem"
    :create-api="createApi"
    :update-api="updateApi"
    @onConfirm="updtaAddress"
  ></AddAddressPopup>
  </van-popup>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AddAddressPopup from './AddAddressPopup.vue'

export default {
  name: 'AddressPopup',
  components: {
    AddAddressPopup
  },
  props: {
    value: {
      type: Boolean,
      default: true,
    },
    addressList: {
      type: Array,
      default: () => []
    },
    addressItem: {
      type: Object,
      default: () => {}
    },
    createApi: {
      type: Function,
      default: null
    },
    updateApi: {
      type: Function,
      default: null
    },
    deleteApi: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      chooseItem: {id: ''},
      mode: 'normal',
      isShowAddPopup: false,
      editItem: {id: ''}
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    }),
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.chooseItem = this.addressItem
      }
    }
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
    }),
    confirmAddress() {
      this.$emit('confirm', this.addressList.find(item => item.id === this.chooseItem.id))
      this.visible = false
    },
    delAddress(item) {
      const { uin, deleteApi } = this
      this.$dialog.confirm({
        message: '确定删除吗？'
      }).then(() => {
        deleteApi({ uin, id: item.id }).then(res => {
          const { code, errorCode, errorMessage } = res
          if (code === 200 && errorCode === 0) {
            this.$toast('地址删除成功！')
            this.$emit('reload')
          } else {
            this.$toast(errorMessage)
          }
        })
      })
    },
    updtaAddress(value) {
      const { uin, createApi, updateApi } = this
      if (value?.id) {
        updateApi({ uin, ...value }).then(res => {
          const { code, errorCode, errorMessage } = res
          if (code === 200 && errorCode === 0) {
            this.$toast('修改成功')
            this.$emit('reload')
            this.isShowAddressEdit = false
          } else {
            this.$toast(errorMessage)
          }
        })
        return
      }
      createApi({ uin, ...value }).then(res => {
        const { code, errorCode, errorMessage } = res
        if (code === 200 && errorCode === 0) {
          this.$toast('添加成功')
          this.$emit('reload')
          this.isShowAddressEdit = false
        } else {
          this.$toast(errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  min-height: 42vh;
  max-height: 60vh;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  &-btn {
    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
  }
}
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
  &-left {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 18.5px;
  }
  &-right {
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
      display: flex;
      align-items: center;
      margin-left: 15px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FF5000;
        line-height: 18px;
        text-align: left;
      }
    }
  }
}
.content {
  flex: 1;
  overflow-y: auto;
  padding-right: 12px;
  .list {
    height: 100%;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 16px 0;
      &-status {
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
        }
      }
      &-content {
        flex: 1;
        display: flex;
        // align-items: center;
        flex-direction: column;
        padding: 0 6px 0 12px;
        text-align: left;
        .item-content__info {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 15px;
          color: #333333;
          line-height: 24px;
          text-align: justify;
          &-name {
            color: #333333;
            font-weight: 600;
            font-size: 15px;
          }
          &-mobile {
            color: #666666;
            margin-left: 5px;
            font-size: 14px;
          }
        }
        .item-content__address {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #333333;
          line-height: 24px;
          text-align: justify;
        }
      }
      &-operate {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          margin-left: 10px;
        }
      }
    }
  }
}
.btn {
  width: 330px;
  height: 36px;
  background: linear-gradient( 270deg, #FF5000 0%, #FF9000 100%);
  border-radius: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 36px;
  cursor: pointer;
  text-align: center;
  margin: 15px auto 28px;
  padding-right: 12px;
}
</style>
