<template>
  <div class="product-analysis-report">
    <div class="page-mian">
      <div class="pdf-left" ref="pdf">
        <embed class="embed" width="100%" height="100%" :src="cases.pdf_uris[0]" />
      </div>
      <div class="right-content">
        <div class="title">产品分析报告</div>
        <input type="text" class="code" placeholder="请输入基金简称+基金代码" v-model="titleValue" />
        <div v-for="(item, index) in completions" :key="index">
          <!-- 产品概括 -->
          <product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
          <!-- 投资目标 -->
          <invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
          <!-- 业绩比较基准 -->
          <compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
          <!-- 风险收益特征 -->
          <features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
          <!-- 基金涉及费用 -->
          <cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
        </div>
        <!-- 提交 -->
        <div class="submit-btn" @click="commitCase">提交报告</div>
      </div>
    </div>
  </div>
</template>

<script>
import { caseCompletions, getCommitCase, commitCase } from '../api'
import Product from '../components/Products.vue'
import InvestTarget from '../components/InvestTarget.vue'
import Compares from '../components/Compares.vue'
import Features from '../components/Features.vue'
import Cost from '../components/Cost.vue'
export default {
  components: {
    Product,
    InvestTarget,
    Compares,
    Features,
    Cost
  },
  data() {
    return {
      completions: [],
      resultCompletions: [],
      titleValue: ''
    }
  },
  computed: {
    cases() {
      return this.$store.state.case
    }
  },
  mounted() {
    this.$refs.pdf.style.height = `${document.documentElement.clientHeight - 40}px`
    console.log(this.$refs.pdf)
    this.getCommitCase()
  },
  methods: {
    // 模板  数据回显
    caseCompletions(id) {
      caseCompletions(id).then(res => {
        res.data.items.map(item => {
          return item.completions.map(cItem => {
            if (!Array.isArray(this.resultCompletions)) {
              const findData = this.resultCompletions.answer.find(fItem => {
                return fItem.id === cItem.id
              })
              findData ? (cItem.commit_answer = findData.commit_answer) : (cItem.commit_answer = '')
            } else {
              cItem.commit_answer = ''
            }
            return cItem
          })
        })
        this.completions = res.data.items
        // 标题回显
        this.titleValue = this.completions.find(item => {
          return item.tag === 'product_title'
        }).completions[0].commit_answer
      })
    },
    // 结果
    getCommitCase() {
      getCommitCase().then(res => {
        this.resultCompletions = res.data.records
        this.caseCompletions(this.cases.id)
      })
    },
    // 提交
    commitCase() {
      // 产品概括数据
      const productCount = []
      this.$refs.product[0].data.completions.forEach(item => {
        productCount.push({ id: item.id, commit_answer: item.commit_answer })
      })
      // 投资目标
      const originalData = this.$refs.investTarget[0].data.completions[0]
      const investTargetCount = [{ id: originalData.id, commit_answer: originalData.commit_answer }]
      // 业绩比较基准数据
      const comparesCount = []
      this.$refs.compares[0].inputList.forEach(item => {
        comparesCount.push(`${item.input1.split(';').join('')},${item.input2.split(';').join('')}`)
      })
      const comparesData = {
        id: this.$refs.compares[0].data.completions[0].id,
        commit_answer: comparesCount.join(';')
      }
      this.$refs.compares[0].data.completions[0].commit_answer = comparesCount.join(';')
      // 风险收益特征数据
      const featuresCount = []
      this.$refs.features[0].data.completions.forEach(item => {
        featuresCount.push({ id: item.id, commit_answer: item.commit_answer })
      })
      // 基金涉及费用数据
      const costCount = []
      this.$refs.cost[0].data.completions.forEach(item => {
        costCount.push({ id: item.id, commit_answer: item.commit_answer })
      })
      // 标题数据
      const findTitleData = this.completions.find(item => {
        return item.tag === 'product_title'
      }).completions[0]
      const titCount = [{ id: findTitleData.id, commit_answer: this.titleValue }]
      const allData = [
        ...titCount,
        ...productCount,
        ...investTargetCount,
        ...[comparesData],
        ...featuresCount,
        ...costCount
      ]
      // 空数据的索引
      let emptyDataIndex = allData.findIndex(item => item.commit_answer === '')
      // 判断业绩比较基准是否为空
      const hasEmptyInput = !!this.$refs.compares[0].inputList.find(item => {
        return item.input1 === '' || item.input2 === ''
      })
      if (hasEmptyInput) {
        const dataId = this.$refs.compares[0].data.completions[0].id
        const dataIndex = allData.findIndex(item => item.id === dataId)
        emptyDataIndex = emptyDataIndex > dataIndex && emptyDataIndex !== -1 ? dataIndex : emptyDataIndex
      }
      if (emptyDataIndex === -1) {
        commitCase({ answers: JSON.stringify(allData) })
          .then(res => {
            const data = {
              score: res.data.score,
              data: [
                this.$refs.product[0].data,
                this.$refs.investTarget[0].data,
                this.$refs.compares[0].data,
                this.$refs.features[0].data,
                this.$refs.cost[0].data,
                { tag: 'title', value: this.titleValue }
              ]
            }
            window.localStorage.reportData = JSON.stringify(data)
            this.$message({
              message: '保存成功！你可以在作品展示中查看/编辑报告，查看成绩',
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push({ path: '/product-analysis/result' })
            }, 2000)
          })
          .catch(err => {
            this.$message.error(err.message || '稍后再试')
          })
      } else {
        // 空数据的元素
        const emptyElement = document.querySelector(`[id="${allData[emptyDataIndex].id}"]`)
        let top = 140
        if (emptyElement) {
          // 空数据元素的位置
          top = emptyElement.getBoundingClientRect().top + document.documentElement.scrollTop
        }
        window.scrollTo(0, top)
        this.$message('请填写完整')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
input {
  background: none;
  border: none;
  outline: none;
}
.product-analysis-report {
  padding: 33px 50px 0;
  .page-mian {
    // overflow: hidden;
    background: #fff;
    display: flex;
    padding: 20px;
    .right-content {
      width: 674px;
      background: #f8f8f8;
      border: 1px solid #dcdcdc;
      border-radius: 10px;
      .code {
        width: 370px;
        margin: 35px auto;
        height: 47px;
        display: block;
        text-align: center;
        border-bottom: 1px solid #b4b4b4;
        &::-webkit-input-placeholder {
          color: #afafaf;
        }
      }
      .submit-btn {
        width: 119px;
        background: #68b8a4;
        border-radius: 16px;
        text-align: center;
        margin: 42px auto;
        line-height: 32px;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
      .title {
        font-size: 24px;
        font-weight: bold;
        color: #4cac94;
        line-height: 100%;
        text-align: center;
        margin-top: 27px;
      }
    }
    .pdf-left {
      flex: 1;
      margin-right: 10px;
      // height: 500px;
      position: sticky;
      top: 20px;
      left: 0;
    }
  }
}
</style>
