<template>
  <a-card>
    <a-tabs v-model="activeKey" @change="callbacktab">
      <a-tab-pane :key="1" tab="常用语维护">
        <sd-commonwords-list></sd-commonwords-list>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="个人群组维护">
        <sd-data-table-ex
          ref="dataTable2"
          form-id="oaPersonalUserGroup"
          page-id="personal/usergroup/personalUserGroup"
          :columns="columns2"
          show-selection
          :actions="actions"
          :filter-expressions="expressions"
          :search-fields="['groupName']"
        >
          <template v-slot:form>
            <sd-form-item name="groupName"></sd-form-item>
            <sd-form-item name="members"></sd-form-item>
            <sd-form-item name="weight"></sd-form-item>
          </template>
          <template slot="groupName" slot-scope="text, record">
            <a @click="rowClick(record)">
              {{ text }}
            </a>
          </template>
        </sd-data-table-ex>
        <a-modal
          v-model="visible"
          :title="'个人用户群组'"
          destroy-on-close
          v-bind="{ width: 800 }"
          :mask-closable="false"
          :confirm-loading="confirmLoading"
          @ok="save"
        >
          <sd-form ref="form" :init-values="groupForm">
            <sd-form-item name="groupName"></sd-form-item>
            <sd-form-item name="members"></sd-form-item>
            <sd-form-item name="weight"></sd-form-item>
          </sd-form>
        </a-modal>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="个性化设置">
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <template v-for="item in personalsetesData">
            <a-form-item v-if="item.paramId !== '3'" :key="item.paramId" :label="item.paramName">
              <!-- <a-radio-group
              v-if="item.paramId === '3'"
              v-model="item.paramValue"
              @change="saveConfig(item)"
            >
              <a-radio
                v-for="(option, index) in approvalModeOptions"
                :key="index"
                :value="option.value"
              >
                <a-tooltip v-if="option.value === '1'">
                  <template slot="title">
                    您的当前客户端分辨率为{{
                      resolution
                    }}，为获得更好体验，建议分辨率大于1920*1080时开启此功能
                  </template>
                  {{ option.label }}
                  <a-icon type="question-circle" />
                </a-tooltip>
                <span v-else>
                  {{ option.label }}
                </span>
              </a-radio>
            </a-radio-group> -->
              <a-switch
                :default-checked="item.paramValue === '1' ? true : false"
                @change="onChangeSwitch(item)"
              />
            </a-form-item>
          </template>
        </a-form>
      </a-tab-pane>
      <a-tab-pane :key="4" tab="性能设置">
        <div :class="$style.performance">
          <a-radio-group v-model="performance" @change="changeSetting">
            <a-tooltip
              v-for="(option, optionIndex) in selectOptions"
              :key="optionIndex"
              :title="option.tooltip"
            >
              <a-radio :value="option.value">{{ option.label }}</a-radio>
            </a-tooltip>
          </a-radio-group>
          <ul :class="$style.hintul">
            <span :class="$style.hintspan"
              >{{ performance === 'quality' ? '效果最佳' : '性能最优' }}模式下会{{
                performance === 'quality' ? '开启' : '关闭'
              }}的特效:</span
            >
            <li v-for="(item, index) in specialEffects" :key="index">{{ item }} </li>
          </ul>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import storeMixin from '@/common/store-mixin'
