<template>
  <el-form
    inline
    class="dialog-info"
    label-width="110px"
  >
    <el-form-item label="会员类型">
      {{ info.category | memberCategory }}
    </el-form-item>
    <el-form-item label="类型名称">
      {{ info.name }}
    </el-form-item>
    <el-form-item label="起售时间">
      {{ info.saleDateStart | formatTime }}
    </el-form-item>
    <el-form-item label="停售时间">
      {{ info.saleDateEnd | formatTime }}
    </el-form-item>
    <el-form-item label="游玩开始时间">
      {{ info.play_startdate | formatTime }}
    </el-form-item>
    <el-form-item label="游玩截止时间">
      {{ info.play_enddate | formatTime }}
    </el-form-item>
    <el-form-item label="价格">
      {{ info.capital }}元
    </el-form-item>
    <el-form-item label="检票方式">
      {{
        [
          info.check_pattern,
          info.scenic_checkTimes_type,
          info.valid_days,
          info.checkLimitTimes
        ] | complicatedCheckType
      }}
    </el-form-item>
    <el-form-item label="身份证检票">
      {{ info.idcard_check | yesOrNo }}
    </el-form-item>
    <el-form-item label="人脸识别通关">
      {{ info.face_check | yesOrNo }}
    </el-form-item>
    <el-form-item label="IC卡通关">
      {{ info.iccard_check | yesOrNo }}
    </el-form-item>
    <el-form-item label="指纹通关">
      {{ info.fingerprint_check | yesOrNo }}
    </el-form-item>
    <div
      class="block-wrap">
      <div class="block-title">
        适用景点及检票次数
      </div>
      <ul class="pill-wrap">
        <li
          class="pill"
          v-for="(item,index) in info.memberTypeScenic"
          :key="index">
          <span>{{ getScenicName(item.scenic_id) }}</span>
          <span>{{ getCheckCount(info, item) }}</span>
        </li>
      </ul>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    scenicList: {
      type: Array,
      default: () => []
    }
  },
  filters: {
    complicatedCheckType (arr) {
      /* 0: check_pattern,
         1: scenic_checkTimes_type,
         2: valid_days,
         3: checkLimitTimes */
      switch (arr[0]) {
        case 'count':
          switch (arr[1]) {
            case 1:
              return `单人按次 单独限制`
            case 2:
              return `单人按次 批量限制 共可检${arr[3]}次`
            default:
              return ''
          }
        case 'time':
          switch (arr[2]) {
            case -1:
              return `按有效期 截止到票种有效期`
            default:
              return `按有效期 ${arr[2]}天`
          }
        default:
          return ''
      }
    }
  },
  methods: {
    getScenicName (id) {
      let scenic = this.scenicList.find(s => s.id === id)
      return scenic ? scenic.name : ''
    },
    getCheckCount (typeInfo, item) {
      switch (typeInfo.check_pattern) {
        case 'count':
          return typeInfo.scenic_checkTimes_type === 1 ? item.checkLimitTimes + ' 次' : '不限次'
        case 'time':
          return '不限次'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.scenic-item {
  margin-right: 20px;
}
.info-form {
  display: flex;
  flex-wrap: wrap;
  .info-form-line {
    flex-grow: 1;
    width: 50%;
    line-height: 24px;
    display: flex;
    .info-form-label {
      width: 100px;
      padding-right: 12px;
      color: #64667B;
      text-align: right;
    }
  }
}
</style>
