<template>
  <!-- 后台地址管理页面 -->
  <div class="payHistories">
    <el-row>
      <el-col>
        <h3>{{ $t(`pay.receivingAddress`) }}</h3>




        <el-tabs v-model="activeName">
          <!-- 可用地址 -->
          <!-- <el-tab-pane label="可用地址" name="first">
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <div class="titleBox">
                    <span>地址 1</span>
                    <span>历史记录</span>
                    <span>地址信息</span>
                    <button @click="dialogVisible = true">删除</button>
                  </div>
                </template>
                <div>
                  与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane> -->
          <!-- 新增地址 -->
          <el-tab-pane :label="$t(`pay.addAddress`)" name="second">
            <el-form :label-position="labelPosition" :model="params">
              <el-form-item :label="$t(`pay.fillInNew`)" style="margin: 0;">
                <el-input
                  style="width: 60%"
                  v-model="address"
                  :placeholder="$t(`pay.input`)"
                  type="textarea"
                  resize="none"
                  :autosize="{ minRows: 10, maxRows: 50}"
                  id="lines"
                  @change="handelValue"
                ></el-input>
              </el-form-item>
              <div style="font-size: 14px;height: 40px;">{{$t(`pay.remind`)  }}</div>
              <!-- 提交支付 -->
              <el-button  @click="handelAddress" style="padding: 8px 30px" size="small" type="warning"
                >{{$t(`pay.submit`)  }}</el-button
              >
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <!-- 确认弹窗 -->
        <el-dialog
          :title="$t(`pay.Reminder`)"
          :visible.sync="dialogVisible"
          width="30%"        
        >

          <p>{{$t(`pay.confirmAddition`)  }} {{num}} {{$t(`pay.confirmAddition2`)  }} ?</p>        
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">{{$t(`pay.cancel`)  }}</el-button>
            <el-button :loading="AddLoading" size="small" type="primary" @click="handelConfirm"
              >{{$t(`pay.confirm`)  }}</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  // height: 100vh;
  width: 100%;
}
.chart {
  outline: 1px solid rgba(0, 0, 0, 0.5);

  text-align: center;
}
.table {
  // outline: 1px solid red;
  margin-top: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
//留言数量
.information {
  //  outline: 1px solid rgba(0,0,0,0.5);
  padding: 5px 10px;
  // outline: 1px solid red;
  width: 100%;
  font-size: 15px;
  display: flex;
  margin-top: 5px;
  font-weight: 600;
  // span{

  //   display: inline-block;
  //   width: 100px;
  //   //  outline: 1px solid red;
  //    text-align: right;

  // }
  span:nth-of-type(1) {
    display: inline-block;
    //  outline: 1px solid red;
    width: 150px;
  }
  .num {
    color: #21a0ff;
    display: inline-block;
    width: 100px;
    text-align: left;
    //  outline: 1px solid red;
    font-weight: 600;
  }
}

.replyDialog {
  // border: 1px solid red;
  width: 60%;
  margin: 0 auto;
}

// --------手风琴标题--------------
.titleBox {
  // outline: 1px solid red;
  padding: 0px 10px;
  display: flex;
  height: 70%;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  span {
    margin-left: 10px;
  }
  button {
    // outline: 1px solid red;
    height: 70%;
    padding: 2px 10px;
    background: red;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: 13px;

    // color: ;
  }
}
</style>
<style >
</style>
