<template>
  <div >
    <Modal id="admin_detail_modal" v-model="isDetailShowMd" :title="title" :footer-hide="true" class-name="vertical-center-modal" :width="900">
      <div class="admin_detail">
        <div class="content">
          <table class="list">
            <tr class="item">
              <td class="name">姓名</td>
              <td class="value">{{detail.realname}}</td>
              <td class="name">手机</td>
              <td class="value">{{detail.mobile}}</td>
              <td class="name">状态</td>
              <td class="value">{{detail.status?'正常':'锁定'}}</td>
            </tr>
            <tr class="item">
              <td class="name">支付宝</td>
              <td class="value">{{detail.alipay_account}}</td>
              <td class="name">支付宝姓名</td>
              <td class="value" colspan="3">{{detail.alipay_name}}</td>
            </tr>
            <tr class="item">
              <td class="name">银行</td>
              <td class="value">{{detail.bank_name}}</td>
              <td class="name">卡号</td>
              <td class="value">{{detail.card_num}}</td>
              <td class="name">持卡人</td>
              <td class="value">{{detail.card_name}}</td>
            </tr>
            <tr class="item">
              <td class="name">开户行</td>
              <td class="value">{{detail.branch}}</td>
              <td class="name">开户行地址</td>
              <td class="value" colspan="3">{{detail.province}}{{detail.city}}{{detail.district?detail.district:''}}</td>
            </tr>
          </table>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "admin_detail",
  props: {
    isDetailShow: Boolean,
    detailId:Number,
  },
  data() {
    return {
      title: '员工详情',
      detail: {}
    };
  },
  computed: {
    isDetailShowMd: {
      get(n) {
        if(this.isDetailShow){
          this.getData()
        }
        return this.isDetailShow;
      },
      set(val) {
        this.$emit("update:isDetailShow", val);
      }
    }
  },
  methods: {
    getData () {
      this.$api.getManagerDetail({id:this.detailId})
        .then(data => {
          this.title = '员工 [ '+data.realname+' ] 详情'
          this.detail = data
        })
    }
  },
  created() {},
};
</script>
<style scoped>
.admin_detail {
  padding: 20px 15px;
}
.admin_detail .content {
  width: 100%;
}
.admin_detail .list {
  table-layout: fixed;
  width: 100%;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
.admin_detail td {
  vertical-align: middle;
  padding: 10px;
  font-size: 16px;
  border-top: 1px solid #eeee;
  border-left: 1px solid #eee;
}
.admin_detail .item .name {
  width: 120px;
  text-align: right;
}
</style>


