<template>
  <div class="assets-cell">
    <el-form :model="item" ref="formRef" inline :show-message="false">
      <div class="title">
        <template v-if="type === 'detail'">
          <el-link type="primary" @click="handleDetail(item)">{{
            item.assetCode
          }}</el-link>
        </template>
        <template v-else>{{ item.assetCode }}</template>
        &nbsp;{{ item.assetName }}
        <div v-if="type == 'output'">
          当前货位：{{
            `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}`
          }}
        </div>
      </div>
      <div class="col">
        <div style="flex: 1">
          <span>物品类型：{{ getDictValue('类型用途', item.assetType) }}</span>
          <span v-for="(itm, index) in tableHeader(item.assetType)" :key="index"
            >{{ itm.label }}：
            <template v-if="itm.formatter">{{ itm.formatter(item) }}</template>
            <template v-else>{{ item[itm.prop] }}</template>
          </span>
          <template v-if="!type">
            <span v-if="!type" style="flex: 1; text-align: center"
              >库存数量：{{ item.stocker
              }}{{ item.isUnpack ? item.unit : item.minPackUnit }}</span
            >
            <span v-if="!type"
              >可调拨数量：{{ item.max
              }}{{ item.isUnpack ? item.unit : item.minPackUnit }}</span
            >
          </template>
          <template v-if="type">
            <div style="flex: 1; text-align: right; padding-right: 240px">
              数量:{{ item.amount
              }}{{ item.isUnpack ? item.unit : item.minPackUnit }}
            </div></template
          >
        </div>

        <template v-if="type == 'output'">
          <div class="col-right">
            选中数量
            <el-input-number
              v-if="item.takeStockPattern"
              v-model="item.curAmount"
              size="small"
              :controls="false"
              :min="0"
              :max="+item.amount"
            ></el-input-number>
            <template v-else
              ><el-button
                @click="handleDetail(item)"
                style="margin-left: 10px"
                type="text"
                >{{
                  (item.curDetailReqList &&
                    item.curDetailReqList.filter((i) => i.checked).length) ||
                  '选择'
                }}</el-button
              ></template
            >
            <i
              @click="$emit('handleDelete')"
              class="el-icon-delete danger-text"
              style="margin-left: 20px; font-size: 26px; cursor: pointer"
            ></i>
          </div>
        </template>
        <template v-if="type === 'input' || type === 'detail'">
          <div>
            <div>
              <p>
                当前货位：{{
                  `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}`
                }}
              </p>
              <p>
                调入货位：{{
                  `${item.inWarehouseAreaName}-${item.inWarehouseAreaGoodsCode}-${item.inGoodsAllocationCode}`
                }}
              </p>
            </div>
            <el-checkbox
              style="margin-left: 20px"
              v-model="item.inputChecked"
              v-if="type != 'detail'"
            ></el-checkbox>
          </div>
        </template>

        <div v-if="!type">
          调拨数量
          <el-input-number
            v-if="item.takeStockPattern"
            size="small"
            :controls="false"
            v-model="item.amount"
            :min="0"
            :max="+item.max"
          ></el-input-number>
          <template v-else
            ><el-button
              @click="handleDetail(item)"
              style="margin-left: 10px"
              type="text"
              >{{
                (item.detailReqList && item.detailReqList.length) || 0 || '选择'
              }}</el-button
            ></template
          >
        </div>
      </div>
    </el-form>
    <DetailDialog ref="detailRef" :type="type" />
  </div>
</template>

<script>
  import DetailDialog from './DetailDialog';
  import { tableHeader } from '../../common';
  import { mapGetters, mapActions } from 'vuex';
  export default {
    components: { DetailDialog },
    props: {
      item: {
        type: Object,
        default: () => ({})
      },
      // 新增 or 反显
      type: {
        type: String,
        default: '' //view
      },
      checkbox: {
        type: Boolean,
        default: true
      },
      cargoSpaceId: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return { tableHeader };
    },
    computed: {
      ...mapGetters(['getDictValue'])
    },
    created() {
      this.requestDict('类型用途');
    },
    methods: {
      ...mapActions('dict', ['requestDict']),
      handleDetail(item) {
        this.$refs.detailRef.open(item, this.cargoSpaceId, (res) => {
          if (this.type === 'output') {
            this.$set(item, 'curDetailReqList', res);
          } else {
            this.$set(
              item,
              'detailReqList',
              res.filter((i) => i.checked)
            );
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .assets-cell {
    color: #555;
  }
  .title {
    font-size: 16px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  ::v-deep.col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    padding: 10px;
    white-space: nowrap;
    .el-form-item {
      margin-bottom: 0 !important;
    }
    .el-input {
      width: 100px;
    }
    > div {
      margin-right: 12px;
      display: flex;
      align-items: center;
    }
    span + span {
      margin-left: 18px;
    }
    .el-input-number {
      margin-left: 10px;
      width: 100px !important;
    }
    .edit {
      flex: 1;
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .cargo-space {
        margin-right: 20px;
      }
    }
    .col-right {
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
