<template>
  <j-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false"
    switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
        <div style="display: flex">
        <div style="display:inline-block;width:45%;margin: auto;">
          <table>
            <tr>
              <th scop="col">订单号：</th>
              <th scop="col">{{model.orderId}}</th>
            </tr>
            <tr>
              <th scop="col">订货单位：</th>
              <th scop="col">{{model.orderCompany}}</th>
            </tr>
            <tr>
              <th scop="col">工作令：</th>
              <th scop="col">{{model.workOrder}}</th>
            </tr>
            <tr>
              <th scop="col">产品名称：</th>
              <th scop="col">{{model.productName}}</th>
            </tr>
            <tr>
              <th scop="col">产品类型：</th>
              <th scop="col">{{model.productType}}</th>
            </tr>
            <tr>
              <th scop="col">任务下达时间：</th>
              <th scop="col">{{model.orderDate}}</th>
            </tr>
            <tr>
              <th scop="col">派工时间：</th>
              <th scop="col">{{model.dispatchDate}}</th>
            </tr>
            <tr>
              <th scop="col">交货时间：</th>
              <th scop="col">{{model.deliveryDate}}</th>
            </tr>
            <tr>
              <th scop="col">数量（套）：</th>
              <th scop="col">{{model.quantity}}</th>
            </tr>
            <tr>
              <th scop="col">总工时：</th>
              <th scop="col">{{model.totalWorkingHours}}</th>
            </tr>
            <tr>
              <th scop="col">已派发工时：</th>
              <th scop="col">{{model.dispatchedWorkingHours}}</th>
            </tr>
            <tr v-if="model.files">
              <th scop="col">主料图文件：</th>
              <th scop="col">{{model.files}}</th>
            </tr>
          </table>
        </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>
    </a-spin>
  </j-modal>
</template>

<script>

import { httpAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { duplicateCheck } from '@/api/api'
import {listProductType} from '@/api/ProductTpye'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
export default {
  name: "ViewOrdersModal",
  mixins: [JeecgListMixin],
  components: {
  },
  data() {
    return {
      title: "生产订单详情",
      baseURL:apiBaseUrl,
      options:[],
      width: 800,
      visible: false,
      model: {
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      picList:"",
      show:"",
      num: 0,
      url: {
        list: "/order_form/tblOrderForm/list",
      }

    }
  },
  created() {
    // this.model.status = '未下单'
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
    console.log(apiBaseUrl)
  },
  methods: {
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      var picList = this.model.pics.split(',')
      this.picList = picList
      this.show = this.picList[0];
      console.log('this.picList',this.picList)
      this.visible = true;
      this.loadTree()
    },
    loadTree(){
        var that = this;
        listProductType().then((res)=>{
          if(res.success){
            // that.treeData = [];
            that.options = res.result
          }
        });
      },
      onImg(e){
        this.show = this.picList[e];
        this.num = e
      },
    close() {
      this.$emit('close');
      this.visible = false;
      // this.$refs.form.clearValidate();
    },
    handleOk() {
      this.close();
    },
    handleCancel() {
      this.close()
    },
    validateBidNo(rule, value, callback) {
      var params = {
        tableName: 'tbl_order_form',
        fieldName: 'order_id',
        fieldVal: value,
        dataId: this.model.id,
      }
      duplicateCheck(params).then((res) => {
        if (res.success) {
          callback()
        } else {
          callback('编号已存在!')
        }
      })
    },
    disabledEndDate(val) {
      return val <= moment(new Date(), 'YYYY-MM-DD HH:mm:ss').subtract(1, 'minute').endOf('minute')
    },

  }
}
</script>
<style scoped>
 .imgBox{ 
  display: flex;
}

.imgBox img{
  width: 50px;
  height: 50px;
  margin: 10px;
}

.imgBox div{  
  margin: 5px;
}

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

.show img{
  margin-bottom: 10px;
  height: 200px;
  width: 200px;
}
</style>