<template>
  <div class="returnAddressList">
    <div class="el-card__header">
      <span>地址列表</span>
      <el-button type="primary" style="margin: -5px 0px; width: 80px; height: 32px; padding: 0" @click="address">添加地址</el-button>
    </div>

    <div class="search_s">
      <div class="input-item">
        <el-input placeholder="请输入收件人姓名或联系方式" v-model="msg.Name" style="width: 300px;font-size: 10px;height: 32px"
                @clear="search"
                @keyup.enter.native="search"
                clearable>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <div class='table-body'>
      <el-table
        :data="list"
        border
        style="width: 1707px">
        <el-table-column
          fixed
          prop="ID"
          label="ID"
          width="100">
        </el-table-column>

        <el-table-column
          fixed
          prop="Name"
          label="收件人姓名"
          width="120">
        </el-table-column>

        <el-table-column
          fixed
          prop="Mobile"
          label="联系方式"
          width="120">
        </el-table-column>

        <el-table-column
          fixed
          prop="Address"
          label="详细地址"
          width="400">
        </el-table-column>

        <el-table-column
          fixed
          prop="Remarks"
          label="备注"
          width="484">
        </el-table-column>




        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
                     v-if="list&&list.length>0" :current-page.sync="msg.pageIndex"
                     layout="total,prev, pager, next" :page-size="msg.pageSize" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "returnAddressList",
      data(){
          return{
            msg:{
              pageIndex:1,
              pageSize:20,
              Name:'',
            },
            list:[],
            total:0,
          }
      },
      methods:{
        getLogisticsDeliveryPage(){
          this.apipost("/api/MallBase/GetLogisticsDeliveryPage", this.msg, res => {
            if (res.data.resultCode == 1) {
              this.list = res.data.data.pageData;
              this.total = res.data.data.count;
            } else {
              this.Info(res.data.message);
            }
          })
        },
        search(){
          this.msg.pageIndex=1;
          this.msg.pageSize=20;
          this.getLogisticsDeliveryPage()
        },
        Edit(row){
          this.$router.push({
            name: 'addAddress',
            query: {
              ID:row.ID,
              blank: "y"
            }
          });
        },
        delete_b(row){
          let that=this;
          that.Confirm("是否删除?", function () {
            that.apipost(
              "/api/MallBase/DelDelivery",
              {Id:row.ID},
              res => {
                if (res.data.resultCode == 1) {
                  that.Success(res.data.message);
                  that.getLogisticsDeliveryPage();
                } else {
                  that.Error(res.data.message);
                }
              },
            );
          });
        },
        address(){
          this.$router.push('/addAddress');
        },
        handleCurrentChange(val){
          this.msg.pageIndex = val;
          this.getLogisticsDeliveryPage();
        }
      },
      mounted(){
        this.getLogisticsDeliveryPage()
      }
    }
</script>

<style scoped>
  .returnAddressList .el-card__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
  }
  .returnAddressList .search_s{
    width: 100%;
    padding: 18px 20px;
    background: white;
    margin-top: 15px
  }
  .returnAddressList .table-body{
    padding: 0 20px 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
</style>
