<template>
  <div class="xd-content-info">
    <div v-if="title" class="xd-content-info__h1">
      {{title}}
      <el-button v-if="showBtn" @click="handleBtnClick" type="primary" plain size="small">{{ btnTitle }}</el-button>
    </div>
    <el-table
      class="xd-content-info__table"
      :data="uiList"
      :show-header="false"
      v-loading="loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" :width="lableWidth">
        <template slot-scope="scope">
          <span class="xd-content-info__table-title">{{ scope.row.label }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" min-width="400px">
        <template slot-scope="scope">
          <slot :item="scope.row" :list="uiList" :label="scope.row.key || scope.$index">
            <div>{{scope.row.value}}</div>
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "XdContentInfo",
    props: {
      title: {
        type: String,
        default: '账号详情'
      },
      list: {
        type: Array | null,
        default: null
      },
      lableWidth: {
        type: Number | String,
        default: 150
      },
      btnTitle: {
        type: String,
        default: '查看信息'
      },
      showBtn: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: true,

        uiList: [],
        testData: [
          {value: 33, label: '账号ID'},
          {value: 's423321965670009245', label: '订单ID'},
          {value: '2021-12-09 15:30:21', label: '支付时间'},
          {value: '2021-12-09 15:30:08', label: '下单时间'},
          {value: 25, label: '价格'},
          {value: {order_id: 's423321965670009245'}, label: '退款', key: 'refund'},
          {value: {order_id: 's423321965670009245'}, label: '去接口下单', key: 'submit'},
        ]
      }
    },
    watch: {
      list() {
        this.init()
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        if (this.list === null) this.uiList = this.$xdHelper.cloneDeep(this.testData);
        else this.uiList = this.$xdHelper.cloneDeep(this.list);
        this.loading = false;
      },
      handleBtnClick() {
        this.$emit('btnClick')
      }
    }
  }
</script>

<style scoped lang="scss">
  .xd-content-info {
    &__h1 {
      padding: 10px 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #111;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &__table {
      width: 100%;

      ::v-deep .el-table_1_column_1 {
        background: #f8f8f8;
      }

      &-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
      }
    }
  }
</style>
