<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane
        :key="item.name"
        v-for="item in processOption"
        :label="item.name"
        :name="item.id"
        :closable="item.close"
      >
        <el-table
          :data="subproductionplanList.results"
          border
          fit
          stripe
          style="width: 100%"
          height="300"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="50" />

          <el-table-column label="名称">
            <template slot-scope="scope">{{
              scope.row.subproduction_.name
            }}</template>
          </el-table-column>

          <el-table-column label="生产车间">
            <template slot-scope="scope">{{
              scope.row.workshop_.name
            }}</template>
          </el-table-column>

          <el-table-column label="工序名">
            <template slot-scope="scope">{{
              scope.row.process_.name
            }}</template>
          </el-table-column>
          <el-table-column label="工序编号">
            <template slot-scope="scope">{{
              scope.row.process_.number
            }}</template>
          </el-table-column>

          <el-table-column label="子工序" width="160">
            <template slot-scope="scope" v-if="scope.row.steps">
              <el-tag
                v-for="item in scope.row.steps"
                :key="item.number"
                :label="item.name"
                :value="item.number"
                >{{ item.name }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="开工时间">
            <template slot-scope="scope">{{ scope.row.start_date }}</template>
          </el-table-column>
          <el-table-column label="完工时间">
            <template slot-scope="scope">{{ scope.row.end_date }}</template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">{{
              state_[scope.row.state]
            }}</template>
          </el-table-column>
          <el-table-column label="领料状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_picked == false">未领料</el-tag>
              <el-tag v-else>已领料</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="生产进度">
          <template slot-scope="scope">{{ scope.row.main_count_real }}/{{scope.row.main_count}}</template>
        </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">{{ scope.row.create_time }}</template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="220px">
            <template slot-scope="scope">
              <el-link v-if="scope.row.state == 1" @click="handleNeed(scope)"
                >领料</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="subproductionplanList.count > 0"
          :total="subproductionplanList.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="subproductionplanList"
        />
        <el-row :gutter="24">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>车间操作</span>
              </div>
              <el-button
                type="primary"
                style="margin-left: 50px"
                v-for="item in steps"
                :key="item.number"
                :label="item.name"
                :value="item.number"
                @click="handlework(item)"
                >{{ item.name }}</el-button
              >
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>半成品</span>
              </div>
              <el-table
                :data="wproductData"
                @selection-change="handleSelectionChange"
                border
                fit
                stripe
                style="width: 100%"
                max-height="300"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column type="index" width="50" />

                <el-table-column label="半成品编号">
                  <template slot-scope="scope">{{ scope.row.number }}</template>
                </el-table-column>

                <el-table-column label="半成品状态">
                  <template slot-scope="scope">{{
                    scope.row.m_state_.name
                  }}</template>
                </el-table-column>

                <el-table-column label="所在子工序">
                  <template slot-scope="scope">{{
                    scope.row.p_state_.name
                  }}</template>
                </el-table-column>
                <el-table-column label="所在子工序执行状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.is_executed">已执行</el-tag>
                    <el-tag v-else>待执行</el-tag>
                  </template>
                </el-table-column>

                <el-table-column label="更新时间">
                  <template slot-scope="scope">{{
                    scope.row.update_time
                  }}</template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>车间物料</span>
              </div>
              <el-table
                :data="wmaterialList"
                border
                fit
                stripe
                style="width: 100%"
                max-height="400"
              >
                <el-table-column type="index" width="50" />

                <el-table-column label="物料名称">
                  <template slot-scope="scope">{{
                    scope.row.material_.name
                  }}</template>
                </el-table-column>
                <el-table-column label="物料单位">
                  <template slot-scope="scope">{{
                    scope.row.material_.unit
                  }}</template>
                </el-table-column>
                <el-table-column label="物料批次">
                  <template slot-scope="scope">{{ scope.row.batch }}</template>
                </el-table-column>
                <el-table-column label="物料数量">
                  <template slot-scope="scope">{{ scope.row.count }}</template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? '编辑领料' : '选择仓库领料'"
    >
      <el-form
        ref="Form"
        :model="need"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="仓库" prop="warehouse">
          <el-select
            style="width: 100%"
            v-model="need.warehouse"
            placeholder="请选择"
          >
            <el-option
              v-for="item in warehouseoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisiblenw" title="领料">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>生产所需领料表</span>
        </div>
        <template>
          <el-table :data="needwl" style="width: 100%">
            <el-table-column prop="material_.name" label="物料名称">
            </el-table-column>
            <el-table-column prop="material_.number" label="物料编号">
            </el-table-column>
            <el-table-column prop="material_.specification" label="物料规格">
            </el-table-column>
            <el-table-column prop="material_.unit" label="物料单位">
            </el-table-column>
            <el-table-column prop="count" label="所需物料数量">
            </el-table-column>
            <el-table-column prop="count_real" label="已领物料数量">
            </el-table-column>
          </el-table>
        </template>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当前仓库物料表</span>
          <el-button
            style="float: right; padding: 3px 0"
            @click="handlePick"
            type="text"
            >确认领料</el-button
          >
        </div>
        <template>
          <el-table :data="havewl" style="width: 100%" ref="multipleTable">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="batch" label="物料批次"> </el-table-column>
            <el-table-column prop="material_.name" label="物料名称">
            </el-table-column>
            <el-table-column prop="warehouse_.name" label="物料所在仓库">
            </el-table-column
            >\
            <el-table-column prop="count" label="物料总数量"> </el-table-column>
            <el-table-column label="输入领料数量" width="140px">
              <template slot-scope="scope">
                <el-form :model="scope.row" widht="100px">
                  <el-form-item size="mini">
                    <el-input-number
                      v-model="scope.row.pick_count"
                      :min="0"
                      :precision="2"
                      :controls="false"
                      :value="0"
                    ></el-input-number>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column prop="count_real" label="已领物料数量">
            </el-table-column>
            <el-table-column prop="material_.specification" label="物料规格">
            </el-table-column>
            <el-table-column prop="material_.unit" label="物料单位">
            </el-table-column>
          </el-table>
        </template>
      </el-card>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisiblework"
      :fullscreen="true"
      title="填写记录"
    >
      <el-steps
        :active="values"
        spac="400px"
        align-center=""
        finish-status="success"
        style="padding-top: 20px"
      >
        <el-step
          :title="item.name"
          v-for="(item, index) in forms"
          :key="index"
          @click.native="stepclick(item.id)"
        >
        </el-step>
      </el-steps>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card class="box-card" v-if="values === 0">
            <div slot="header" class="clearfix">
              <span>消耗物料表</span>
            </div>
            <el-table :data="input" border style="width: 100%">
              <el-table-column
                prop="material__name"
                label="物料名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="material__batch"
                label="物料批次"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="count" label="可用数量" width="180">
              </el-table-column>
              <el-table-column prop="count_input" label="使用数量" width="180">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input-number
                        v-model="scope.row.count_input"
                        :min="0"
                        :value="0"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" v-if="values === 0">
            <div slot="header" class="clearfix">
              <span>产出物料表</span>
            </div>
            <el-table
              :data="output"
              v-if="showPrise"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="material__name"
                label="物料名称"
                width="180"
              >
              </el-table-column>

              <el-table-column prop="count_output" label="产出数量" width="180">
                <template slot-scope="scope">
                  <el-form :model="scope.row">
                    <el-form-item size="mini">
                      <el-input-number
                        v-model="scope.row.count_output"
                        :min="0"
                        :value="0"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-card class="box-card" v-if="values === 0">
        <div slot="header" class="clearfix">
          <span>备注</span>
           </div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="操作备注">
              <el-input v-model="remark" width="300"></el-input>
            </el-form-item>
          </el-form>
       
      </el-card>
      <el-card
        class="box-card"
        v-for="(itemf, $index) in otherforms"
        :key="$index"
      >
        <el-form
          label-width="80px"
          label-position="right"
          v-if="values === $index + 1"
        >
          <el-row v-for="(item, $index) in itemf.form_fields" :key="$index">
            <el-form-item
              v-if="item.field_type === 'string'"
              :label="item.field_name"
            >
              <el-input placeholder="请输入" v-model="item.sort" />
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'int'"
              :label="item.field_name"
            >
              <el-input
                type="number"
                placeholder="请输入"
                v-model="item.sort"
              />
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'float'"
              :label="item.field_name"
            >
              <el-input
                type="number"
                placeholder="请输入"
                v-model="item.sort"
              />
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'date'"
              :label="item.field_name"
            >
              <el-date-picker
                v-model="item.create_time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'datetime'"
              :label="item.field_name"
            >
              <el-date-picker
                v-model="item.create_time"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'select'"
              :label="item.field_name"
            >
              <el-select
                style="width: 100%"
                v-model="item.sort"
                placeholder="请选择"
              >
                <el-option
                  v-for="item1 in item.field_choice"
                  :key="item1"
                  :label="item1"
                  :value="item1"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-else-if="item.field_type === 'selects'"
              :label="item.field_name"
            >
              <el-select
                style="width: 100%"
                v-model="optio"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item1 in item.field_choice"
                  :key="item1"
                  :label="item1"
                  :value="item1"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>

      <el-button
        style="margin-top: 12px"
        @click="next"
        v-if="values == 0 || values == 1 || values == 2"
        >下一步</el-button
      >
      <el-button
        style="margin-top: 12px"
        @click="prev"
        v-if="values == 1 || values == 2 || values == 3"
        >上一步</el-button
      >
      <div style="text-align: right">
        <el-button type="danger" @click="dialogVisiblework = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submint()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { getsubproductionplanList, createPick_need } from "@/api/pm";
