<template>
  <div
    class="bx-protocol"
    >
    <span @click="changeSelect">
      <bxs-icon
        :name="value ? 'check-solid' : 'circle'"
        :color="value ? color : ''"
        size="18px"
        />
    </span>
    <span class="bx-protocol-primary">
      <span>我已认真阅读</span>
      <a
        :style="'color:' + color"
        @click="onClick(item)"
        v-for="(item, index) in protocolList"
        :key="index"
        :href="item.url"
        :target="item.target"
        >
        {{ item.name }}
      </a>
      <span>,并同意上述协议约定</span>
    </span>
    <div class="bx-protocol-sub">
      <slot name="subText" />
    </div>
  </div>
</template>
<script>
import { create } from '../utils'
import Icon from '../icon/index'
import Emitter from '../mixins/emitter'

const onlyValues = values => str => values.indexOf(str) !== -1
export default create({
  name: 'protocol',
  mixins: [Emitter],
  props: {
    // 协议列表
    protocolList: {
      type: Array,
      default: [],
    },
    value: {
      type: Boolean,
      default: false,
    },
    // 高亮颜色
    highlightColor: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'primary',
      validator: onlyValues(['primary', 'minor']),
    },
  },
  data() {
    return {}
  },
  computed: {
    color() {
      return (
        this.highlightColor ||
        (this.type === 'primary' && '#508CEE') ||
        (this.type === 'minor' && '#FF5000')
      )
    },
  },
  methods: {
    onClick(item) {
      if (!item.url && item.onClick) {
        item.onClick()
      }
    },
    changeSelect() {
      this.$emit('input', !this.value)
      this.dispatch('bxs-form-item', 'form.item.validate')
    },
  },
  components: {
    [Icon.name]: Icon,
  },
})
</script>
<style>
@import './index.css';
</style>
