<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div class="align-colon">
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>订单号：</span><a-input v-model="model.orderNumber" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>订货单位：</span><a-input v-model="model.danwei" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>工作令：</span><a-input v-model="model.workOrder" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>产品名称：</span><a-input v-model="model.productName" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>产品类型：</span><a-input v-model="model.productType" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>任务下达时间：</span><a-input v-model="model.workTime" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>派工时间：</span><a-input v-model="model.dispatchTime" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>交货时间：</span><a-input v-model="model.deliveryTime" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>数量（套）：</span><a-input v-model="model.num" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p  style="margin-bottom: 0px;margin-left: 50px;"><span>总工时：</span><a-input v-model="model.totalWork" style="width: 200px;border:0px;font-weight: bold;"></a-input></p>
          <p style="margin-left: 50px;"><span>已派发工时：</span><a-input v-model="model.pai" style="width: 200px;border:0px"></a-input></p>
          <!-- 图片容器 -->
          <div class="image-container-wrapper">
            <div class="image-container">
              <j-image-upload isMultiple v-model="files" class="custom-image"></j-image-upload>
           
            </div>
            <div class="image-container">
              <j-image-upload isMultiple v-model="imageSrc"></j-image-upload>
            </div>
          </div>
        </div>
       <a-table :columns="columns" :data-source="res" style="width: auto" :pagination="false"></a-table>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import Axios from 'axios'
import { queryBynumber, querygx } from '../../../api/manage'

export default {
  name: 'TblProductionPlanForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      imageSrc: '',
      files: '',
      model: {},
      res:[],
      columns: [
        {
          title: '工序',
          align: 'center',
          dataIndex: 'workingProcedure',
        },
        {
          title: '承接人',
          align: 'center',
          dataIndex: 'undertaker',
        },
        {
          title: '工时',
          align: 'center',
          dataIndex: 'workHours',
        },
        
        {
          title: '派发时间',
          align: 'center',
          dataIndex: 'dispatchTime',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '派发人',
          align: 'center',
          dataIndex: 'dispatchRen',
        },
        {
          title: '验收时间',
          align: 'center',
          dataIndex: 'yanTime',
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: '验收人',
          align: 'center',
          dataIndex: 'yanRen',
        },
        {
          title: '验收结果',
          align: 'center',
          dataIndex: 'yanResult',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'notes',
        },
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        pai: [{ required: true, message: '请输入已派发工时!' }],
        totalWork: [{ required: true, message: '请输入总工时!' }],
        deliveryTime: [{ required: true, message: '请输入交货时间!' }],
        dispatchTime: [{ required: true, message: '请输入派工时间!' }],
        workTime: [{ required: true, message: '请输入任务下达时间!' }],
        productType: [{ required: true, message: '请输入产品类型!' }],
        productName: [{ required: true, message: '请输入产品名称!' }],
        workOrder: [{ required: true, message: '请输入工作令!' }],
        danwei: [{ required: true, message: '请输入订货单位!' }],
        orderNumber: [{ required: true, message: '请输入订单号!' }],
        num: [{ required: true, message: '请输入数量（套）!' }],
      },
      url: {
        add: '/production/tblProductionPlan/add',
        edit: '/production/tblProductionPlan/edit',
        queryById: '/production/tblProductionPlan/queryById',
        queryBynumber: '/production/tblProductionPlan/queryBynumber',
        querygx: '/production/tblProductionPlan/querygx',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    
  },
  methods: {
     querygx(orderNumber,productType) {
      querygx(this.url.querygx, this.model).then((res) => {
      console.log('工序订单号：', orderNumber)
      console.log('工序产品类型：', productType)
      console.log("工序查询：",res)
      this.res=res.result
      })
    },
    queryBynumber(orderNumber) {
      console.log('1订单号：', orderNumber)
      queryBynumber(this.url.queryBynumber, this.model).then((res) => {
        console.log(res.result)
        this.imageSrc = res.result.pics
        this.files = res.result.files
        console.log('files:', this.files)
        console.log(this.imageSrc)
      })
    },
    add() {
      this.edit(this.modelDefault)
    },
    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) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped>
.align-colon p {
  display: flex;
  align-items: center;
}

.align-colon p span {
  width: 100px; /* 固定文本部分的宽度 */
  text-align: right; /* 文本右对齐 */
  margin-right: -0px; /* 调整冒号后的空白间距 */
  font-weight: bold; /* 将文本加粗 */
}
/* 图片容器及其包裹器的样式 */
.image-container-wrapper {
  width: 50%; /* 将图片容器包裹器宽度设置为一半 */
  float: right; /* 右浮动 */
  margin-top: -300px; /* 调整顶部外边距以与其他内容对齐 */
}

.image-container {
  margin-bottom: -10px; /* 图片容器下边距 */
}
.custom-image {
  width: 500px; /* 设置图片宽度为200像素 */
  height: auto; /* 自动调整高度以保持宽高比 */
}
</style>