<template>
  <div>
    <div class="expand-row" v-for="(item, idx) in row.navigatorData" :key="idx">
      <div class="block"></div>
      <div class="id">
        <span class="expand-key">次序: </span>
        <span class="expand-value">{{ idx + 1 }}</span>
      </div>
      <div class="name">
        <span class="expand-key"></span>
        <span class="expand-value">{{ item.name }}</span>
      </div>
      <div class="url">
        <template v-if="item.pageType == 1">
          {{item.pageName}}
        </template>
        <template v-else>
          {{item.pageUrl}}
        </template>
      </div>
      <div class="author">
        <span class="expand-value">{{ row.author }}</span>
      </div>
       <div class="time">
        <span class="expand-value">{{ row.updatedAt }}</span>
      </div>
       <div class="operation">
        <span class="expand-value"><Button :disabled="item.pageType == 1" @click="select(item)" type="primary" size="small">选择</Button></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props: {
        row: {
          type: Object,
          default: () => {}
        },
        index: {
          type: [String, Number],
          default: ''
        }
    },
    methods: {
      select(nav) {
        const data = {};
        data.pageType = 3;
        data.pageName = nav.pageName;
        data.pageUrl = nav.pageUrl;
        this.$emit('select', data)
        return;
      }
    }
};
</script>
<style scoped lang="less">
.expand-row{
  display: flex;
  align-items: center;
  margin: 16px 0;
  &>div{
    word-break: break-all;
  }
  .block{
    width: 40px;
    flex-shrink: 0;
  }
  .id{
    flex-shrink: 0;
    width: 80px;
    text-align: center;
  }
  .name{
    flex-shrink: 0;
    width: 160px;
    text-align: center;
  }
  .url{
    flex-shrink: 0;
    width: 250px;
    text-align: center;
  }
  .author{
    flex-shrink: 0;
    width: 90px;
    text-align: center;
  }
  .time{
    flex-shrink: 0;
    width: 170px;
    text-align: center;
  }
  .operation {
    flex: 1;
    text-align: center;
  }
}
</style>