<template>
  <el-form ref="dataForm" :rules="rules" label-width="130px" :model="dataForm" label-position="top">
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-form-item label="工单名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="请输入工单名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="工单编码" prop="code">
          <el-input v-model="dataForm.code" disabled placeholder="请输入工单编码"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="产品名称" prop="planProductId">
          <el-select v-model="dataForm.planProductId" placeholder="请选择产品" style="width: 100%;" filterable @change="selectProduct">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-form-item label="产品规格" prop="specifications">
          <el-input v-model="dataForm.specifications" placeholder="请输入产品规格" />
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="计划开始时间">
          <el-date-picker
            v-model="dataForm.planStartTime"
            type="datetime"
            value-format="timestamp"
            style="width: 100%;"
            placeholder="请选择计划开始时间">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="计划完成时间">
          <el-date-picker
            v-model="dataForm.planFinishTime"
            type="datetime"
            value-format="timestamp"
            style="width: 100%;"
            placeholder="请选择计划完成时间">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-form-item label="计划投入数量" prop="planAssignQuantity">
          <el-input-number v-model="dataForm.planAssignQuantity" :min="0" :max="9999999999999" style="width: 100%;" placeholder="请输入计划投入数量"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="计划生产数量" prop="planQuantity">
          <el-input-number v-model="dataForm.planQuantity" :min="0" :max="9999999999999" style="width: 100%;" placeholder="请输入计划生产数量"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="关联工艺" prop="processFlowId">
          <el-select v-model="dataForm.processFlowId" placeholder="请选择关联工艺" clearable filterable style="width: 100%;" @change="processFlowIdChange">
            <el-option
              v-for="item in processFlowList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-form-item label="物料计算方式" prop="materialMethod">
          <!-- <el-radio-group v-model="dataForm.materialMethod" @change="materialMethodChange">
            <el-radio :label="1">产品基础BOM</el-radio>
            <el-radio :label="2">工艺扩展BOM</el-radio>
          </el-radio-group> -->
          <el-select v-model="dataForm.materialMethod" placeholder="请选择物料计算方式" style="width: 100%;" @change="materialMethodChange">
            <el-option key="1" label="产品基础BOM" :value="1" />
            <el-option key="2" label="工艺扩展BOM" :value="2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="dataForm.priority" placeholder="请选择优先级" style="width: 100%;">
            <el-option
              v-for="item in getDictDatas(DICT_TYPE.ORDER_PRIORITY)"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="工单类型" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择工单类型" style="width: 100%;">
            <el-option
              v-for="item in workOrderTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span='8'>
        <el-form-item label="关联产线" prop="productLineIds">
          <el-select v-model="dataForm.productLineIds" placeholder="请选择关联产线" multiple style="width: 100%;">
            <el-option
              v-for="item in productLineList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span='8'>
        <el-form-item label="负责人" prop="workers">
          <el-input v-model="dataForm.workers" placeholder="请输入负责人"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span='12'>
        <el-form-item label="计划分配订单量" prop="planAssignmentQuantity">
          <el-input-number v-model="form.planAssignmentQuantity" :min="0" :max="9999999999999" style="width: 100%;"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row> -->
  </el-form>
</template>
<script>
import { getProductAll } from '@/api/base/product'
import { getProcessFlowList, workOrderList } from '@/api/base/orderManage'
import { createCoreWO, updateCoreWO, getCode, getCoreWO } from '@/api/base/coreWorkOrder'
import { getLineAll } from '@/api/base/productionLine'
import basicAdd from '../../core/mixins/basic-add';

export default {
  name: 'AddWorkOrder',
  mixins: [basicAdd],
  data() {
    return {
      urlOptions: {
			  isGetCode: true,
        codeURL: getCode,
				createURL: createCoreWO,
				updateURL: updateCoreWO,
				infoURL: getCoreWO
			},
      dataForm: {
        id: undefined,
        workOrderId: '',
        name: '',
        code: '',
        planProductId: '',
        specifications: '',
        planStartTime: '',
        planFinishTime: '',
        planAssignQuantity: 0,
        planQuantity: 0,
        processFlowId: '',
        materialMethod: 1,
        triggerOrigin: 1,
        priority: '',
        productLineIds: [],
        type: '',
        workers: '',
        status: 1
      },
      rules: {
        name: [{ required: true, message: "工单名称不能为空", trigger: "blur" }],
        planProductId: [{ required: true, message: "产品名称不能为空", trigger: "change" }],
        planAssignQuantity: [{ required: true, message: "计划投入数量不能为空", trigger: "blur" }],
        planQuantity: [{ required: true, message: "计划生产数量不能为空", trigger: "blur" }],
        productLineIds: [{ required: true, message: "关联产线不能为空", trigger: "change" }]
      },
      productList: [],
      processFlowList: [],
      productLineList: [],
      workOrderTypeList: [
        {id: 1,name:'普通'},
        {id: 2, name:'特殊'}
      ],
      planStartTime: '',
      planFinishTime: '',
      isBind: false,
      workOrderList: []
    }
  },
  mounted() {
    this.getDict()
  },
  methods: {
    // 工艺变更
    materialMethodChange(val) {
      if (val === 2 && !this.dataForm.processFlowId) {
        this.dataForm.materialMethod = 1
        this.$modal.msgError("请先选择关联工艺");
      }
    },
    // 工艺变更
    processFlowIdChange(val) {
      console.log(val)
      if (!val) {
        this.dataForm.materialMethod = 1
      }
    },
    init(id) {
      this.dataForm.id = id || "";
      this.visible = true;
      if (this.urlOptions.getOption) {
        this.getArr()
      }
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.planStartTime = ''
        this.planFinishTime = ''
        if (this.dataForm.id) {
          getCoreWO(id).then(response => {
            this.dataForm = response.data;
            if (this.dataForm.priority !== undefined) {
              this.dataForm.priority = String(this.dataForm.priority)
            }
            this.dataForm.priority 
          });
        } else {
          if (this.urlOptions.isGetCode) {
            this.getCode()
          }
				}
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        // 修改的提交
        if (this.dataForm.id) {
          this.urlOptions.updateURL(this.dataForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.visible = false;
            this.$emit("refreshDataList");
          });
          return;
        }
        // 添加的提交
        this.urlOptions.createURL(this.dataForm).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.visible = false;
          this.$confirm('是否添加预使用主原料信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            console.log('121', this.dataForm.name)
            this.$emit("refreshDataList", {
              id: response.data,
              name: this.dataForm.name
            });
          }).catch(() => {
            this.$emit("refreshDataList");        
          });
        });
      });
    },
    getCode() {
			this.urlOptions.codeURL()
				.then(({ data: res }) => {
					this.dataForm.code = res;
				})
				.catch(() => {});
		},
    getDict() {
      // 产品
      getProductAll().then(res => {
        this.productList = res.data || []
      })
      // 产线
      getLineAll().then(res => {
        this.productLineList = res.data || []
      })
      // 工艺
      getProcessFlowList().then(res => {
        this.processFlowList = res.data || []
      })
      // 工单list
      workOrderList({
        status: 1
      }).then(res => {
        this.workOrderList = res.data || []
      })
    },
    // 选产品带出规格
    selectProduct(val) {
      if (val) {
        this.productList.map(item => {
          if (val === item.id) {
            this.dataForm.specifications = item.specifications
          }
        })
      } else {
        this.dataForm.specifications = ''
      }
    }
  }
}
</script>