<template>
  <el-dialog
    v-if="visiable"
    :visible.sync="visiable"
    center
    destroy-on-close
    :before-close="beforeClose"
    width="70%"
  >
    <el-form v-model="formData" label-width="150px">
      <c-row>
        <c-col>
          <c-col :span="12">
            <el-form-item label="费用代码">
              <c-input v-model="formData.feecod" disabled />
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="中文描述">
              <c-col :span="13">
                <c-input v-model="formData.feetxt" />
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px">
                  <c-select
                    v-model="formData.modflg"
                    disabled
                    :code="codes.modflg"
                  />
                </el-form-item>
              </c-col>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="6">
            <el-form-item label="详细信息">
              <c-input v-model="formData.feetxtinf" />
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="起算时间">
              <!-- <c-input v-model="formData.dat1" type="date" /> -->
              <c-date-picker
                type="date"
                v-model="formData.dat1"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择起算时间"
              ></c-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="结束时间">
              <c-date-picker
                type="date"
                v-model="formData.dat2"
                format="yyyy-MM-dd"
                style="width: 100%"
                placeholder="请选择结束时间"
              ></c-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="6">
            <el-form-item label="收取份数">
              <c-input v-model="formData.unt" />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="费用换算">
              <c-col :span="13">
                <c-select v-model="formData.usrcur" style="width: 100%">
                  <el-option
                    v-for="item in codes.cur"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value"
                  />
                </c-select>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px">
                  <c-input v-model="formData.usramt" />
                </el-form-item>
              </c-col>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="应收费用">
              <c-col :span="13">
                <c-input v-model="formData.cur" disabled />
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px">
                  <c-input v-model="formData.ogiamt" disabled />
                </el-form-item>
              </c-col>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="付款方">
              <c-select v-model="formData.rol" style="width: 100%">
                <el-option
                  v-for="item in codes.setfelRol"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                />
              </c-select>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="计算周期起始">
              <c-input v-model="formData.datrefbeg" disabled />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <c-col :span="12">
            <c-col :span="12">
              <el-form-item label="优惠百分比">
                <c-input
                  v-model="formData.dctrat"
                  @keyup.enter.native="
                    eventFunction(
                      'setmod.setfeg.setfel(' + (idx + 1) + ').dctrat'
                    )
                  "
                >
                  <template #suffix>%</template>
                </c-input>
              </el-form-item>
            </c-col>
            <c-col :span="12">
              <el-form-item label="优惠金额">
                <c-input
                  v-model="formData.dctamt"
                  @keyup.enter.native="$event.target.blur()"
                  @blur="
                    eventFunction(
                      'setmod.setfeg.setfel(' + (idx + 1) + ').dctamt'
                    )
                  "
                />
              </el-form-item>
            </c-col>
          </c-col>

          <c-col :span="12">
            <el-form-item label="优惠后实收费用金额">
              <c-input
                v-model="formData.amt"
                @keyup.enter.native="
                  eventFunction('setmod.setfeg.setfel(' + (idx + 1) + ').amt')
                "
              />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24">
          <el-form-item
            :label="
              idx == 1
                ? 'Per mile fee depending on duration'
                : 'A fixed amount per unit is caculated. This type will, for example, be used for correspondence charges.'
            "
            label-width="700px"
          />
        </c-col>
        <c-col :span="12">
          <c-col v-if="idx == 1">
            <c-col>
              <el-form-item label="千分率">
                <c-input v-model="formData.wrkfec.ratcal" />
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item label="最小值">
                <c-col :span="13">
                  <c-select
                    v-model="formData.wrkfec.mincur"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in codes.cur"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    />
                  </c-select>
                </c-col>
                <c-col :span="11">
                  <el-form-item label="" label-width="5px">
                    <c-input v-model="formData.wrkfec.minamt" />
                  </el-form-item>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item label="最大值">
                <c-col :span="13">
                  <c-select
                    v-model="formData.wrkfec.maxcur"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in codes.cur"
                      :label="item.label"
                      :value="item.value"
                      :key="item.value"
                    />
                  </c-select>
                </c-col>
                <c-col :span="11">
                  <el-form-item label="" label-width="5px">
                    <c-input v-model="formData.wrkfec.maxamt" />
                  </el-form-item>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col>
              <el-form-item>
                <c-checkbox
                  label="每个计费区间与最大值/最小值比较"
                  v-model="formData.fecp1.jnwshx"
                />
              </el-form-item>
            </c-col>
          </c-col>
          <c-col v-else>
            <el-form-item label="Amount">
              <c-col :span="13">
                <c-select v-model="formData.wrkfec.ratcur">
                  <el-option
                    v-for="item in codes.cur"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </c-col>
              <c-col :span="11">
                <el-form-item label="" label-width="5px">
                  <c-input v-model="formData.wrkfec.untamt"> </c-input>
                </el-form-item>
              </c-col>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item label="销项税">
              <c-input v-model="formData.fecp1.taxrat" disabled />
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item label="客户属性">
              <c-input v-model="formData.fecp1.custyp" disabled />
            </el-form-item>
          </c-col>

          <c-col>
            <el-form-item label="收费的说明信息">
              <c-input
                v-model="formData.inftxt"
                disabled
                rows="10"
                type="textarea"
              />
            </el-form-item>
          </c-col>
        </c-col>
        <c-col v-if="idx == 1" :span="12">
          <el-form-item label="计费基础金额">
            <c-input v-model="formData.wrkfec.calcbs" disabled />
          </el-form-item>
          <br />
          <el-form-item label="计费周期">
            <c-select
              v-model="formData.wrkfec.pertyp"
              @change="defaultFunction()"
            >
              <el-option
                v-for="item in codes.pertyp"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              />
            </c-select>
          </el-form-item>
          <br />
          <el-form-item label="最小周期">
            <c-input v-model="formData.wrkfec.permin" />
          </el-form-item>
          <br />
          <el-form-item label="周期阶梯费率" />
          <br />
          <el-form-item label="周期">
            <c-col :span="12">
              <c-input v-model="formData.wrkfec.perbegtr2" />
            </c-col>
            <c-col :span="11" :offset="1">
              <c-input v-model="formData.wrkfec.perrattr2" />
            </c-col>
          </el-form-item>
          <el-form-item label="周期">
            <c-col :span="12">
              <c-input v-model="formData.wrkfec.perbegtr3" />
            </c-col>
            <c-col :span="11" :offset="1">
              <c-input disabled v-model="formData.wrkfec.perrattr3" />
            </c-col>
          </el-form-item>
          <el-form-item label="周期">
            <c-col :span="12">
              <c-input disabled v-model="formData.wrkfec.perbegtr4" />
            </c-col>
            <c-col :span="11" :offset="1">
              <c-input disabled v-model="formData.wrkfec.perrattr4" />
            </c-col>
          </el-form-item>
          <el-form-item label="周期">
            <c-col :span="12">
              <c-input disabled v-model="formData.wrkfec.perbegtr5" />
            </c-col>
            <c-col :span="11" :offset="1">
              <c-input disabled v-model="formData.wrkfec.perrattr5" />
            </c-col>
          </el-form-item>
        </c-col>
        <c-col>&nbsp;</c-col>

        <c-col :span="4" :offset="9">
          <c-button type="primary" @click="saveDialog"> 确 定 </c-button>
        </c-col>
        <c-col :span="6">
          <c-button @click="visiable = false">取 消</c-button>
        </c-col>
        <c-col>&nbsp;</c-col>
      </c-row>
    </el-form>
  </el-dialog>
</template>

<script>
import commonProcess from '~/mixin/commonProcess';

export default {
  inject: ['root'],
  mixins: [commonProcess],
  props: {
    model: Object,
    idx: Number,
    codes: Object,
  },
  data() {
    return {
      visiable: false,
    };
  },
  computed: {
    formData() {
      let formDataTmp = this.model.setmod.setfeg.setfel[this.idx];

      formDataTmp.fecp1 = formDataTmp.fecp1 ? formDataTmp.fecp1 : {};
      formDataTmp.fecp1.taxrat = formDataTmp.fecp1.taxrat
        ? formDataTmp.fecp1.taxrat
        : '';

      formDataTmp.wrkfec = formDataTmp.wrkfec ? formDataTmp.wrkfec : {};
      formDataTmp.wrkfec.ratcur = formDataTmp.wrkfec.ratcur
        ? formDataTmp.wrkfec.ratcur
        : 0;

      return formDataTmp;
    },
  },
  methods: {
    saveDialog() {
      this.model.setmod.setfeg.setfel.splice(this.idx, 1, this.formData);
      this.visiable = false;
    },
    beforeClose(done) {
      this.visiable = false;
      done();
    },
  },
};
</script>
<style></style>