<!--
@name: 合并计费策略-编辑页
@author: 张泽贤
@time: 2022-08-02
@doc: 
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <a-space slot="title" style="display: flex; align-items: center; cursor: pointer">
        <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
        合并计费策略-{{ typeTitle }}
      </a-space>
      <div slot="extra" v-show="type !== 'view'">
        <p-button type="primary" @click="onSave">保存</p-button>
      </div>
    </p-card>
    <p-card>
      <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
        <a-divider orientation="left">基本信息</a-divider>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="策略名称" prop="strategyName">
              <div v-if="type === 'view'">{{ form.strategyName }}</div>
              <p-input v-model="form.strategyName" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="12">
            <p-form-model-item label="备注" prop="memo" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <div v-if="type === 'view'">{{ form.memo }}</div>
              <p-input v-model="form.memo" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">合并规则</a-divider>
        <a-row>
          <a-col :span="24">
            <p-form-model-item label="" prop="" :label-col="{ span: 0 }">
              <a-tag color="red">满足以下条件的单据合并计费</a-tag>
              <!-- <a-alert message="满足以下条件的单据合并计费" type="error" /> -->
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameSender">
              <p-checkbox v-model="form.isSameSender" :readOnly="type === 'view'">相同发货方</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameStartDate">
              <p-checkbox v-model="form.isSameStartDate" :readOnly="type === 'view'">相同实际启运日期</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameDriver">
              <p-checkbox v-model="form.isSameDriver" :readOnly="type === 'view'">相同运输司机</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameCar">
              <p-checkbox v-model="form.isSameCar" :readOnly="type === 'view'">相同运输车辆</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameCarrier">
              <p-checkbox v-model="form.isSameCarrier" :readOnly="type === 'view'">相同承运商</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameReceive">
              <p-checkbox v-model="form.isSameReceive" :readOnly="type === 'view'">相同收货方</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameDeliveryArea">
              <p-checkbox v-model="form.isSameDeliveryArea" :readOnly="type === 'view'">相同配送区域</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameDeliveryStation">
              <p-checkbox v-model="form.isSameDeliveryStation" :readOnly="type === 'view'">相同送货站点</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameLine">
              <p-checkbox v-model="form.isSameLine" :readOnly="type === 'view'">相同线路</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameCargoOwner">
              <p-checkbox v-model="form.isSameCargoOwner" :readOnly="type === 'view'">相同货主</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
          <p-form-model-item label="" prop="isSameEndDate">
            <p-checkbox v-model="form.isSameEndDate" :readOnly="type === 'view'">相同实际送达日期</p-checkbox>
          </p-form-model-item>
        </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameElectronicBackDate">
              <p-checkbox v-model="form.isSameElectronicBackDate" :readOnly="type === 'view'">相同电子回单日期</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="isSameOriginalBackDate">
              <p-checkbox v-model="form.isSameOriginalBackDate" :readOnly="type === 'view'">相同正本回单日期</p-checkbox>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">计费规则</a-divider>
        <a-row>
          <a-col :span="24">
            <p-form-model-item label="" prop="feeRule" :label-col="{ span: 0 }">
              <p-radio-group v-model="form.feeRule" :disabled="type === 'view'" :options="options.FEE_RULE" />
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
    </p-card>
  </p-spin>
</template>

<script>
import { View, Save, Update } from '../js/api';

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
    editId: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
        copy: '复制',
      };
      return dictionary[this.type] || this.type;
    },
  },
  data() {
    return {
      spinning: false,

      form: {
        isSameSender: false,
        isSameStartDate: false,
        isSameCar: false,
        isSameCarrier: false,
        isSameDriver: false,
        isSameReceive: false,
        isSameDeliveryArea: false,
        isSameDeliveryStation: false,
        isSameLine: false,
        isSameCargoOwner: false,
        isSameEndDate: false,
        isSameElectronicBackDate: false,
        isSameOriginalBackDate: false,
        feeRule: '',
      },
      rules: {
        strategyName: [{ required: true, message: '策略名称不能为空', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    if (this.editId) {
      this.spinning = true;
      View({ id: this.editId })
        .then((res) => {
          if (res.success) {
            res.data.isSameSender = res.data.isSameSender == 1;
            res.data.isSameStartDate = res.data.isSameStartDate == 1;
            res.data.isSameCar = res.data.isSameCar == 1;
            res.data.isSameCarrier = res.data.isSameCarrier == 1;
            res.data.isSameDriver = res.data.isSameDriver == 1;
            res.data.isSameReceive = res.data.isSameReceive == 1;
            res.data.isSameDeliveryArea = res.data.isSameDeliveryArea == 1;
            res.data.isSameDeliveryStation = res.data.isSameDeliveryStation == 1;
            res.data.isSameLine = res.data.isSameLine == 1;
            res.data.isSameCargoOwner = res.data.isSameCargoOwner == 1;
            res.data.isSameEndDate = res.data.isSameEndDate == 1;
            res.data.isSameElectronicBackDate = res.data.isSameElectronicBackDate == 1;
            res.data.isSameOriginalBackDate = res.data.isSameOriginalBackDate == 1;
            this.form = { ...res.data };
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  },
  methods: {
    back() {
      this.$emit('back');
    },

    // 保存
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        if (this.type === 'add' || this.type === 'copy') this.onMethod(Save);
        if (this.type === 'edit') this.onMethod(Update);

        return;
      });
    },
    onMethod(method) {
      let params = { ...this.form };
      params.isSameSender = params.isSameSender ? 1 : 0;
      params.isSameStartDate = params.isSameStartDate ? 1 : 0;
      params.isSameCar = params.isSameCar ? 1 : 0;
      params.isSameCarrier = params.isSameCarrier ? 1 : 0;
      params.isSameDriver = params.isSameDriver ? 1 : 0;
      params.isSameReceive = params.isSameReceive ? 1 : 0;
      params.isSameDeliveryArea = params.isSameDeliveryArea ? 1 : 0;
      params.isSameDeliveryStation = params.isSameDeliveryStation ? 1 : 0;
      params.isSameLine = params.isSameLine ? 1 : 0;
      params.isSameCargoOwner = params.isSameCargoOwner ? 1 : 0;
      params.isSameEndDate = params.isSameEndDate ? 1 : 0;
      params.isSameElectronicBackDate = params.isSameElectronicBackDate ? 1 : 0;
      params.isSameOriginalBackDate = params.isSameOriginalBackDate ? 1 : 0;

      this.spinning = true;
      method(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('back');
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.border {
  border: 1px solid #e8e8e8;
}
</style>