<template>
  <div>
    <ele-modal
      width="90vw"
      :visible.sync="visible"
      :close-on-click-modal="false"
      row-key="code"
      custom-class="ele-dialog-form"
      :title="'齐套性检查'"
      :maxable="true"
    >
      <div class="form-wrapper">
        <div v-show="leftShow" :style="{ width: leftWidth }">
          <el-tree
            ref="treeRef"
            :expand-on-click-node="false"
            :data="cardList"
            :props="treeProps"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div :style="{ width: rightWidth }">
          <div v-if="!leftShow" class="planInfo">
            <el-row style="width: 100%">
              <el-col
                :span="planInfo.salesCode ? 6 : planInfo.salesCode.length * 6"
              >
                <div style="color: blue; display: flex">
                  <div>销售单号：</div
                  ><div v-if="planInfo.salesCode"
                    ><span v-for="item in planInfo.salesCode"
                      >　{{ item }}</span
                    ></div
                  >
                </div>
              </el-col>
              <el-col :span="6"> 计划编号：{{ planInfo.code }} </el-col>
              <el-col :span="6"> 批次号：{{ planInfo.batchNo }} </el-col>
              <el-col :span="6"> 名称：{{ planInfo.productName }} </el-col>
              <el-col :span="6"> 规格：{{ planInfo.specification }} </el-col>
              <el-col :span="6"> 型号：{{ planInfo.model }} </el-col>
              <el-col :span="6"> 计划数量：{{ planInfo.productNum }} </el-col>
            </el-row>
            <el-row> </el-row>
          </div>
          <div>
            <ele-pro-table
              ref="table"
              :needPage="false"
              :columns="columns"
              key="checkTable"
              :init-load="false"
              :datasource="datasourceList"
            >
              <template v-slot:toolbar>
                <el-button type="primary" @click="bulkPurchase" size="mini"
                  >采购申请</el-button
                >
              </template>
              <template v-slot:toolkit>
                <el-form
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                >
                  <el-form-item label="BOM类型">
                    <el-select
                      size="mini"
                      v-model="formInline.bomType"
                      placeholder="BOM类型"
                      class="select-type"
                      @change="bomTypeChange"
                    >
                      <el-option
                        v-for="item in bomListType"
                        :key="item.id"
                        :label="item.bomName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="BOM版本">
                    <el-select
                      class="select-type"
                      size="mini"
                      v-model="formInline.bomId"
                      placeholder="BOM版本"
                      @change="bomVChange"
                    >
                      <el-option
                        v-for="item in bomListV"
                        :key="item.bomId"
                        :label="item.versions"
                        :value="item.bomId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </template>
              <template v-slot:stockCount="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="stockDetail(row)"
                >
                  {{ row.stockCount }}
                </el-link>
              </template>
              <template v-slot:currentCount="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="currentDetail(row)"
                >
                  {{ row.currentCount }}
                </el-link>
              </template>
              <template v-slot:stockColor="{ row }">
                <div :class="{ statusRed: row.stockStatus == '缺料' }">
                  {{ row.stockStatus }}
                </div>
              </template>
              <template v-slot:currentColor="{ row }">
                <div :class="{ statusRed: row.currentStatus == '缺料' }">
                  {{ row.currentStatus }}
                </div>
              </template>
              <template v-slot:finishColor="{ row }">
                <div :class="{ statusRed: row.finishStatus == '缺料' }">
                  {{ row.finishStatus }}
                </div>
              </template>
              <template v-slot:finishCount="{ row }">
                <div>
                  <div v-if="row.finishCount > 0">{{ row.finishCount }}</div>
                  <div v-else>-</div>
                </div>
              </template>
              <template v-slot:action="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="purchase(row)"
                >
                  采购申请
                </el-link>
              </template>
            </ele-pro-table>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button plain @click="cancel">取消</el-button>
        <!-- <el-button type="primary" @click="confirm">确定</el-button> -->
      </div>
    </ele-modal>

    <stockDetailDialog ref="stockDetailDialog" />
    <currentDetailDialog ref="currentDetailDialog" />
    <producePlan ref="produceRef" @success="reloads"></producePlan>
    <purchaseDialog ref="purchaseDialogRef" />
  </div>
