<template>
  <div>
    <el-dialog
      title="级差"
      v-if="goodsFormVisible"
      :visible.sync="goodsFormVisible"
      :before-close="close"
      width="66%"
    >
      <el-form inline ref="goodsForm" label-position="top" :model="formData" :rules="rules">
        <div>
          <el-form-item label="行号" prop="lineNo">
            <el-input v-model="formData.lineNo"></el-input>
          </el-form-item>
          <el-form-item label="费用种类" prop="feeCategory">
            <el-select v-model="formData.feeCategory">
              <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="MANAGE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="作业环节"
            prop="tranType"
            :rules="formData.feeCategory==='INBOUND'||formData.feeCategory==='OUTBOUND'?rules.tranType:[]"
          >
            <el-select v-model="formData.tranType">
              <el-option label="收货" value="RCV"></el-option>
              <el-option label="上架" value="PA"></el-option>
              <el-option label="拣货" value="PK"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="费用名称" prop="feeNameCode">
            <PublicQuery
              title="费用名称"
              single
              :rowData.sync="feeData"
              baseUrl="/chg_web/chgweb"
              cfgKey="chgWmsFeeName"
              :valueField.sync="formData.feeNameCode"
            ></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="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="roundingType">
            <el-select v-model="formData.roundingType">
              <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="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="price"
            :rules="formData.chargeType!=='LADDER'?rules.price:[]"
          >
            <el-input v-model="formData.price" :disabled="formData.chargeType==='LADDER'"></el-input>
          </el-form-item>
          <el-form-item label="最低费用" prop="minFee">
            <el-input v-model="formData.minFee"></el-input>
          </el-form-item>
          <el-form-item label="最高费用" prop="maxFee">
            <el-input v-model="formData.maxFee"></el-input>
          </el-form-item>
          <el-form-item label="比率" prop="rate">
            <el-input v-model="formData.rate"></el-input>
          </el-form-item>
          <el-form-item label="计费方式" prop="chargeType">
            <el-select v-model="formData.chargeType">
              <el-option label="普通" value="COMMON"></el-option>
              <el-option v-if="formData.chargeBase!=='CONSTANT'" label="阶梯" value="LADDER"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="计费阶梯方式"
            prop="ladderType"
            :rules="formData.chargeType==='LADDER'?rules.ladderType:[]"
          >
            <el-select v-model="formData.ladderType" :disabled="formData.chargeType!=='LADDER'">
              <el-option label="单区间计费" value="SINGLE"></el-option>
              <el-option label="分区间计费求和" value="MULTIPLE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="级差类型"
            prop="classType"
            :rules="formData.chargeType==='LADDER'?rules.classType:[]"
          >
            <el-select v-model="formData.classType" :disabled="formData.chargeType!=='LADDER'">
              <el-option label="按计费基准" value="BASE"></el-option>
              <el-option label="按库龄（天）" value="AGE"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item label="周期单位" prop="cycleUnit">
            <el-select v-model="formData.cycleUnit">
              <el-option label="年" value="YEAR"></el-option>
              <el-option label="月" value="MONTH"></el-option>
              <el-option label="周" value="WEEK"></el-option>
              <el-option label="日" value="DAY"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费周期" prop="chargeCycle">
            <el-input v-model="formData.chargeCycle"></el-input>
          </el-form-item>
          <el-form-item label="固定计费日" prop="fixDay">
            <el-select v-model="formData.fixDay">
              <el-option
                v-for="(item,index) in $keys.common.fixDay"
                :key="index"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否开启不满托计算" prop="isLessPl">
            <el-checkbox v-model="formData.isLessPl" true-label="Y" false-label="N"></el-checkbox>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="包装" prop="lessPlCalcTypeCheck">
            <el-radio v-model="formData.lessPlCalcTypeCheck" label="0">{{ }}</el-radio>
          </el-form-item>
          <span class="pad-t">商品数量 / 一托盘包装单位数</span>
          <!-- <span> < </span> -->
          <el-form-item
            label="< 不满托百分比"
            :prop="formData.lessPlCalcTypeCheck==='0'?'plPct':''"
            :rules="formData.isLessPl==='Y'&&formData.lessPlCalcTypeCheck==='0'?rules.plPct:[]"
          >
            <el-input
              v-if="formData.lessPlCalcTypeCheck==='0'"
              v-model="formData.plPct"
              :disabled="formData.lessPlCalcTypeCheck!=='0'"
            ></el-input>
            <el-input v-else :disabled="formData.lessPlCalcTypeCheck!=='0'"></el-input>
          </el-form-item>
          <!-- <span> = </span> -->
          <el-form-item
            label="= 计费托"
            :prop="formData.lessPlCalcTypeCheck==='0'?'plQtyCalc':''"
            :rules="formData.isLessPl==='Y'&&formData.lessPlCalcTypeCheck==='0'?rules.plQtyCalc:[]"
          >
            <el-input
              v-if="formData.lessPlCalcTypeCheck==='0'"
              v-model="formData.plQtyCalc"
              :disabled="formData.lessPlCalcTypeCheck!=='0'"
            ></el-input>
            <el-input v-else :disabled="formData.lessPlCalcTypeCheck!=='0'"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="托盘体积" prop="lessPlCalcTypeCheck">
            <el-radio v-model="formData.lessPlCalcTypeCheck" label="1">{{ }}</el-radio>
          </el-form-item>
          <el-form-item>
            <span>商品总体积 /</span>
          </el-form-item>
          <el-form-item
            label="托盘容积"
            :prop="formData.lessPlCalcTypeCheck!=='0'?'plVolume':''"
            :rules="formData.isLessPl==='Y'&&formData.lessPlCalcTypeCheck!=='0'?rules.plVolume:[]"
          >
            <el-input
              v-if="formData.lessPlCalcTypeCheck!=='0'"
              v-model="formData.plVolume"
              :disabled="formData.lessPlCalcTypeCheck==='0'"
            ></el-input>
            <el-input v-else :disabled="formData.lessPlCalcTypeCheck==='0'"></el-input>
          </el-form-item>
          <!-- <span class="pad-t"> < </span> -->
          <el-form-item
            label="< 不满托百分比"
            :prop="formData.lessPlCalcTypeCheck!=='0'?'plPct':''"
            :rules="formData.isLessPl==='Y'&&formData.lessPlCalcTypeCheck!=='0'?rules.plPct:[]"
          >
            <el-input
              v-if="formData.lessPlCalcTypeCheck!=='0'"
              v-model="formData.plPct"
              :disabled="formData.lessPlCalcTypeCheck==='0'"
            ></el-input>
            <el-input v-else :disabled="formData.lessPlCalcTypeCheck==='0'"></el-input>
          </el-form-item>
          <!-- <span > = </span> -->
          <el-form-item
            label="= 计费托"
            :prop="formData.lessPlCalcTypeCheck!=='0'?'plQtyCalc':''"
            :rules="formData.isLessPl==='Y'&&formData.lessPlCalcTypeCheck!=='0'?rules.plQtyCalc:[]"
          >
            <el-input
              v-if="formData.lessPlCalcTypeCheck!=='0'"
              v-model="formData.plQtyCalc"
              :disabled="formData.lessPlCalcTypeCheck==='0'"
            ></el-input>
            <el-input v-else :disabled="formData.lessPlCalcTypeCheck==='0'"></el-input>
          </el-form-item>
          <span class="break">大于等于不满托百分比按一托计算</span>
        </div>
        <el-form-item label="是否计算出库库存的库存费用" prop="isCalcInvShip">
          <el-checkbox v-model="formData.isCalcInvShip" true-label="Y" false-label="N"></el-checkbox>
        </el-form-item>
      </el-form>
      <div class="mrg-t" >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="级差" name="2">
          <div>
            <el-button v-auth="50600020212" type="primary" @click="handleLevel">添加</el-button>
            <el-button v-auth="50600020212" type="primary" @click="handleDelRows">移除</el-button>
          </div>
          <el-table class="mrg-t" :data="formData.wmContractDetailClassBeanList" ref="table" border  @select="handleSelect">
            <table-column type="selection" fixed  align="center"></table-column>
            <table-column label="序号" prop="seq"></table-column>
            <table-column label="级差区间从(大于)" prop="fmClass">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.fmClass"></el-input>
                <span v-else>{{scope.row.fmClass}}</span>
              </template>
            </table-column>
            <table-column label="级差区间到(小于等于)" prop="toClass">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.toClass"></el-input>
                <span v-else>{{scope.row.toClass}}</span>
              </template>
            </table-column>
            <table-column label="按单价/按总价" prop="priceType">
              <template slot-scope="scope">
                <el-select v-if="scope.row.isSet" v-model="scope.row.priceType">
                  <el-option label="按单价" value="UNIT"></el-option>
                  <el-option label="按总价" value="TOTAL"></el-option>
                </el-select>
                <span v-else>{{scope.row.priceType}}</span>
              </template>
            </table-column>
            <table-column label="单价/总价" prop="price">
              <template slot-scope="scope">
                <el-input v-if="scope.row.isSet" v-model="scope.row.price"></el-input>
                <span v-else>{{scope.row.price}}</span>
              </template>
            </table-column>
            <table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip content="保存" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-check"
                    plain
                    circle
                    @click="handleSave(scope.$index, scope.row,true)"
                  ></el-button>
                </el-tooltip>
              </template>
            </table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
      <div class="mrg-t">
        <el-button v-auth="50600020212" type="primary" @click="handleConfirm">确认</el-button>
        <el-button v-auth="50600020213" type="primary" @click="handleConfirmAdd">确认并添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import keys from '@/config/keys'
