<template>
  <div>
    <el-form
      :disabled="mode==='detail'"
      inline
      ref="addForm"
      label-position="top"
      :model="formData"
      :rules="rules"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="费用信息" name="1">
          <el-form-item label="费用ID" prop="feeId">
            <el-input v-model="formData.feeId" disabled></el-input>
          </el-form-item>
          <el-form-item label="费用名称" prop="feeNameCode">
            <PublicQuery
              title="费用名称"
              :disabled="mode==='edit'"
              single
              :rowData.sync="feeData"
              cfgKey="chgWmsFeeName"
              baseUrl="/chg_web/chgweb"
              :valueField.sync="formData.feeNameCode"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="费用类别" prop="feeType">
            <el-select v-model="formData.feeType" disabled>
              <el-option label="运输费用" value="TRANSPORT_CHARGE"></el-option>
              <el-option label="特殊费用" value="SPECIAL_CHARGE"></el-option>
              <el-option label="增值服务费用" value="APPENDED_CHARGE"></el-option>
              <el-option label="服务费用" value="SERVICE_CHARGE"></el-option>
              <el-option label="全部" value="ALL"></el-option>
              <el-option label="理赔费用" value="CLAIM_CHARGE"></el-option>
              <el-option label="实际报账费用" value="DRIVER_REIMBURSE"></el-option>
              <el-option label="库存费用" value="KCFY"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status" disabled>
              <el-option label="创建" value="00"></el-option>
              <el-option label="审核" value="10"></el-option>
              <el-option label="确认" value="20"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="费用种类" prop="feeCategory">
            <el-select v-model="formData.feeCategory" :disabled="mode==='edit'">
              <el-option label="入库费用" value="INBOUND"></el-option>
              <el-option label="出库费用" value="OUTBOUND"></el-option>
              <el-option label="库存费用" value="INVENTORY"></el-option>
              <el-option label="服务增值费用" value="VAS"></el-option>
              <el-option label="特殊费用" value="SPECIAL"></el-option>
              <el-option label="管理费用" value="MANAGE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作业环节" prop="tranType">
            <el-select v-model="formData.tranType" :disabled="mode==='edit'">
              <el-option label="取消加工父件入库" value="CKIN"></el-option>
              <el-option label="取消加工子件出库" value="CKOUT"></el-option>
              <el-option label="取消加工转移" value="CKTF"></el-option>
              <el-option label="取消移动" value="CMV"></el-option>
              <el-option label="取消调整" value="CAD"></el-option>
              <el-option label="取消转移" value="CTF"></el-option>
              <el-option label="取消补货" value="CRP"></el-option>
              <el-option label="取消质检转移" value="CQTF"></el-option>
              <el-option label="收货" value="RCV"></el-option>
              <el-option label="取消收货" value="CRCV"></el-option>
              <el-option label="上架" value="PA"></el-option>
              <el-option label="拣货" value="PK"></el-option>
              <el-option label="打包" value="PACK"></el-option>
              <el-option label="发货" value="SP"></el-option>
              <el-option label="取消发货" value="CSP"></el-option>
              <el-option label="调整" value="AD"></el-option>
              <el-option label="移动" value="MV"></el-option>
              <el-option label="转移" value="TF"></el-option>
              <el-option label="补货" value="RP"></el-option>
              <el-option label="装车移动" value="LD"></el-option>
              <el-option label="收货" value="QTF"></el-option>
              <el-option label="质检转移" value="CRCV"></el-option>
              <el-option label="加工父件入库" value="KIN"></el-option>
              <el-option label="加工子件出库" value="KOUT"></el-option>
              <el-option label="加工转移" value="KTF"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务量" prop="quantity">
            <el-input v-model="formData.quantity"></el-input>
          </el-form-item>
          <el-form-item label="计费基准" prop="chargeBase">
            <el-select v-model="formData.chargeBase">
              <el-option label="库位" value="LOC"></el-option>
              <el-option label="实际托" value="ACT_PALLET"></el-option>
              <el-option label="计算托" value="CALC_PALLET"></el-option>
              <el-option label="箱" value="CASE"></el-option>
              <el-option label="数量EA" value="QTY"></el-option>
              <el-option label="体积" value="CUBIC"></el-option>
              <el-option label="重量" value="WEIGHT"></el-option>
              <el-option label="计费吨" value="RT"></el-option>
              <el-option label="固定费用" value="CONSTANT"></el-option>
              <el-option label="实际重量" value="ACT_WEIGHT"></el-option>
              <el-option label="货值" value="COST"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="formData.price"></el-input>
          </el-form-item>
          <el-form-item label="计算金额" prop="amount">
            <el-input v-model="formData.amount" disabled></el-input>
          </el-form-item>
          <el-form-item label="实际金额" prop="actAmout">
            <el-input v-model="formData.actAmout"></el-input>
          </el-form-item>
          <el-form-item label="币别" prop="currency">
            <el-select v-model="formData.currency">
              <el-option label="美元" value="USD"></el-option>
              <el-option label="欧元" value="EUR"></el-option>
              <el-option label="人民币" value="CNY"></el-option>
              <el-option label="新加坡元" value="SGD"></el-option>
              <el-option label="新台币" value="NTD"></el-option>
              <el-option label="USD" value="USD"></el-option>
              <el-option label="CNY" value="CNY"></el-option>
              <el-option label="EUR" value="EUR"></el-option>
              <el-option label="SG$" value="SG$"></el-option>
              <el-option label="NTD" value="NTD"></el-option>
              <el-option label="ESM" value="ESM"></el-option>
              <el-option label="RMB" value="RMB"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="税率" prop="taxRate">
            <el-input v-model="formData.taxRate" disabled></el-input>
          </el-form-item>
          <el-form-item label="税额" prop="taxAmount">
            <el-input v-model="formData.taxAmount"></el-input>
          </el-form-item>
          <el-form-item label="税后金额" prop="noTaxAmount">
            <el-input v-model="formData.noTaxAmount"></el-input>
          </el-form-item>
          <el-form-item label="舍入类型" prop="roundingType">
            <el-select v-model="formData.roundingType" disabled>
              <el-option label="四舍五入" value="ROUND"></el-option>
              <el-option label="向上取整" value="CEIL"></el-option>
              <el-option label="向下取整" value="FLOOR"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单据类型" prop="orderType">
            <el-select v-model="formData.orderType" :disabled="mode==='edit'">
              <el-option label="入库单" value="ASN"></el-option>
              <el-option label="出库单" value="SO"></el-option>
              <el-option label="装车单" value="LD"></el-option>
              <el-option label="调整单" value="AD"></el-option>
              <el-option label="转移单" value="TF"></el-option>
              <el-option label="质检单" value="QC"></el-option>
              <el-option label="加工单" value="KIT"></el-option>
              <el-option label="补货单" value="RP"></el-option>
              <el-option label="移动单" value="MV"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单据号" prop="orderNo">
            <el-input v-model="formData.orderNo" :disabled="mode==='edit'"></el-input>
          </el-form-item>
          <el-form-item label="单据行号" prop="orderLineNo">
            <el-input v-model="formData.orderLineNo" :disabled="mode==='edit'"></el-input>
          </el-form-item>
          <el-form-item label="交易ID" prop="tranId">
            <el-input v-model="formData.tranId" :disabled="mode==='edit'"></el-input>
          </el-form-item>
          <el-form-item label="货主" prop="contractName">
            <PublicQuery
              title="货主"
              :disabled="mode==='edit'"
              single
              :rowData.sync="ownerData"
              cfgKey="chgWmsFeeName"
              baseUrl="/chg_web/chgweb"
              :valueField.sync="formData.ownerCode"
              :textField.sync="formData.ownerName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="商品" prop="contractName">
            <PublicQuery
              title="商品"
              :disabled="mode==='edit'"
              single
              :rowData.sync="skuData"
              cfgKey="chgWmsFeeName"
              baseUrl="/chg_web/chgweb"
              :valueField.sync="formData.skuCode"
              :textField.sync="formData.skuName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="批次号" prop="contractName">
            <PublicQuery
              title="批次号"
              :disabled="mode==='edit'"
              single
              :rowData.sync="lotData"
              cfgKey="chgWmsFeeName"
              baseUrl="/chg_web/chgweb"
              :valueField.sync="formData.lotNum"
              :textField.sync="formData.lotNum"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="收支类型" prop="receivePay">
            <el-select v-model="formData.receivePay">
              <el-option label="收入" value="RECEIVE"></el-option>
              <el-option label="支出" value="PAY"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同编号" prop="contractNo">
            <el-input v-model="formData.contractNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="费用时间" prop="feeDate">
            <el-input v-model="formData.feeDate" disabled></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark"></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <hr style="background-color:#F5F5F5;height:1px;border:none" v-if="mode==='detail'">
    </el-form>
    <el-row class="row-mrg-t" v-if="mode==='detail'">
      <el-col :span="24">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="操作信息" name="2">
            <div class="operation-info">
              <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorNameCn}})</span>
              <span>创建时间：{{formData.createTime}}</span>
              <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierNameCn}})</span>
              <span>修改时间：{{formData.modifyTime}}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <div class="row-mrg-t" v-if="mode!=='detail'">
      <el-button v-auth="50600030115" type="primary" @click="submitForm">保存</el-button>
      <el-button v-auth="50600030116" type="primary" @click="submitAddForm">保存并新增</el-button>
    </div>
    <div class="row-mrg-t" v-if="mode==='detail'">
      <el-button v-if="formData.status==='00'" v-auth="50600030115" type="primary" @click="handlePoint('audit')">审核</el-button>
      <el-button v-if="formData.status!=='00'" v-auth="50600030115" type="primary" @click="handlePoint('cancelAudit')">取消审核</el-button>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode !== 'create') {
      this.formData = this.$route.params[0]
    }
    // if (this.mode === 'detail') {
    //   this.formData = this.$route.params[0]
    // }
    // this.formData = this.$route.params[0]
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2'],
      formData: {
        currency: 'CNY'
      },
      ownerData: {},
      feeData: {},
      skuData: {},
      lotData: {},
      rules: {
        feeNameCode: [
          { required: true, message: '费用名称必填', trigger: 'blur' }
        ],
        feeCategory: [
          { required: true, message: '费用种类必填', trigger: 'blur' }
        ],
        actAmout: [
          { required: true, message: '实际金额必填', trigger: 'blur' }
        ],
        ownerCode: [
          { required: true, message: '货主必填', trigger: 'blur' }
        ],
        receivePay: [
          { required: true, message: '收支类型必填', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
  },
  methods: {

    // 发送保存数据
    psotList () {
      const url = this.$API.charging.maintain.addList
      const param = {
        feeModel: JSON.stringify(this.formData)
      }
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('saveOK')
        }
      })
    },

    // 保存
    submitForm () {
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.psotList()
          this.$nextTick(() => {
            this.$refs.addForm.resetFields()
            this.$router.back()
          })
        } else {
          return false
        }
      })
    },

    // 保存并新增
    submitAddForm () {
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.psotList()
          this.$nextTick(() => {
            this.$refs.addForm.resetFields()
          })
        } else {
          return false
        }
      })
    },

    handlePoint (urlKey) {
      const url = this.$API.charging.maintain[urlKey]
      const param = { feeIds: JSON.stringify(this.formData.feeId.split(',')) }
      this.$https.post(url, param).then(res => {
        this.$router.back()
      })
    },

    handleSelectChange (selection) {
      this.selectedIds = selection.map(item => item.lineNo).join(',')
    }
  },
  watch: {
    rowData: {
      handler (item) {
        this.formData = { ...item }
      },
      deep: true
    },
    ownerData: {
      handler (item) {
        this.formData.ebcuNameCn = item.ebcuNameCn
      },
      deep: true
    },
    feeData: {
      handler (item) {
        this.formData.feeName = item.ebfhNameCn
        this.formData.feeType = item.ebfhCostType
      },
      deep: true
    }
  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },
}
</script>
<style lang="scss" scoped>
.row-mrg-t{
  margin-top: 20px
}
.operation-info {
  display: flex;
  justify-content: space-between;
}
</style>
