<template>
  <div style="display: inline-block">
    <template v-if="text">
      <el-button size="mini" type="text" style="margin-right: 10px" @click="handleOpen">{{ value.length }}（混箱）</el-button>
    </template>
    <template v-else>
      <el-button size="mini" type="primary" style="margin-right: 10px" @click="handleOpen">{{ title }}</el-button>
    </template>
    <el-dialog
      append-to-body
      :title="title"
      :visible.sync="dialogVisible"
      width="1024px"
      :before-close="handleClose">

      <el-form v-if="dialogVisible">
        <WarehouseRecordDetailItem
            v-for="(item, index) in dataList"
            :key="index" v-model="dataList[index]"
            :index="index" :attr-list="attrList"
            @handle-delete="handleDelete(index)"
            :readonly="readonly"
        />
      </el-form>

      <el-button v-show="!readonly" type="primary" size="mini" @click="handleAddItem">添加一条明细</el-button>

      <span v-show="!readonly" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ProductSelector from "@/components/ProductSelector/index.vue";
import WarehouseRecordDetailItem from "@/views/ecw/order/warehousing/components/WarehouseRecordDetailItem.vue";
import {getProductAttrList} from "@/api/ecw/productAttr";

/**
 * 入仓明细弹窗
 */
export default {
  name: 'WarehouseRecordDetail',
  components: {WarehouseRecordDetailItem, ProductSelector},

  props: {
    value: {
      type: Array,
      default: () => []
    },
    readonly: {
      type: Boolean,
      default: false
    },
    text: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      dialogVisible: false,
      dataList: [],
      // 特性列表
      attrList: []
    };
  },

  mounted() {
    this.getAttrList()
  },

  methods: {
    init() {
      if (!this.value || this.value.length === 0) {
        this.dataList = [{
          "boxGauge": "",
          "brand": undefined,
          "cartonsNum": undefined,
          "createTime": "",
          "expressNo": "",
          "prodAttrIds": '',
          "prodId": undefined,
          "quantityAll": undefined,
          "specificationType": undefined,
          "unit": "",
          "usageIds": "",
          "volume": undefined,
          "weight": undefined
        }]
      } else {
        this.dataList = JSON.parse(JSON.stringify(this.value))
      }
    },
    /** 获取产品属性列表 */
    getAttrList() {
      getProductAttrList().then(response => {
        this.attrList = response.data;
      })
    },
    handleAddItem() {
      this.dataList.push({
        "boxGauge": "",
        "brand": undefined,
        "cartonsNum": undefined,
        "createTime": "",
        "expressNo": "",
        "prodAttrIds": '',
        "prodId": undefined,
        "quantityAll": undefined,
        "specificationType": undefined,
        "unit": "",
        "usageIds": "",
        "volume": undefined,
        "weight": undefined
      })
    },
    handleDelete(index) {
      this.dataList.splice(index, 1)
    },
    handleOpen() {
      this.init()
      this.dialogVisible = true
    },
    handleClose(done) {
      if (this.readonly) {
        return done()
      }
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSave() {
      this.$emit('input', this.dataList)
      this.dialogVisible = false
    }
  },

  computed: {
    title() {
      if (this.readonly) {
        return '查看箱明细'
      }
      return !this.value || this.value.length === 0 ? '添加箱明细' : '编辑箱明细'
    }
  }
}
</script>

<style scoped lang="scss">

</style>
