<template>
  <div id="beingProcessed">
    <x-form-table
      title="我的工单"
      ref="xFormTable"
      :queryParamsName="queryParamsName"
      :fixed-query-form="{
        users_f_handler_id: currUser.id,
      }"
      @action="toDetail">
      <template #leftButton>
        <a-button @click="addApply">
          <a-icon type="plus"/>
          发起报建
        </a-button>
      </template>
    </x-form-table>
    <a-modal
      v-model="applyAddFlag"
      :footer="null"
      :dialog-style="{ top: '5rem' }"
      :z-index="1001"
      title="发起报建"
      :destroyOnClose="true">
      <x-add-native-form ref="xForm" @onSubmit="applySubmit"/>
    </a-modal>
    <WorkflowDetail
      ref="workFlow"
      @success="success"
      @nextClick="nextClick"
      @x-form-item-emit-func="handleFormItemEvent"
    >
    </WorkflowDetail>
    <!--  地址选择器  -->
    <address-select ref="addressSelect" @setAddress="setForm"></address-select>
  </div>
</template>

<script>
import WorkflowDetail from '@vue2-client/pages/WorkflowDetail/WorkflowDetail.vue'
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
import { mapState } from 'vuex'
import AddressSelect from '@vue2-client/pages/addressSelect/index.vue'
import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup'

export default {
  name: 'Apply',
  components: {
    XFormTable,
    XAddNativeForm,
    WorkflowDetail,
    AddressSelect,
    XFormGroup,
  },
  // 透传给子组件的方法（目前XFormTable接了）
  provide () {
    return {
      generalFunction: {
        setCancel: this.setCancel,
        chargeAdd: this.chargeAdd,
        addUser: this.addUser,
        editUser: this.editUser,
        addContract: this.addContract,
        addcharge: this.addcharge,
        updateFormData: this.updateFormData,
        chargeCancel: this.chargeCancel,
        chargeBatchRefund: this.chargeBatchRefund,
      }
    }
  },
  data () {
    return {
      // 查询配置文件名
      queryParamsName: 'ApplyProcessCRUD',
      // 发起报建弹框控制
      applyAddFlag: false,
      // 提交加载动画
      confirmLoading: false,
      refreshFn: null,
      chargeVisible: false
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
  },
  methods: {
    addApply () {
      console.log('打开了吗')
      this.applyAddFlag = true
      this.$nextTick(
        () => {
          getConfigByName('addApplyForm', 'af-apply', (res) => {
            this.$refs.xForm.init({
              businessType: '新增',
              title: '发起报建',
              ...res
            })
          })
        }
      )
    },
    applySubmit (formData) {
      runLogic('addApply', formData).then(
        res => {
          this.$message.success('发起报建成功')
          this.$refs.xFormTable.refreshTable(true)
          this.applyAddFlag = false
        }
      ).catch(() => {
        this.applyAddFlag = false
      })
    },
    success () {
      console.log('完工')
    },
    toDetail (record, id) {
      this.$refs.workFlow.init({
        workflowId: record.ab_f_workflow_id
      })
    },
    handleFormItemEvent (func, data, value) {
      console.log('打印一下：', func, data, value)
      if (func === 'selectAddress') {
        this.$refs.addressSelect.setFormShow()
      }
    },
    setForm (record) {
      this.$refs.workFlow.setFormValue({ address: record.f_address, address_id: record.f_address_id })
    },
    nextClick ({ form, formStep, workflowId }) {
      console.log('success', form, formStep, workflowId)
      const data = {
        workflowId,
        form,
        formStep
      }
      runLogic('applySubmitAfter', data, 'af-apply').then(
        res => {
          if (res) {
            // this.$message.success('提交成功！')
            this.$refs.xFormTable.refreshTable(true)
          }
        }
      )
    },
    // 协议作废
    setCancel (record, refreshFn) {
      this.$refs.cancelContract.setCancel(record, refreshFn)
    },
    // 增值收费新增
    chargeAdd (refreshFn) {
      this.$refs.addCharge.chargeAdd(this.$refs.workFlow.workflowId, refreshFn)
    },
    // 协议新增
    addContract (refreshFn) {
      this.$refs.addContract.addContract(this.$refs.workFlow.workflowId, refreshFn)
    },
    // 新增用户
    addUser (refreshFn) {
      if (this.$refs.workFlow.$refs.baseInformation.details.f_workflow_define_name != '团购报建流程') {
        this.$message.success('只有团购报建流程才可以新增用户信息!')
        return
      }
      this.$refs.addUser.addUser(this.$refs.workFlow.workflowId, refreshFn)
    },
    // 编辑用户
    editUser (record, refreshFn) {
      this.$refs.addUser.editUser(record, refreshFn)
    },
    // 新增收费
    addcharge (refreshFn) {
      this.$refs.addApplyCharge.addcharge(this.$refs.workFlow.workflowId, refreshFn)
    },
    // 报装缴费页面初始化
    updateFormData (workflowId) {
      if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '报装缴费') {
        runLogic('getApplyBusinessrecode', { f_workflow_id: workflowId }, 'af-apply').then((res) => {
          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm(res)
        })
      } else if (this.$refs.workFlow.$refs.baseInformation.details.f_sub_state == '合同签订') {
        runLogic('queryAgreementAmount', { workflowId: workflowId }, 'af-apply').then((res) => {
          this.$refs.workFlow.$refs.workflowHandle.$refs.xAddForm.setForm({ add_amount: res[0].f_contract_money })
        })
      }
    },
    // 增值收费单个数据的撤销功能
    chargeCancel (record, refreshFn) {
      this.$refs.cancel.chargeCancel(record, refreshFn)
    },
    // 批量撤销(退费)
    chargeBatchRefund (selectedRowKeys, selectedRows, refreshFn) {
      if (selectedRowKeys.length === 0 || selectedRows.length === 0) {
        this.$message.warn('请选择要退费的记录', 5)
        return
      }
      const workflowId = this.$refs.workFlow.workflowId
      this.$refs.batchRefund.selectRow(selectedRowKeys, selectedRows, refreshFn, workflowId)
    }
  }
}
</script>
