<script setup>
import Designer from '@vue2-client/components/g2Charts/designer.vue'
import { nextTick, ref } from 'vue'

const designer = ref(null)
const visible = ref(false)

const onClick = () => {
  visible.value = true
  nextTick(() => {
    designer.value.init({
      config: {
        type: 'line',
        title: '',
        description: '',
        chartsTools: ['legend', 'label', 'xyVisible', 'point', 'grid'],
        dataSource: 'curCrud',
        xFieldSortBy: 'value',
        xFieldSortType: 'asc',
        queryParamsName: 'ChargeQueryCRUD',
        yFieldType: 'sum',
        yField: [{ mold: 'sum' }],
        Group: false,
        colorIndex: 0,
        serviceName: 'af-revenue',
      },
      curdColumn: [
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          defaultExport: true,
          type: 'string',
          title: '收费编号',
          lazyLoad: 'false',
          key: 's.id',
          queryType: '=',
        },
        {
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          formType: 'input',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          defaultExport: true,
          type: 'string',
          title: '用户编号',
          lazyLoad: 'false',
          key: 'info.f_userinfo_code',
          queryType: '=',
        },
        {
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          formType: 'input',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '用户名称',
          lazyLoad: 'false',
          key: 's.f_user_name',
          queryType: '=',
        },
        {
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          formType: 'input',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '用户电话',
          lazyLoad: 'false',
          key: 'info.f_user_phone',
          queryType: '=',
        },
        {
          dataModeArray: ['queryForm', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          tagColor: '',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          title: '用户地址',
          lazyLoad: 'false',
          key: 's.f_address',
          queryType: '=',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '身份证号',
          lazyLoad: 'false',
          key: 'info.f_idnumber',
          queryType: '=',
        },
        {
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          formType: 'rangePicker',
          queryFormDefault: 'curDay',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'true',
          },
          slot: {
            type: 'dateTime',
          },
          acceptCount: 3,
          type: 'string',
          title: '收费日期',
          lazyLoad: 'false',
          key: 's.f_operate_date',
          queryType: 'BETWEEN',
        },
        {
          formType: 'treeSelect',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '气表品牌',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 'uf.f_gasbrand_id',
          dataModeArray: ['queryForm', 'sqlQueryItem', 'sqlQueryCondition'],
          selectKey: 'logic@getMeterTypeAndMeterBrand',
          selectType: 'logic',
          key: 's.f_meter_brand',
        },
        {
          formType: 'checkbox',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '查询用收款方式Dic',
            type: 'badge',
            value: 10,
          },
          acceptCount: 3,
          type: 'string',
          title: '收款方式',
          lazyLoad: 'false',
          queryType: 'IN',
          slotKeyMap: '查询用收款方式Dic',
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          selectKey: 'config@查询用收款方式Dic',
          selectType: 'config',
          key: 's.f_payment',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '购气次数',
          lazyLoad: 'false',
          key: 's.f_times',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '气量',
          lazyLoad: 'false',
          key: 's.f_pregas',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '金额',
          lazyLoad: 'false',
          key: 's.f_preamount',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'tableSummary'],
          summaryConfig: 'getFieldSummary',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
          },
          slot: {
            type: 'towDecimal',
          },
          acceptCount: 3,
          type: 'string',
          title: '收款',
          lazyLoad: 'false',
          key: 's.f_collection',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          default: '0',
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '上期表底数',
          lazyLoad: 'false',
          key: 's.f_last_tablebase',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '本期表底数',
          lazyLoad: 'false',
          key: 's.f_tablebase',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '上期结余',
          lazyLoad: 'false',
          key: 's.f_balance',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '本期结余',
          lazyLoad: 'false',
          key: 's.f_curbalance',
        },
        {
          formType: 'select',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '支付渠道Dic',
            type: 'badge',
            value: 10,
          },
          acceptCount: 3,
          type: 'string',
          title: '支付渠道',
          lazyLoad: 'false',
          queryType: '=',
          slotKeyMap: '支付渠道Dic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@支付渠道Dic',
          selectType: 'config',
          key: 'wx.f_bank_type',
        },
        {
          formType: 'checkbox',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '收费类型Dic',
            type: 'badge',
            value: 10,
          },
          acceptCount: 3,
          type: 'string',
          title: '收费类型',
          lazyLoad: 'false',
          queryType: 'IN',
          slotKeyMap: '收费类型Dic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@收费类型Dic',
          selectType: 'config',
          key: 's.f_type',
        },
        {
          formType: 'checkbox',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '收费状态Dic',
            type: 'badge',
          },
          acceptCount: 3,
          title: '收费状态',
          lazyLoad: 'false',
          queryType: 'IN',
          slotKeyMap: '收费状态Dic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@收费状态Dic',
          queryFormDefault: ['有效'],
          selectType: 'config',
          key: 's.f_state',
        },
        {
          formType: 'treeSelect',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '气表品牌',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 'uf.f_gasbrand_id',
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          selectKey: 'logic@getMeterTypeAndMeterBrand',
          selectType: 'logic',
          key: 's.f_meter_brand',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '用户表号',
          lazyLoad: 'false',
          key: 'uf.f_meternumber',
          queryType: '=',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '气表编号',
          lazyLoad: 'false',
          key: 's.f_user_id',
          queryType: '=',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '气表卡号',
          lazyLoad: 'false',
          key: 's.f_card_id',
          queryType: '=',
        },
        {
          formType: 'select',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: ' dict_user_type',
            type: 'badge',
            value: 10,
          },
          acceptCount: 3,
          type: 'string',
          title: '用户类型',
          lazyLoad: 'false',
          queryType: '=',
          slotKeyMap: ' dict_user_type',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@ dict_user_type',
          selectType: 'config',
          key: 's.f_user_type',
        },
        {
          formType: 'select',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '用气性质Dic',
            type: 'badge',
          },
          acceptCount: 3,
          title: '用气性质',
          lazyLoad: 'false',
          queryType: '=',
          slotKeyMap: '用气性质Dic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@用气性质Dic',
          selectType: 'config',
          key: 's.f_gasproperties',
        },
        {
          formType: 'treeSelect',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: 'getPriceDicLogic',
            type: 'badge',
            value: 10,
          },
          acceptCount: 3,
          type: 'string',
          title: '气价名称',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 'uf.f_price_id',
          slotKeyMap: 'getPriceDicLogic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'logic@getPriceDicLogic',
          selectType: 'logic',
          key: 'sp.f_price_name',
        },
        {
          formType: 'select',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          slot: {
            keyMap: '写卡状态Dic',
            type: 'badge',
          },
          acceptCount: 3,
          type: 'string',
          title: '写卡状态',
          lazyLoad: 'false',
          queryType: '=',
          slotKeyMap: '写卡状态Dic',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'config@写卡状态Dic',
          selectType: 'config',
          key: 's.f_write_card',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '业务单号',
          lazyLoad: 'false',
          key: 's.f_serial_number',
          queryType: '=',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '一阶气量',
          lazyLoad: 'false',
          key: 's.f_stair_gas1',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '一阶单价',
          lazyLoad: 'false',
          key: 's.f_stair_price1',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '一阶金额',
          lazyLoad: 'false',
          key: 's.f_stair_money1',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '二阶气量',
          lazyLoad: 'false',
          key: 's.f_stair_gas2',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '二阶单价',
          lazyLoad: 'false',
          key: 's.f_stair_price2',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'tableSummary'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '二阶金额',
          lazyLoad: 'false',
          key: 's.f_stair_money2',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '三阶气量',
          lazyLoad: 'false',
          key: 's.f_stair_gas3',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          title: '三阶单价',
          lazyLoad: 'false',
          key: 's.f_stair_price3',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'tableSummary'],
          column: [],
          rule: {
            required: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '三阶金额',
          lazyLoad: 'false',
          key: 's.f_stair_money3',
        },
        {
          dataModeArray: ['table', 'sqlQueryItem', 'sqlQueryCondition'],
          formType: 'input',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '用户地址',
          lazyLoad: 'false',
          key: 's.f_address',
          queryType: 'LIKE',
        },
        {
          formType: 'checkbox',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '小区名称',
          lazyLoad: 'true',
          queryType: 'IN',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'logic@getAreaListByOrgIdDic',
          selectType: 'logic',
          key: 'ua.f_residential_area',
        },
        {
          formType: 'treeSelect',
          tagColor: 'blue',
          forceQueryDefault: true,
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '组织机构',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 's.f_orgid',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'search@获取分公司',
          queryFormDefault: 'curOrgId',
          selectType: 'search',
          key: 's.f_orgname',
        },
        {
          formType: 'checkbox',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '所属部门',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 's.f_depid',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'search@根据表单项[s.f_orgid]联动部门',
          selectType: 'search',
          key: 's.f_depname',
        },
        {
          formType: 'checkbox',
          tagColor: 'blue',
          column: [],
          rule: {
            required: 'false',
            queryRequired: 'false',
          },
          acceptCount: 3,
          type: 'string',
          title: '操作人员',
          lazyLoad: 'false',
          queryType: 'IN',
          selectKeyName: 's.f_operatorid',
          dataModeArray: [
            'queryForm',
            'table',
            'sqlQueryItem',
            'sqlQueryCondition',
          ],
          selectKey: 'search@根据表单项[s.f_depid]联动人员',
          selectType: 'search',
          key: 's.f_operator',
        },
      ],
    })
  })
}
</script>

<template>
  <div>
    <a-button @click="onClick">打开设计器</a-button>
    <a-modal
      width="75vw"
      v-model="visible"
      :keyboard="false"
      :dialogStyle="{ top: '4%' }"
    >
      <Designer ref="designer"></Designer>
    </a-modal>
  </div>
</template>

<style scoped lang="less"></style>
