<template>
  <div class="descriptions-edit">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" :show-message="false" v-enterboard>
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label">客户名称</template>
            <MyFormItem prop="custName" :value="form.custName" :readonly="true">
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">费用名称<rq /></template>
            <MyFormItem prop="itemName" :value="form.itemName" :readonly="readonly">
              <el-select v-model="form.itemCode" placeholder="请选择费用名称" clearable filterable>
                <el-option v-for="dict in dict.type.cost_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">应收/应付</template>
          <el-tag :type="form.rpFlag == 1 ? 'success' : ''" size="small">{{ form.rpFlag == 0 ? '应收' : '应付'
            }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">数量(吨)<rq /></template>
            <MyFormItem prop="itemNum" :value="form.itemNum" :readonly="readonly">
              <el-input v-model="form.itemNum" placeholder="请输入数量（吨）" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">费率/运费<rq /></template>
            <MyFormItem prop="itemRate" :value="form.itemRate" :readonly="readonly || form.itemType == '1'">
              <el-input v-model="form.itemRate" placeholder="请输入费率/运费" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">费用<rq /></template>
            <MyFormItem prop="itemCost" :value="form.itemCost" :readonly="readonly">
              <el-input v-model="form.itemCost" placeholder="请输入费用" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">币种<rq /></template>
            <MyFormItem prop="currency" :value="form.currency" :readonly="readonly">
              <template slot="readonly">
                <dict-tag :options="dict.type.sys_curr_type" :value="form.currency" />
              </template>
              <el-select v-model="form.currency" placeholder="请选择币种" clearable >
                <el-option v-for="dict in dict.type.sys_curr_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">是否对账</template>
            <MyFormItem prop="lockStatus" :value="form.lockStatus" :readonly="readonly">
              <template slot="readonly">
                <el-tag :type="form.lockStatus == 1 ? 'success' : ''" size="small">{{ form.lockStatus == 1 ? '已对账' : '未对账'
                }}</el-tag>
              </template>
              <el-radio-group v-model="form.lockStatus">
                <el-radio label="0">未对账</el-radio>
                <el-radio label="1">已对账</el-radio>
              </el-radio-group>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">已核销</template>
            <MyFormItem prop="writeoffCost" :value="form.writeoffCost || 0" :readonly="true">
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">日期</template>
            <MyFormItem prop="inputDate" :value="form.inputDate" :readonly="readonly">
              <el-date-picker class="el-date-picker" v-model="form.inputDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择录入日期">
              </el-date-picker>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">备注</template>
            <MyFormItem prop="remark" :value="form.remark" :readonly="readonly">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </MyFormItem>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
</template>

<script>
import { getCost, addCost, updateCost } from "@/api/amortize/cost";
import { formatDateToDataStr } from '@/utils';
export default {
  name: 'AmortizeEdit',
  dicts: ['cost_type', 'sys_curr_type'],
  props: {
    bid: [String, Number, Array],
    readonly: Boolean,
    order: {
      type: Object,
      default: () => ({})
    },
    // 0应收 1应付
    rpFlag: [String],
  },
  data() {
    return {
      loading: false,
      form: this.defaultForm(),
      rules: {
        itemName: [
          { required: true, message: "费用类型不能为空", trigger: "change" }
        ],
        itemCost: [
          { required: true, message: "费用不能为空", trigger: "blur" }
        ],
        itemRate: [
          { required: true, message: "费率不能为空", trigger: "blur" }
        ],
        itemNum: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        currency: [
          { required: true, message: "币种不能为空", trigger: "change" }
        ],
      },
    }
  },
  watch: {
    bid: {
      immediate: true,
      handler(val) {
        this.getDetail();
      }
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      this.form = this.defaultForm();
      this.resetForm("form");
      if (!this.bid) {
        return;
      }
      this.loading = true;
      getCost(this.bid).then((res) => {
        this.loading = false;
        this.form = this.defaultForm(res.data);
      }).catch((err) => {
        this.loading = false;
      });
    },
    // 默认表单
    defaultForm(data) {
      return {
        itemCode: 'ysfy',
        itemCost: null,
        remark: null,
        rpFlag: this.rpFlag,
        custId: this.order.custId,
        custName: this.order.custName,
        orderId: this.order.id,
        orderNo: this.order.orderNo,
        orderType: this.order.orderType,
        itemCost: this.order.freightRates,
        currency: this.order.currency,
        itemName: '运输费用',
        lockStatus: '0',
        inputDate: data && data.id ? '' : formatDateToDataStr(),
        ...data,
      };
    },
    // 提交表单
    submitForm() {
      if (this.readonly) {
        return;
      }
      this.$refs.form.validate((valid, rules) => {
        if (!valid) {
          this.$modal.formWarning(rules);
          return;
        }
        if (this.$validate.hasValue(this.form.id)) {
          updateCost(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$emit('saved', false);
          });
        } else {
          addCost(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$emit('saved', true);
          });
        }
      });
    }
  }
}
</script>

<style>

</style>