<template>
  <view class="u-flex parts" @click="selectChange">
    <view class="u-flex left" v-if="showChecked" @tap.stop.prevent>
      <u-checkbox v-model="info.checked" @change="selectChange" shape="circle" width="30rpx"></u-checkbox>
    </view>
    <view class="u-flex right">
      <view class="right-img">
        <u-image :src="partsImage(info.images)" width="200rpx" height="200rpx" />
      </view>
      <view class="u-flex right-content">
        <view class="right-content-name u-line-2">{{ info.name }}</view>
        <view class="right-content-desc u-line-2">{{ info.remark }}</view>
        <view class="u-flex right-content-opera">
          <view class="no" v-if="maxShow">
            可用{{ info.max + (info.unit || '')}}
          </view>
          <view class="num">
            <u-number-box v-show="!info.disabled" v-model="info.quantity" :min="info.min || 0" :max="info.max || info.quantity" @change="numChange"></u-number-box>
            <text v-show="!maxShow && !info.disabled && info.unit" class="unit-text">{{info.unit}}</text>
            <u-button v-show="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		props: {
			info: { 
				info () {
					return {}
				}
			},
			showChecked: { // 是否需要勾选
				type: Boolean,
				default () {
					return true
				}
			},
      disabled: { // 是否可编辑数量
        type: Boolean,
				default () {
					return false
				}
      },
      maxShow: { // 是否显示可用数量
        type: Boolean,
				default () {
					return true
				}
      }
		},
		data() {
			return {
			}
		},
		created() {
		},
		methods: {
      partsImage(images) {
        return images ? process.uniEnv.systemUrl.apiUrl + images : process.uniEnv.qn_base_url + 'morentupian.png'
      },
      selectChange(event) {
        this.$emit('selectChange', event.value ? event.value : !this.info.checked)
      },
			numChange(event) {
        this.$emit('numChange', event.value)
      },
      addApply() {
        this.$emit('apply')
      }
		}
	}
</script>
<style scoped lang="scss">
	.parts{
    justify-content: center;
    align-items: center;
    padding: 30rpx 10rpx;
    border-bottom: 1px solid #F4F5F7;
    .left {
      width: 80rpx;
      justify-content: center;
    }
    .right {
      flex: 1;
      overflow: hidden;
      .right-img {
        padding-right: 20rpx;
        align-self: baseline;
      }
      .right-content {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
        .right-content-name {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }
        .right-content-desc {
          font-size: 24rpx;
          color: #999;
          overflow: hidden;
          line-height: 40rpx;
          height: 80rpx;
          margin: 10rpx 0;
        }
        .right-content-opera {
          justify-content: space-between;
          width: 100%;
          .no {
            font-size: 24rpx;
            color: #999;
            overflow: hidden;
            flex: 1;
            height: 36rpx;
          }
          .num {
            flex: 1;
            text-align: right;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .unit-text {
              padding-left: 10rpx;
            }
          }
        }
      }
    }
  }
</style>
