<template>
  <j-modal :title="title+titlea" :width="width" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false"
    switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭" >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="工作令" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workOrder" style="margin-bottom: -50px">
              {{model.workOrder}}
            </a-form-model-item>
          </a-col> 
          <a-col :span="24">
            <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName" style="margin-bottom: -50px">
              {{model.productName}}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="产品类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productType" style="margin-bottom: -50px">
              {{model.productType}}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="数量（套）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quantity" style="margin-bottom: -50px">
              {{model.quantity}}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="生产图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pics">
              <j-image-upload isMultiple v-model="model.designPic"></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="生产图文件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pics">
              <j-upload file-type="file" isMultiple v-model="model.designFile"></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div class="table-operator">材料及外购件表：
      <a-button @click="handleBidding" type="primary" icon="plus">新增</a-button>
    </div>
    <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{x:true}"
          :columns="columns"
          :dataSource="dataSource"
        >
        <span slot="action" slot-scope="text, record,index">
          <div v-if="record.productName"> 
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(index)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </span>
      </a-table>
        <div>
          <BiddingSqFormModal ref="BiddingSqFormModal" @childByValue="childByValue"></BiddingSqFormModal>
        </div>
  </j-modal>
</template>

<script>

import { httpAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { duplicateCheck } from '@/api/api'
import {listDesign} from '@/api/ProductTpye'
import {getOneOrder} from '@/api/ProductTpye'
import BiddingSqFormModal from './BiddingSqFormModal'
import {queryDesignByOrderId} from '@/api/TblSalaryBase'
import moment from 'moment'

export default {
  name: "ProductDesignModal",
  components: {
    BiddingSqFormModal
  },
  data() {
    return {
      title: "产品设计",
      titlea:"",
      options:[],
      width: 1000,
      visible: false,
      model: {
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      url: {
        add: "/order_form/productDesign/add",
        edit: "/order_form/productDesign/edit",
        list:"/trad/tblBiddingShenq/listDesign",
      },
      id:'',
      dataSource: [],
      columns: [
          {
              title:'序号',
              align:"center",
              customRender: (text, record, index) => {
              return `${index+1}`
            },
          },
          {
            title: '外购件名称',
            dataIndex: 'productName',
            key: 'productName',
          },
          {
            title: '规格',
            dataIndex: 'specifications',
            key: 'specifications',
          },
          {
            title: '型号',
            dataIndex: 'type',
            key: 'type',
          },
          {
            title: '品牌及技术条件',
            dataIndex: 'brandTechnicalConditions',
            key: 'brandTechnicalConditions',
          },
          {
            title: '单位',
            dataIndex: 'danwei',
            key: 'danwei',
          },
          {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
          },
          {
            title: '要求到货时间',
            dataIndex: 'deliveryTime',
            key: 'deliveryTime',
          },
          {
            title: '备注',
            dataIndex: 'notes',
            key: 'notes',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' },
          }
        ],

    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit();
    },
    edit(id,record) {
      // console.log('id',id)
      this.id = id
      this.visible = true;
      if(record){
        this.titlea = '编辑'
        this.model =  Object.assign({}, record);
        // console.log('this.model=======',this.model)
        this.loadDesign();
        this.loadBiddingSq()
      }else{
        this.titlea = "新增"
        this.loadOrder()
      }
     
    },
    loadOrder(){
        var that = this;
        getOneOrder(that.id).then((res)=>{
          // console.log('============4========')
          console.log(res)
          if(res.success){
            this.model = res.result
          }
        });
      },
      loadDesign(){
        queryDesignByOrderId(this.model.orderId).then((res)=>{
          // console.log('============2========')
          // console.log('loadDesign',res)
          if(res.success){
            this.model.id = res.result.id
            this.model.designPic = res.result.designPic
            this.model.designFile = res.result.designFile
            // console.log(this.model)
          }
        });
      },
      loadBiddingSq(){
        console.log('this.model',this.model)
        let tblBiddingShenq = {
          orderId:this.model.orderId
        }
        console.log('tblBiddingShenq',tblBiddingShenq)
        listDesign(tblBiddingShenq).then((res)=>{
          console.log('loadDesign',res)
          if(res.success){
            this.dataSource = res.result.records
          }
        });
      },
      childByValue (childValue) {
        // childValue就是子组件传过来的值
        childValue.workOrder = this.model.workOrder
        childValue.source = '1'
        this.dataSource.push(childValue)
      },
      handleDelete(index){
        this.dataSource.splice(index, 1);
      },
      handleBidding(){
          this.$refs.BiddingSqFormModal.edit(this.model.orderId);
          this.$refs.BiddingSqFormModal.disableSubmit = false;
        },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
      this.dataSource = []
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          if(!this.model.designPic && !this.model.designFile){
            this.$message.warning("请上传生产图或生产图文件！")
            return
          }
          if(this.dataSource.length==0){
            this.$message.warning("请新增材料及外购件！")
            return
          }
          // return
          this.model.biddingSqList = this.dataSource
          console.log(this.model)
          // return
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (this.model.productDesignStatus == 0) {
            console.log('=======add======')
            httpurl += this.url.add;
            method = 'post';
          } else {
            console.log('======edit=======')
            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;
            that.close();
          })
        } else {
          return false
        }
      })
    },
    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>