<template>
  <div class="sales-order-trans">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >

      <cy-info-title style="margin: 0px -15px 10px;"> 物流信息 </cy-info-title>
      <el-form-item label="销售订单ID" prop="orderNo">
        <el-input v-model="ruleForm.orderNo" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="物流公司" prop="logisticsCompany" :rules="[{ required: true, message: `请输入物流公司`, trigger: 'blur' }]">
        <el-input v-model="ruleForm.logisticsCompany" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="发货时间" prop="deliverTime" :rules="[{ required: true, message: `请选择发货时间`, trigger: 'change' }]">
        <el-date-picker v-model="ruleForm.deliverTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择发货时间" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="起运港" prop="fromPort">
        <el-input v-model="ruleForm.fromPort" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="目的港" prop="destPort">
        <el-input v-model="ruleForm.destPort" placeholder="请输入" disabled />
      </el-form-item>
      <el-form-item label="提单号" prop="ladingBillNo" :rules="[{ required: true, message: `请输入提单号`, trigger: 'blur' }]">
        <el-input v-model="ruleForm.ladingBillNo" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="提单" prop="ladingBillFileId">
        <span slot="label" class="required-label">提单</span>
        <cy-upload
          ref="ladingBillFileId"
          :upload-params="{
            fileType: 'ladingBillFileId'
          }"
          :file-data="ruleForm.ladingBillFileId"
          :upload-from-orange-status="true"
          :file-type="'pdf,PDF,png,PNG,jpg,JPG,bmp,BMP,jpeg,JPEG'"
          placeholder="请上传提单"
          :limit="1"
        />
      </el-form-item>
      <el-form-item label="预计送达日期" prop="estimatedArrivalTime" :rules="[{ required: true, message: `请选择预计送达日期`, trigger: 'change' }]">
        <el-date-picker v-model="ruleForm.estimatedArrivalTime" type="date" value-format="yyyy-MM-dd" placeholder="选择预计送达日期" style="width: 100%;" />
      </el-form-item>
      <div style="width: 100%;margin: 0;">
        <cy-comm-table
          ref="commTable"
          :columns="columns"
          :data="tableData"
          :count="0"
        />
      </div>

      <el-form-item label="备注（选填）" prop="deliverRemark">
        <el-input v-model="ruleForm.deliverRemark" placeholder="请输入" />
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="closePage">返回</el-button>
      <el-button type="primary" @click="validate('submit')">提交</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { submitTrans } from '@/api/myTrade/salesBill'
export default {
  name: 'SalesOrderTrans',
  data() {
    return {
      ruleForm: {
        orderId: '',
        orderNo: '',
        logisticsCompany: '',
        deliverTime: '',
        fromPort: '',
        destPort: '',
        ladingBillNo: '',
        ladingBillFileId: [],
        estimatedArrivalTime: '',
        deliverRemark: ''

      },
      rules: {

      },
      tableData: [
        { billNo: '', fileId: [], logisticsId: '' }
      ],
      columns: [
        {
          label: '集装箱单号',
          ruleRequired: true,
          prop: 'billNo',
          render: (h, row) => {
            return (
              <el-input
                placeholder='请输入'
                v-model={ row.billNo }
              ></el-input>
            )
          }
        },
        {
          label: '集装箱单',
          ruleRequired: true,
          render: (h, row, index) => {
            return <cy-upload
              ref={`fileStorage${index}`}
              limit={1}
              uploadParams={{
                fileType: 'fileId'
              }}
              file-type={'pdf,PDF,png,PNG,jpg,JPG,bmp,BMP,jpeg,JPEG'}
              fileData={ row.fileId }
              defaultDesc='请上传'
            />
          }
        },
        {
          label: '操作',
          render: (h, row, index) => {
            const btnList = [
              { msg: '添加', icon: 'iconfont icon-orange icon-a-Group812', category: 'add' },
              { msg: '删除', icon: 'iconfont icon-orange icon-a-Group991', category: 'delete' }
            ]
            const options = btnList.map(item => {
              return (
                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
                  <span class='table-icon-box'>
                    <i class={item.icon} onClick={() => { this.optionsClick(item.category, index) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          },
          width: 150
        }],
      disabled: false,
      containers: [{
        billNo: '',
        fileId: []
      }]

    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  created() {
    this.ruleForm.orderId = this.$route.query.id
    this.ruleForm.orderNo = this.$route.query.orderNo
    this.ruleForm.fromPort = this.$route.query.fromPort
    this.ruleForm.destPort = this.$route.query.destPort
  },
  methods: {

    validate(submitType) {
      const ladingBillFile = this.$refs.ladingBillFileId.getFileLists
      if (!ladingBillFile.length) {
        this.$message.warning('请上传提单')
        return
      }
      const containers = this.tableData.map((item, index) => {
        const fileStorage = this.$refs.commTable.$refs[`fileStorage${index}`].getFileLists
        return {
          billNo: item.billNo,
          fileId: fileStorage.length ? fileStorage.map(item => item.id)[0] : null
        }
      })
      var params = {
        Loading: true,
        ...this.ruleForm,
        containers
      }
      params.ladingBillFileId = ladingBillFile.length ? ladingBillFile.map(item => item.id)[0] : null

      if (submitType === 'submit') {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            let flag = false
            for (let i = 0; i < containers.length; i++) {
              if (!containers[i].fileId) {
                flag = true
                break
              }
            }
            if (flag) {
              this.$message.warning('请上传集装箱单')
              return
            }
            let numFlag = false
            for (let i = 0; i < containers.length; i++) {
              if (!containers[i].billNo) {
                numFlag = true
                break
              }
            }
            if (numFlag) {
              this.$message.warning('请输入集装箱单号')
              return
            }
            this.submit(params, submitType)
          } else {
            this.$message.warning('必填项不能为空')
          }
        })
      }
    },
    submit(data, submitType) {
      submitTrans(data).then((res) => {
        if (res.success) {
          if (submitType === 'submit') {
            this.$message.success('提交成功')
            this.closePage()
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    optionsClick(type, index) {
      if (type === 'add') {
        this.tableData.push(
          {
            logisticsId: '',
            billNo: '',
            fileIds: []
          }
        )
      } else if (type === 'delete') {
        if (this.tableData.length > 1) {
          this.tableData.splice(index, 1)
        }
      }
    },

    closePage() {
      this.$router.push({
        name: 'SalesBill'
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .importer-edit {
      padding: 10px 30px;
      .statistics {
          color: #FF0000;
          margin-left: 20px;
          font-size: 14px;
      }
      .tips {
          color: #918c8c;
          font-size: 12px;
      }
      .required-item {
      .required-label:before {
          content: '*'!important;
          color: #F56C6C;
          margin-right: 4px;
      }

      }
      .table-tip-icon {
          display: inline-block;
          width: 14px;
          height: 14px;
          border-radius: 7px;
          line-height: 14px;
          text-align: center;
          border: 1px solid #ff0000;
          color: #ff0000;
          margin-right: 5px;
      }
  }
  </style>
