<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: -5px; margin-left: 50px">
            <span>订单号：</span
            ><a-input v-model="model.orderId" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>订货单位：</span
            ><a-input v-model="model.orderCompany" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; 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: -5px; 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: -5px; margin-left: 50px">
            <span>产品类型：</span
            ><a-input v-model="this.productType" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>任务下达时间：</span
            ><a-input v-model="model.orderDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>派工时间：</span
            ><a-input v-model="model.dispatchDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>交货时间：</span
            ><a-input v-model="model.deliveryDate" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>数量（套）：</span
            ><a-input v-model="model.quantity" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-bottom: -5px; margin-left: 50px">
            <span>总工时：</span
            ><a-input v-model="model.totalWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></a-input>
          </p>
          <p style="margin-left: 50px">
            <span>已派发工时：</span><a-input v-model="model.dispatchedWorkingHours" style="width: 200px; border: 0px; font-weight: bold"></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 style="display: inline-block; width: 45%">
              <div class="show">
                <img :src="getImgView(show)" :preview="num" alt="" height="100px" />
              </div>
              <div class="imgBox">
                <div
                  :class="[num == index ? 'borderShow' : '']"
                  v-for="(item, index) of picList"
                  :key="index"
                  @click="onImg(index)"
                >
                  <img :src="getImgView(item)" height="25px" alt="" style="margin-left: 20px" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="res"
          :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'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'TblProductionPlanForm',
  mixins: [JeecgListMixin],
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      productType:'',
      picList: '',
      show: '',
      num: 0,
      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',
        list: "/order_form/tblOrderForm/list",
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    onImg(e) {
      this.show = this.picList[e]
      this.num = e
    },
    querygx(orderId, productType) {
      if(this.model.productType === '接地'){
              this.model.productType='JD'
            }else if(this.model.productType === '线槽'){
              this.model.productType= 'XC'
            }else if(this.model.productType === '卡子'){
              this.model.productType= 'QZ'
            }else if(this.model.productType === '司机室'){
              this.model.productType= 'SJ'
            }else if(this.model.productType === '柜、箱、盒'){
              this.model.productType= 'GX'
            }else if(this.model.productType === '附属钢'){
              this.model.productType= 'FS'
            }
      querygx(this.url.querygx, this.model).then((res) => {
        console.log('工序订单号：', orderId)
        console.log('工序产品类型：', productType)
        console.log('工序查询：', res)
        this.res = res.result
      })
    },
    queryBynumber(orderId) {
      console.log('1订单号：', orderId)
      if(this.model.productType === '接地'){
              this.productType='接地'
            }else if(this.model.productType === '线槽'){
              this.productType= '线槽'
            }else if(this.model.productType === '卡子'){
              this.productType= '卡子'
            }else if(this.model.productType === '司机室'){
              this.productType= '司机室'
            }else if(this.model.productType === '柜、箱、盒'){
              this.productType= '柜、箱、盒'
            }else if(this.model.productType === '附属钢'){
              this.productType= '附属钢'
            }
      queryBynumber(this.url.queryBynumber, { orderId: orderId }).then((res) => {

        if (res.result) {
            const result = res.result;
            if (result.designPic) {
                this.imageSrc = result.designPic;
                this.picList = result.designPic.split(',');
                this.show = this.picList[0];
            }
            if (result.designFile) {
                this.designFile = result.designFile;
                console.log('files:', this.designFile);
            }
        } else {
            console.log('Response result or required properties are missing.');
        }
    })
    .catch((error) => {
        console.error('Error while fetching data:', error);
    });
    },
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      if(this.model.productType === 'JD'){
              this.model.productType='接地'
            }else if(this.model.productType === 'XC'){
              this.model.productType= '线槽'
            }else if(this.model.productType === 'QZ'){
              this.model.productType= '卡子'
            }else if(this.model.productType === 'SJ'){
              this.model.productType= '司机室'
            }else if(this.model.productType === 'GX'){
              this.model.productType= '柜、箱、盒'
            }else if(this.model.productType === 'FS'){
              this.model.productType= '附属钢'
            }
      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; /* 调整顶部外边距以与其他内容对齐 */
}
.imgBox {
  display: flex;
}

.imgBox img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.show img{
  margin-bottom: 10px;
  height: 200px;
  width: 200px;
}

.imgBox div {
  margin: 5px;
}

.borderShow {
  border: 2px solid rgb(141, 134, 134);
}

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