<template>
  <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="contractNo">
          <div v-if="type === 'view'">{{ form.contractNo }}</div>
          <p-input v-model="form.contractNo" :disabled="type === 'edit'" v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="报价名称" prop="contractName">
          <div v-if="type === 'view'">{{ form.contractName }}</div>
          <p-input v-model="form.contractName" :disabled="type === 'edit'" v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="报价类型" prop="contractType">
          <div v-if="type === 'view'">{{ form.contractTypeName }}</div>
          <p-select v-model="form.contractType" :options="options.CONTRACT_TYPE" allowClear v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="结算方式" prop="settlementType">
          <div v-if="type === 'view'">{{ form.settlementTypeName }}</div>
          <p-select v-model="form.settlementType" :options="options.SETTLEMENT_WAY" allowClear v-else />
        </p-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <p-form-model-item label="结算部门" prop="firstPartyName">
          <div v-if="type === 'view'">{{ form.firstPartyName }}</div>
          <departmenTree :departmentCode="departmentCode" @getDepartment="getDepartment" :disabled="type === 'edit'" v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="生效日期" prop="effectiveDate">
          <div v-if="type === 'view'">{{ form.effectiveDate }}</div>
          <p-date-picker v-model="form.effectiveDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%" @change="dateChange" v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="失效日期" prop="expiryDate">
          <div v-if="type === 'view'">{{ form.expiryDate }}</div>
          <p-date-picker v-model="form.expiryDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%" @change="expiryDateChange" :disabled-date="disabledEndDate" v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="报价期限" prop="contractPeriod">
          <div v-if="type === 'view'">{{ form.contractPeriod }}天</div>
          <p-input v-model="form.contractPeriod" suffix="天" @change="dateChange" v-else />
        </p-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6">
        <p-form-model-item label="税点" prop="taxPoint">
          <div v-if="type === 'view'">{{ form.taxPoint }}</div>
          <p-select v-model="form.taxPoint" :options="options.TAX_POINT" allowClear v-else />
        </p-form-model-item>
      </a-col>
      <a-col :span="4" :offset="2">
        <p-form-model-item prop="isHeavyBubble">
          <p-checkbox v-model="form.isHeavyBubble" :readOnly="type === 'view'">是否启用重泡比</p-checkbox>
        </p-form-model-item>
      </a-col>
      <a-col :span="6">
        <p-form-model-item label="重泡比" prop="heavyBubble">
          <div v-if="type === 'view'">{{ form.heavyBubble }}</div>
          <p-input v-model="form.heavyBubble" suffix="吨/立方米" v-else />
        </p-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <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" v-if="mextendedField_list.length">扩展属性</a-divider>
    <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
  </p-form-model>
</template>

<script>
import extendedField from '@/blocks/extendedField/index.vue';
import departmenTree from '@/blocks/components/formConfig/index.departmenTree.vue';

import { View } from '../js/api';

export default {
  components: { extendedField, departmenTree },
  props: {
    editId: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const positveOrZero = (rule, value, callback) => {
      if (value && !/(^\d+$)/.test(value)) {
        callback(new Error('请输入正整数'));
      } else {
        callback();
      }
    };
    const heavyBubble = (rule, value, callback) => {
      if (value && !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
        callback(new Error('请输入非负数'));
      } else if (this.form.isHeavyBubble && !value) {
        callback(new Error('重泡比不能为空'));
      } else {
        callback();
      }
    };
    return {
      form: {
        effectiveDate: '',
        expiryDate: '',
        contractPeriod: '',
        isHeavyBubble: false,
        heavyBubble: '',
        firstPartyId: '',
        firstPartyCode: '',
        firstPartyName: '',
        firstPartyType: 'D',
        secondPartyId: '',
        secondPartyCode: '',
        secondPartyName: '',
        secondPartyType: 'D',
      },
      rules: {
        contractNo: [{ required: true, message: '报价编号不能为空', trigger: 'blur' }],
        contractName: [{ required: true, message: '报价名称不能为空', trigger: 'blur' }],
        contractType: [{ required: true, message: '报价类型不能为空', trigger: 'change' }],
        settlementType: [{ required: true, message: '结算方式不能为空', trigger: 'change' }],
        firstPartyName: [{ required: true, message: '甲方不能为空', trigger: 'change' }],
        secondPartyName: [{ required: true, message: '乙方不能为空', trigger: 'change' }],
        effectiveDate: [{ required: true, message: '生效日期不能为空', trigger: 'change' }],
        expiryDate: [{ required: true, message: '失效日期不能为空', trigger: 'change' }],
        contractPeriod: [
          { required: true, message: '报价期限不能为空', trigger: 'change' },
          { validator: positveOrZero, trigger: 'change' },
        ],
        heavyBubble: [{ validator: heavyBubble, trigger: 'change' }],
        taxPoint: [{ required: true, message: '税点不能为空', trigger: 'change' }],
      },

      departmentCode: '',
    };
  },
  mounted() {
    if (this.editId) {
      this.spinning = true;
      View({ id: this.editId })
        .then((res) => {
          if (res.success) {
            res.data.isHeavyBubble = res.data.isHeavyBubble === 1;
            if (this.type === 'copy') {
              res.data.origContractNo = res.data.contractNo;
              res.data.contractNo = '';
              res.data.contractName = '';
            }
            this.form = { ...res.data };
            this.$emit('setContractInfo', this.form);
            this.departmentCode = this.form.firstPartyCode;
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  },
  methods: {
    // 日期计算
    disabledStartDate(startValue) {
      const endValue = this.moment(this.expiryDate);
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.moment(this.form.effectiveDate);
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    dateChange() {
      if (this.form.effectiveDate && this.form.contractPeriod) {
        let expiryDate = this.moment(this.form.effectiveDate).add(Number(this.form.contractPeriod) - 1, 'days');
        expiryDate = this.moment(expiryDate).format('YYYY-MM-DD');
        this.$set(this.form, 'expiryDate', expiryDate);
        this.$refs.ruleForm.validateField('expiryDate');
      }
    },
    expiryDateChange() {
      if (this.form.effectiveDate && this.form.expiryDate) {
        let contractPeriod = this.moment(this.form.expiryDate).diff(this.moment(this.form.effectiveDate), 'day') + 1;
        this.$set(this.form, 'contractPeriod', contractPeriod);
        this.$refs.ruleForm.validateField('contractPeriod');
      }
    },

    getDepartment(value) {
      this.departmentCode = value.departmentCode;
      this.form.firstPartyId = value.departmentId;
      this.form.firstPartyCode = value.departmentCode;
      this.form.firstPartyName = value.departmentName;
      this.form.secondPartyId = value.departmentId;
      this.form.secondPartyCode = value.departmentCode;
      this.form.secondPartyName = value.departmentName;
    },
  },
};
</script>