<template>
  <div class="layout-no-flex">
    <el-row class="row-full">
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-row>
    <el-card>
      <h4 class="card-header" slot="header">答题信息</h4>
      <el-row class="field-item-basicinfo">
        <el-col :span="8" v-for="(item, index) in basicInfo" :key="item.label + '-' + index">
          <p >{{item.label}}:{{item.value}}</p>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="fields && dataValue">
      <h4 class="card-header" slot="header">答题详情</h4>
      <el-row class="field-item" v-for="(field, index) in fields" :key="field.label + '-' + index">
        <el-col :span="6">
          <p class="field-label">{{field.label}}</p>
        </el-col>
        <el-col :span="18">
          <p class="field-value" v-html="dataValue[field.label]"></p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import util from '@src/common/util.js'
var uaparser = null
export default {
  props: {
    id: {
      type: String
    }
  },
  mounted () {
    this.getModelAndData()
  },
  watch: {
    id: 'getModelAndData'
  },
  data () {
    return {
      model: null,
      data: null,
      fields: null,
      dataValue: null,
      siteUrl: ''
    }
  },
  computed: {
    basicInfo() {
      let arr = []
      if (uaparser !== null) {
        let browserInfo = uaparser.getBrowser()
        let OSInfo = uaparser.getOS()
        arr.push({label: '浏览器', value: browserInfo.name + ' ' + browserInfo.version})
        arr.push({label: '操作系统', value: OSInfo.name + ' ' + OSInfo.version})
        let deviceInfo = uaparser.getDevice()
        if (deviceInfo.vendor !== null && deviceInfo.vendor !== undefined) {
          let deviceStr = deviceInfo.vendor
          if (deviceInfo.model !== null && deviceInfo.model !== undefined) {
            deviceStr += ' ' + deviceInfo.model
          }
          arr.push({label: '设备信息', value: deviceStr})
        }
      }
      if (this.data !== null) {
        if (this.data.addUserIP !== '') {
          arr.push({label: '提交时间', value: this.data.addTime})
        }
        if (this.data.addUserIP !== '') {
          arr.push({label: '用户IP', value: this.data.addUserIP})
        }
        if (this.data.answerTime !== '' && this.data.answerTime !== 0) {
          let time = this.data.answerTime
          let timeStr = time + '秒'
          if (time > 60) {
            timeStr = Math.floor(time / 60) + '分' + time % 60 + '秒'
          }
          arr.push({label: '答题时长', value: timeStr})
        }
      }

      return arr
    }
  },
  methods: {
    async getModelAndData () {
      this.data = null
      this.model = null
      this.fields = null
      this.dataValue = null
      this.siteUrl = null
      if (typeof window.UAParser === 'undefined') {
        await util.loadJS('./lib/ua-parser.min.js')
      }
      if (this.id && !isNaN(parseInt(this.id))) {
        let dataRes = await axios.get(`/ui/customforms/dataItem/${this.id}`)
        if (dataRes.data.status === 1 && dataRes.data.data) {
          this.data = dataRes.data.data
          this.data.content = JSON.parse(this.data.content)
          if (this.data.clientInfo !== '') {
            var ua = JSON.parse(this.data.clientInfo).userAgent
            uaparser = new window.UAParser(ua)
            // console.log('uaparser', uaparser)
          }
          let modelRes = await axios.get(`/ui/customforms/${this.data.customFormID}`)
          if (modelRes.data.status === 1 && modelRes.data.data) {
            this.model = modelRes.data.data
            this.model.nameLabelMap = JSON.parse(this.model.nameLabelMap)
            this.fields = this.model.nameLabelMap

            let siteUrlRes = await axios.get(`/ui/customforms/getSiteUrl/${this.model.siteID}`)
            if (siteUrlRes.data.status === 1 && siteUrlRes.data.data) {
              this.siteUrl = siteUrlRes.data.data
              this.dataValue = await this.checkField(this.fields, this.data)
            }
          }
        }
      }

      if (!this.data || !this.model || !this.fields || !this.dataValue || !this.siteUrl) {
        this.data = null
        this.model = null
        this.fields = null
        this.dataValue = null
        this.siteUrl = null
      }
    },
    async checkField (fields, item) {
      let itemData = {}
      for (let j = 0, flen = fields.length; j < flen; j++) {
        let field = fields[j]
        let res = []
        for (let k = 0, clen = field.controls.length; k < clen; k++) {
          let control = field.controls[k]
          let value = item.content[control.name]
          if (value || control.type === 'AddressWidget') {
            let valStr = ''
            valStr += control.prefix || ''

            switch (control.type) {
              case 'SwitchWidget':
                valStr = value ? '是' : '否'
                break

              case 'AddressWidget':
                valStr += item.content[control.name + '-province'] || ''
                valStr += valStr ? ' - ' : ''
                valStr += item.content[control.name + '-city'] || ''
                valStr += valStr ? ' - ' : ''
                valStr += item.content[control.name + '-county'] || ''
                break

              case 'UploadWidget':
                let rRes = await axios.get(`/ui/customforms/getResources/${value}`)
                if (rRes.data.status === 1 && rRes.data.data) {
                  let resource = rRes.data.data
                  valStr = `<a target="_blank" href="${this.siteUrl + resource.path}" download="${resource.oldName}}">${resource.oldName}</a>`
                }
                break

              default:
                valStr = Object.prototype.toString.call(value) === '[object Array]' ? '[' + value.join(', ') + ']' : value
                break
            }

            valStr = valStr.replace(/[\r]?\n/gm, '<br/>')
            valStr += control.suffix || ''

            res.push(`<span class="custom-form-data-list-item-row">${valStr}</span>`)
          } else {
            res.push('')
          }
        }

        itemData[field.label] = res.join('')
      }

      itemData.ID = item.ID
      itemData.addTime = item.addTime
      return itemData
    }
  }
}

</script>

<style scoped>
  .field-item-basicinfo {
    text-align: left;
    line-height: 36px;
  }
  .field-item {
    padding: 5px 0;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d9d9d9;
  }

  .field-item:hover {
    border-bottom: 1px dashed #28b06e;
  }

  .field-label {
    padding-right: 5px;
    text-align: right;
  }

  .field-label:after {
    content: '：';
  }

  .field-value {
    padding-left: 5px;
  }

  .card-header {
    padding-left: 10px;
    border-left: 5px solid #28b06e;
  }
</style>

<style>
  .field-value .custom-form-data-list-item-row {
    display: inline-block;
    margin-left: 5px;
    padding-left: 5px;
  }
</style>
