<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: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">
                {{model.productType}}
            </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="model.files">
              <th scop="col" class="table_lable">主料图文件：</th>
              <th scop="col"> 
                <div v-for="(item,index) in model.files.split(',')" :key="index">
                  <a :href=httpUrl+item target="_blank">{{index+1}}. {{item.replace("temp/","")}}</a><br>
                </div>
              </th>
            </tr>
          </table>
        </div>
        <div style="display:inline-block;width:45%;" v-if="picList">
            <div class="show" >
              <!-- <img :src="getImgView(show)" :preview="num" alt="" height="100px"> -->
              <img :src="httpUrl+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;"> -->
                  <img :src="httpUrl +(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'
export default {
  name: "ViewOrdersModal",
  // mixins: [JeecgListMixin],
  components: {
  },
  data() {
    return {
      title: "生产订单详情",
      httpUrl:window._CONFIG['staticDomainURL']+'/',
      options:[],
      width: 1000,
      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",
      //     delete: "/order_form/tblOrderForm/delete",
      //     deleteBatch: "/order_form/tblOrderForm/deleteBatch",
      //     exportXlsUrl: "/order_form/tblOrderForm/exportXls",
      //     importExcelUrl: "order_form/tblOrderForm/importExcel",
      //   },

    }
  },
  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);
      console.log('this.model',this.model)
      if(this.model.pics){
        var picList = this.model.pics.split(',')
        console.log('picList',picList)
        this.picList = picList
        this.show = this.picList[0];
      }
    
      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>
tr {  
  height: 30px; /* 设置行高为50px */
  /* padding: 10px; 设置行内填充为10px */
}
.table_lable{
  text-align: right;
}
 .imgBox{ 
  display: flex;
}

.imgBox img{
  width: 50px;
  height: 50px;
  margin: 10px;
}
.imgBox img:hover{
    cursor: pointer;
  }
.imgBox div{  
  margin: 5px;
}

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

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