<template>
  <j-modal :title="title" :width="width" :visible="visible" 
    switchFullscreen @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.productTypeName}}
            </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 != null">
              <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>
            <tr v-if="model.designFile != null">
              <th scop="col" class="table_lable">设计图文件：</th>
              <th scop="col"> 
                <div v-for="(item,index) in model.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" v-if="model.pics">
            <div class="show" >
              <img :src="httpUrl+showPic" :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="httpUrl +(item)"  height="25px" alt="" style="margin-left: 20px;">
              </div>
            </div>
            <div class="tipCss">生产图</div>
        </div> -->
        <!-- <div class="imgDiv" v-if="model.designPic">
          
            <div class="show" >
              <img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
            </div>
            <div class="imgBox">
              <div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
                  <img :src="httpUrl +(item)"  height="25px" alt="" style="margin-left: 20px;">
              </div>
            </div>
          
            <div class="tipCss">设计图</div>
        </div> -->
        <!-- <div class="imgDiv" v-if="model.designPic">
          <div class="show" >
              <img :src="httpUrl+showDesignPic" :preview="numDesign" alt="" height="100px">
            </div>
            <div class="imgBox">
              <div :class="[numDesign == index?'borderShow':'']" v-for="(item,index) of designPicList" :key="index" @click="onDesignImg(index)">
                  <img :src="httpUrl +(item)"  height="25px" alt="" style="margin-left: 20px;">
              </div>
            </div>
      </div> -->
      <div class="imgDiv">
      <div  v-if="model.pics">
        <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="httpUrl +(item)" class="imgg" :preview="num" />
                </div>
        </a-carousel>
        <div class="tipCss">生产图</div>
      </div>
      <div  v-if="model.designPic != null" style="margin-top: 50px;">
        <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 designPicList" :key="index" @click="onDesignImg(index)">
                    <img :src="httpUrl +(item)" class="imgg" :preview="numDesign" />
                  </div>
        </a-carousel>
        <div class="tipCss">设计图</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:"",
      designPicList:"",
      showPic:"",
      showDesignPic:"",
      num: 0,
      numDesign: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.picList = ""
      this.designPicList=""
      this.model = Object.assign({}, record);
      console.log('this.model',this.model)
      if(this.model.pics){
        var picTemp = this.model.pics.split(',')
        // console.log('pics',picTemp)
        this.picList = picTemp
        this.showPic = this.picList[0];
      }
      if(this.model.designPic){
        var designPicTemp = this.model.designPic.split(',')
        // console.log('designPic',designPicTemp)
        this.designPicList = designPicTemp
        this.showDesignPic = this.designPicList[0];
      }
      
      this.visible = true;
      this.loadTree()
    },
    loadTree(){
        var that = this;
        listProductType().then((res)=>{
          if(res.success){
            that.options = res.result
          }
        });
      },
      onImg(e){
        console.log('e==',e)
        this.showPic = this.picList[e];
        this.num = e
      },
      onDesignImg(e){
        this.showDesignPic = this.designPicList[e];
        this.numDesign = 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>

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

.ant-carousel >>> .custom-slick-arrow {
  width: 30px;
  height: 30px;
  font-size: 30px;
  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: 160px;
    margin: auto
}
.imgg:hover{
    cursor: pointer;
  }
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);
}
.imgDiv{
  display:inline-block;
  width:40%;
}
.show img{
  margin-bottom: 10px;
  height: 200px;
  width: 200px;
  margin-left: 12%;
}
.show:hover{
    cursor: pointer;
  }
.tipCss{
    font-weight: bold;
    /* padding-top: 13px; */
    padding-left: 46%;
    margin-top: -15px;
  }
</style>