<script>
import XDescriptionsGroup from '@vue2-client/base-client/components/common/XDescriptions/XDescriptionsGroup.vue'

export default {
  name: 'Demo',
  components: { XDescriptionsGroup },
  data () {
    return {
      visible: false,
      // 修改手机号弹窗状态（必须在 data 中初始化，保证响应式）
      editPhoneModal: {
        visible: false,
        loading: false,
        field: null,
        form: {
          oldPhone: '',
          newPhone: '',
          userinfo: null,
        },
      },
      userinfo: {
        f_userinfo_id: '1003',
        f_user_id: 'U20230003',
        f_userfiles_id: 'F20230003',
        f_userinfo_code: '2023001236',
        f_user_name: '王五',
        f_name_pinyin: 'WW',
        f_user_type: '商业用户',
        f_balance: -250.0,
        f_project_money: 0,
        f_gas_type: '',
        f_sys_balance: 0,
        f_idnumber: '610104197801011234',
        f_user_phone: '13500135000',
        f_rent_phone: '',
        f_user_state: '欠费',
        f_comments: '欠费待催缴',
        f_address: '陕西省西安市碑林区南关正街88号1层商铺',
        f_open_date: '2015-09-20 14:00:00',
        f_install_date: '2015-09-25 10:30:00',
        f_people_num: 0,
        f_user_level: 'C级',
        f_olduserinfo_code: 'OLD2010001236',
        f_contract_id: 'HT2015092000136',

        f_customer: '',
        f_meter_type: '机表',
        f_meter_brand: '威星智能',
        f_meter_style: 'WX-G10',
        f_calculation: '',
        f_collection_type: '',
        f_table_state: '正常',
        f_balance_amount: 0,
        f_balance_gas: 0,
        f_jval: 0,
        f_arrears_fee: 250.0,
        f_initial_base: 0,
        f_meter_base: 15680.5,
        f_times: 0,
        f_iot_times: 0,
        f_total_fee: 0,
        f_total_fee_all: 0,
        f_deduction_gas: 50.5,
        f_total_gas_all: 0,
        f_total_gas: 0,
        f_write_totalfee: 0,
        f_meternumber: 'WX2015090012345',
        f_card_id: '',
        f_hascard: '否',
        f_metertitles: 'BF2015001236',
        f_gasproperties: '商业用气',
        f_price_name: '商业用气价格',
        f_remanent_money: 150.0,
        f_remanent_gas: 0,
        f_aroundmeter: '南向',
        f_book_name: '碑林区商业册',
        f_book_code: 'BL-SY-01',
        f_meter_book_sort: '45',
        f_position: '门面房',
        f_gas_person: '赵师傅',
        f_gas_date: '2015-09-25 11:00:00',
        f_inputtor: '孙抄表',
        f_hand_date: '2024-01-10 09:00:00',
        f_input_date: '2015-09-20 14:00:00',
        comments: '商业用户，需要定期催缴',
      },
    }
  },
  methods: {
    open () {
      // runLogic('querySingleUserDetail', {
      //   f_userinfo_code: '143400000003'
      // }, 'af-revenue').then(res => {
      //   this.userinfo = res
      //   this.visible = true
      // })
      this.visible = true
    },

    // 接收 XDescriptionsGroup 抛出的可编辑字段事件
    handleEditField ({ field, value, data }) {
      // 只处理客户电话字段；其它字段以后可以扩展
      if (field.dataKey !== 'f_user_phone') return

      this.editPhoneModal.visible = true
      this.editPhoneModal.loading = false
      this.editPhoneModal.field = field
      this.editPhoneModal.form.oldPhone = data.f_user_phone
      this.editPhoneModal.form.newPhone = data.f_user_phone
      // 保存当前这条用户数据（通常就是 this.userinfo）
      this.editPhoneModal.form.userinfo = data
    },

    // 关闭弹窗并重置
    closeEditPhoneModal () {
      this.editPhoneModal.visible = false
      this.editPhoneModal.loading = false
      this.editPhoneModal.field = null
      this.editPhoneModal.form = {
        oldPhone: '',
        newPhone: '',
        userinfo: null,
      }
    },

    // 确认修改手机号
    async confirmEditPhone () {
      const { newPhone } = this.editPhoneModal.form

      // 简单校验：非空 & 11 位数字
      if (!newPhone) {
        this.$message.error('请输入新手机号')
        return
      }
      if (!/^1\d{10}$/.test(newPhone)) {
        this.$message.error('请输入正确的11位手机号')
        return
      }

      this.editPhoneModal.loading = true

      // 组装 changeuserinfo 参数
      // const payload = {
      //   new_userphone: newPhone,
      //   f_userinfo_id: userinfo.f_userinfo_id,
      //   f_user_id: userinfo.f_user_id,
      //   // 以下字段建议真实项目中从登录用户信息里取，这里示例写死
      //   f_operator: '管理员',
      //   f_operatorid: '122138',
      //   f_orgid: '37710',
      //   f_orgname: '铜川天然气有限公司',
      //   f_depid: '45500',
      //   f_depname: '滨河营业厅',
      // }

      try {
        // 调用后端接口 changeuserinfo（按你们项目真实封装来）
        // await runLogic('changeuserinfo', payload, 'af-revenue')

        // 示例：接口成功后，更新本地展示数据
        this.userinfo.f_user_phone = newPhone
        this.$message.success('手机号修改成功')
        this.closeEditPhoneModal()
      } catch (e) {
        this.$message.error('手机号修改失败，请稍后重试')
      } finally {
        this.editPhoneModal.loading = false
      }
    },
  },
}
</script>

