<template>
  <div class="app-container">
      <el-card>
        <div slot="header" class="clearfix">
          <span>基本信息</span>
             <el-button style="float: right; padding: 3px 0" @click="readbook()" type="text">查看作业指导书</el-button>
        </div>
        <el-form
          ref="form"
          inline="true"
          :model="operationData"
          label-width="80px"
        >
          <el-form-item label="子工序">
            <el-input
              v-model="operationData.step_.name"
              disabled="disabled"
            ></el-input>
          </el-form-item>

          <el-form-item label="创建人">
            <el-input
              v-model="operationData.create_by_.username"
              disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input
              v-model="operationData.create_time"
              disabled="disabled"
            ></el-input>
          </el-form-item>

          <el-form-item label="边角料">
            <el-radio-group v-model="operationData.use_scrap">
              <el-radio border
                :label="item.value"
                :key="item.value"
                v-for="item in scrap"
                >{{ item.lable }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" v-if="operationData.use_scrap">
            <el-input type="textarea" v-model="operationData.remark"></el-input>
          </el-form-item>

          <el-form-item v-if="operationData.use_scrap">
            <el-button type="primary" @click="scrapSubmit()">创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
        <el-drawer
  title="作业指导书点击下载查看!"
  :visible.sync="drawer"
  direction="rtl"
  size="10%">
   <el-table :data="techdocList">
      <el-table-column label="表名称" width="150">

       <template slot-scope="scope">
                <el-link type="primary" :href="scope.row.file_.file" target="_blank">{{ scope.row.file_.name }}</el-link>
            </template>
            </el-table-column>
    </el-table>
</el-drawer>
      </el-card>
      <el-row gutter="2">
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>半成品</span>
            </div>

            <template>
              <el-table
                :data="operationwpData"
                border
                fit
                stripe
                highlight-current-row
                height="230"
                style="width: 100%"
              >
                <el-table-column type="index" width="50" />
                <el-table-column
                  prop="subproduction_plan_.number"
                  label="子计划编号"
                >
                </el-table-column>
                <el-table-column prop="number" label="玻璃编号">
                </el-table-column>
                <el-table-column prop="material_.name" label="玻璃状态">
                </el-table-column>

                <el-table-column align="center" label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-link
                      v-if="checkPermission(['warehouse_update'])"
                      type="danger"
                      @click="handleDeletewproduct(scope)"
                      >删除</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-card>
        </el-col>
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>设备</span>
            </div>
            <template>
              <el-table
                :data="equData"
                border
                fit
                stripe
                highlight-current-row
                height="230"
                style="width: 100%"
              >
                <el-table-column prop="equip_.number" label="设备编号">
                </el-table-column>
                <el-table-column prop="equip_.name" label="设备名称">
                </el-table-column>
                <el-table-column align="center" label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-link
                      v-if="checkPermission(['warehouse_update'])"
                      type="danger"
                      @click="handleDeletequip(scope)"
                      >删除</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-card>
        </el-col>
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>生产记录表</span>
            </div>
            <template>
              <el-table
                :data="recordData"
                border
                fit
                stripe
                highlight-current-row
                height="230"
                style="width: 100%"
              >
                <el-table-column prop="form_.name" label="名称">
                </el-table-column>
                <el-table-column label="是否填写">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.is_filled == false">未填写</el-tag>
                    <el-tag v-else>已填写</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-link
                      v-if="checkPermission(['warehouse_update'])"
                       type="primary"
                      @click="handlerecord(scope)"
                      >填写表单</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog
                :model="tableForm"
                :visible.sync="dialogVisibleForm"
                :close-on-click-modal="false"
                :title="fieldList.name"
              >
                <el-form label-width="80px" label-position="right">
                  <el-row v-for="(item, $index) in fieldList.record_data" :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>
                <span slot="footer">
                  <el-button type="danger" @click="dialogVisibleForm = false"
                    >取消</el-button
                  >
                  <el-button type="primary" @click="recordconfirm()"
                    >提交</el-button
                  >
                </span>
              </el-dialog>
            </template>
          </el-card>
        </el-col>
      </el-row>
      <el-row gutter="2">
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>消耗物料</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="cjllclick()"
                >从车间领料</el-button
              >
            </div>
            <template>
              <el-table
                :data="inputData"
                border
                fit
                stripe
                highlight-current-row
                height="230"
                style="width: 100%"
              >
                <el-table-column
                  prop="subproduction_plan_.number"
                  label="子计划编号"
                >
                </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="material_.unit" label="物料单位">
                </el-table-column>
                <el-table-column prop="count" label="消耗数量">
                </el-table-column>
              </el-table>
              <el-dialog title="车间物料" :close-on-click-modal="false" :visible.sync="dialogTablepick">
                <el-table
                  :data="wmaterialData"
                  border
                  fit
                  stripe
                  style="width: 100%"
                  max-height="400"
                    ref="multipleTable"
                >
                 <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.subproduction_plan_.number
                    }}</template>
                </el-table-column>
                  <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-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"
                            :controls="false"
                            :value="0"
                          ></el-input-number>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                 <!-- <el-table-column align="center" label="操作" width="100px">
                    <template slot-scope="scope">
                      <el-link
                        v-if="checkPermission(['warehouse_update'])"
                        @click="handlepick(scope)"
                        >提交</el-link
                      >
                    </template>
                  </el-table-column>!-->
                </el-table>
                 <div style="text-align: right">
        <el-button type="danger" @click="dialogTablepick = false">取消</el-button>
        <el-button type="primary" @click="handlepicks()">提交</el-button>
      </div>

              </el-dialog>
            </template>
          </el-card>
        </el-col>
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>产出物料</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="dialogTableoutput = true"
                >选择产出</el-button
              >
            </div>
            <el-table
              :data="outputData"
              border
              fit
              stripe
              highlight-current-row
              height="230"
              style="width: 100%"
            >
              <el-table-column
                prop="subproduction_plan_.number"
                label="子计划编号"
              >
              </el-table-column>

              <el-table-column prop="material_.name" 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>
            <el-dialog title="产出物料" :close-on-click-modal="false" :visible.sync="dialogTableoutput">
              <el-table
                :data="tprogressData"
                border
                fit
                stripe
                style="width: 100%"
                max-height="400"
            ref="multipleTables"
                >
                 <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.subproduction_plan
                  }}</template>
                </el-table-column>
                <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.count }}</template>
                </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.output_count"
                          :min="0"
                          :controls="false"
                          :value="0"
                        ></el-input-number>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
               <!-- <el-table-column align="center" label="操作" width="100px">
                  <template slot-scope="scope">
                    <el-link
                      v-if="checkPermission(['warehouse_update'])"
                      @click="handleoutput(scope)"
                      >提交</el-link
                    >
                  </template>
                </el-table-column>!-->
              </el-table>
               <div style="text-align: right">
        <el-button type="danger" @click="dialogTableoutput = false">取消</el-button>
        <el-button type="primary" @click="handleoutputs()">提交</el-button>
      </div>
            </el-dialog>
          </el-card>
        </el-col>
        <el-col span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>工序工装</span>
            </div>
        
            <el-table
              :data="tool"
              border
              fit
              stripe
              highlight-current-row
              height="230"
              style="width: 100%"
            >
            

              <el-table-column prop="material_.name" label="物料名称">
              </el-table-column>
              <el-table-column prop="material_.unit" label="物料单位">
              </el-table-column>
            
            </el-table>
      

              
          </el-card>
        </el-col>
      </el-row>
      <el-card>
        <el-button type="primary" style="float: right" @click="handlesubmit()"
          >提交本次操作</el-button
        >
      </el-card>

  </div>
