<template>
  <el-card style="margin-top: 20px; height: 100%">
    <div class="p-2 flex flex-col cashierbox h-full">
      <div class="flex">
        <div>小区：{{ villageinfo.villageName ?? '---' }}</div>
        <div style="margin: 0 80px">住户姓名： {{ props.query.residentName }}</div>
        <div>手机号： {{ props.query.phone }}</div>
      </div>
      <div class="actionsbox">
        <el-button type="primary" @click="openDiage">收款</el-button>
        <!-- <el-button>添加临时收费</el-button> -->
        <!-- <el-button>预存</el-button> -->
        <el-button @click="emit('Back')">返回</el-button>
      </div>
      <div class="tablebox">
        <el-table :data="tabledata" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column align="center" label="收费名称">
            <template #default="scope">
              <!-- <div v-if="scope.row.chargeTypeName === '车位费'">{{ scope.row.parkingName }}</div>
              <div v-else-if="scope.row.chargeTypeName === chargeTypeName.Electricity || scope.row.chargeTypeName === chargeTypeName.Water">
                {{ scope.row.houseName }}
              </div>
              <div v-else>--</div> -->
              <div>{{ scope.row.detailsName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收费项目" width="250">
            <template #default="scope">
              <div>{{ scope.row.chargeItemName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收费周期" width="300">
            <template #default="scope">
              <dict-tag :options="com_bill_charge_period" :value="scope.row.chargePeriod"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="单价" width="150">
            <template #default="scope">
              <div>{{ scope.row.fixedPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费状态" width="120">
            <template #default="scope">
              <dict-tag v-if="!inglelist.includes(scope.row.chargeItemName)" :options="com_pay_status" :value="scope.row.payStatus"></dict-tag>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="应缴金额" width="120">
            <template #default="scope">
              <div>{{ scope.row.amount ?? '--' }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>

    <!-- 添加或修改电 设备对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <div class="payinfo">
        <div>
          <span>缴费人：{{ villageinfo.villageName ?? '---' }}-{{ props.query.houseName }}</span>
        </div>
        <div class="flex">
          <span>收费名称： </span>
          <div>
            <div v-for="(item, index) in from.billResidentId" :key="index" style="text-wrap: wrap; margin-bottom: 5px">
              <span style="text-decoration: underline">{{ item.detailsName }} ;</span>
            </div>
          </div>
        </div>
        <div>
          <span>应收合计：￥{{ from.allCost }}</span>
        </div>
        <div>
          <span>应缴合计：￥{{ from.allCost }}</span>
        </div>
      </div>
      <el-form ref="formRef" :model="from" label-width="100px">
        <el-form-item label="费用合计" prop="allCost">
          <el-input v-model="from.allCost" disabled>
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="缴纳状态" prop="payStatus">
          <el-radio-group v-model="from.payStatus">
            <el-radio v-for="dict in com_pay_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式" prop="payType">
          <el-select v-model="from.payType" placeholder="请选择">
            <el-option v-for="dict in com_pay_method" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="5" v-model="from.remark"></el-input>
        </el-form-item>
        <div class="flex justify-end">
          <el-button @click="closepay">取消</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import DictTag from '@/components/DictTag/index.vue';
import pagination from '@/components/Pagination/index.vue';
import { ref } from 'vue';
import { billlistType, billQuery, billEdit } from '@/api/system/SdbCashier';
import { moneyAdd } from '@/utils/money';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_pay_method, com_pay_status } = toRefs<any>(proxy?.useDict('com_pay_method', 'com_pay_status'));
const { com_bill_charge_period } = toRefs<any>(proxy?.useDict('com_bill_charge_period'));
const villageinfo = JSON.parse(localStorage.getItem('villageInfo') || '{}');

// 隐藏收费金额的 类型列表
const inglelist = ['电费', '水费'];
enum chargeTypeName {
  'Water' = '水费',
  'Electricity' = '电费'
}
type querytype = {
  residentId: string;
  residentName: string;
  houseName: string;
  phone: string;
};
const props = defineProps({
  query: {
    type: Object as PropType<querytype>,
    default: () => {
      return {
        'residentId': '',
        'residentName': '',
        'houseName': '',
        'phone': ''
      };
    }
  }
});
const ids = ref<Array<billlistType>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(100);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});
const tabledata = ref([]);
const getList = () => {
  billQuery({
    residentId: props.query.residentId,
    payStatus: '0'
  }).then((res) => {
    tabledata.value = res.rows;
    total.value = res.total;
  });
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: billlistType[]) => {
  ids.value = [];
  ids.value = selection;

  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

onMounted(() => {
  getList();
});

const emit = defineEmits(['Back']);

const formRef = ref();
const dialog = reactive<DialogOption>({
  visible: false,
  title: '收款'
});
const buttonLoading = ref(false);

const from = ref({
  allCost: null, // 金额
  billResidentId: [], // 账单id
  payStatus: '0', // 0:未缴 1:已缴
  payType: '0', // 0:微信 1:支付宝 2 线下
  remark: ''
});

const openDiage = () => {
  if (!ids.value.length) {
    ElMessage.warning('请至少选择一条账单进行收款');
    return;
  }

  from.value = {
    allCost: 0,
    payStatus: '0',
    billResidentId: [],
    payType: '0',
    remark: ''
  };
  ids.value.forEach((item) => {
    from.value.billResidentId.push(item);
    from.value.allCost = moneyAdd(from.value.allCost, item.amount);
  });
  dialog.visible = true;
};
const closepay = () => {
  dialog.visible = false;
  dialog.title = '';
};
const submitForm = () => {
  buttonLoading.value = true;
  const obj = {
    'detailsId': from.value.billResidentId.map((item) => item.detailsId),
    'payType': from.value.payType,
    'payStatus': from.value.payStatus
  };
  billEdit(obj).then(() => {
    ElMessage.success('缴费成功');
    buttonLoading.value = false;
    getList();
    closepay();
  });
};
</script>

<style scoped lang="scss">
.cashierbox {
  font-size: 16px;
  .el-button {
    width: 100px;
    height: 35px;
    border-radius: 4px;
  }

  .actionsbox {
    margin-top: 20px;
  }
  .tablebox {
    margin-top: 20px;
    height: 100%;
    .el-table {
      height: calc(100% - 80px);
    }
  }
}
.payinfo {
  color: rgba(0, 0, 0, 1);
  margin-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #d2d2d2;
  & > div {
    margin-bottom: 10px;
  }
}
</style>