</template>

<script>
  import {
    homogeneityInspect,
    homogeneityInspectMerge,
    findMaterialInfoByPlanId,
    findBomCategoryByCategoryId,
    getBom
  } from '@/api/productionPlan/index.js';
  import { listBomByPlanIdsOverride } from '@/api/materialPlan/index';
  import stockDetailDialog from './stockDetailDialog.vue';
  import currentDetailDialog from './currentDetailDialog.vue';
  import producePlan from '@/views/materialPlan/components/producePlan.vue';
  import purchaseDialog from './purchaseDialog.vue';
  export default {
    components: {
      stockDetailDialog,
      currentDetailDialog,
      producePlan,
      purchaseDialog
    },
    data() {
      return {
        visible: false,

        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        requiredFormingNum: 0,
        formInline: {},
        // form: {
        //   homogeneityInspect: []
        // },
        rules: {},
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            slot: 'selection',
            fixed: 'left'
          },
          {
            prop: 'productCode',
            label: '计划编号',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'opCode',
            label: '工序编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'taskName',
            label: '工序名称',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'code',
            label: '物料编码',
            align: 'center',
            minWidth: 100,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '物料名称',
            align: 'center',
            minWidth: 100
          },
          {
            prop: 'inventoryQuantity',
            label: '库存',
            showOverflowTooltip: true
          },
          {
            prop: 'secureInventory',
            label: '安全库存',
            showOverflowTooltip: true
          },
          {
            prop: 'lockQuantity',
            label: '锁库数量',
            showOverflowTooltip: true
          },

          {
            label: '采购数量',
            align: 'center',
            minWidth: 120
          },
          {
            slot: 'stockCount',
            prop: 'stockCount',
            label: '库存数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'stockStatus',
            prop: 'stockStatus',
            label: '库存状态',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'inTransitNum',
            prop: 'inTransitNum',
            label: '在途数量',
            align: 'center',
            minWidth: 80
          },
          {
            slot: 'currentColor',
            prop: 'currentStatus',
            label: '在途状态',
            align: 'center',
            minWidth: 80
          },
          {
            label: '最终缺料数量',
            align: 'center',
            minWidth: 80,
            formatter: (row) => {
              let total =
                row.demandQuantity - row.inTransitNum - row.inventoryQuantity;
              if (total < 0) {
                return 0;
              }
              return total;
            }
          },
          {
            slot: 'finishColor',
            prop: 'finishStatus',
            label: '最终状态',
            align: 'center',
            minWidth: 80
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ],
        ids: [],
        leftShow: false,
        leftWidth: '0%',
        rightWidth: '100%',
        cardList: [],
        treeProps: {
          label: 'code',
          children: 'children'
        },
        planInfo: {
          salesCode: ''
        },
        datasourceList: [], // 表格物料数据
        bomListV: [], // BOM版本
        bomListType: [], // BOM 类型
        planId: '',
        selectNodeId: ''
      };
    },
    watch: {
      leftShow(newVal, oldVal) {
        if (newVal) {
          this.leftWidth = '230px';
          this.rightWidth = 'calc(100% - 230px)';
        } else {
          this.leftWidth = '0';
          this.rightWidth = '100%';
        }
      }
    },
    mounted() {},
    methods: {
      handleNodeClick(data) {
        this.getBomData(data);
        this.selectNodeId = data.id;
        // this.reload({ planIds: [data.id] });
      },
      reload(where) {
        this.$nextTick(() => {
          this.$refs.table.reload({ page: 1, where });
        });
      },
      reloads() {},
      /* 表格数据源 */
      // datasource({ page, limit, where }) {
      //   return homogeneityInspect({
      //     pageNum: page,
      //     size: limit,
      //     ...where
      //   });
      // },
      stockDetail(row) {
        this.$refs.stockDetailDialog.open(row);
      },
      currentDetail(row) {
        this.$refs.currentDetailDialog.open(row);
      },
      // 选择BOM类型
      bomTypeChange(e) {
        this.formInline.bomType = e;
        let data = this.bomListType.find((el) => el.id === e);
        if (!data) return;
        this.bomListV = data.bomList;
        this.bomVChange(data.bomList[0].bomId);
      },
      // 选择BOM版本
      bomVChange(e) {
        this.formInline.bomId = e;
        let data = this.bomListV.find((el) => el.bomId === e);
        if (!data) return;
        this.getMaterialData(data);
      },
      // 获取物料数据信息
      async getMaterialData(data) {
        let params = { planId: this.planId, bomVersionId: data.bomId };
        const result = await findMaterialInfoByPlanId(params);
        this.datasourceList = result;
      },
      // 批量采购
      async bulkPurchase(list) {
        if (list.length == 0) {
          return this.$message.warning('请至少选择一条数据');
        }
        // let planIds = list.map((item) => item.id);
        // let data = {
        //   planIds: ['1948548495278911490', '1948548022580850689'],
        //   demandType: '1'
        // };
        // this.$refs.produceRef.visible = true;
        const o = this.cardList.find((el) => el.id === this.selectNodeId);
        let obj = JSON.parse(JSON.stringify(o));
        obj.materialList = list;
        this.$nextTick(() => {
          this.$refs.purchaseDialogRef.open([obj], '生产计划');
        });
        // const result = await listBomByPlanIdsOverride(data);
      },
      // 采购申请
      purchase(row) {
        this.bulkPurchase([row]);
      },
      async open(dataList) {
        console.log(dataList, '00000000000');
        this.visible = true;
        this.cardList = dataList;
        // .map((item) => {
        //   return {
        //     id: item.id,
        //     code: item.code,
        //     categoryId: item.categoryId,
        //     children: []
        //   };
        // });
        if (dataList.length === 1) {
          this.leftShow = false;
        } else {
          this.leftShow = true;
          const firstNodeKey = dataList[0].id;
          this.$nextTick(() => {
            console.log(this.$refs, '00000000000');
            this.$refs.treeRef.setCurrentKey(firstNodeKey);
          });
        }
        this.handleNodeClick(dataList[0]);
        // for (let item of this.cardList) {
        //   let children = [];
        //   if (item.salesCode) {
        //     for (let ele of item.salesCode) {
        //       children.push({ code: ele, id: item.id });
        //     }
        //   }
        //   item.children = children;
        // }
        // this.planInfo = dataList.length > 0 ? dataList[0] : null;
        // console.log(this.cardList,'cardListcardList');
        // if (dataList.length > 1) {
        //   this.leftShow = true;
        // } else {
        //   this.leftShow = false;
        // }
        // if (this.planInfo) {
        //   this.reload({ planIds: [this.planInfo.id] });
        // }
      },
      cancel() {
        this.formData = {};
        this.visible = false;
      },

      // 获取bom 数据
      async getBomData(data) {
        try {
          this.planId = data.id;
          const res = await findBomCategoryByCategoryId(data.categoryId);
          if (!res || res.length == 0) {
            this.bomListD = [];
            this.datasourceList = [];
            return;
          }
          let obj = {};
          let bomMap = {
            1: 'PBOM',
            2: 'MBOM',
            3: 'ABOM',
            4: 'EBOM'
          };
          res.map((el) => {
            el.bomName = bomMap[el.bomType];
            let OBMINFO = {
              bomId: el.bomId,
              bomType: el.type,
              versions: `V${el.versions}.0`
            };
            if (obj[el.bomType]) {
              obj[el.bomType].bomList.unshift(OBMINFO);
            } else {
              obj[el.bomType] = { ...el, bomList: [OBMINFO] };
            }
          });
          let list = Object.values(obj);
          this.bomListType = list;
          this.bomTypeChange(list[0].id);
        } catch (err) {
          this.$message.error(err.message);
        }
      },

      confirm() {
        this.visible = false;
      },
      async merge() {
        this.reload({ planIds: this.ids, productType: 1, merge: 2 });
      },
      tabClick() {
        this.reload({ planIds: this.ids, productType: 1 });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
  .optionButton {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 3px;
  }
  .statusRed {
    color: red;
  }
  .planInfo {
  }
  .form-wrapper {
    display: flex;
  }
  .planInfo {
    // display: flex;
    font-size: 16px;
  }
</style>
