<template>
  <view class="ComCss">
    <view class="cardCss">
      <u-collapse :border="false" :value="['1']">
        <u-collapse-item name="1">
          <text slot="title" class="slot-title">人员安排</text>
          <view class="u-collapse-content">
            <view class="u-demo-block">
              <text class="u-demo-block__title">组长</text>
              <view class="u-demo-block__content" style="margin-top: 15px;">
                <u--input :value="reportData.leader" disabled suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
              </view>
            </view>
            <view class="u-demo-block">
              <text class="u-demo-block__title">副组长</text>
              <view class="u-demo-block__content" style="margin-top: 15px;">
                <u--input :value="reportData.deputyLeader" disabled suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
              </view>
            </view>
            <view class="u-demo-block">
              <text class="u-demo-block__title">成员</text>
              <view class="u-demo-block__content" style="margin-top: 15px;">
                <u--input :value="reportData.member" disabled suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
              </view>
            </view>
            <view class="u-demo-block">
              <text class="u-demo-block__title">填报人</text>
              <view class="u-demo-block__content" style="margin-top: 15px;">
                <u--input :value="reportData.createBy" disabled suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="cardCss">
      <u-collapse :border="false" :value="['3']">
        <u-collapse-item name="2">
          <text slot="title" class="slot-title">实施情况</text>
          <view class="largeAmountOfTextCss">
            {{reportData.implementationSituation || ""}}
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>

    <view class="cardCss">
      <u-collapse :border="false" :value="['3']">
        <u-collapse-item name="3">
          <text slot="title" class="slot-title">预算主体附件</text>
          <view class="attachmentCss">
            <view class="flexCss">
              <view class="leftCss overflow-one-lines">
                <u-icon size="18" name="/static/images/icon/PDF.png"></u-icon>
                <view class="textCss overflow-one-lines"></view>
              </view>
              <view class="rightCss"> 查看 </view>
            </view>
            <view class="flexCss">
              <view class="leftCss overflow-one-lines">
                <u-icon size="18" name="/static/images/icon/EXCEL.png"></u-icon>
                <view class="textCss overflow-one-lines"></view>
              </view>
              <view class="rightCss"> 查看 </view>
            </view>
            <view class="flexCss">
              <view class="leftCss overflow-one-lines">
                <u-icon size="18" name="/static/images/icon/DOC.png"></u-icon>
                <view class="textCss overflow-one-lines"></view>
              </view>
              <view class="rightCss"> 查看 </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {
      reportData:{
        type:Object
      }
    },
    data() {
      return {
      }
    },
    computed: {

    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .ComCss {}

  .cardCss {
    margin: 20rpx 24rpx;
    padding: 40rpx 30rpx;
    border-radius: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .titleCss {
    margin: 40rpx 0;
  }

  .u-demo-block__title {
    color: #999db0
  }

  .u-demo-block {
    margin: 30rpx 0;
  }

  .attachmentCss {
      padding: 20rpx;
      border-radius: 20px;
      background-color: #f8f9fd;
      box-sizing: border-box;
  }

  .flexCss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32rpx 0;
  }

  .leftCss {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .textCss {
    width: 466rpx;
    height: 35rpx;
    margin:0 4px;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #999db0;
    text-align: left;
    line-height: normal;
    font-size: 26rpx;
  }

  .rightCss {
    width: 60rpx;
    height: 35rpx;
    display: flex;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #ff5630;
    text-align: left;
    font-size: 26rpx;
  }

  .largeAmountOfTextCss {
    text-indent:1em;
    margin-top: 38rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 20rpx;
    background-color: #f8f9fd;
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #999db0;
    text-align: left;
    line-height: 46rpx;
  }

  /deep/.uni-input-input {
    color: #999db0;
  }
</style>
