<template>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="订货单位">
                <j-input placeholder="请输入订货单位" v-model="queryParam.orderCompany"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="工作令">
                <j-input placeholder="请输入工作令" v-model="queryParam.workOrder"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="产品类型">
              <a-select  size="small"  v-model="queryParam.productType"  placeholder="请选择产品类型" allowClear>
                <a-select-option v-for="(item,index) in options" :key="index" :value="item.productTypeId">{{ item.productTypeName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleUpload()" type="primary" icon="plus" :disabled="selectedRowKeys.length > 0 && productDesignStatus ==1">上传设计图及材料表</a-button>
      
      </div>
  
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>
  
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{x:true}"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
          :customRow="clickThenSelect"
          @change="handleMyTableChange">
  
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text,record">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>
  
          <span slot="action" slot-scope="text, record">
            <div v-if="record.productDesignStatus === '0'">
              <a @click="handleViewOrders(record)" >查看</a>
            </div>
            <div v-else-if="record.productDesignStatus === '1'">
              <a @click="handleViewOrders(record)" >查看</a>
              <a-divider type="vertical"/>
              <a @click="handleUploadOrders(record.id,record)" >编辑</a>
            </div>
            <div>
            </div>
          </span>
        </a-table>
      </div>
      <ProductDesignModal ref="ProductDesignModal" @ok="modalFormOk"></ProductDesignModal>
      <ViewOrdersModal ref="ViewOrdersModal" @ok="modalFormOk"></ViewOrdersModal>
    </a-card>
  </template>
  
  <script>
  
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import ProductDesignModal from './modules/ProductDesignModal'
    import ViewOrdersModal from '../order_form/modules/ViewOrdersModal.vue'
    import '@/assets/less/TableExpand.less'
    import {listProductType} from '@/api/ProductTpye'
  
    export default {
      name: "ProductDesignList",
      mixins:[JeecgListMixin],
      components: {
        ProductDesignModal,ViewOrdersModal
      },
      data () {
        return {
          description: '订单表管理页面',
          options:[],
          // 表头
          columns: [
            {
              title:'序号',
              align:"center",
              customRender: (text, record, index) => {
              return `${(this.ipagination.current - 1) * this.ipagination.pageSize + index + 1}`
            },
            },
            {
              title:'订单编号',
              align:"center",
              dataIndex: 'orderId'
            },
            {
              title:'订货单位',
              align:"center",
              dataIndex: 'orderCompany'
            },
            {
              title:'工作令',
              align:"center",
              dataIndex: 'workOrder'
            },
            {
              title:'产品名称',
              align:"center",
              dataIndex: 'productName',
              // customRender:function (text) {
              //   return !text?"":(text.length>10?text.substr(0,10):text)
              // }
            },
            {
              title:'产品类型',
              align:"center",
              dataIndex: 'productType',
            //   customRender: function (text) {
            //   if (text === 'XC') {
            //     return '线槽'
            //   } else if (text === 'JD') {
            //     return '接地'
            //   } else if (text === 'QZ') {
            //     return '卡子'
            //   } else if (text === 'GX') {
            //     return '柜、箱、盒'
            //   } else if (text === 'SJ') {
            //     return '司机室'
            //   } else if (text === 'FS') {
            //     return '附属钢'
            //   } else {
            //     return text
            //   }
            // },
            },
            {
              title:'任务下达时间',
              align:"center",
              dataIndex: 'orderDate'
            },
            {
              title:'派工时间',
              align:"center",
              dataIndex: 'dispatchDate',
              customRender:function (text) {
                return !text?"":(text.length>10?text.substr(0,10):text)
              }
            },
            {
              title:'交货时间',
              align:"center",
              dataIndex: 'deliveryDate',
              customRender:function (text) {
                return !text?"":(text.length>10?text.substr(0,10):text)
              }
            },
            {
              title:'数量（套）',
              align:"center",
              dataIndex: 'quantity'
            },
            {
              title: '操作',
              dataIndex: 'action',
              align:"center",
              fixed:"right",
              width:147,
              scopedSlots: { customRender: 'action' },
            }
          ],
          url: {
            list: "/order_form/productDesign/productDesignList",
            delete: "/order_form/tblOrderForm/delete",
            deleteBatch: "/order_form/tblOrderForm/deleteBatch",
            exportXlsUrl: "/order_form/tblOrderForm/exportXls",
            importExcelUrl: "order_form/tblOrderForm/importExcel",
          },
          dictOptions:{
          },
          /* 分页参数 */
          ipagination:{
            current: 1,
            pageSize: 5,
            pageSizeOptions: ['5', '10', '50'],
            showTotal: (total, range) => {
              return range[0] + "-" + range[1] + " 共" + total + "条"
            },
            showQuickJumper: true,
            showSizeChanger: true,
            total: 0
          },
          selectedMainId:'',
          superFieldList:[],
          tblWorkOrderMainId: '',
          orderId:'',
          productDesignStatus:''
        }
      },
      created() {
        this.getSuperFieldList();
        this.loadTree()
      },
      computed: {
        importExcelUrl: function(){
          return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        }
      },
      methods: {
        // 自定义查询
        searchQuery() {
          this.loadData(1);
          this.tblWorkOrderMainId = '';
          this.orderId = '';
          // 点击查询清空列表选中行
          // https://gitee.com/jeecg/jeecg-boot/issues/I4KTU1
          this.selectedRowKeys = []
          this.selectionRows = []
        },
    
        // 自定义分页切换动作
        handleMyTableChange(pagination, filters, sorter) {
          //分页、排序、筛选变化时触发
          //TODO 筛选
          if (Object.keys(sorter).length > 0) {
            this.isorter.column = sorter.field;
            this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
          }
          this.ipagination = pagination;
          this.loadData();
          this.tblWorkOrderMainId = '';
          this.orderId = '';
        },
        loadTree(){
          var that = this;
          listProductType().then((res)=>{
            if(res.success){
              // that.treeData = [];
              that.options = res.result
            }
          });
        },
        handleViewOrders(record){
          this.$refs.ViewOrdersModal.edit(record);
          this.$refs.ViewOrdersModal.disableSubmit = false;
        },
        handleUpload(){
          if(this.selectedRowKeys.length == 0){
            this.$message.error("请先选中一条数据!")
            return
          } 
          // console.log('this.selectionRows',this.selectionRows)
          this.$refs.ProductDesignModal.edit(this.selectedRowKeys[0],null);
          this.$refs.ProductDesignModal.disableSubmit = false;
        },
        handleUploadOrders(id,record){
          this.$refs.ProductDesignModal.edit(id,record);
          this.$refs.ProductDesignModal.disableSubmit = false;
        },
        initDictConfig(){
        },
        clickThenSelect(record) {
          return {
            on: {
              click: () => {
                this.onSelectChange(record.id.split(","), [record]);
                
              }
            }
          }
        },
        onClearSelected() {
          this.selectedRowKeys = [];
          this.selectionRows = [];
          this.selectedMainId='';
          this.orderId = '';
          this.tblWorkOrderMainId = '';
        },
        onSelectChange(selectedRowKeys, selectionRows) {
          
          this.selectedMainId=selectedRowKeys[0]
          this.selectedRowKeys = selectedRowKeys;
          this.selectionRows = selectionRows;
          this.tblWorkOrderMainId = selectionRows[0]['id']
          this.orderId = selectionRows[0]['orderId'];
          this.productDesignStatus = selectionRows[0]['productDesignStatus']
        },
        getSuperFieldList(){
          let fieldList=[];
          fieldList.push({type:'string',value:'orderId',text:'主料号',dictCode:''})
          fieldList.push({type:'string',value:'orderCompany',text:'订货单位',dictCode:''})
          fieldList.push({type:'date',value:'orderDate',text:'订单日期'})
          fieldList.push({type:'date',value:'deliveryDate',text:'交货日期'})
          fieldList.push({type:'string',value:'status',text:'状态',dictCode:''})
          fieldList.push({type:'date',value:'finishDate',text:'实际完成时间'})
          fieldList.push({type:'string',value:'verifyDate',text:'出货检验',dictCode:''})
          fieldList.push({type:'date',value:'deliveryDate1',text:'出货日期'})
          fieldList.push({type:'string',value:'pics',text:'主料图片',dictCode:''})
          this.superFieldList = fieldList
        }
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less'
    
  </style>