<template>
  <div
    id="system_Refusal"
    v-loading="pictLoading"
    class="view"
    :element-loading-background="'rgba(43, 48, 67, 0.65)'"
    :element-loading-spinner="'el-icon-loading'"
  >
    <div class="crm_search">
      <el-form ref="formRef" :model="search" label-width="">
        <el-row>
          <el-col :span="24" :md="24" :lg="24">
            <el-form-item>
              <el-select
                v-model="search.type"
                class="crm-border-radius-no"
                :placeholder="t('Placeholder.Choose')"
              >
                <el-option
                  v-for="option in typeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                class="crm-border-radius-no crm-border-left-no"
                :icon="Search"
                @click="toSearch"
              ></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div v-if="display['R-Refusal-Add']?.show" class="search_action_btn">
            <span class="crm-cursor" @click="addRefusal">
              <el-icon><Plus /></el-icon>
              <span>{{ t('Btn.Add') }}</span>
            </span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="mock_tableData" stripe style="width: 100%">
      <el-table-column prop="" align="left" :label="t('Label.SubIndex')">
        <template #default="{ row }">
          {{ row.subIndex || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="" align="left" :label="t('Label.CN')">
        <template #default="{ row }">
          {{ row.content || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="" align="left" :label="t('Label.EN')">
        <template #default="{ row }">
          {{ row.enContent || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="" align="center" :label="t('Label.Action')">
        <template #default="{ row }">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link crm-cursor">
              <i style="font-weight: bold; font-size: 20px" class="iconfont iconcaidan"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-if="display['R-Refusal-Update']?.show"
                  :command="{ type: 'editor', row: row }"
                >
                  <el-icon><Operation /></el-icon>
                  <span>{{ t('Btn.Editor') }}</span>
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="search.type != '-1' && display['R-Refusal-Delete']?.show"
                  :command="{ type: 'delete', id: row.id }"
                >
                  <el-icon><Delete /></el-icon>
                  <span>{{ t('Btn.Delete') }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pagerInfo.rowTotal" class="crm_pagination">
      <div class="crm_page_total">
        <span>{{ t('Page.total.item1') }}</span>
        <span>{{ pagerInfo.rowTotal }}</span>
        <span>{{ t('Page.total.item2') }}</span>
      </div>
      <el-pagination
        v-model:current-page="pagerInfo.current"
        class="page"
        background
        layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagerInfo.row"
        :total="pagerInfo.rowTotal"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

    <!-- 组别新增/修改弹出 -->
    <Add
      :dialog-info-trading-add="dialogInfoTradingAdd"
      :editor="editor"
      :my-info="myInfo"
      :form-list="formList"
      @confirm-to-reload="confirmToReload"
      @close-add="closeAdd"
    ></Add>
    <div v-if="dialogInfoTradingAdd" class="crm_verified_info_mask" @click="closeDiaAdd"></div>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { ElMessageBox } from 'element-plus'
  import Service from '@/service/system'
  import Config from '@/config/index'
  import { Delete, Operation, Plus, Search } from '@element-plus/icons-vue'
  import Add from './components/Add.vue'

  const { t } = useI18n()
  const { Code } = Config
  const Session = inject('session')
  const pigeon = inject('pigeon')

  // 响应式数据
  const pictLoading = ref(false)
  const formRef = ref(null)
  const dialogInfoTradingAdd = ref(false)
  const editor = ref('')
  const myInfo = ref({})
  const formList = ref({})

  const search = reactive({
    type: 1,
  })

  const mock_tableData = ref([])

  const pagerInfo = reactive({
    row: 10,
    current: 1,
    pageTotal: 0,
    rowTotal: 0,
  })

  // 计算属性
  const display = computed(() => {
    return JSON.parse(Session.Get('display', true))
  })

  // 类型选项
  const typeOptions = computed(() => [
    { label: t('R-VerifiedUser'), value: 1 },
    { label: t('R-PendingAccount'), value: 2 },
    { label: t('R-LeverAdjust'), value: 3 },
    { label: t('R-PasswordReset'), value: 4 },
    { label: t('R-BelongingAdjust'), value: 5 },
    { label: t('R-ActivitiesApply'), value: 6 },
    { label: t('R-CommissionAdjust'), value: 7 },
    { label: t('R-HangUndo'), value: 8 },
    { label: t('R-AgentApply'), value: 9 },
    { label: t('R-Financial'), value: 10 },
    { label: t('R-Real'), value: 11 },
    { label: t('R-PammManagerValid'), value: 12 },
    { label: t('Documentary.R-SignalSourceApply'), value: 13 },
    { label: t('Documentary.R-RecruitmentReview'), value: 14 },
    { label: t('R-Card'), value: 15 },
    { label: t('R-System'), value: -1 },
  ])

  // 生命周期
  onMounted(() => {
    searchFunc()
  })

  // 监听搜索类型变化
  watch(
    () => search.type,
    () => {
      searchFunc()
    }
  )

  // 方法
  // 点击操作的回调
  const handleCommand = (command) => {
    if (command.type == 'editor') {
      editor.value = 1
      refusalSingle(command.row.id)
    } else if (command.type == 'delete') {
      deleteReal(command.id)
    }
  }

  // 新增
  const closeDiaAdd = () => {
    dialogInfoTradingAdd.value = false
    editor.value = ''
  }

  const closeAdd = (val) => {
    dialogInfoTradingAdd.value = val
  }

  const addRefusal = () => {
    editor.value = ''
    myInfo.value.type = search.type
    dialogInfoTradingAdd.value = true
  }

  const confirmToReload = () => {
    closeDiaAdd()
    searchFunc()
  }

  // 删除
  const deleteReal = async (id) => {
    try {
      await ElMessageBox.confirm(t('Msg.Delete'), t('Msg.SystemPrompt'), {
        confirmButtonText: t('Btn.Confirm'),
        cancelButtonText: t('Btn.Cancel'),
        type: 'warning',
      })

      const res = await Service.reasonsRefusalDelete({ ids: [id] })
      if (res.code == Code.StatusOK) {
        pigeon.success(t('Msg.DeleteSuccess'))
        searchFunc()
      } else {
        pigeon.error(res.msg)
      }
    } catch (error) {
      if (error !== 'cancel') {
        pigeon.error(t('Msg.SystemError'))
      }
    }
  }

  // 原因single
  const refusalSingle = async (id) => {
    const res = await Service.reasonsRefusalSingle({
      id: id,
    })
    if (res.code == Code.StatusOK) {
      formList.value = res.data
      dialogInfoTradingAdd.value = true
      pigeon.success(t('Msg.SearchSuccess'))
    } else {
      pigeon.error(res.msg)
    }
  }

  // 获取列表数据
  const searchFunc = async () => {
    pictLoading.value = true
    if (!display.value['R-Refusal-Search']?.show) {
      pigeon.warning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }
    const res = await Service.reasonsRefusalSearchList({
      ...search,
      page: {
        current: pagerInfo.current,
        row: pagerInfo.row,
      },
    })
    if (res.code == Code.StatusOK) {
      mock_tableData.value = res.data
      if (res.page != null) {
        pagerInfo.rowTotal = res.page.rowTotal
        pagerInfo.pageTotal = res.page.pageTotal
      } else {
        pagerInfo.rowTotal = 0
      }
      pigeon.success(t('Msg.SearchSuccess'))
    } else {
      pigeon.error(res.msg)
    }
    pictLoading.value = false
  }

  // 搜索
  const toSearch = () => {
    pagerInfo.current = 1
    searchFunc()
  }

  // 分页返回数据
  const handleSizeChange = (val) => {
    pagerInfo.row = val
    searchFunc()
  }

  const handleCurrentChange = (val) => {
    pagerInfo.current = val
    searchFunc()
  }
</script>
<style scoped lang="scss">
  #system_Refusal {
    .crm_search {
      .search_action_btn {
        .delete {
          background-color: #a1a1a1;
        }
        .delete.active {
          background-color: #368fec;
        }
      }
      .chooseLang {
        margin-top: 2px;
        margin-right: 10px;
        > span {
          border: 1px solid #dcdfe6;
          padding: 0 8px;
          min-width: 100px;
          display: inline-block;
          height: 32px;
          line-height: 32px;
          box-sizing: border-box;
          text-align: center;
        }
        span.active {
          background-color: #368fec;
          border-color: #368fec;
          color: #ffffff;
        }
      }
    }
    .el-table .state {
      display: inline-block;
      min-width: 80px;
      max-width: 150px;
      box-sizing: border-box;
      line-height: 1.5;
      border-radius: 2px;
      padding: 2px 10px;
      color: #ffffff;
    }
    .crm_verified_info_mask_trading {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(43, 48, 67, 0.65);
      z-index: 88;
    }
  }
</style>
<style lang="scss">
  #system_Refusal {
    .dialog_header_w {
      .crm_search_down {
        width: 400px;
      }
    }
  }
</style>
