<template>
  <a-modal
    centered
    class="chooseAddressList-modal"
    :footer="null"
    :maskClosable="false"
    title="收货地址"
    v-model="isShow"
    @cancle="isShow=false"
    width="70%">
    <!-- 操作按钮 -->
    <div class="table-operator">
      <a-button id="chooseAddressList-add" type="primary" @click="handleEdit()">新增收货地址</a-button>
    </div>
    <!-- 列表 -->
    <s-table
      class="sTable"
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 收货人 -->
      <template slot="consignee" slot-scope="text, record">
        <div class="item-box">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{record.consignee}}</span>
            </template>
            <p class="ellipsis-txt">{{record.consignee}}</p>
          </a-tooltip>
          <span v-if="record.isDefault" class="badge-txt">默认</span>
        </div>
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-button type="link" v-if="!record.isDefault" @click="handleDefault(record)" id="chooseAddressList-default-btn">设置为默认地址</a-button>
        <a-button type="link" @click="handleEdit(record)" id="chooseAddressList-edit-btn" style="margin-left: 5px;">编辑</a-button>
        <a-button type="link" @click="handleDel(record)" id="chooseAddressList-del-btn" style="margin-left: 5px;">删除</a-button>
      </template>
      <!-- 选择 -->
      <template slot="choose" slot-scope="text, record">
        <a-button type="primary" @click="handleChoose(record)" id="chooseAddressList-choose-btn">选择</a-button>
      </template>
    </s-table>
    <!-- 新增/编辑地址 -->
    <edit-address-modal :openModal="openAddrModal" @ok="handleOk" @close="openAddrModal=false" />
  </a-modal>
</template>

<script>
  import { STable, VSelect } from '@/components'
  import editAddressModal from './editAddressModal'
  export default{
    name: 'ChooseAddressModal',
    components: { STable, VSelect, editAddressModal },
    props: {
      openModal: { //  弹框显示状态
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        isShow: this.openModal, //  是否打开弹框
        // 表头
        columns: [
          { title: '收货人', scopedSlots: { customRender: 'consignee' }, align: 'center', ellipsis: true },
          { title: '手机号码', dataIndex: 'phone', width: 120, align: 'center' },
          { title: '收货地址', dataIndex: 'address', align: 'center', ellipsis: true },
          { title: '操作', scopedSlots: { customRender: 'action' }, width: 295, align: 'center' },
          { title: '选择', scopedSlots: { customRender: 'choose' }, width: 160, align: 'center' },
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.disabled = true
          // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
          //   const data = res.data
          //   const no = (data.pageNo - 1) * data.pageSize
          //   for (var i = 0; i < data.list.length; i++) {
          //     data.list[i].no = no + i + 1
          //   }
          //   this.disabled = false
          //   return data
          // })
          const _this = this
          return new Promise(function(resolve, reject){
            const data = {
              pageNo: 1,
              pageSize: 10,
              list: [
                { id: '1', consignee: '张三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: true },
                { id: '2', consignee: '张冀凯股份结构设计风格剑荡四方收费价格就会收到福建师范大书法家顾客三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: false },
                { id: '3', consignee: '张三', phone: '15878458789', address: '陕西省西安市到福建师范大书法家雁塔区高新三路', isDefault: false },
              ],
              count: 10
            }
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            _this.disabled = false
            resolve(data)
          })
        },
        openAddrModal: false, // 选择地址弹框是否显示
      }
    },
    methods: {
      //  设为默认
      handleDefault(row){
        
      },
      //  新增/编辑收货地址
      handleEdit(row){
        this.openAddrModal = true
      },
      //  选择
      handleChoose(row){
        
      },
      //  删除
      handleDel(row){
        const _this = this
        this.$confirm({
          title: '提示',
          content: '删除后不可恢复，确定要进行删除吗？',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            // delectRolePower({
            //   id: row.id
            // }).then(res => {
            //   console.log(res, 'res1111')
            //   if (res.status == 200) {
            //     _this.$message.success(res.message)
            //     _this.$refs.table.refresh()
            //   }
            // })
          }
        })
      },
      //  地址保存
      handleOk(data){
        
      }
    },
    watch: {
      //  父页面传过来的弹框状态
      openModal (newValue, oldValue) {
        this.isShow = newValue
      },
      //  重定义的弹框状态
      isShow (newValue, oldValue) {
        if (!newValue) {
          this.$emit('close')
        }
      }
    }
  }
</script>

<style lang="less">
  .chooseAddressList-modal{
    .table-operator{
      margin-bottom: 15px;
    }
    .item-box{
      position: relative;
      .ellipsis-txt{
        margin: 0;
        width: 100%;    
        overflow: hidden;    
        text-overflow:ellipsis;    
        whitewhite-space: nowrap;
      }
      .badge-txt{
        position: absolute;
        right: -15px;
        top: -17px;
        line-height: 20px;
        padding: 0 7px;
        font-size: 12px;
        background-color: #fff;
        color: #ed1c24;
        border-color: #ed1c24;
        border-radius: 20px;
        box-shadow: 0 0 0 1px #d9d9d9 inset;
      }
    }
  }
</style>
