<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
    <el-container v-loading="loading">
      <el-main style="padding: 0 0 20px 0">
        <el-form ref="dialogForm" :model="form" :rules="rules" label-position="right" label-width="80px"
          style="padding: 0 10px;">
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="标识" v-if="menuType=='dynamic'">
                <el-input v-model="form.code" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="工序" prop="process">
                <el-select v-model="form.process" placeholder="工序" clearable class="width-100">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="工段类型" prop="mtype">
                <el-select v-model="form.mtype" placeholder="工段类型" class="width-100">
                  <el-option v-for="item in typeOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="所属部门">
                <el-cascader
                  v-model="form.belong_dept"
                  :options="group"
                  :props="groupsProps"
                  clearable
                  :show-all-levels="false"
                  class="width-100"
                  @change="deptChange"
                >
                </el-cascader>
                <!-- <el-select v-model="form.belong_dept" placeholder="所属部门" clearable style="width: 100%;">
                  <el-option v-for="item in group" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="排班规则">
                <el-select v-model="form.shift_rule" class="width-100">
                  <el-option v-for="item in shiftOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="baseCode!=='bxerp'">
							<el-form-item label="批号追加工段标识" label-width="130px">
								<el-switch
									v-model="form.batch_append_code"
								></el-switch>
							</el-form-item>
						</el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="排序">
                <el-input-number v-model="form.sort" :min="1" class="width-100"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="能源监测" prop="need_enm">
            <el-switch v-model="form.need_enm"></el-switch>
          </el-form-item> -->
        </el-form>
        <sc-form-table v-if="baseCode!=='bxerp'&&baseCode!=='tcerp'" ref="table" v-model="materialList" :addTemplate="addTemplate" placeholder="暂无数据">
          <el-table-column prop="type" label="输入物料" min-width="120" align="center">
            <template #default="scope">
              <span v-if="!scope.row.isedit">{{
                scope.row.material_in_name
              }}</span>
              <el-select v-else v-model="scope.row.material_in" filterable style="width: 100%">
                <el-option v-for="item in materials" :key="item.id" :label="item.full_name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="输出物料" min-width="120" align="center">
            <template #default="scope">
              <span v-if="!scope.row.isedit ">{{
                scope.row.material_out_name
              }}</span>
              <el-select v-else v-model="scope.row.material_out" filterable style="width: 100%">
                <el-option v-for="item in materials" :key="item.id" :label="item.full_name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="操作" min-width="80" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" v-if="scope.row.isedit"
                @click="submitForm(scope.row, scope.$index)">确定</el-button>
              <el-button type="warning" size="small" v-else @click="editForm(scope.row, scope.$index)">编辑</el-button>
              <el-button type="danger" size="small" @click="delForm(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </sc-form-table>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
  
<script>
import {genTree} from "@/utils/verificate";
const defaultForm = {
  name: "",
  mtype:10,
  process: '',
  cate: 'photon',
  belong_dept: '',
  need_enm: false,
  batch_append_code:false
};
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看',
      },
      //表单数据
      form: {
        mtype:10,
        shift_rule: ''
      },
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // process: [{ required: true, message: "请选择工序", trigger: "blur" }],
        belong_dept: [{ required: true, message: "请选择所属部门", trigger: "blur" }]
      },
      groupsProps: {
        // value: "id",
        multiple: false,
        emitPath: false,
        checkStrictly: true,
      },
      visible: false,
      isSaveing: false,
      shiftOptions: [],
      typeOptions:[
        {value:10,name:'自产'},
        {value:20,name:'外协'},
      ],
      options: [],
      group: [],
      routes: [],
      materials: [],
      setFiltersVisible: false,
      materialList: [],
      addTemplate: { material_in: '', material_out: '', mgroup: '', isedit: true },
      baseCode :this.$TOOL.data.get('BASE_INFO').base.base_code,
      menuType:this.$TOOL.data.get('BASE_INFO').base.base_menucate,
    };
  },
  mounted() {
    this.getShifts();
    this.getGroup();//获取部门
    this.getProcess();//获取工序
    this.getMaterial();//获取物料
  },
  methods: {
    //部门数据
    getGroup() {
      let that = this;
      that.$API.system.dept.list.req({page: 0 , type: 'dept'}).then(res=>{
        that.group = genTree(res);
      });
      // this.$API.system.dept.list.req({ page: 0, type: 'dept' }).then(res => {
      //   this.group = res;
      // });
    },
    //获取工序列表
    getProcess() {
      this.$API.mtm.process.list.req({ page: 0 }).then(res => {
        this.options = res;
      });
    },
    getShifts() {
      let shiftList = []
      this.$API.mtm.shift.list.req({ page: 0 }).then(res => {
        for (var i = 0; i < res.length; i++) {
          if (shiftList.indexOf(res[i].rule) == -1) {
            shiftList.push(res[i].rule)
          }
        }
        this.shiftOptions = shiftList;
      });
    },
    getMaterial() {
      this.$API.mtm.material.list.req({ page: 0, is_hidden: false, type__in: '10,20' }).then(res => {
        this.materials = res;
      });
    },
    getRoute(id) {
      let that = this;
      that.$API.mtm.route.list.req({ mgroup: id, page: 0 }).then(res => {
        that.routes = res;
        let mList = []
        res.forEach(item => {
          let obj = {};
          obj.id = item.id;
          obj.material_in = item.material_in;
          obj.material_out = item.material_out;
          obj.material_in_name = item.material_in_name;
          obj.material_out_name = item.material_out_name;
          obj.mgroup = id;
          obj.isedit = false;
          mList.push(obj)
        })
        that.materialList = mList
      });
    },
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
      this.getRoute(data.id);
    },
    setMgroup(id) {
      this.form.mgroup = id;
    },
    getReceptionist(data) {
      this.form.leader = data.id;
      this.form.leader_name = data.name
    },
    //表单提交方法
    submit() {
      console.log(this.mode)
      console.log(this.form)
      let that = this;
      that.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          that.form.cate = 'photon';
          that.form.need_enm = false;
          that.isSaveing = true;
          if (that.mode === 'add') {
            that.$API.mtm.mgroup.create.req(that.form).then(res => {
              that.isSaveing = false;
              that.$emit("success", that.form, that.mode);
              that.visible = false;
              that.$message.success("操作成功");
            })
          } else {
            that.$API.mtm.mgroup.update.req(that.form.id, that.form).then(res => {
              that.isSaveing = false;
              that.$emit("success", that.form, that.mode);
              that.visible = false;
              that.$message.success("操作成功");
            })
            .catch(error => {
              console.error("请求失败", error);
            });
          }
        }
      });
    },
    submitForm(row, index) {
      let that = this;
      let obj = {};
      obj.material_in = row.material_in;
      obj.material_out = row.material_out;
      if (row.id) {
        obj.mgroup = row.mgroup;
        this.$API.mtm.route.update.req(row.id, obj).then(res => {
          that.materialList[index].isedit = false;
        })
      } else {
        obj.mgroup = that.form.id;
        this.$API.mtm.route.create.req(obj).then(res => {
          that.materialList[index] = res
          that.materialList[index].isedit = false;
        })
      }
    },
    editForm(row, index) {
      let that = this;
      that.materialList[index].isedit = true;
    },
    delForm(row, index) {
      let that = this;
      this.$API.mtm.route.delete.req(row.id).then(res => {
        that.getRoute(that.form.id);
      })
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>
  
<style></style>
  