<template>
  <view>
    <u-popup :show="show" closeOnClickOverlay mode="bottom">
      <view class="popupBox">
        <view class="popupCent">
          <view class="tit">调拨类型</view>
          <view class="tabs">
            <view
              class="tabs-item"
              v-for="item in typeList"
              :key="item.id"
              :class="{ active: formData.dialType === item.id }"
              @click="
                () => {
                  formData.dialType = item.id
                  if (item.id === 1) {
                    formData.inWarehouseId = ''
                    formData.inWarehouseName = ''
                  }
                }
              "
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="warehouse-box">
          <view class="out">
            <view class="title">{{
              formData.dialType == 1 ? '仓库' : '调出仓库'
            }}</view>
            <view style="height: 40vh; overflow: auto">
              <view
                class="items"
                :class="{
                  active: formData.warehouseId === item.id,
                  disabled:
                    formData.dialType == 2 && formData.inWarehouseId === item.id
                }"
                v-for="(item, index) in warehouseList"
                :key="index"
                @tap="
                  () => {
                    if (formData.inWarehouseId === item.id) return
                    if (formData.warehouseId === item.id) {
                      formData.warehouseId = ''
                      return
                    }
                    formData.warehouseId = item.id
                    formData.warehouseName = item.name
                  }
                "
                >{{ item.name }}</view
              >
            </view>
          </view>
          <view class="inp" v-if="formData.dialType == 2">
            <view class="title">调入仓库</view>
            <view style="height: 40vh; overflow: auto">
              <view
                class="items"
                @click="active"
                :class="{
                  active: formData.inWarehouseId === item.id,
                  disabled: formData.warehouseId === item.id
                }"
                @tap="
                  () => {
                    if (formData.warehouseId === item.id) return

                    if (formData.inWarehouseId === item.id) {
                      formData.inWarehouseId = ''
                      return
                    }
                    formData.inWarehouseId = item.id
                    formData.inWarehouseName = item.name
                  }
                "
                v-for="(item, index) in warehouseList"
                :key="index"
                >{{ item.name }}</view
              >
            </view>
          </view>
        </view>
        <view class="footerBtn">
          <view @click="cancel">取消</view>
          <view class="primary" @click="confirm">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get, getJ, post, postJ } from '@/utils/api.js'
export default {
  name: 'getsearch',
  data () {
    return {
      show: false,
      typeList: [
        {
          id: 1,
          name: '库内调拨'
        },
        {
          id: 2,
          name: '库外调拨'
        }
      ],
      formData: {
        dialType: 1,
        warehouseId: '',
        warehouseName: '',
        inWarehouseId: '',
        inWarehouseName: ''
      },
      warehouseList: []
    }
  },
  created () {
    this.getWarehouse()
  },

  methods: {
    open (form) {
      this.show = true
      if (form.dialType === 1) {
        this.formData = {
          dialType: form.dialType,
          warehouseId: form.warehouseId,
          warehouseName: form.warehouseName,
          inWarehouseId: '',
          inWarehouseName: ''
        }
      } else if (form.dialType === 2) {
        this.formData = {
          dialType: form.dialType,
          warehouseId: form.warehouseId,
          warehouseName: form.warehouseName,
          inWarehouseId: form.inWarehouseId,
          inWarehouseName: form.inWarehouseName
        }
      }
    },
    async getWarehouse () {
      const res = await post(
        this.apiUrl + '/warehouseGoodsshelves/select/warehouseList'
      )

      if (res?.success) {
        this.warehouseList = res.data.filter(i => !i.isDelete && !!i.status)

        console.log(this.warehouseList)
      }
    },
    //验证
    confirm () {
      if (
        (this.formData.warehouseId && this.formData.inWarehouseId) ||
        (this.formData.warehouseId && this.formData.dialType == 1)
      ) {
        if (this.formData.dialType == 1) {
          this.formData.inWarehouseId = this.formData.warehouseId
          this.formData.inWarehouseName = this.formData.warehouseName
        }
        this.$emit('getPopupInfo', this.formData)
        this.cancel()
      } else {
        uni.showToast({
          title: '请选择仓库'
        })
      }
    },
    //关闭窗口
    cancel () {
      this.show = false
    },
    //时间点击
    maskClick (e) {
      console.log('maskClick事件:', e)
    }
  }
}
</script>

<style lang="scss" scoped>
/*右弹层*/
.popupBox {
  width: 100vw;
  position: relative;
  padding-bottom: 80rpx;

  .popupCent {
    padding: 20rpx 0 0 0;

    .tabs {
      display: flex;
      justify-content: space-between;
      height: 74rpx;
      .tabs-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid transparent;
        border-top: 1rpx solid rgba(242, 242, 242, 1);
        border-bottom: 1rpx solid rgba(242, 242, 242, 1);

        &.active {
          border-color: $j-primary-border-green;
          color: $j-primary-border-green;
        }
      }
    }
  }
  .warehouse-box {
    display: flex;

    .out,
    .inp {
      flex: 1;
    }
    .title {
      border-top: 1rpx solid rgba(242, 242, 242, 1);
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      line-height: 74rpx;
      text-align: center;
      font-weight: bold;
    }
    .out .items {
      border-right: 1rpx solid rgba(242, 242, 242, 1);
    }
    .items {
      height: 74rpx;
      padding-left: 40rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);

      &.active {
        background-color: rgba(202, 249, 130, 1);
      }
      &.disabled {
        background-color: grey;
      }
    }
  }

  .tit {
    font-weight: bold;
    text-align: center;
    font-size: 36rpx;
    margin-bottom: 20rpx;
  }

  .footerBtn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    display: flex;
    align-items: stretch;
    box-shadow: 0 0 20rpx 0 #ccc;
    view {
      flex: 1;
      color: $j-primary-border-green;

      &.primary {
        background-color: $j-primary-border-green;
        color: #fff;
      }
    }
  }
}
</style>