import { setPerformance } from '@/frequently/performance-setting'
import { sdLocalStorage } from '@/common/services/storage-service'
import axios from '@/common/services/axios-instance'
import TableColumnTypes from '../common/services/table-column-types'
import TableActionTypes from '../common/services/table-action-types'
import components from './_import-components/sd-frequently-settings-import'
import frequentlyService from './frequently-service'
export default {
  name: 'SdFrequentlySettings',
  metaInfo: {
    title: '常用设置',
  },
  components,
  mixins: [storeMixin],
  data() {
    return {
      approvalModeOptions: [
        { label: '普通模式', value: '0' },
        { label: '双屏模式', value: '1' },
        { label: '极简审批模式', value: '2' },
      ],
      expressions: [
        {
          name: 'creatorAccount',
          op: 'eq',
          stringValue: `@@{currentUser}@@`,
          dataType: 'str',
        },
      ],
      activeKey: 1,
      columns2: [
        {
          title: '群组名称',
          dataIndex: 'groupName',
          scopedSlots: { customRender: 'groupName' },
        },
        {
          title: '排序号',
          dataIndex: 'weight',
          width: '150px',
          defaultSortOrder: 'descend', // 没有点击任何排序列时，默认的排序列
          sorter: false,
          scopedSlots: { customRender: 'weight' },
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sorter: true,
          sdRender: TableColumnTypes.dateTime,
        },
      ],
      actions: [
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
        {
          label: '新建',
          permission: null, // 纯前端操作，不需要权限控制
          id: 'xinjian', // 没写type，一般按钮
          type: 'primary',
          callback: () => {
            this.visible = true
          },
        },
      ],
      groupForm: [
        {
          name: 'groupName',
          caption: '群组名称',
          dataType: 'string',
          required: true,
          attr: {},
        },
        {
          name: 'members',
          caption: '群组成员',
          dataType: 'selectperson',
          required: true,
          attr: {
            hierarchical: '1',
            multiple: 'true',
            selectionType: 'USER',
          },
        },
        {
          name: 'weight',
          caption: '排序号',
          dataType: 'number',
          attr: {
            decimalPrecision: '0',
          },
        },
      ],
      personalsetesData: [],
      performance: sdLocalStorage.getItem('performanceSetting') || 'quality',
      specialEffects: ['滑动特效', '悬停动效', '过渡动效', '滚动动效', '下拉框动效'],
      selectOptions: [
        {
          label: '效果最佳',
          value: 'quality',
          tooltip: '建议在客户端性能较高的机器上启用',
        },
        {
          label: '性能最优',
          value: 'performance',
          tooltip: '建议在客户端性能较差的机器上启用',
        },
      ],
      visible: false,
      confirmLoading: false,
    }
  },
  computed: {
    resolution() {
      return (
        parseInt(window.screen.width / window.devicePixelRatio) +
        '*' +
        parseInt(window.screen.height / window.devicePixelRatio)
      )
    },
  },
  methods: {
    // switch切换
    onChangeSwitch(e) {
      e.paramValue = e.paramValue === '1' ? '0' : '1'
      this.saveConfig(e)
    },
    saveConfig(item) {
      const inputs = [
        {
          name: 'paramId',
          value: item.paramId,
        },
        {
          name: 'paramValue',
          value: item.paramValue,
        },
      ]
      const params = {
        eventId: 'save',
        inputs,
        pageFlowId: 'string',
        pagePath: 'base/personalset/oaPersonalset',
      }
      // 保存更新个性化设置
      frequentlyService.savePersonalsetes(params).then((res) => {
        if (res && res.data) {
          Message.success('设置成功')
        }
      })
    },
    // 切换tab
    callbacktab(val) {
      if (val === 3) {
        // 获取个性化设置列表
        frequentlyService.getPersonalsetesList().then((res) => {
          // console.log(res)
          if (res && res.data) {
            this.personalsetesData = res.data
          }
        })
      }
    },
    changeSetting(e) {
      this.performance = e.target.value
      sdLocalStorage.setItem('performanceSetting', this.performance)
      setPerformance()
    },
    save() {
      this.confirmLoading = true
      this.$refs.form.validateFields().then(() => {
        axios[this.$refs.form.getFieldValue('id') ? 'put' : 'post'](
          // post是新建，put是更新
          'api/framework/v1/usergroup-manager/usergroup',
          {
            ...this.$refs.form.getFieldsValue(),
          }
        )
          .then(() => {
            this.visible = false
            this.$refs.dataTable2.refresh()
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
    rowClick(record) {
      axios.get('api/framework/v1/usergroup-manager/usergroup/' + record.id).then((res) => {
        this.visible = true
        this.$nextTick().then(() => {
          Object.keys(res.data).forEach((key) => {
            this.$refs.form.setFieldValue(key, res.data[key])
          })
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.performance {
  padding-left: 20%;
  .hintul {
    margin-top: 10px;
    .hintspan {
      margin-left: -20px;
    }
  }
}
</style>
