<template>
  <ele-modal
    width="60vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="titleOpt[type]"
  >
    <div class="form-wrapper">
      <el-form
        :model="formData"
        label-width="0"
        :show-message="false"
        ref="formRef"
      >
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item>
            <span slot="label" class="label-required">计划编号</span>
            <el-form-item prop="productionPlanCode" required>
              <el-input
                :value="formData.productionPlanCode"
                placeholder="请选择"
                @click.native="codeChoose"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="物料编码">
            {{ formData.productCode }}</el-descriptions-item
          >
          <el-descriptions-item label="产品名称">{{
            formData.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="牌号|型号">
            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
          >
          <el-descriptions-item label="计划生产数量">{{
            formData.productNum
          }}</el-descriptions-item>
          <el-descriptions-item label="要求生产数量">{{
            formData.requiredFormingNum
          }}</el-descriptions-item>
          <el-descriptions-item
            label="生产数量"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">生产数量</span>
            <el-form-item prop="formingNum" required>
              <el-input-number
                v-model="formData.formingNum"
                class="w100"
                :max="formData.requiredFormingNum || 0"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            label="计划开始时间"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">计划开始时间</span>

            <el-form-item prop="planStartTime" required class="w100">
              <el-date-picker
                class="w100"
                v-model="formData.planStartTime"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker> </el-form-item
          ></el-descriptions-item>
          <el-descriptions-item
            label="设备编码/名称"
            label-class-name="produce-create-bg"
            content-class-name="produce-create-bg"
          >
            <span slot="label" class="label-required">设备编码/名称</span>
            <el-form-item prop="deviceName" required
              ><el-input
                @click.native="getEquip"
                :value="
                  formData.deviceName &&
                  `${formData.deviceName}(${formData.deviceCode})`
                "
              ></el-input> </el-form-item
          ></el-descriptions-item>
        </el-descriptions>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <apsPlanOrder ref="apsPlanOrderRef" />
    <equipmentDailog
      ref="equipmentDailogRef"
      :produceVersionId="formData.produceVersionId"
    />
  </ele-modal>
</template>

<script>
  import { save, update } from '@/api/produceOrder/index.js';
  import equipmentDailog from '@/components/EquipmentDailog/equipment-dailog';
  import apsPlanOrder from './apsPlanOrder';
  export default {
    components: { apsPlanOrder, equipmentDailog },
    data () {
      return {
        visible: false,
        titleOpt: ['创建工单'],
        type: 0,
        formData: {
          produceVersionId: '',
          productionPlanCode: '',
          deviceCode: '',
          deviceName: '',
          productCode: '',
          productName: '',
          formingNum: '',
          brandNo: '',
          model: '',
          productUnitWeight: '',
          requiredFormingNum: '',
          planStartTime: '',
          productNum: ''
        }
      };
    },
    methods: {
      open (type = 0) {
        this.type = type;
        this.visible = true;
      },
      codeChoose () {
        this.$refs.apsPlanOrderRef.open(this.formData.productCode, (res) => {
          if (this.formData.productCode != res.productCode) {
            this.formData.deviceCode = '';
            this.formData.deviceName = '';
            this.formData.deviceId = '';
          }

          this.formData.productionPlanCode = res.code;
          this.formData.productionPlanId = res.id;
          this.formData.productCode = res.productCode;
          this.formData.productName = res.productName;
          this.formData.brandNo = res.brandNo;
          this.formData.model = res.model;
          this.formData.productNum = res.productNum;
          this.formData.productUnitWeight = res.productUnitWeight;
          this.formData.requiredFormingNum = res.requiredFormingNum;
          this.formData.produceVersionId = res.produceVersionId;
        });
      },
      getEquip () {
        if (!this.formData.produceVersionId) {
          return this.$message.error('请先选择计划');
        }
        this.$refs.equipmentDailogRef.openSingle(
          [this.formData.deviceCode],
          (res) => {
            this.formData.deviceCode = res.code;
            this.formData.deviceName = res.name;
            this.formData.deviceId = res.id;
          }
        );
      },
      cancel () {
        this.formData = {};
        this.visible = false;
      },
      confirm () {
        this.$refs.formRef.validate(async (value) => {
          if (value) {
            const res = await save(this.formData);

            this.$message.success('操作成功！');
            this.$emit('success');
            this.cancel();
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .label-required {
    &::after {
      content: '*';
      color: var(--color-danger);
      font-size: 1.2em;
    }
  }
  .form-wrapper {
    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 0 !important;
      }
    }
  }
</style>
<style lang="scss">
  .produce-create-bg {
    background-color: var(--color-primary) !important;
    color: #fff !important;
  }
</style>
