<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <div style="display:inline-block;width:50%;margin: auto;">
          <table style="margin: auto;">
            <tr>
              <th scop="col" class="table_lable">订单号：</th>
              <th scop="col">{{model.orderId}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">订货单位：</th>
              <th scop="col">{{model.orderCompany}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">工作令：</th>
              <th scop="col">{{model.workOrder}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">产品名称：</th>
              <th scop="col">{{model.productName}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">产品类型：</th>
              <th scop="col">
                <span v-if="model.productType == 'JD'">接地</span>
                <span v-if="model.productType == 'XC'">线槽</span>
                <span v-if="model.productType == 'QZ'">卡子</span>
                <span v-if="model.productType == 'SJ'">司机室</span>
                <span v-if="model.productType == 'GX'">柜、箱、盒</span>
                <span v-if="model.productType == 'FS'">附属钢</span>
              </th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">任务下达时间：</th>
              <th scop="col">{{model.orderDate}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">派工时间：</th>
              <th scop="col">{{model.dispatchDate}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">交货时间：</th>
              <th scop="col">{{model.deliveryDate}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">数量（套）：</th>
              <th scop="col">{{model.quantity}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">总工时：</th>
              <th scop="col">{{model.totalWorkingHours}}</th>
            </tr>
            <tr>
              <th scop="col" class="table_lable">已派发工时：</th>
              <th scop="col">{{model.dispatchedWorkingHours}}</th>
            </tr>
            <tr v-if="designFile">
              <th scop="col" class="table_lable">设计图文件：</th>
              <th scop="col">
                <div v-for="(item,index) in designFile.split(',')" :key="index">
                  <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
                </div>
              </th>
            </tr>
          </table>
        </div>
        <div class="imgDiv">
          <div v-if="picList">
            <a-carousel arrows>
              <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <div v-for="(item, index) in picList" :key="index" @click="onImg(index)">
                <img :src="getImgView(item)" class="imgg" alt="" :preview="num" />
              </div>
            </a-carousel>
            <div class="tipCss">设计图</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 {
      httpUrl:window._CONFIG['staticDomainURL']+'/',
      productType:'',
      picList: '',
      show: '',
      num: 0,
      // imageSrc: '',
      designFile:'',
      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",
        queryByType: '/production/tblProductTypeGongxu/queryByType',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    onImg(e) {
      // console.log(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'
            }
      // gongxuList(this.url.queryByType, { productTypeId: productType }).then((ress) => {
      //   if(ress){
          
      //   }
      // })
      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;
            // console.log('result',result)
            if (result.designPic) {
              // console.log('result.designPic',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>

.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 200px;
  line-height: 200px;
  /* background: #e7e7e8d2; */
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #cbc9c9;
  /* background-color: rgba(31, 45, 61, 0.11); */
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #cbc9c9;
}
.imgg{
  /* width: 200px; */
    height: 200px;
    margin: auto
}
.imgg:hover{
    cursor: pointer;
  }
  .align-colon{
    display:inline-block;width:50%;margin: auto;
  }
.align-colon p {
  display: flex;
  align-items: center;
}

.align-colon p span {
  width: 100px; /* 固定文本部分的宽度 */
  text-align: right; /* 文本右对齐 */
  margin-right: -0px; /* 调整冒号后的空白间距 */
  font-weight: bold; /* 将文本加粗 */
}
.imgDiv{
  display:inline-block;
  width:40%;
}

.tipCss{
    font-weight: bold;
    /* padding-top: 13px; */
    padding-left: 46%;
    margin-top: 30px;
    margin-bottom: 20px;
  }
/* 图片容器及其包裹器的样式 */
/* .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>