<template>
  <div class="form-page" v-loading="loading">
    <PageTitle>
      {{ pageTitle }}
      <!-- 申请按钮显示 -->
      <template slot="buttons" v-if="mode == 'apply'">
        <el-button size="mini" @click="resetForm">重置</el-button>
        <el-button size="mini" type="primary" @click="saveForm">提交</el-button>
      </template>

      <!-- 修改 按钮显示 -->
      <template slot="buttons" v-if="mode == 'edit'">
        <el-button size="mini" type="primary" @click="saveForm">提交</el-button>
      </template>
    </PageTitle>

    <PageWrapper>
      <el-form
        :model="form"
        ref="form"
        size="small"
        :inline="true"
        label-width="8em"
      >
        <el-row>
          <el-col :md="8" :xs="12">
            <el-form-item label="申请单编码" prop="productionRequestCode">
              <el-input
                disabled
                v-model="form.productionRequestCode"
                placeholder="自动生成"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :xs="12" style="height: 50.5px">
            <el-form-item label="产品" prop="itemId">
              <el-input
                v-model="form.itemName"
                readonly
                placeholder="请选择产品"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="$refs['ItemSelectRef'].showFlag = true"
                ></el-button>
              </el-input>
              <ItemSelect ref="ItemSelectRef" @onSelected="onItemSelect" />
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="12" style="height: 50.5px">
            <el-form-item label="工艺路线" prop="routeId">
              <el-input
                v-model="form.routeName"
                readonly
                placeholder="请选择工艺路线"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="$refs['RoutesProcessSelectRef'].showFlag = true"
                ></el-button>
              </el-input>
              <RoutesProcessSelect
                ref="RoutesProcessSelectRef"
                @onSelected="onRoutesProcessSelect"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="8" :xs="12">
            <el-form-item label="制造工厂" prop="factoryId">
              <el-input
                v-model="form.factoryName"
                readonly
                placeholder="请输入制造工厂"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="$refs['FactorySelectRef'].showFlag = true"
                ></el-button>
              </el-input>
              <FactorySelect
                ref="FactorySelectRef"
                @onSelected="onFactorySelect"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :md="8" :xs="12">
            <el-form-item label="仓库" prop="warehouse">
              <el-input
                v-model="form.warehouse"
                placeholder="请输入仓库"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :md="8" :xs="12">
            <el-form-item label="尺码" prop="sizeGroup">
              <el-input
                v-model="form.sizeGroup"
                placeholder="请输入尺码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="12">
            <el-form-item label="是否要鞋图" prop="isNeedShoeImg">
              <el-select
                v-model="form.isNeedShoeImg"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="12">
            <el-form-item label="是否附样品" prop="isNeedPrototype">
              <el-select
                v-model="form.isNeedPrototype"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="12">
            <el-form-item label="唯一码产品" prop="isUniqueCode">
              <el-select
                v-model="form.isUniqueCode"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :xs="12">
            <el-form-item label="不考虑型体配色" prop="isConsiderColor">
              <el-select
                v-model="form.isConsiderColor"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :md="8" :xs="12">
            <el-form-item label="样品" prop="prototype">
              <el-input
                v-model="form.prototype"
                placeholder="请选择样品"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :md="8" :xs="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :rows="3"
                v-model="form.remark"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="8" :xs="12">
            <el-form-item label="鞋图" prop="shoeImg">
              <ImageUpload :limit="1" :value="form.shoeImg" :fileSize="5" @onUploaded="handleImgUploaded" @onRemoved="handleImgRemoved"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs type="border-card" @tab-click="tabClick">
        <el-tab-pane label="BOM">
          <ProogingBom ref="ProogingBomRef" />
        </el-tab-pane>
        <el-tab-pane label="工艺">
          <ProogingProcess ref="ProogingProcessRef" :bomList="bomList" />
        </el-tab-pane>
      </el-tabs>
    </PageWrapper>
  </div>
</template>

