<template>
  <div>
    <a-modal
      v-model="importConfirm"
      :title="mode === 'app' ? '应用导入' : '表单导入'"
      :width="1000"
      destroy-on-close
      @ok="confirmOk"
      @cancel="confirmCancel"
    >
      <div slot="footer">
        <div>
          <div v-if="importCurrent === 1 || mode === 'form'" :class="$style.explain"
            >如果流程和对应表单覆盖和忽略的操作不同，则需要重新绑定流程关联的表单、对应表单后端事件、业务类型和编号。</div
          >
          <span v-if="importCurrent === 0 && mode === 'app'">
            <a-button @click="confirmCancel">取消</a-button>
            <a-button @click="importCurrent = 1">下一步</a-button>
          </span>
          <span v-else-if="mode === 'form'">
            <a-button @click="confirmCancel">取消</a-button>
            <a-button type="primary" @click="confirmOk">确定</a-button>
          </span>
          <span v-else>
            <a-button @click="importCurrent = 0">上一步</a-button>
            <a-button type="primary" @click="confirmOk">确定</a-button>
          </span>
        </div>
      </div>
      <a-card>
        <div v-if="mode === 'app'" :class="$style.step">
          <a-steps v-model="importCurrent" size="small">
            <a-step title="应用相关参数导入" />
            <a-step title="表单相关参数导入" />
          </a-steps>
        </div>
        <div v-if="importCurrent === 0 && mode === 'app'">
          <a-form-item
            v-for="(item, index) in appConfig"
            :key="index"
            :class="$style.item"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
            :label="item.label"
          >
            <a-radio-group v-model="appConfigForm[item.name]">
              <a-radio :value="true">
                覆盖
              </a-radio>
              <a-radio :value="false">
                忽略
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
        <a-table
          v-else
          :columns="confirmColumns"
          children-column-name="flowConfigs"
          :data-source="moduleImportParams"
          :row-key="(record) => record.moduleId || record.key"
        >
          <span slot="actions" slot-scope="text, record">
            <a-radio-group
              v-model="record.importForm"
              :disabled="record.disabled"
              @change="(value) => radioChange(value, record)"
            >
              <a-radio :value="true">
                导入
              </a-radio>
              <a-radio :value="false">
                忽略
              </a-radio>
            </a-radio-group>
          </span>
          <a
            v-if="record.importForm"
            slot="config"
            slot-scope="text, record"
            @click="openConfig(record)"
            >配置信息
          </a>
        </a-table>
      </a-card>
    </a-modal>
    <a-modal
      v-model="formImportant"
      title="表单配置"
      :width="1000"
      destroy-on-close
      @ok="formImportantOk"
      @cancel="formImportantCancel"
    >
      <div>
        <div v-for="(item, index) in formConfig" :key="index">
          <a-form-item
            v-if="formRecord['show' + item.name]"
            :class="$style.item"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
            :label="item.label"
          >
            <a-radio-group v-model="formRecord['import' + item.name]">
              <a-radio :value="true">
                导入
              </a-radio>
              <a-radio :value="false">
                忽略
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import components from './_import-components/sd-important-config-import'
const confirmColumns = [
  {
    dataIndex: 'expand',
    width: '10px',
  },
  {
    dataIndex: 'sortNumber',
    title: '序号',
  },
  {
    dataIndex: 'moduleName',
    title: '表单名称',
  },
  {
    dataIndex: 'configName',
    title: '流程名称',
  },
  {
    dataIndex: 'exist',
    title: '状态',
    customRender: (text, record, index) => (record.exist ? '已存在' : '不存在'),
  },
  {
    dataIndex: 'actions',
    title: '操作',
    scopedSlots: { customRender: 'actions' },
  },
  {
    dataIndex: '',
    scopedSlots: { customRender: 'config' },
  },
]
export default {
  name: 'SdImportantConfig',
  metaInfo: {
    title: 'SdImportantConfig',
  },
  components,
  props: {
    mode: {
      type: String,
      default: 'app',
    },
  },
  data() {
    return {
      importPermission: undefined,
      importCurrent: 0,
      formImportant: false,
      confirmColumns,
      moduleImportParams: [],
      importConfirm: false,
      appConfigForm: {},
      appConfig: [
        { label: '权限集', name: 'importPermission' },
        { label: '导航', name: 'importMenu' },
        { label: '树形字典', name: 'importTreeDict' },
        { label: '系统参数', name: 'importDict' },
        { label: '编号配置', name: 'importAutoNumber' },
        { label: '正文模板', name: 'importRedHead' },
        { label: '打印模板', name: 'importPrintTemp' },
      ],
      formConfig: [
        { label: '流程业务配置', name: 'BusinessType' },
        { label: '流程配置', name: 'Flow' },
        { label: '导航配置', name: 'Menu' },
        { label: '列表配置', name: 'ListConfig' },
        { label: '统计配置', name: 'Statistics' },
        { label: '后端事件配置', name: 'BackEvent' },
        { label: '前端事件配置', name: 'FrontEvent' },
        { label: '表单关联配置', name: 'FormAssociation' },
        { label: '全文检索配置', name: 'FTSearch' },
        { label: '定时任务', name: 'TimedTask' },
      ],
      formRecord: {},
    }
  },
  methods: {
    show(info) {
      this.importCurrent = 0
      this.importConfirm = true
      this.moduleImportParams = info.moduleImportParams
      this.appConfigForm = info.appConfigForm
    },
    radioChange(e, record) {
      const value = e.target.value
      if (record.flowConfigs) {
        record.flowConfigs.forEach((c) => {
          if (!value) c.importConfig = false
          c.disabled = !value
        })
      }
      Object.assign(
        record,
        this.formConfig
          .map((item) => item.name)
          .reduce((total, r) => {
            total[r] = value
            return total
          }, {})
      )
    },
    confirmOk() {
      this.importConfirm = false
      this.importing = true
      const info = {
        moduleImportParams: this.moduleImportParams,
      }
      if (this.mode === 'app') {
        info.appConfigForm = this.appConfigForm
      }
      this.$emit('configOk', info)
    },
    confirmCancel() {
      this.importConfirm = false
      this.moduleImportParams = []
    },
    openConfig(record) {
      this.formRecord = { ...record }
      this.formImportant = true
    },
    formImportantOk() {
      this.moduleImportParams.forEach((item, index, arr) => {
        if (item.moduleId === this.formRecord.moduleId) {
          arr[index] = this.formRecord
        }
      })
      this.formImportant = false
    },
    formImportantCancel() {
      this.formImportant = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$explain-size: 13px;
.explain {
  float: left;
  font-size: $explain-size;
  color: $alert-error-icon-color;
}
.item {
  margin-bottom: 12px;
}
</style>