import checkPermission from "@/utils/permission";
import { getProcessList } from "@/api/mtm";
import {
  createPick,
  getwmaterialList,
  submitWork,
  getwproductList,
} from "@/api/wpm";
import { getWarehouseList } from "@/api/inm";
import { createWork } from "@/api/wpm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
const defaulteneed = {};
export default {
  components: { Pagination },

  data() {
    return {
      need: defaulteneed,
      subproductionplanList: {
        count: 0,
      },
      wmaterialList: "",
      listQuery: {
        page: 1,
        page_size: 20,
      },
      remark: "",
      values: 0,
      active: 0,
      activeName: "1",
      havewl: "",
      needwl: "",
      showPrise: false,
      state_: {
        0: "制定中",
        1: "已下达",
        2: "已接受",
        3: "生产中",
        4: "已完成",
      },
      listLoading: true,
      listLoading: true,
      id: "",
      warehouseoptions: [],
      dialogVisible: false,
      dialogType: "new",
      dialogVisiblework: false,
      dialogVisiblenw: false,
      dialogTypenw: "new",
      picks: [],
      pickData: {},
      steps: [],
      step: null,
      processOption: "",
      subproduction_plan: "",
      form1: [],
      form2: [],
      form3: [],
      input: [],
      output: [],
      forms: [],
      inputData: [],
      outputData: [],
      field1: [],
      field2: [],
      fromData: [],
      wproductData: "",
      wpID: [],
      multipleSelection: [],
      wproducts: [],
      otherforms: [],
      from: [],
    };
  },
  process: "",
  computed: {},
  watch: {},
  created() {
    this.getProcessList();
    this.getWarehouseLists();
  },
  methods: {
    checkPermission,

    //选项卡切换
    handleClick(tab) {
      this.process = tab.name;
      this.listQuery.process = tab.name;
      this.steps = [];
      getsubproductionplanList(this.listQuery).then((response) => {
        if (response.data) {
          this.subproductionplanList = response.data;
        }
        this.listLoading = false;
      });
      getwmaterialList({
        subproduction_plan__process: this.process,
        page: 0,
      }).then((response) => {
        if (response.data) {
          this.wmaterialList = response.data;
        }
        this.listLoading = false;
      });
    },
    //工序对应的子计划，弹出对应的车间物料
    handleCurrentChange(row) {
      this.steps = row.steps; //调出子工序
      this.subproduction_plan = row.id; //子计划Id
      getwmaterialList({
        subproduction_plan__process: this.process,
        subproduction_plan: row.id,
        page: 0,
      }).then((response) => {
        if (response.data) {
          this.wmaterialList = response.data;
        }
        this.listLoading = false;
      });
      this.getwproductLists();
    },
    //工序渲染
    getProcessList() {
      getProcessList({ page: 0 }).then((response) => {
        if (response.data) {
          this.processOption = response.data;
        }
        this.listLoading = false;
      });
    },

    getWarehouseLists() {
      getWarehouseList({ page: 0 }).then((response) => {
        if (response.data) {
          this.warehouseoptions = response.data;
        }
        this.listLoading = false;
      });
    },
    handleNeed(scope) {
      this.need = Object.assign({}, defaulteneed);
      this.dialogType = "new";
      this.dialogVisible = true;
      this.id = scope.row.id;
      this.$nextTick(() => {
        this.$refs["Form"].clearValidate();
      });
    },
    async confirm(form) {
      createPick_need(this.id, this.need).then((res) => {
        if (res.code >= 200) {
          this.dialogVisible = false;
          this.dialogVisiblenw = true;
          this.havewl = res.data.have;
          this.needwl = res.data.need;
        }
      });
    },
    //确认领料
    handlePick() {
      let _this = this;
      _this.picks = []; //所需物料
      this.$refs.multipleTable.selection.forEach((item) => {
        _this.picks.push({
          material: item.material,
          batch: item.batch,
          pick_count: item.pick_count,
        });
      });
      this.pickData.subproduction_plan = this.id;
      this.pickData.warehouse = this.need.warehouse;
      this.pickData.picks = this.picks;

      //  console.log(this.pickData);

      createPick(this.pickData).then((res) => {
        if (res.code >= 200) {
          this.$message.success("领料成功！");
        }
      });
    },
    prev() {
      --this.values;
      if (this.values < 0) this.values = 0;
    },
    next() {
      if (this.values++ > this.forms.length) this.values = 0;
    },
    handleSelectionChange(val) {
      let _this = this;
      _this.wpID = [];
      val.forEach((item) => {
        _this.wpID.push(item.id);
      });
    },
    //车间操作
    handlework(item) {
      this.step = item.id;
      // console.log(this.wpID);
      createWork({
        step: item.id,
        wproducts: this.wpID,
        subproduction_plan: this.subproduction_plan,
      }).then((res) => {
        if (res.code >= 200) {
          this.dialogVisiblework = true;
          this.forms = res.data.forms;
          this.otherforms = res.data.forms.slice(0); //渲染生产表
          this.otherforms.shift();
          //console.log(this.otherforms)
          this.input = res.data.forms[0].input; //消耗
          if (
            res.data.forms[0].output !== undefined &&
            res.data.forms[0].output.length > 0
          ) {
            this.output = res.data.forms[0].output; //产出
            this.showPrise = true;
          }

          this.wproducts = res.data.forms[0].wproducts;
        }
      });
    },

    //提交
    submint() {
      this.form = [];
      this.otherforms.forEach((item) => {
        let _this = this;
        _this.field1 = [];
        item.form_fields.forEach((items) => {
          _this.field1.push({
            form_field: items.id,
            field_value: items.sort,
          });
        });

        this.form.push({
          form: item.id,
          record_data: _this.field1,
        });
      });

      console.log(this.remark);

      submitWork({
        step: this.step,
        subproduction_plan: this.subproduction_plan,
        wproducts: this.wproducts,
        input: this.input,
        output: this.output,
        forms: this.from,
        remark: this.remark,
      }).then((res) => {
        if (res.code >= 200) {
          this.dialogVisiblework = false;
          this.$message.success("成功！");
          this.getwproductLists();
        }
      });
    },
    //大工序下子工序产出的半成品
    getwproductLists() {
      getwproductList({
        page: 0,
        subproduction_plan: this.subproduction_plan,
        p_state__process: this.process,
      }).then((response) => {
        if (response.data) {
          this.wproductData = response.data;
          //console.log( this.wproductData)
        }
      });
    },
  },
};
</script>