<script>
  import { genCode } from "@/api/system/autocode/rule";
  import ProogingBom from "./components/ProogingBom.vue";
  import ProogingProcess from "./components/ProogingProcess.vue";
  import ItemSelect from "@/components/itemSelect/single.vue";
  import RoutesProcessSelect from "@/components/routesProcessSelect/index.vue";
  import FactorySelect from "@/components/FactorySelect/index.vue";
  import { listRouteprocess } from "@/api/mes/pro/routeprocess";
  import tabPlugins from "@/plugins/tab";
  import {
    addProductionRequest,
    getProductionRequest,
    updateProductionRequest,
  } from "@/api/mes/pro/productionRequest";

  import {
    getPrototypeMake
  } from "@/api/mes/pro/prototypeMake";

  export default {
    components: { ProogingBom, ProogingProcess, ItemSelect, RoutesProcessSelect, FactorySelect },
    dicts: [],
    provide() {
      return {
        mode: this.mode,
      };
    },
    data() {
      return {
        loading: false,
        bomList: [],
        // 表单参数
        form: {
          productionRequestCode: "",
          itemId: "",
          itemName: "",
          unit: "",
          routeId: "",
          routeName: "",
          factoryId:"",
          factoryName:"",
          type: "",
          modality: "",
          isNeedPrototype: "",
          isNeedShoeImg: "",
          isUniqueCode: "",
          isDisabled:"",
          shoeImg: "",
          sizeGroup: "",
          remark: "",
          prototype:"",
          warehouse: "",
        },
        rules: {},
      };
    },
    computed: {
      scrollHeight() {
        return "calc(100vh - 73px - 83px)";
      },
      mode() {
        return this.$route.path.split("/").at(-1);
      },
      pageTitle() {
        const titles = {
          edit: "量产单修改",
          info: "量产单查看",
          apply: "量产单申请",
        };
        return titles[this.mode];
      },
    },
    created() {
      this.getFormInfo();
      this.gCode();
    },
    methods: {
      /** 根据 id 获取页面数据 */
      getFormInfo() {
        if (this.mode == "apply" && this.$route.query.prototypeMakeId) {
          const id = this.$route.query.prototypeMakeId;
          this.loading = true;
          getPrototypeMake(id)
            .then(({ data }) => {
              Object.assign(this.form, data);
              this.bomList = data.bomList;
              // 设置组件数据
              this.$refs["ProogingBomRef"].tableData = data.bomList;
              this.$refs["ProogingProcessRef"].tableData = data.processList;
            })
            .finally(() => {
              this.loading = false;
            });
        }
      },
      /** 生成编码 */
      gCode() {
        genCode("PRODUCTION_REQUEST_CODE").then((response) => {
          this.form.productionRequestCode = response;
        });
      },
      /** 点击tab 获取bom的数据,将参数传递给后面的组件 */
      tabClick(val) {
        if (val.index != 0) {
          this.bomList = this.$refs["ProogingBomRef"].getComData();
        }
      },
      onItemSelect(row) {
        if (row != undefined && row != null) {
          this.form.itemId = row.itemId;
          this.form.itemName = row.itemName;
          this.form.unit = row.unitOfMeasure;
        }
      },
      onRoutesProcessSelect(row) {
        if (row != undefined && row != null) {
          this.form.routeId = row.routeId;
          this.form.routeName = row.routeName;

          const params = {
            pageNum: 1,
            pageSize: 1000,
            routeId: row.routeId,
          };
          listRouteprocess(params).then(({ rows }) => {
            this.$refs["ProogingProcessRef"].setList(rows);
          });
        }
      },
      onFactorySelect(row) {
        if (row != undefined && row != null) {
          this.form.factoryId = row.factoryId;
          this.form.factoryName = row.factoryName;
        }
      },

      /**提交 */
      saveForm() {
        const bomList = this.$refs.ProogingBomRef.getComData();
        const processList = this.$refs.ProogingProcessRef.getComData();
        const params = {
          ...this.form,
          bomList,
          processList,
        };
        this.loading = true;
        if (this.mode == "apply") {
          addProductionRequest(params)
            .then((res) => {
              this.loading = false;
              this.$modal.msgSuccess("提交成功！");
              // 关闭页签
              tabPlugins.closeOpenPage();
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          updateProductionRequest(params)
            .then(() => {
              this.loading = false;
              this.$modal.msgSuccess("提交成功！");
            })
            .catch(() => {
              this.loading = false;
            });
        }
      },
      /**重置表单 */
      resetForm() {
        this.form = {
          productionRequestCode: "",
          itemId: "",
          itemName: "",
          unit: "",
          routeId: "",
          routeName: "",
          factoryId:"",
          factoryName:"",
          type: "",
          modality: "",
          isNeedPrototype: "",
          isNeedShoeImg: "",
          isUniqueCode: "",
          isDisabled:"",
          shoeImg: "",
          sizeGroup: "",
          remark: "",
          prototype:"",
          warehouse: "",
        };
        this.$refs["ProogingBomRef"].resetState();
        this.$refs["ProogingProcessRef"].resetState();
        this.gCode();
      },
      //图片上传成功
      handleImgUploaded(imgUrl){
        this.form.shoeImg = imgUrl;
      },
      //图片移除
      handleImgRemoved(imgUrl){
        this.form.shoeImg = null;
      },
    },
  };
</script>

<style lang="scss" scoped></style>