</template>
<style scoped>
.box-card {
  height: 300px;
}
</style>
  <script>
import {
  getoperation,
  createoperation,
  getoperationwproductList,
  getequList,
  getrecordList,
  getinputList,
  getwmaterialList,
  createInput,
  getoutputList,
  createOutput,
  createRecord,
  submitOperation,
  deleteOperationequip,
  deleteOperationwproduct,
  gettoolList,
  createTool,
  createInputs,
  recordInit,
  createOutputs
} from "@/api/wpm";

import { getrffieldList,gettechdocList } from "@/api/mtm";
import checkPermission from "@/utils/permission";
import { getprogressList } from "@/api/pm";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      techdocList:"",
      operationList: {
        count: 0,
      },
      drawer:false,
      listQuery: {
        page: 1,
        page_size: 20,
      },
      scrap: [
        { lable: "使用", value: true },
        { lable: "不使用", value: false },
      ],
      listQueryfield: {
        page: 1,
        page_size: 20,
      },
      operationData: "",
      scrapData: {},
      dialogVisibleForm: false,
      tableForm: {
        name: "",
      },
      listQueryrecordform: {
        page: 1,
        page_size: 20,
      },
      recordformList: {
        count: 0,
      },
      fieldList: {
        count: 0,
      },
      listQueryfield: {
        page: 1,
        page_size: 20,
      },
      highoptions: [
        { value: 1, label: "<" },
        { value: 2, label: "<=" },
      ],
      lowoptions: [
        { value: 1, label: ">" },
        { value: 2, label: ">=" },
      ],
      highoptionss_: {
        1: "<",
        2: "<=",
      },
      lowoptionss_: {
        1: ">",
        2: ">=",
      },
      options_: {
        string: "文本",
        int: "整数",
        float: "小数",
        date: "日期",
        datetime: "日期时间",
        select: "单选",
        selects: "多选",
      },
      fieldtypeoptions: [
        {
          value: "string",
          label: "文本",
        },
        {
          value: "int",
          label: "整数",
        },
        {
          value: "float",
          label: "小数",
        },
        {
          value: "date",
          label: "日期",
        },
        {
          value: "time",
          label: "时间",
        },
        {
          value: "datetime",
          label: "日期时间",
        },
        {
          value: "select",
          label: "单选",
        },
        {
          value: "selects",
          label: "多选",
        },
      ],
      formID: "",
      dialogTablepick: false,
      dialogTableoutput: false,
      picks: {},
      output: {},
      record_data: [],
      record: {},
      inputData: [],
      operationwpData: [],
      equData: [],
      recordData: [],
      wmaterialData: [],
      outputData: [],
      tprogressData: [],
      tool:"",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.params.id; //操作ID
    this.getList(); //边角料
    this.getpwpList(); //半成品
    this.getequList(); //设备
    this.getrecordLists(); //自定义表
    this.getinputLists(); //物料消耗
    this.getoutputLists(); //产出物料
    this.getwmaterialList();
    this.getprogressList(); //产出物料调出
    this. gettoolList();//工序工装
  },
  methods: {
    checkPermission,

    //作业指导书
   readbook(){
     this.drawer=true;
     gettechdocList({operation:this.id,page:0}).then((response) => {
        if (response.data) {
          this.techdocList= response.data;
        }
      });
   },

    //是否使用边角料
    getList() {
      getoperation(this.id).then((response) => {
        if (response.data) {
          this.operationData = response.data;
        }
      });
    },
    //如果使用边角料提交
    scrapSubmit() {
      this.scrapData.use_scrap = this.operationData.use_scrap;
      this.scrapData.remark = this.operationData.remark;
      createoperation(this.id, this.scrapData).then((res) => {
        if (res.code >= 200) {
          this.$message.success("成功！");
          this.getList(); //
        }
      });
    },
    //操作使用的半成品
    getpwpList() {
      getoperationwproductList({ operation: this.id, page: 0 }).then(
        (response) => {
          if (response.data) {
            this.operationwpData = response.data;
          }
        }
      );
    },
    //操作半成品删除
    handleDeletewproduct(scope) {
      this.$confirm("确认删除该半成品?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteOperationwproduct(scope.row.id);
          this.getpwpList();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //操作设备
    getequList() {
      getequList({ operation: this.id, page: 0 }).then((response) => {
        if (response.data) {
          this.equData = response.data;
        }
      });
    },
    //操作删除设备
    handleDeletequip(scope) {
      alert(scope.row.equip_.id);

      this.$confirm("确认删除该设备?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteOperationequip(scope.row.id);
          this.getequList();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //操作自定义表
    getrecordLists() {
      getrecordList({ operation: this.id, page: 0 }).then((response) => {
        if (response.data) {
          this.recordData = response.data;
        }
      });
    },
    //调出表单内容
    handlerecord(scope) {
      this.tableForm = Object.assign({}, scope.row); // copy obj
      this.formID = scope.row.id;
      recordInit( this.formID).then((response) => {
        if (response.data) {
          this.fieldList = response.data;
        }
      });
      this.dialogVisibleForm = true;
    },

    //工序工装列表
  gettoolList() {
      gettoolList({ operation: this.id, page: 0 }).then(
        (response) => {
          if (response.data) {
            this.tool = response.data;
          }
        }
      );
    },
    
    //提交表单内容
    recordconfirm() {
      let _this = this;
      _this.record_data = []; //检查项目
      this.fieldList.record_data.forEach((item) => {
        _this.record_data.push({
          id: item.id,
          field_value: item.field_value,
        });
      });
      this.record.record_data = _this.record_data;
      createRecord(this.formID, this.record).then((res) => {
        if (res.code >= 200) {
          this.getrecordLists();
          this.$message.success("创建成功！");

          this.dialogVisibleForm = false;
        }
      });
    },

    //操作消耗物料列表
    getinputLists() {
      getinputList({ operation: this.id, page: 0 }).then((response) => {
        if (response.data) {

          this.inputData = response.data;
        }
      });
    },
    cjllclick() {
      this.dialogTablepick = true;
    },

    //从车间领料
    getwmaterialList() {
      getwmaterialList({ operation: this.id, page: 0 }).then((response) => {
        if (response.data) {
          this.wmaterialData = response.data;
        }
      });
    },
    //车间物料消耗提交
    handlepick(scope) {
      this.picks.operation = this.id;
      this.picks.wmaterial = scope.row.id;
      this.picks.count = scope.row.pick_count;
      let _this = this;
      createInput(this.picks).then((res) => {
        if (res.code >= 200) {
          this.$message.success("创建成功！");
          _this.getinputLists();
          this.dialogTablepick = false;
        }
      });
    },

//车间领料批量提交
 handlepicks() {


  let _this = this;

        this.pickDatas=[],
        this.$refs.multipleTable.selection.forEach((item) => {
          if(item.pick_count>0)
          {
               this.pickDatas.push({
           "operation" :this.id,
    "wmaterial":item.id,
    "count": item.pick_count,

        });
          }


      });


       createInputs(this.pickDatas).then((res) => {
        if (res.code >= 200) {
           this.dialogTablepick = false;
          this.$message.success("提交成功！");
          _this.getinputLists();

        }
      });
    },


    //操作产出物料列表
    getoutputLists() {
      getoutputList({ operation: this.id, page: 0 }).then((response) => {
        if (response.data) {
          this.outputData = response.data;
        }
      });
    },
    //产出物料选择
    getprogressList() {
      getprogressList({ operation: this.id, page: 0, type: 2 }).then(
        (response) => {
          if (response.data) {
            this.tprogressData = response.data;
          }
        }
      );
    },
    //车间产出物料提交
    handleoutput(scope) {
      this.output.operation = this.id;
      this.output.subproduction_progress = scope.row.id;
      this.output.count = scope.row.output_count;
      createOutput(this.output).then((res) => {
        if (res.code >= 200) {
          this.getoutputLists();
          this.$message.success("创建成功！");

          this.dialogTableoutput = false;
        }
      });
    },
 //车间产出物料批量提交
    handleoutputs() {


      this.outputDatas=[],
        this.$refs.multipleTables.selection.forEach((item) => {
          if(item.output_count>0)
          {
               this.outputDatas.push({
           "operation" :this.id,
    "subproduction_progress":item.id,
    "count": item.output_count,

        });
          }


      });

      createOutputs(this.outputDatas).then((res) => {
        if (res.code >= 200) {
           this.dialogTableoutput = false;

          this.$message.success("提交成功！");
            this.getoutputLists();


        }
      });
    },


    //提交本次操作
    handlesubmit() {
      submitOperation(this.id).then((res) => {
        if (res.code >= 200) {
           this.$router.push({name: "operation" })
          this.$message.success("操作提交成功！");
        }
      });
    },
  },
};
</script>