<template>
  <div>
    <a-space style="margin-bottom: 16px">
      <a-button @click="open"> 弹出式展示 </a-button>
    </a-space>

    <!-- 卡片展示 -->
    <a-card
      title="卡片展示"
      style="width: 230px"
      size="small"
      :bodyStyle="{
        padding: '0',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <x-descriptions-group
        config-name="ChargeCenterUserDetailConfig"
        :data="userinfo"
        service-name="af-revenue"
        @edit-field="handleEditField"
      >
        <!-- 插槽示例：配置中若有 type: slot、slotName: customSection 的分组，此处内容会渲染在该分组位置 -->
        <template #customSection="{ data }">
          <div class="slot-demo">
            <div class="slot-demo-title">自定义区块（插槽）</div>
            <div>当前用户：{{ data.f_user_name || '--' }}</div>
            <div>用户编号：{{ data.f_userinfo_code || '--' }}</div>
          </div>
        </template>
      </x-descriptions-group>
    </a-card>

    <!-- 弹出式展示 -->
    <a-drawer
      title="弹出式展示"
      placement="right"
      width="65vw"
      :visible="visible"
      @close="
        () => {
          visible = false;
        }
      "
    >
      <x-descriptions-group
        config-name="ChargeCenterUserDetailConfig"
        :data="userinfo"
        service-name="af-revenue"
        @edit-field="handleEditField"
      >
        <template #customSection="{ data }">
          <div class="slot-demo">
            <div class="slot-demo-title">自定义区块（插槽）</div>
            <div>当前用户：{{ data.f_user_name || '--' }}</div>
            <div>用户编号：{{ data.f_userinfo_code || '--' }}</div>
          </div>
        </template>
      </x-descriptions-group>
    </a-drawer>
    <!-- 修改手机号弹窗 -->
    <a-modal
      title="修改客户电话"
      :visible="editPhoneModal.visible"
      :confirmLoading="editPhoneModal.loading"
      @ok="confirmEditPhone"
      @cancel="closeEditPhoneModal"
      destroyOnClose
    >
      <a-form-model layout="vertical">
        <a-form-model-item label="原手机号">
          <a-input v-model="editPhoneModal.form.oldPhone" disabled />
        </a-form-model-item>
        <a-form-model-item label="新手机号">
          <a-input
            v-model="editPhoneModal.form.newPhone"
            maxlength="11"
            placeholder="请输入新手机号"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.slot-demo {
  padding: 8px 0;
  font-size: 13px;
  color: #262626;

  .slot-demo-title {
    color: @primary-color;
    font-weight: 500;
    margin-bottom: 8px;
  }
}
</style>
