<template>
  <div
    id="review_Email"
    v-loading="pictLoading"
    class="view"
    element-loading-background="rgba(43, 48, 67, 0.65)"
  >
    <div class="crm_search">
      <el-form ref="formRef" label-position="" :model="search" label-width="">
        <el-row>
          <el-col :span="24" :md="24" :lg="24">
            <el-form-item style="margin-right: 10px">
              <el-input
                v-model.trim="search.cardName"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Placeholder.Input') + $t('Ucard.CardType.s2')"
                @keyup.enter="toSearch"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 10px">
              <el-select
                v-model="search.type"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Ucard.CardType.s1')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.CardType.t1')" value="Virtual"></el-option>
                <el-option :label="$t('Ucard.CardType.t2')" value="Physical"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="search.status"
                class="crm-border-radius-no"
                clearable
                :placeholder="$t('Ucard.CardType.s3')"
                @change="toSearch"
              >
                <el-option :label="$t('Ucard.CardType.t5')" value="offline"></el-option>
                <el-option :label="$t('Ucard.CardType.t6')" value="online"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="crm-border-radius-no crm-border-left-no" @click="toSearch">
                <el-icon><Search /></el-icon>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="search_action_btn">
            <span
              v-if="display['R-CardType-Update']?.show"
              class="crm-cursor"
              @click="updateCardTypes"
              ><span>{{ $t('Ucard.CardType.b1') }}</span></span
            >
          </div>
        </el-form-item>
      </el-form>

      <div class="card-mock-demo" style="margin: 30px 0">
        <el-table :data="mock_tableData" stripe style="margin-top: 20px; width: 100%">
          <el-table-column prop="type" align="left" :label="$t('Ucard.CardType.item2')">
          </el-table-column>
          <el-table-column prop="cardName" align="left" :label="$t('Ucard.CardType.item4')" />
          <el-table-column prop="cardDesc" align="left" :label="$t('Ucard.CardType.item5')" />
          <el-table-column prop="needCardHolder" align="left" :label="$t('Ucard.CardType.item15')">
            <template #default="scope">
              <el-tag :type="scope.row.needCardHolder === true ? 'success' : 'info'">{{
                scope.row.needCardHolder === true
                  ? $t('Ucard.CardType.t7')
                  : $t('Ucard.CardType.t8')
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="needDepositForActiveCard"
            align="left"
            :label="$t('Ucard.CardType.item16')"
          >
            <template #default="scope">
              <el-tag :type="scope.row.needDepositForActiveCard === true ? 'success' : 'info'">{{
                scope.row.needDepositForActiveCard === true
                  ? $t('Ucard.CardType.t7')
                  : $t('Ucard.CardType.t8')
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="left" :label="$t('Ucard.CardType.item8')">
            <template #default="scope">
              <div>
                {{ $t('Ucard.CardType.item9') }}: {{ scope.row.rechargeCurrency }},
                {{ $t('Ucard.CardType.item10') }}: {{ scope.row.rechargeMinQuota }},
                {{ $t('Ucard.CardType.item11') }}: {{ scope.row.rechargeMaxQuota }},
                {{ $t('Ucard.CardType.item12') }}: {{ scope.row.rechargeDigital }},
                {{ $t('card.CardType.item13') }}: {{ scope.row.rechargeFeeRate }} %,
                {{ $t('card.CardType.item14') }}:
                {{ scope.row.rechargeFixedFee }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="left" :label="$t('Ucard.CardType.item7')">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'online' ? 'success' : 'info'">{{
                scope.row.status === 'online' ? $t('Ucard.CardType.t6') : $t('Ucard.CardType.t5')
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isContact" align="left" :label="$t('card.CardType.item15')">
            <template #default="scope">
              <el-tag :type="!scope.row.isContact ? 'info' : 'success'">{{
                !scope.row.isContact ? $t('No') : $t('Yes')
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('Ucard.Business.item20')" align="center">
            <template #default="scope">
              <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-CardType-Edit']?.show"
                      :command="{ type: 1, row: scope.row }"
                    >
                      <el-icon><EditPen /></el-icon>
                      <span>{{ $t('R-CardType-Edit') }}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <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
        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>
    <el-dialog
      v-if="approvalAllDialog"
      v-model="approvalAllDialog"
      :title="$t('R-CardType-Edit')"
      width="900px"
    >
      <el-form
        ref="formDialogRef"
        :rules="rules"
        :model="form"
        label-width="130px"
        label-position="right"
        class="business-edit-form"
      >
        <el-form-item prop="cardName" :label="$t('card.CardType.item4')">
          <el-input v-model="form.cardName" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
        <el-form-item prop="cardDesc" :label="$t('card.CardType.item5')">
          <el-input
            v-model="form.cardDesc"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            :placeholder="$t('Placeholder.Input')"
          />
        </el-form-item>
        <el-form-item prop="rechargeMinQuota" :label="$t('card.CardType.item10')">
          <el-input v-model="form.rechargeMinQuota" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
        <el-form-item prop="rechargeMaxQuota" :label="$t('card.CardType.item11')">
          <el-input v-model="form.rechargeMaxQuota" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
        <el-form-item prop="rechargeDigital" :label="$t('card.CardType.item12')">
          <el-input v-model="form.rechargeDigital" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
        <el-form-item prop="rechargeFeeRate" :label="$t('card.CardType.item13')">
          <el-input v-model="form.rechargeFeeRate" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
        <el-form-item prop="rechargeFixedFee" :label="$t('card.CardType.item14')">
          <el-input v-model="form.rechargeFixedFee" :placeholder="$t('Placeholder.Input')" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="approvalAllDialog = false"
            ><span>{{ $t('Ucard.Business.p32') }}</span></el-button
          >
          <el-button type="primary" @click="updateCardTypesConfig">{{
            $t('card.Btn.Confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, watch, inject } from 'vue'
  import Service from '@/service/ucard'
  import Config from '@/config/index'
  import { useI18n } from 'vue-i18n'
  import { EditPen, Search } from '@element-plus/icons-vue'

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

  // 响应式数据
  const pictLoading = ref(false)
  const formRef = ref(null)
  const formDialogRef = ref(null)
  const approvalAllDialog = ref(false)

  const search = reactive({
    tag: 1,
    type: '',
    cardName: '',
    status: '',
  })

  const form = reactive({
    cardTypeId: null,
    cardName: null,
    cardDesc: null,
    bankCardBin: null,
    rechargeMinQuota: null,
    rechargeMaxQuota: null,
    rechargeDigital: null,
    rechargeFeeRate: null,
    rechargeFixedFee: null,
  })

  const rules = reactive({
    cardName: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    cardDesc: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    rechargeMinQuota: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    rechargeMaxQuota: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    rechargeDigital: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    rechargeFeeRate: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
    rechargeFixedFee: [
      {
        required: true,
        message: t('Placeholder.Input'),
        trigger: 'blur',
      },
    ],
  })

  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 updateCardTypesConfig = async () => {
    try {
      if (!formDialogRef.value) return

      const valid = await formDialogRef.value.validate()
      console.log(valid, 198)

      if (!valid) return
      let res = await Service.updateCardTypesConfig({ ...form })
      if (res.code == 200) {
        Object.assign(form, {
          cardTypeId: null,
          cardName: null,
          cardDesc: null,
          bankCardBin: null,
          rechargeMinQuota: null,
          rechargeMaxQuota: null,
          rechargeDigital: null,
          rechargeFeeRate: null,
          rechargeFixedFee: null,
        })
        approvalAllDialog.value = false
        toSearch()
      } else {
        pigeon.MessageError(res.msg)
      }
    } catch (error) {
      console.log(error)
    }
  }

  const handleCommand = (command) => {
    switch (command.type) {
      case 1: {
        Object.assign(form, {
          ...command.row,
        })
        console.log(form, command.row)
        approvalAllDialog.value = true
        break
      }
    }
  }

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

  const updateCardTypes = async () => {
    let res = await Service.updateCardTypes({})
    if (res.code == Code.StatusOK) {
      pigeon.MessageOK(t('Msg.SearchSuccess'))
      searchFunc()
    } else {
      pigeon.MessageError(res.msg)
    }
  }

  const searchFunc = async () => {
    pictLoading.value = true
    if (!display.value['R-CardType-Search']?.show) {
      pigeon.MessageWarning(t('Msg.NotDisplay'))
      pictLoading.value = false
      return
    }
    let res = await Service.cardTypesList({
      ...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.MessageOK(t('Msg.SearchSuccess'))
    } else {
      pigeon.MessageError(res.msg)
    }
    pictLoading.value = false
  }

  const handleSizeChange = (val) => {
    pagerInfo.row = val
    searchFunc()
  }

  const handleCurrentChange = (val) => {
    pagerInfo.current = val
    searchFunc()
  }

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

  // 监听器
  watch(
    () => search.tag,
    () => {
      search.type = ''
      search.cardName = ''
      search.status = ''
    }
  )
</script>

<style scoped lang="scss">
  #review_Email {
    .crm_search {
      .search_action_btn {
        .delete {
          background-color: #a1a1a1;
        }

        .delete.active {
          background-color: #368fec;
        }
      }
    }

    .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;
    }
  }
</style>
<style lang="scss">
  #review_Email {
    .dialog_header_w {
      .crm_search_down {
        width: 400px;
      }
    }
  }
</style>
