<template>
  <view class="u-flex bottom" :style="customStyle">
	 <view class="select-view" v-if="showChecked">
      <view class="u-flex bottom-left">
        <view class="left-list"><u-checkbox icon-size="28" size="40" v-model="checked" @change="selectAll" shape="circle"/></view>
        <view class="left-list">全选</view>
      </view>
      <view class="u-flex bottom-center">
        <view class="center-list">共：<text class="num"> {{ partNum }} </text> 种</view>
      </view>
    </view>
    <view class="u-flex select-num" v-if="!showChecked">
      <view class="num-left" @click="submit">
        <u-badge type="error" :show-zero="true" :count="partNum" :offset="[0, 0]"></u-badge>
        <u-image width="72rpx" height="72rpx" :lazy-load="false" :src="partsImage"></u-image>
      </view>
      <view class="num-right">共：<text class="num"> {{ partNum }} </text> 种</view>
    </view>
    <view class="u-flex bottom-right">
      <button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button>
      <button v-if="cancelStatus" :class="['btn', btnNotActive]" @click="cancel">不用物料</button>
    </view>
  </view>
</template>

<script>
	export default {
		props: {
      showChecked: { // 是否显示勾选
        type: Boolean,
        default() {
          return true
        }
      },
			allChecked: { // 是否全选
				type: Boolean,
        default() {
          return false
        }
			},
      btnStatus: { // 确定按钮是否可点击
				type: Boolean,
        default() {
          return false
        }
			},
      cancelStatus: { // 是否显示取消按钮
				type: Boolean,
        default() {
          return false
        }
			},
			partNum: { // 物料数量
				type: Number,
				default () {
					return 0
				}
			},
      num: { // 合计总件数
        type: Number,
				default () {
					return 0
				}
      },
      submitTxt: { // 提交按钮文字
        type: String,
        default () {
					return '确定'
				}
      },
	  customStyle: {
	  	type: String,
	  	default: 'background-color: #FFFFFF;'
	  },
		},
		
		data() {
			return {
        checked: false
			}
		},
    computed: {
      partsImage() {
        return process.uniEnv.qn_base_url + 'part_num.png'
      },
      btnActive() {
        return this.btnStatus ? 'btn-active' : ''
      },
      btnNotActive() {
        return this.btnStatus ? '' : 'btn-active'
      }
    },
    watch: {
      'allChecked': function(newValue, oldValue) {
        if (this.showChecked) this.checked = newValue
      }
    },
		created() {
      if (this.showChecked) this.checked = this.allChecked
		},
		methods: {
      selectAll(event) {
        this.$emit('select', event.value)
      },
			submit() {
        if (this.btnStatus) this.$emit('submit')
      },
      cancel() {
        if (!this.btnStatus) this.$emit('cancel')
      }
		}
	}
</script>
<style scoped lang="scss">
	.bottom {
    width: 100%;
    height: 180rpx;
    background: #fff;
    justify-content: space-between;
    .select-view {
      display: flex;
      align-items: center;
      .u-flex {
        flex-direction: column;
        align-items: center;
      }
      .bottom-left {
        // margin-left: 30rpx;
        .left-list {
          width: 100%;
          &:nth-of-type(1) {
            padding-left: 3rpx;
          }
          &:nth-of-type(2) {
        margin-top: 8rpx;
        font-size: 20rpx;
          }
        }
      }
      .bottom-center {
        flex: 1;
        align-items: flex-start;
        margin-right: 20rpx;
        .center-list {
          // &:nth-of-type(1) {
          //   color: #666;
          //   font-size: 26rpx;
          // }
          &:nth-of-type(1) {
            color: #333;
            font-size: 32rpx;
            // margin-top: 8rpx;
            font-weight: bold;
            .num {
              color: #2272FF;
              padding-right: 10rpx;
            }
          }
        }
      }
    }
    .select-num {
      flex: 1;
      .num-left {
        position: relative;
        min-width: 92rpx;
      }
      .num-right {
        color: #333;
        font-size: 32rpx;
        margin-left: 10rpx;
        font-weight: bold;
        .num {
          color: #2272FF;
          padding-right: 10rpx;
        }
      }
    }
    .bottom-right {
      flex: 1;
      // width: 360rpx;
      // margin-right: 20rpx;
      .btn {
        width: 100%;
        padding: 30rpx;
        border-radius: 52rpx;
        line-height: 44rpx;
        font-size: 32rpx;
        text-align: center;
        background: #D1D4D4;
        color: #fff;
        margin: 0 10rpx;
        &::after {
          content: '';
          height: 0;
          border: none;
        }
      }
      .btn-active {
        background: #2272ff;
      }
    }
  }
</style>
