<template>
  <q-btn class="q-ml-md q-px-md" :color="(queryMsg.customResult.list && queryMsg.whereId == 0) || queryMsg.whereId != 0 ? 'primary' : 'dark'" label="自定义筛选" dense outline>
    <q-popup-proxy ref="customRef" transition-show="scale" transition-hide="scale" class="q-py-sm">
      <q-list style="width: 250px" dense>
        <q-item clickable v-ripple @click="openWhereBoxHander(1)">
          <q-item-section>
            <q-item-label>自定义筛选</q-item-label>
          </q-item-section>
          <q-item-section side>
            <i class="iconfont icon-arrow-right f12"></i>
          </q-item-section>
        </q-item>
        <q-separator />
        <q-item-label header class="row">
          <div class="col f12">常用筛选</div>
          <div class="text-dark">
            <i class="iconfont icon-setting f12 q-mr-md cursor-pointer" @click="settingWhereList"></i>
            <i class="iconfont icon-plus-circle f12 cursor-pointer" @click="openWhereBoxHander(2)"></i>
          </div>
        </q-item-label>
        <q-item v-for="(x, i) in pageData.whereList" :key="i" @click="updateWhereHandler(x.Id)" :active="x.Id == queryMsg.whereId" active-class="text-primary" clickable v-ripple>
          <q-item-section>
            <q-item-label>{{ x.Name }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-separator />
        <q-item clickable v-ripple v-close-popup @click="deleteWhereHandler">
          <q-item-section>
            <q-item-label class="text-primary">清空筛选条件</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-popup-proxy>
  </q-btn>
  <q-dialog v-model="pageData.showColWhereCard">
    <custom-where :columns="columns" :dataId="pageData.dataId" :current="queryMsg.customResult" :code="pageCode" :mode="pageData.mode" @change-reload="changeWhereHandler"></custom-where>
  </q-dialog>
  <q-dialog v-model="pageData.showWhereList">
    <where-list :code="pageCode" @update-where="editorWhereHandler"></where-list>
  </q-dialog>
</template>

<script>
import { reactive, ref } from 'vue'
import CustomWhere from './customWhere.vue'
import whereList from './whereList.vue'
import CustomQueryService from '@/api/customQuery'
import { UseDirection } from '@/config/direction'
export default {
  components: { CustomWhere, whereList },
  props: {
    /**
     * 页面功能编码
     */
    pageCode: String,
    /**
     * @description 列数组
     */
    columns: Array
  },
  setup(props, context) {
    console.log(props.columns)
    const queryMsg = reactive({
      whereId: 0,
      customResult: {
        list: null,
        condition: 1
      }
    })
    const customRef = ref(null)
    const pageData = reactive({
      showColWhereCard: false,
      showWhereList: false,
      mode: 1, //声明分类ID，适用于修改分类对应的自定义筛选【mode=3】
      dataId: 0,
      whereList: []
    })

    const openWhereBoxHander = m => {
      pageData.mode = m
      pageData.showColWhereCard = true
    }

    const deleteWhereHandler = () => {
      queryMsg.whereId = 0
      queryMsg.customResult = {
        list: null,
        condition: 1
      }
      context.emit('empty-where')
    }

    const updateWhereHandler = id => {
      queryMsg.whereId = id
      queryMsg.customResult = {}
      //@TODO: 处理变更
      let params = {
        SelectList: [],
        AddCondition: 1
      }
      CustomQueryService.queryCustomById(id).then(r => {
        if (r.data && r.data.Code == 1) {
          params.SelectList = JSON.parse(r.data.Data.SelectList)
          params.SelectList = UseDirection.MappingAuto(params.SelectList)
          params.AddCondition = r.data.Data.AddCondition
        }
        context.emit('update-where', params)
      })
    }

    //#region 初始化已保存的自定义信息

    const loadWhereList = () => {
      pageData.whereList = []
      CustomQueryService.queryMyCustom(props.pageCode).then(r => {
        pageData.whereList = r.data.Data
      })
    }

    loadWhereList()

    //#endregion

    //#region 处理数据回调

    const changeWhereHandler = (code, result) => {
      console.log('触发了吗？')
      if (code == 'SAVE') {
        loadWhereList()
        console.log(queryMsg.whereId,result)
        if (result.Id == queryMsg.whereId) {
          let params = {}
          params.AddCondition = result.AddCondition
          params.SelectList = UseDirection.MappingAuto(JSON.parse(result.SelectList))
          context.emit('update-where', params)
        }
      } else if (code == 'CUSTOM') {
        queryMsg.customResult = JSON.parse(JSON.stringify(result))
        let params = {}
        params.AddCondition = result.condition
        params.SelectList = UseDirection.MappingAuto(result.list)
        context.emit('update-where', params)
      }
      pageData.showColWhereCard = false
      customRef.value.hide()
    }

    const editorWhereHandler = id => {
      pageData.showWhereList = false

      if (id > 0) {
        pageData.mode = 3 //3 代表编辑
        pageData.dataId = id
      } else {
        pageData.mode = 2
      }

      pageData.showColWhereCard = true
    }

    const settingWhereList = () => {
      pageData.showColWhereCard = false
      pageData.showWhereList = true
    }

    const clearWhereHandler = () => {
      queryMsg.whereId = 0
      queryMsg.customResult = {}
    }

    //#endregion

    return { queryMsg, pageData, customRef, clearWhereHandler, openWhereBoxHander, updateWhereHandler, changeWhereHandler, editorWhereHandler, deleteWhereHandler, settingWhereList }
  }
}
</script>

<style></style>
