<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/09/25. -->
<!--A Cell -->

<template>
  <div
    :class="['lc-cell', cellIndex=='first' && 'first-cell' , hasTopBorder && 'cell-top-border', hasBottomBorder && 'cell-bottom-border', desc && 'has-desc']"
    :style="cellStyle"
    :accessible="autoAccessible"
    :aria-label="`${label},${title},${desc}`"
    @click="cellClicked">

    <div class="line top-line" v-if="!hasTopBorder && cellIndex=='first'"></div>

    <slot name="label">
    </slot>
    <div v-if="label" class="cell-label">
      <image :src="icon" v-if="icon" :style="iconStyle" :class="['cell-label-icon', desc && 'is-desc']"></image>
      <div>
        <text class="cell-label-text" :style="labelStyle">{{label}}</text>
        <text class="cell-desc-text" v-if="desc" :style="descStyle">{{desc}}</text>
      </div>
    </div>
    

    <div class="cell-title">
      <slot name="title">
      </slot>
      <text v-if="title" class="cell-content" :style="titleStyle">{{title}}</text>
      
    </div>
    <slot name="value"></slot>
    <image :src="arrowIcon"
           class="cell-arrow-icon"
           :aria-hidden="true"
           v-if="hasArrow"></image>
    <div class="line bottom-line" v-if="!hasBottomBorder && cellIndex!=='last'"></div>           
  </div>
</template>

<style scoped>
  .lc-cell {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 26px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #ffffff;
  }
  .line {
    position: absolute;
    left: 30px;
    right: 0;
    height: 1px;
    background-color: #D7D7D7;
  }
  .top-line {
    top: 0;
  }
  .bottom-line {
    bottom: 0;
  }

  .has-desc {
    padding-bottom: 22px;
    padding-top: 22px;
  }

  .cell-top-border {
    border-top-color: #D7D7D7;
    border-top-width: 1px;
  }

  .cell-bottom-border {
    border-bottom-color: #D7D7D7;
    border-bottom-width: 1px;
  }

  .cell-label {
    margin-right: 40px;
    flex-direction: row;
    align-items: center;
  }
 
  .cell-label-icon {
    width: 60px;
    height: 60px;
    margin-right: 30px;
  }

  .is-desc {
    width: 72px;
    height: 72px;
  }

  .cell-label-text {
    font-size: 34px;
    color: #4A4A4A;
    line-height: 34px;
  }

  .cell-title {
    flex: 1;
    margin-right: 30px;
  }

  .cell-content {
    text-align: right;
    font-size: 30px;
    color: #7A7A7A;
    line-height: 30px; 
  }

  .cell-arrow-icon {
    width: 32px;
    height: 32px;
    margin-right: -8px;
  }

  .cell-desc-text {
    font-size: 26px;
    color: #787878;
    line-height: 30px;
    margin-top: 8px;
  }
</style>

<script>
  import Utils from '../utils';
  import Light from 'light'

  export default {
    props: {
      label: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      desc: {
        type: String,
        default: ''
      },
      link: {
        type: String,
        default: ''
      },
      hasTopBorder: {
        type: Boolean,
        default: true
      },
      hasBottomBorder: {
        type: Boolean,
        default: true
      },
      hasArrow: {
        type: Boolean,
        default: false
      },
      arrowIcon: {
        type: String,
        default: 'data:image/png;base64,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'
      },
      cellStyle: {
        type: Object,
        default: () => ({})
      },
      labelStyle: {
        type: Object,
        default: () => ({})
      },
      descStyle: {
        type: Object,
        default: () => ({})
      },
      iconStyle: {
        type: Object,
        default: () => ({})
      },
      titleStyle: {
        type: Object,
        default: () => ({})
      },
      // titleTextStyle: {
      //   type: Object,
      //   default: () => ({})
      // },
      autoAccessible: {
        type: Boolean,
        default: true
      },
      icon: {
        type: String,
        default: ''
      },
      cellIndex: {
        type: String,
        default: ''
      }
    },
    methods: {
      cellClicked (e) {
        const link = this.link;
        this.$emit('LcCellClicked', { e });
        // link && Utils.goToH5Page(link, true);
        link && Light.navigate(link);
      }
    }
  };
</script>
