<template>
  <ele-modal
    :visible.sync="buVisible"
    @closed="cancel"
    title="采购申请"
    custom-class="ele-dialog-form"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="80%"
    :maxable="true"
  >
    <el-form>
      <ele-pro-table
        ref="tableRef3"
        :columns="columns"
        :datasource="tableList"
        :need-page="false"
        :toolbar="false"
        row-key="id"
        default-expand-all
      >
        <template v-slot:action="{ row, $index }">
          <template>
            <el-link
              type="primary"
              :underline="false"
              @click="categorySelect(row)"
            >
              添加物料
            </el-link>
            <!-- <el-popconfirm
              class="ele-action"
              title="确定要删除此生产计划吗？"
              @confirm="remove(row, $index)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm> -->
          </template>
        </template>

        <template v-slot:expand="{ row, $index }">
          <div
            style="
              width: calc(100% - 55px);
              min-height: 60px;
              margin-left: 55px;
            "
          >
            <ele-pro-table
              :columns="materiaList"
              :datasource="row.materialList || []"
              :need-page="false"
              height="300px"
              class="el-form-box"
              :toolkit="[]"
            ></ele-pro-table> </div
        ></template>
      </ele-pro-table>
    </el-form>
    <ProductModal ref="productRefs" @chooseModal="chooseModal" />
  </ele-modal>
</template>

<script>
  import ProductModal from '@/views/materialPlan/components/ProductModal.vue';
  export default {
    components: {
      ProductModal,
    },
    data() {
      return {
        buVisible: false,
        tableList: []
      };
    },
    computed: {
      columns() {
        return [
          {
            width: 45,
            type: 'expand',
            columnKey: 'materialList',
            align: 'center',
            slot: 'expand'
          },

          {
            width: 50,
            label: '序号',
            type: 'index',
            align: 'center',
            slot: 'index'
          },
          {
            prop: 'producePlanCode',
            label: '计划编号',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 170,
            sortable: true
          },
          {
            prop: 'code',
            label: '销售订单号',
            slot: 'code',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 170,
            sortable: true
          },
          {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'deliveryNum',
            label: '客户代号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'productCode',
            label: '编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },

          {
            prop: 'productName',
            label: '名称',
            align: 'center',
            minWidth: 120
          },

          {
            prop: 'model',
            label: '型号',
            align: 'center',
            minWidth: 120
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center'
          },

          {
            prop: 'deliveryTime',
            label: '交付日期',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'contractNum',
            label: '订单数量',
            align: 'center'
          },
          {
            prop: 'lackNum',
            label: '欠交数量',
            align: 'center'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ];
      },
      materiaList() {
        return [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left'
          },
          {
            width: 50,
            label: '序号',
            prop: 'sort',
            slot: 'sort',
            align: 'center'
          },

          {
            label: '物料名称',
            prop: 'name',
            align: 'center',
            minWidth: 120,
            fixed: 'left'
          },

          {
            label: '物料编码',
            prop: 'code',
            align: 'center',
            minWidth: 120,
            fixed: 'left'
          },
          {
            label: '牌号',
            prop: 'brandNum',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            label: '型号',
            prop: 'modelType',
            align: 'center'
          },
          {
            prop: 'inventoryQuantity',
            label: '库存',
            showOverflowTooltip: true
          },
          {
            prop: 'secureInventory',
            label: '安全库存',
            showOverflowTooltip: true
          },
          {
            prop: 'lockQuantity',
            label: '锁库数量',
            showOverflowTooltip: true
          },
          {
            prop: 'inTransitNum',
            label: '在途数量',
            showOverflowTooltip: true
          },
          {
            prop: 'inTransitOrdersNum',
            label: '在途已关联数量',
            showOverflowTooltip: true
          },
          {
            prop: 'availableQuantity',
            label: '可用数量',
            showOverflowTooltip: true
          },
          {
            prop: 'unit',
            label: '计量单位',
            showOverflowTooltip: true,
            action: 'unit',
            slot: 'unit'
          },

          {
            label: '需求数量',
            slot: 'demandQuantity',
            action: 'demandQuantity',
            align: 'center',
            minWidth: 120
          },

          {
            label: '采购数量',
            slot: 'purchaseQuantity',
            action: 'purchaseQuantity',
            align: 'center',
            minWidth: 120
          },

          {
            label: '到货方式',
            slot: 'deliveryMethod',
            action: 'deliveryMethod',
            align: 'center',
            minWidth: 140
          },
          {
            label: '采购周期',
            slot: 'purchasingCycle',
            action: 'purchasingCycle',
            align: 'center',
            minWidth: 160
          },
          {
            label: '要求到货时间',
            slot: 'requireDeliveryTime',
            action: 'requireDeliveryTime',
            align: 'center',
            minWidth: 180
          },

          {
            label: '图纸',
            slot: 'imgUrl',
            action: ' imgUrl',
            align: 'center',
            minWidth: 140
          },

          {
            label: '附件',
            slot: 'files',
            action: ' files',
            align: 'center',
            minWidth: 140
          }
        ];
      }
    },
    methods: {
      open(list) {
        console.log(list, 'list 000000000000');
        this.tableList = list;
        this.buVisible = true;
      },
      cancel() {
        this.buVisible = false;
      },
      categorySelect(row) {
        // this.$refs.productRefs.open(row.materialList, row, this.type);
      },
      chooseModal() {},
      remove(row, index) {
        // this.formData.detailRemoveIds.push(row.id);
        // let _arr = this.$refs.table.getData() || [];
        // _arr.splice(index, 1);
        // this.$refs.table.setData([..._arr]);
      }
    }
  };
</script>
