<template>
    <ych-modal
      :fullscreen="true"
      :title="title"
      :visible="visible"
      :confirmLoading="spinning > 0"
      @ok="handleOk"
      @cancel="handleCancel"
      :cancelText="$locale('m.common.button.close')">
      <a-spin :spinning="spinning > 0">
        <vxe-toolbar>
          <template #buttons>
            <a-button type="primary" icon="plus" @click="insertRow('xTable', dataSource, initData, 'name')">{{ $locale('m.common.button.add') }}</a-button>
            <span class="action-button-gap"></span>
            <a-button type="default" icon="minus" @click="deleteRow('xTable', dataSource,'id')">{{ $locale('m.common.button.delete') }}</a-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          header-align="center"
          border
          :scroll-y="{enabled: false}"
          show-header-overflow
          show-overflow
          :edit-rules="validRules"
          :row-config="{isHover: true, keyField: 'id'}"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          :data="dataSource">
          <vxe-column type="seq" :title="$locale('m.common.label.number')" width="50" align="center"></vxe-column>
          <vxe-column type="checkbox" width="50" align="center"></vxe-column>
          <vxe-column field="name" :title="$locale('m.common.label.name')" :edit-render="{name: 'input'}" :min-width="150"></vxe-column>
          <vxe-column field="isDefaultQuery" :title="$locale('m.components.label.isDefaultQuery')" :edit-render="{}" :min-width="80" align="center">
            <template #default="{ row }">
              <vxe-checkbox v-model="row.isDefaultQuery" checked-value="Y" unchecked-value="N"></vxe-checkbox>
            </template>
            <template #edit="{ row }">
              <vxe-checkbox v-model="row.isDefaultQuery" checked-value="Y" unchecked-value="N"></vxe-checkbox>
            </template>
          </vxe-column>
          <vxe-column field="queryConditon" :title="$locale('m.eform.appreport.other.tab_query')" :edit-render="{}" :min-width="130" align="center">
            <template #default="{ row }">
              <a-badge
                :dot="!!(row.queryConditon && row.queryConditon.length>0)">
                <a-button
                  type="link" size="small" @click="showConfigButton(row)">{{$locale('m.common.button.config')}}
                </a-button>
              </a-badge>
            </template>
            <template #edit="{ row }">
              <a-badge
                :dot="!!(row.queryConditon  && row.queryConditon.length>0)">
                <a-button
                  type="link" size="small" @click="showConfigButton(row)">{{$locale('m.common.button.config')}}
                </a-button>
              </a-badge>
            </template>
          </vxe-column>
        </vxe-table>
      </a-spin>
      <custom-query-modal ref="modalForm" @selectFinished="showConfigOk" :initQueryColumns="queryColumns" :dict-options="dictOptions" :dict-options-flg="dictOptionsFlg"></custom-query-modal>
    </ych-modal>
</template>

<script>
  import {getAction,httpAction} from '../../utils/manage'
  import {YchVxeTableMixin} from '../../utils/YchVxeTableMixin'
  import CustomQueryModal from './CustomQueryModal'
  import { saveCustomWithDataId } from '../../utils/api/api'
  import { getCustomVaueByTypeAndDataId } from '../../utils/api/api'
  import locleUtil from "../../utils/LocleUtil";
  export default {
    name: 'CustomQueryView',
    mixins: [YchVxeTableMixin],
    components: {
      CustomQueryModal
    },
    props: {
      queryColumns: {
        type: Array,
        default: () => []
      },
      customQueryList:{
        type: Array,
        default: () => []
      },
      dictOptions: {
        type: Object,
        default: {}
      },
      dictOptionsFlg: Number,
      viewCode:String
    },
    data() {
      return {
        dataSource: [],
        initData: {
          name: '',
          isDefaultQuery: 'N',
          queryConditon:''
        },
        record: null,
        validRules: {
          name: [
            {required: true, message: this.$locale('m.components.verify.name')},
          ],
          queryConditon: [
            {required: true, message: this.$locale('m.components.verify.queryConditon'),trigger:'manual'},
          ],
        },
      }
    },
    methods: {
      $locale(params){
        return locleUtil.getLocale(params)
      },
      handSet(){
        this.dataSource = this.customQueryList
        this.visible = true
      },
      showConfigButton(record){
        this.record = record
        this.$refs.modalForm.open(record.queryConditon, record)
      },
      showConfigOk(json) {
        this.record['queryConditon'] = json
      },
      async handleOk() {
        let params = {
          type:'customQuery',
          dataId: this.viewCode,
          name:'content'
        };
        if(this.dataSource.length<1){
          params['value']= ""
        }else{
          const tableData = await this.getTableDataSource(this.$refs.xTable, this.dataSource);
          let defaultQueryCount = 0
          tableData.forEach(item=>{
            if(item.isDefaultQuery == "Y"){
              defaultQueryCount++
            }
          })
          /*if(defaultQueryCount<1){
            this.$message.warning(this.$locale('m.components.verify.customQuery_set_default_query'))
            return
          }*/
          if(defaultQueryCount>1){
            this.$message.warning(this.$locale('m.components.verify.customQuery_only_set_one_default_query'))
            return
          }
          params['value']=JSON.stringify(tableData)
        }
        this.spinning++
        saveCustomWithDataId(params).finally(() => {
          this.spinning--
          this.visible = false
        })
      },
    },
  }
</script>

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