<template>
  <div class="form-desc">
    <tooltip
      :visible.sync="options.visible"
      @change="riskDescChange">
      <div
        class="form-desc-wrap"
        slot='container'>
        <div
          v-for="({ name, value }, index) in options.riskDesc"
          :key="index"
          class="form-desc-text">
          <!-- 当描述内容只有一条不展示title -->
          <span
            class="form-desc-text-title"
            v-if="options.riskDesc.length > 1">
            {{ name }}：
          </span>
          <span
            class="form-desc-text-desc"
            v-html="value">
          </span>
        </div>
      </div>
    </tooltip>
  </div>
</template>
<script>
export default {
  components: {
    tooltip: () => import(
      '../tooltip'
      /* webpackChunkName: "form-tooltip" */
    )
  },
  props: {
    options: {
      type: Object,
      default: () => ({
        title: '',
        riskDesc: [],
        visible: false
      })
    }
  },
  methods: {
    riskDescChange() {
      this.$emit('change', this.options)
    }
  }
}
</script>