export default {
  data () {
    return {
      activeNames: ['1', '2'],
      formData: {
        isLessPl: 'N',
        lessPlCalcTypeCheck: 0,
        isCalcInvShip: 'N',
        checkbox: '0',
        wmContractDetailClassBeanList: []
      },
      copyFormData: {
        isLessPl: 'N',
        lessPlCalcTypeCheck: 0,
        isCalcInvShip: 'N',
        checkbox: '0',
        wmContractDetailClassBeanList: []
      },
      feeData: {}, // 商品编码
      date: '',
      // levelList: [],
      jobId: [],
      rules: {
        lineNo: [
          { required: true, message: '行号必填', trigger: 'change' }
        ],
        feeCategory: [
          { required: true, message: '费用种类必填', trigger: 'change' }
        ],
        feeNameCode: [
          { required: true, message: '费用名称必填', trigger: 'change' }
        ],
        receivePay: [
          { required: true, message: '收支类型必填', trigger: 'change' }
        ],
        chargeBase: [
          { required: true, message: '计费基准必填', trigger: 'change' }
        ],
        price: [
          { required: true, message: '单价必填', trigger: 'change' }
        ],
        chargeType: [
          { required: true, message: '计费方式必填', trigger: 'change' }
        ],
        ladderType: [
          { required: true, message: '计费阶梯方式必填', trigger: 'change' }
        ],
        classType: [
          { required: true, message: '级差类型必填', trigger: 'change' }
        ],
        tranType: [
          { required: true, message: '作业环节必填', trigger: 'change' }
        ],
        plPct: [
          { required: true, message: '不满托百分比必填', trigger: 'change' }
        ],
        plQtyCalc: [
          { required: true, message: '计费托必填', trigger: 'change' }
        ],
        plVolume: [
          { required: true, message: '托盘容积必填', trigger: 'change' }
        ]
      }
    }
  },
  props: {
    goodsFormVisible: Boolean,
    code: String,
    currentRow: {
      type: Object,
      default: () => ({})
    },
    rowIndex: Number,
    editBool: Boolean,
    levelList: Array,
  },
  mounted () {
  },
  methods: {
    close () {
      this.$emit('close')
      this.formData.wmContractDetailClassBeanList = []
      this.$refs.goodsForm.resetFields()
    },

    // 确认
    handleConfirm () {
      this.formatArr()
      const data = { ...{ isChecked: 'false' }, ...this.formData }
      if (this.editBool) {
        this.$emit('editOK', data, this.rowIndex)
        this.formData.wmContractDetailClassBeanList = []
        this.$refs.goodsForm.resetFields()
      } else {
        this.$refs.goodsForm.validate((valid) => {
          if (valid) {
            this.$emit('handleConfirm', data)
            this.formData.wmContractDetailClassBeanList = []
            this.$refs.goodsForm.resetFields()
          }
        })
      }
    },

    // 确认并添加
    handleConfirmAdd () {
      this.formatArr()
      const data = { ...{ isChecked: 'false' }, ...this.formData }
      if (this.editBool) {
        this.$emit('editOK', data, this.rowIndex)
        this.formData.wmContractDetailClassBeanList = []
        this.$refs.goodsForm.resetFields()
      } else {
        this.$refs.goodsForm.validate((valid) => {
          if (valid) {
            this.$emit('handleConfirmAdd', data)
            this.formData.wmContractDetailClassBeanList = []
            this.$refs.goodsForm.resetFields()
          }
        })
      }
    },
    handleLevel () {
      for (let i of this.formData.wmContractDetailClassBeanList) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项')
      }
      const list = {
        seq: '',
        fmClass: '',
        toClass: '',
        priceType: '',
        price: '',
        isSet: true,
        isChecked: false,
      }
      this.formData.wmContractDetailClassBeanList.unshift(list)
    },

    handleSave (index, row, bool) {
      if (bool) {
        if (!row.fmClass || !row.toClass || !row.priceType || !row.price) {
          return this.$message.warning('级差列表不能为空！')
        }
        row.isSet = !row.isSet
      }
    },
    // 勾选checkbox
    handleSelect (selection, row) {
      if (row.isChecked) {
        row.isChecked = !row.isChecked
      } else {
        row.isChecked = true
      }
    },
    // 删除
    handleDelRows () {
      this.formData.wmContractDetailClassBeanList = this.formData.wmContractDetailClassBeanList.filter((item, index) => {
        if (item.isChecked === false || !item.isChecked) {
          return item
        } else {
          if (item.jobId) {
            this.jobId.push(item.jobId)
          }
        }
      })
    },

    formatArr () {
      this.formData.wmContractDetailClassBeanList = this.formData.wmContractDetailClassBeanList.filter((item, index) => {
        if (!item.jobId) return item
      })
    },

  },

  watch: {
    currentRow: {
      handler (item) {
        console.log(item)
        this.formData = { ...item }
      },
      deep: true
    },
    feeData: {
      handler (item) {
        this.formData.ebfhNameCn = item.ebfhNameCn
        this.formData.feeType = item.ebfhCostType
      },
      deep: true
    },
    levelList: {
      handler (item) {
        this.formData.wmContractDetailClassBeanList = item
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.mrg-t{
  margin-top: 20px
}
.pad-t {
  display: inline-block;
  padding-top: 9px;
}
.break {
  width: 112px;
  display: inline-block;
  word-wrap: break-word;
  padding-top: 10px;
}
</style>
