<template>
  <div class="lookDetail">
    <div class="formContent-item_title">{{ chiData.residentName }} - {{ chiData.assets }} </div>
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="110px"
    >
      <template v-for="(item, index) in formLook">
        <el-col
          :span="12"
          :key="index"
        >
          <el-form-item :label="labelType(item.label, item.prop)">
            <template v-if="item.slot">
              <template v-if="item.slot == 'assetsArea' && thisItem['chargeType'] == 4">
                {{ !!thisItem['parkingDetail'] ? thisItem['parkingDetail'] : '--' }}
              </template>
              <template v-else-if="item.slot == 'chargeMode'">
                {{ !!chargeModeValue[thisItem[item.prop]] ? chargeModeValue[thisItem[item.prop]] : '--' }}
              </template>
              <template v-else-if="item.slot == 'chargeStatus'">
                <span class="redText">未缴费</span>
              </template>
              <template v-else-if="item.slot === 'payEndTime'">
                <div style="white-space: nowrap">{{ typeTimeTransition(thisItem.payBeginTime, thisItem.payEndTime) }}</div>
              </template>
              <template v-else>
                {{ thisItem[item.prop] || '--' }}
              </template>
            </template>
            <template v-else>
              {{ thisItem[item.prop] || '--' }}
            </template>
          </el-form-item>
        </el-col>
      </template>
      <div class="inline">
        <el-form-item
          label="支付方式"
          prop="payType"
        >
          <el-select v-model="formData.payType">
            <el-option
              label="微信"
              :value="7"
            ></el-option>
            <el-option
              label="支付宝"
              :value="2"
            ></el-option>
            <el-option
              label="现金"
              :value="3"
            ></el-option>
            <el-option
              label="刷卡"
              :value="6"
            ></el-option>
            <el-option
              label="其他"
              :value="5"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账单金额(元)">
          <div style="white-space: nowrap">{{ thisItem.receivableAmount }}</div>
        </el-form-item>
        <el-form-item
          label="应收金额(元)"
          required
        >
          <el-input
            oninput="value=value.replace(/[^0-9.]/g,'')"
            disabled
            v-model="thisItem.amount"
          ></el-input>
        </el-form-item>
      </div>

      <el-form-item
        label="备注信息"
        placeholder="请输入备注信息"
      >
        <el-input
          type="textarea"
          maxlength="100"
          v-model="formData.remark"
          show-word-limit
          resize="none"
          rows="3"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script >
export default {
  props: ['params'],
  data () {
    return {
      chargeModeValue: {
        1: '固定收费',
        2: '价格*面积收费',
        4: '单价*用量'
      },
      formLook: [
        {
          label: '费用名称:',
          prop: 'chargeName'
        },
        {
          label: '计费方式:',
          prop: 'chargeMode',
          slot: 'chargeMode'
        },
        {
          label: '面积(㎡):',
          prop: 'assetsArea',
          slot: 'assetsArea'
        },
        {
          label: '价格(元/月):',
          prop: 'chargePrice'
        },
        {
          label: '费用金额(元):',
          prop: 'amount'
        },
        {
          label: '账期:',
          prop: 'paymentDays'
        },
        {
          label: '滞纳金(元):',
          prop: 'lateFee'
        },
        {
          label: '缴费状态:',
          prop: 'chargeStatus',
          slot: 'chargeStatus'
        },
        {
          label: '业主:',
          prop: 'residentName'
        },
        {
          label: '业主手机号:',
          prop: 'phone'
        },
        {
          label: '账单计费日期:',
          prop: 'payEndTime',
          slot: 'payEndTime'
        }
      ],
      thisItem: {},
      chiData: {},
      formData: {
        payType: '',
        remark: '',
        amount: '',
        billList: [
          {
            amount: '',
            billId: ''
          }
        ]
      },
      formRules: {
        payType: [this.$valid.selectRequired('支付方式')],
        amount: [this.$valid.inputRequired('实收金额')]
      }
    };
  },

  methods: {
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var loading = this.$loading();
          let installData = {
            payType: this.formData.payType,
            remark: this.formData.remark,
            billList: [
              {
                amount: this.thisItem.amount,
                billId: this.thisItem.id
              }
            ]
          };
          this.$http
            .post('/czc-charge/charge/bill/payee', installData)
            .then(({ status, msg }) => {
              if (status == 0) {
                this.$message.success(msg);
                this.params.callback();
                this.$emit('close');
              } else {
                this.$message.error(msg);
              }
              loading.close();
            })
            .catch(() => {
              loading.close();
            });
        }
      });
    },
    getDatali (id) {
      this.$http
        .get('/czc-charge/charge/bill/findUserBillDetail', { id: id })
        .then(({ data, msg, status }) => {
          if (status == 0) {
            this.thisItem = data;
            this.thisItem.amount = data.discountAmount;
          }
        })
        .catch(() => { });
    },
    typeTimeTransition (start, end) {
      let text = '';
      if (!!end) {
        let f = start.slice(5, 7),
          l = end.slice(5, 7);
        if (Number(f) == Number(l)) {
          text = start;
        } else {
          text = `${start.slice(0, 8)}-${end.slice(0, 8)}`;
        }
      }

      return text;
    },
    labelType (lab, val) {
      let type = this.thisItem['chargeType'];
      if (val == 'assetsArea') {
        if (type == 2) {
          lab = '用量(吨):';
        } else if (type == 3) {
          lab = '用量(度):';
        } else if (type == 4) {
          lab = '车位:';
        }
      } else if (val == 'chargePrice') {
        if (type == 2) {
          lab = '价格(元/吨):';
        } else if (type == 3) {
          lab = '价格(元/度):';
        }
      }
      return lab;
    }
  },
  created () {
    this.getDatali(this.params.data.id);
    debugger
    this.chiData = this.params.data;
  }
};
</script>
<style lang="scss" scoped>
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
        white-space: nowrap;
    }
}
.inline {
    clear: left;
    display: flex;
    justify-content: space-between;
}
</style>