<template>
  <div class="content">
    <back :title="titlename"></back>
    <!-- 快递公司 -->
    <div class="kdshow">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="报关方式"
        placeholder="请选择报关方式"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
    <div class="addwp" v-show="wpshow">
      <van-field
        readonly
        clickable
        name="picker"
        label="申报物品"
        placeholder="添加"
        @click="wpshowPicker = true"
      />
      <div class="wplist" v-for="(item, i) in wplist">
        <p>申报物品:{{ item }}</p>
        <span @click="del(i)">删除</span>
      </div>
    </div>
    <!-- 寄件 -->
    <div class="btn-jj">
      <van-button type="info" color="#0c2469">确定</van-button>
    </div>
    <van-popup v-model="wpshowPicker" position="center">
      <div class="wpcontent">
        <van-field
          clickable
          name="picker"
          label="申报物品"
          v-model.trim="wp"
          placeholder="请填写申报物品"
        />
        <van-button type="info" color="#0c2469" @click="add">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import areaList from "@/script/areas.js";
export default {
  data() {
    return {
      titlename: "申报信息",
      showPicker: false, //快递
      value: "",
      columns: ["非正式报关", "正式报关"],
      wpshow: false,
      wpshowPicker: false,
      wplist: [],
      wp: ""
    };
  },
  created: function() {
    this.isLogin();
    //this.areaList=area.areaList
  },
  methods: {
    // 选择快递公司
    onConfirm(e) {
      this.value = e;
      this.showPicker = false;
      if (this.value == "正式报关") {
        this.wpshow = true;
      } else {
        this.wpshow = false;
      }
    },
    add() {
      if (this.wp == "") {
        Toast("请填写申报物品");
        return false;
      }
      this.wplist.push(this.wp);
      console.log(this.wplist);
      this.wp = "";
      this.wpshowPicker = false;
    },
    del(i) {
      this.wplist.splice(i);
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  .kdshow {
    font-size: 0.3rem;
    padding: 0.3rem 0px;
    width: 6.84rem;
    background: white;
    border-radius: 0.05rem;
    margin: 0.2rem auto 0.2rem;
    /deep/.van-cell {
      padding: 0px 0.3rem;
      overflow: unset;
      input {
        text-align: right;
        height: 0.5rem;
        padding-right: 0.25rem;
      }
    }
    /deep/.van-cell::after {
      content: "";
      display: inline-block;
      border-right: 0.01rem solid #b0b0b0;
      border-bottom: 0.01rem solid #b0b0b0;
      transform: rotate(-45deg);
      left: unset;
      position: absolute;
      right: 0.3rem;
      bottom: 0.15rem;
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  .addwp {
    font-size: 0.3rem;
    padding: 0.3rem 0px;
    width: 6.84rem;
    background: white;
    border-radius: 0.05rem;
    margin: 0rem auto 0.2rem;
    .wplist {
      padding: 0px 0.3rem;
      display: flex;
      justify-content: space-between;
      color: #646566;
      font-size: 14px;
      margin-top: 0.2rem;
      span {
        color: #0c2469;
      }
    }
    /deep/.van-cell {
      padding: 0px 0.3rem;
      overflow: unset;
      input {
        text-align: right;
        height: 0.5rem;
        //padding-right: .25rem;
      }
    }
    .van-cell::after {
      display: none;
    }
  }
  .btn-jj {
    padding: 0.33rem;
    font-size: 0.3rem;
    button {
      width: 100%;
    }
  }
  .wpcontent {
    width: 6rem;
    padding: 0.3rem;
    text-align: center;
    /deep/.van-cell {
      input {
        text-align: right;
      }
    }
    button {
      width: 60%;
      height: 35px;
      line-height: 35px;
    }
  }
}
</style>
