<template>
  <div>
    <u-list :style="{ height: dataList.length > 0 ? '500px' : '0' }">
      <u-list-item v-for="(item, index) in dataList" :key="index" borderBottom>
        <div class="list-wrapper">
          <div class="list-item">{{ item.name }}</div>
          <div class="list-item" style="width: 50%">{{ item.postName }}</div>
          <div class="list-item">
            <div v-if="item.annotation == 1">
              <u-button type="success" plain size="mini" style="width: 50px" @click="handleApproval(item)">
                已批阅
              </u-button>
            </div>
            <div v-else>
              <u-button type="error" plain size="mini" @click="handleApproval(item)">未批阅</u-button>
            </div>
          </div>
        </div>
        <u-line color="rgba(15,39,75,0.2)" />
      </u-list-item>
    </u-list>
    <u-divider v-if="dataList.length == 0" text="暂无数据"></u-divider>
  </div>
</template>

<script>
import Steps from 'pages/component/Steps'

export default {
  components: { Steps },
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    currentIndex: {
      type: Number,
      default: 4
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isLeave: {
      type: Boolean,
      default: false
    },
    isSubcontractor: {
      type: Boolean,
      default: false
    },
    proId: {
      type: String | Number,
      default: ''
    },
    consUuid: {
      type: String | Number,
      default: ''
    },
    taskId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    // 审批按钮
    handleApproval(item) {
      console.log('审批状态', item.annotation, this.currentIndex, this.isDetail)
      const baseUrl = this.currentIndex === 4 ? '/pages/projectInfo/builderDetails' : '/pages/projectInfo/toolDetails'
      const params = {
        baseUrl: this.currentIndex === 4 ? '/pages/projectInfo/builderDetails' : '/pages/projectInfo/toolDetails',
        id: item.id,
        uuid: item.uuid,
        proId: this.proId,
        consUuid: this.consUuid,
        taskId: this.taskId,
        isApproval: item.annotation == '0' && !this.isDetail ? true : false
      }
      uni.navigateTo({
        url: `${baseUrl}?params=${JSON.stringify(params)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .list-item {
    margin: 8px 0;
    width: 25%;
    font-weight: 400;
    font-size: 12px;
    color: #0f274b;
    display: flex;
    justify-content: center;
    align-items: center;
    // 第一个文字居左
    &:first-child {
      justify-content: flex-start;
    }
    // 第三个里面的按钮居右
    &:last-child {
      justify-content: flex-end;
    }
  }

  .item-width {
    width: 33.3%;
  }
}
</style>
