<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="设备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deviceTypeId">
              <j-dict-select-tag
                disabled
                type="list"
                v-model="model.deviceTypeId"
                dictCode="bu_device_type,type_name,id"
                placeholder="请选择设备"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="修程" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rapairRange">
              <j-dict-select-tag
                type="list"
                v-model="model.rapairRange"
                dictCode="repair_range"
                placeholder="请选择修程"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="定义" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ramark">
              <a-textarea v-model="model.ramark" placeholder="请输入定义" allow-clear></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="检修周期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceCycle">
              <a-input-number
                addon-after="天"
                v-model="model.maintenanceCycle"
                placeholder="请输入检修周期"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="允许偏差" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bias">
              <a-input-number addon-after="天" v-model="model.bias" placeholder="请输入允许偏差" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="作业时长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duration">
              <a-input-number
                addon-after="天"
                v-model="model.duration"
                placeholder="请输入作业时长"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审核员1" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="review1">
              <a-row>
                <a-col :span="20">
                  <a-input v-model="model.review1" placeholder="请输入审核员1" style="width: 100%" />
                </a-col>
                <a-col :span="4">
                  <a-button style="width: 100%" type="primary" icon="plus" @click="handleReviewNum"/>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审核员2" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="review2">
              <a-input v-model="model.review2" placeholder="请输入审核员2" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item v-if="reviewNum>2" label="审核员3" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="review3">
              <a-input v-model="model.review3" placeholder="请输入审核员3" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item v-if="reviewNum>3" label="审核员4" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="review4">
              <a-input v-model="model.review4" placeholder="请输入审核员4" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="作业工具" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button @click="handleSelectTools">选择工具</a-button>
              <span v-if="model.tools && model.tools.length > 0" style="margin-left: 10px"
                >已选择 {{ model.tools.length }} 件工具</span
              >
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="作业物料" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-button @click="handleSelectMaterial">选择物料</a-button>
              <span v-if="model.materials && model.materials.length > 0" style="margin-left: 10px"
                >已选择 {{ model.materials.length }} 件物料</span
              >
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <regular-material-modal ref="materialModal" @ok="materialSelected"></regular-material-modal>
    <regular-tools-modal ref="toolsModal" @ok="toolsSelected"></regular-tools-modal>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import RegularMaterialModal from '@views/regular/modules/RegularMaterialModal.vue'
import RegularToolsModal from '@views/regular/modules/RegularToolsModal.vue'
export default {
  name: 'RegularForm',
  components: {RegularToolsModal,RegularMaterialModal},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      reviewNum: 2,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        deviceTypeId: [{ required: true, message: '请输入设备!' }],
        rapairRange: [{ required: true, message: '请输入修程!' }],
        maintenanceCycle: [
          { required: true, message: '请输入检修周期!' },
          { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
        ],
        bias: [
          { required: true, message: '请输入允许偏差!' },
          { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
        ],
        duration: [
          { required: true, message: '请输入作业时长!' },
          { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' },
        ],
      },
      url: {
        add: '/regular/regular/add',
        edit: '/regular/regular/edit',
        queryById: '/regular/regular/queryById',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    handleReviewNum() {
      if(this.reviewNum<4)
        this.reviewNum++;
    },
    handleSelectTools() {
      this.$refs.toolsModal.show(this.model.tools)
    },
    handleSelectMaterial() {
      this.$refs.materialModal.show(this.model.materials)
    },
    toolsSelected(data) {
      this.model.tools = data
    },
    materialSelected(data) {
      this.model.materials = data
    },
    add(record) {
      this.modelDefault.deviceTypeId = record[0]
      this.modelDefault.tools = []
      this.modelDefault.materials = []
      this.edit(this.modelDefault)
      console.log(this.model)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              console.log(this.model)
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
