<template>
  <view class="ComCss">
    <view class="cardCss">
      <!-- <u-collapse :border="false" :value="['1']">
        <u-collapse-item name="1"> -->
      <text 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 suffixIconStyle="color: #909399"></u--input>
            <!-- <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 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 suffixIconStyle="color: #909399"></u--input>
            <!-- <u--textarea  v-model="reportData.member" disabled
                  suffixIconStyle="color: #909399"></u--textarea> -->
          </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 suffixIconStyle="color: #909399"></u--input>
          </view>
        </view>
      </view>
      <!-- </u-collapse-item>
      </u-collapse> -->
    </view>
    <view class="cardCss">
      <!-- <u-collapse :border="false" :value="['2']"> -->
      <!-- <u-collapse-item name="2"> -->
      <text class="slot-title">实施情况</text>
      <!-- <text slot="title" class="slot-title">实施情况</text> -->
      <view class="largeAmountOfTextCss">
        {{reportData.implementationSituation || ""}}
      </view>
      <!-- </u-collapse-item> -->
      <!-- </u-collapse> -->
    </view>

    <cardMoudule :cardData="fiveLooksData" :required="false" title="'五看'市场调研"></cardMoudule>

    <view class="cardCss">
      <!-- <u-collapse :border="false" :value="['3']"> -->
      <!-- <u-collapse-item name="3"> -->
      <text class="slot-title">预算主体附件</text>
      <view class="attachmentCss" v-if="this.isShowUrl">
        <view class="flexCss" v-for="(item,index) in fileList" :key="index">
          <view class="leftCss overflow-one-lines">
            <u-icon size="18" :name="calcIcon(item.extension)"></u-icon>
            <view class="textCss overflow-one-lines">{{item.fileName}}</view>
          </view>
          <view class="rightCss">
            <view @click="viewAttachments(item.url)">查看</view>
          </view>
        </view>
      </view>
      <!-- </u-collapse-item> -->
      <!-- </u-collapse> -->
    </view>
  </view>
</template>

<script>
  import {
    getInsightFileList
  } from '@/api/organize.js'
  import cardMoudule from "./cardMoudule.vue"
  export default {
    components: {
      cardMoudule
    },
    props: {
      reportData: {
        type: Object
      },
    },
    data() {
      return {
        isShowUrl: false,
        fileList: [],
        fiveLooksData: [
          {
            cardType: 5,
            required: true,
            title: '看行业/趋势',
            value: "",
            key: "seeProfession"
          },
          {
            cardType: 5,
            required: true,
            title: '看市场/客户',
            value: "",
            key: "seeMarket"
          },
          {
            cardType: 5,
            required: true,
            title: '看竞争',
            value: "",
            key: "seeCompete"
          },
          {
            cardType: 5,
            required: true,
            title: '看自身',
            value: "",
            key: "seeSelf"
          },
          {
            cardType: 5,
            required: true,
            title: '看机会',
            value: "",
            key: "seeChance"
          },
        ]
      }
    },
    computed: {

    },
    mounted() {
      setTimeout(() => {
        this.init()
      }, 500)
    },
    methods: {
      calcIcon(type) {
        if (type == '.xlsx' || type == '.xls') {
          return '/static/images/icon/EXCEL.png'
        } else if (type == '.pdf') {
          return '/static/images/icon/PDF.png'
        } else if (type == '.docx' || type == '.doc') {
          return '/static/images/icon/DOC.png'
        }
      },
      init() {
        if (this.reportData.attachmentsUrl == "") {
          this.isShowUrl = false
        } else {
          this.isShowUrl = true
        }
        let uuid = this.reportData.attachmentsUrl;
        getInsightFileList(uuid).then(res => {
          if (res.code === 200) {
            this.fileList = res.rows
          }
        })
        // 获取五看
        this.fiveLooksData.forEach(data => {
          if (data.key in this.reportData) {
            data.value = this.reportData[data.key];
          }
        });
        console.log(this.fiveLooksData);
        // console.log('附件', JSON.parse(JSON.stringify(this.reportData.attachmentsUrl)));
      },

      viewAttachments(urls) {
        uni.getSystemInfo({
          success: function(res) {
            var platform = res.platform.toLowerCase();
            console.log(platform);
            // 如果是安卓设备
            if (platform === 'android' || platform === 'windows') {
              window.open(urls, '_blank');
            }
            // 如果是 iOS 设备
            else if (platform === 'ios') {
              window.location.href = urls
            }
          }
        });
      }
    }
  }
</script>

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

  .slot-title {
    font-size: 15px;
    color: #333333;
  }

  .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 {
    margin-top: 38rpx;
    padding: 20rpx;
    border-radius: 10px;
    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>