<template>
  <div class="passport-container" @click.stop="itemClick">
    <div class="passport-content">
      <div class="passport-title-area">
        <div class="passport-title-info-area">
          <div class="passport-title-info-location">{{projectName}}</div>
          <div class="component-item-passport-item-type" v-if="itemTypeStr.length > 0">{{itemTypeStr}}</div>
        </div>
        <div v-if="!isUsed" class="component-item-passport-item-qrcode" @click.stop="queryQrCode"></div>
      </div>
      <div class="passport-body-area">{{address}}</div>
      <div class="passport-tail-area">
        <div class="passport-tail-time-area">
          <div class="component-item-passport-item-clock"></div>
          <span class="passport-tail-time-area-title">通行时间:</span>
          <span>{{passTime}}</span>
        </div>
        <div v-if="!showButton" class="component-item-passport-item-cancel-btn" @click.stop="cancelApple">{{btnTitle}}</div>
      </div>
    </div>

    <div v-if="showStamp" :class="currStampClass"></div>
  </div>
</template>

<script>
export default {
  name: 'ItemPassportItem',

  props: {
    userType: {
      type: String,
      default: 'owner',
      validator: function (value) {
        return ['owner', 'staff'].indexOf(value) !== -1
      }
    },

    item: {
      type: Object,
      default: null
    },

    translationDict: {
      type: Array,
      default: () => []
    }
  },

  computed: {
    btnTitle () {
      let title = '取消申请'

      if (this.currUserType === 'staff') {
        title = '放行'
      }

      return title
    },

    showButton () {
      let used = true

      try {
        // whetherEffective: 直接是汉字判断, 有效和失效
        let whetherEffective = this.currItem.whetherEffective

        if (whetherEffective != '有效') {
          return true
        }

        // state: 0-(为放行，有效)，1-(已放行-无效)
        let state = this.currItem.state
        if (state.toString() === '0') {
          used = false
        }
      } catch (error) {
        this.util.debugLog(error)
      }

      return used
    },

    projectName () {
      let res = ''

      try {
        res = this.currItem.projectNamne
      } catch (error) {
        this.util.debugLog(error)
      }

      return res
    },

    itemTypeStr () {
      let res = ''

      try {
        let code = this.currItem.itemType
        let dicts = this.currTranslationDict.filter(dict => dict.detail_code === code)
        let dict = dicts[0]
        res = dict.detail_name
      } catch (error) {
        this.util.debugLog(error)
      }

      return res
    },

    address () {
      let addr = ''

      try {
        addr = this.currItem.address
      } catch (error) {
        this.util.debugLog(error)
      }

      return addr
    },

    passTime () {
      let time = ''

      try {
        time = this.currItem.stimatedTime
      } catch (error) {
        this.util.debugLog(error)
      }

      return time
    },

    showStamp () {
      try {
        // whetherEffective: 直接是汉字判断, 有效和失效
        let whetherEffective = this.currItem.whetherEffective
        // state: 0-(未放行)，1-(已放行)
        let state = this.currItem.state

        if (whetherEffective === '有效') {
          if (state.toString() === '0') {
            this.currStampClass = ''
            return false
          } else {
            this.currStampClass = this.usedStampClass
            return true
          }
        } else {
          if (state.toString() === '0') {
            this.currStampClass = this.invalidStampClass
          } else {
            this.currStampClass = this.usedStampClass
          }
          return true
        }
      } catch (error) {
        this.util.debugLog(error)
      }

      this.currStampClass = ''
      return false
    },

    isUsed () {
      let used = true

      if (this.currUserType === 'staff') {
        return used
      }

      try {
        // whetherEffective: 直接是汉字判断, 有效和失效
        let whetherEffective = this.currItem.whetherEffective

        if (whetherEffective != '有效') {
          return true
        }

        // state: 0-(为放行，有效)，1-(已放行-无效)
        let state = this.currItem.state
        if (state.toString() === '0') {
          used = false
        }
      } catch (error) {
        this.util.debugLog(error)
      }

      return used
    }
  },

  data () {
    return {
      currItem: this.item,
      currTranslationDict: this.translationDict,
      currStampClass: '',
      currUserType: this.userType,
      usedStampClass: 'component-item-passport-item-used-stamp',
      invalidStampClass: 'component-item-passport-item-invalid-stamp'
    }
  },

  methods: {
    cancelApple () {
      if (this.currUserType === 'staff') {
        this.$emit("on-pass-action", this.currItem)
      } else if (this.currUserType === 'owner') {
        this.$emit("on-cancel-apply", this.currItem)
      }
    },

    queryQrCode () {
      this.$emit("on-query-qrcode", this.currItem)
    },

    itemClick () {
      this.$emit('on-passport-clic', this.currItem)
    }
  },

  watch: {
    item: function (newVal) {
      this.currItem = newVal
    },

    translationDict: function (newVal) {
      this.currTranslationDict = newVal
    },
  }
}
</script>

<style lang="scss" scoped>
.passport-container {
  padding: 15px 0 0 0;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
}

.passport-content {
  width: 100%;
  min-height: 80px;
  padding: 0 10px;
  background-color: #fff;
}

.passport-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.passport-title-info-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(100% - 30px - 10px);
  // background-color: red;
}

.passport-title-info-location {
  flex: 0 0 auto;
  color: #999;
  max-width: calc(100% - 70px - 10px);
  margin-right: 10px;
  font-size: 14px;
}

.passport-location {
  display: flex;
}

.passport-qrcode {
  width: 30px;
  height: 30px
}

.passport-body-area {
  width: 100%;
  font-size: 15px;
  color: #333;
}

.passport-tail-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
}

.passport-tail-time-area {
  display: flex;
  // align-items: center;
  justify-content: flex-start;
}

.passport-tail-time-area span {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.passport-tail-time-area-title {
  width: 80px;
}

</style>
