<template>
  <a-modal
    v-if="visible"
    v-model="visible"
    :footer="null"
    destroy-on-close
    width="80%"
    :class="$style.modal"
  >
    <a-card
      :class="$style.wrapper"
      :title="readOnly ? '统计预览(仅供查看，修改不生效)' : '统计预览'"
    >
      <sd-statis-form :key="updateKey" :onl-list-column-defs="onlListColumnDefs"></sd-statis-form>
      <a-button
        v-if="!readOnly"
        slot="extra"
        icon="save"
        type="link"
        :class="$style.save"
        @click="save"
      >
        保存
      </a-button>
    </a-card>
    <div :class="$style.config">
      <a-card title="字段设置">
        <div slot="extra">
          <span v-if="onlListColumnDefs.filter((column) => column.isStatisExport === 1).length"
            >最大导出明细数:
            <a-input-number
              v-model="maxDetailCount"
              :min="1"
              :max="500"
              class="sd-shrinking-input"
            ></a-input-number
          ></span>
          <a-input-search v-model="searchValue" placeholder="输入字段名过滤" />
        </div>
        <sd-table
          :row-selection="{}"
          :columns="configColumns"
          :data-source="searchValue ? onlListColumnDefsFilter : onlListColumnDefs"
          :sortable="searchValue ? false : true"
          size="small"
          :pagination="false"
          row-key="fieldId"
          @update:data-source="onlListColumnDefs = $event"
        >
          <template slot="fieldName" slot-scope="text, record">
            {{ text }}<a-tag v-if="record.attr?.isSystem === 1" :class="$style.tag">系统</a-tag>
          </template>
          <template
            v-for="col in [
              'isStatisWhere',
              'isStatisGroup',
              'isStatisSum',
              'isStatisExport',
              'isStatisDrill',
            ]"
            :slot="col"
            slot-scope="text, record"
          >
            <a-checkbox
              :key="col"
              :disabled="
                (col === 'isStatisSum' && record.fieldType !== 'number') ||
                  (col !== 'isStatisWhere' && record.fieldId.indexOf('.') !== -1)
              "
              :checked="record[col] === 1"
              @change="(e) => settingChange(e, record, col)"
            />
          </template>
        </sd-table>
      </a-card>
    </div>
  </a-modal>
</template>

<script>
import axios from '@/common/services/axios-instance'
import { message } from 'ant-design-vue'
import components from './_import-components/sd-business-statis-config-import'

export default {
  name: 'SdBusinessStatisConfig',
  metaInfo: {
    title: '统计设置',
  },
  components,
  props: {
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      searchValue: '',
      mergeType: [],
      configColumns: [
        {
          title: '字段',
          dataIndex: 'fieldName',
          scopedSlots: { customRender: 'fieldName' },
        },
        {
          title: '查询',
          dataIndex: 'isStatisWhere',
          scopedSlots: { customRender: 'isStatisWhere' },
        },
        {
          title: '统计分类',
          dataIndex: 'isStatisGroup',
          scopedSlots: { customRender: 'isStatisGroup' },
        },
        {
          title: '允许导出',
          dataIndex: 'isStatisExport',
          scopedSlots: { customRender: 'isStatisExport' },
        },
        {
          title: '展示数据',
          dataIndex: 'isStatisSum',
          scopedSlots: { customRender: 'isStatisSum' },
        },
        {
          title: '统计列表',
          dataIndex: 'isStatisDrill',
          scopedSlots: { customRender: 'isStatisDrill' },
        },
      ],
      onlListColumnDefs: [],
      updateKey: 0,
      maxDetailCount: 500,
    }
  },
  computed: {
    columns() {
      return this.onlListColumnDefs
        .filter((item) => item.show)
        .map((item) => ({
          title: item.fieldName,
          dataIndex: item.fieldId,
          sorter: item.sort === 1,
        }))
    },

    sortFields: {
      get: function() {
        return this.onlListColumnDefs
          .filter((item) => item.sortMode)
          .sort((a, b) => a.sortSeq - b.sortSeq)
      },
      set: function(newValue) {
        newValue.forEach((item, index) => {
          item.sortSeq = index
        })
      },
    },
    onlListColumnDefsFilter() {
      return this.onlListColumnDefs.filter((item) => item.fieldName.includes(this.searchValue))
    },
  },
  watch: {
    initValues: function() {
      this.updateKey++
    },
  },
  methods: {
    settingChange(e, record, col) {
      record[col] = e.target.checked ? 1 : 0
      if (col === 'isStatisGroup') record.isStatisDrill = record.isStatisGroup
    },

    save() {
      this.onlListColumnDefs.forEach((item, index) => (item.statisOrderNum = index))
      axios
        .post('api/framework/v1/onlineform/saveStatisConfig', {
          pageId: this.pageId,
          formId: this.formId,
          onlStatisColumns: this.onlListColumnDefs,
          maxDetailCount: this.maxDetailCount,
        })
        .then(() => {
          message.success('保存成功')
        })
    },
    processReq(req) {
      req.method = 'get'
      return req
    },
    processRes(res) {
      return { datas: [], total: 0 }
    },
    show(id) {
      axios.get(`api/framework/v1/onlinerun/getStatisConfig/${id}`).then((res) => {
        this.visible = true
        this.pageId = res.data.pageId
        this.formId = res.data.formId
        if (res.data.maxDetailCount) this.maxDetailCount = res.data.maxDetailCount
        this.onlListColumnDefs = res.data.onlStatisColumns.sort(
          (a, b) => a.statisOrderNum - b.statisOrderNum
        )
        // .map((item) => {
        //   const oTmp = {}
        //   ;['isStatisWhere', 'isStatisGroup', 'isStatisSum'].forEach((name) => {
        //     oTmp[name] = 0
        //   })

        //   return Object.assign(item, oTmp)
        // })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.config {
  td:first-child {
    :global(.ant-checkbox-wrapper) {
      display: none;
    }
  }
  :global(.ant-table-selection-column) {
    :global(.ant-checkbox-wrapper) {
      display: none;
    }
  }
  :global(.ant-table colgroup > col.ant-table-selection-col) {
    width: 30px;
  }

  :global(.anticon-setting) {
    display: none;
  }
  :global .ant-card-extra {
    width: 40%;
    > div {
      display: flex;
      justify-content: flex-end;
    }
    :global .ant-input-search {
      width: 50%;
      margin-left: 20px;
    }
  }
}
.save {
  height: auto;
  padding-right: 70px;
}
.modal {
  :global(.ant-modal) {
    // 覆盖style标签里面的样式
    /* stylelint-disable-next-line  */
    top: 0 !important;
  }
  :global(.ant-modal-body) {
    height: 100vh;
    max-height: 100vh;
    padding: 0;
  }
}
.tag {
  margin-left: 5px;
}
</style>
