<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <div class="filter-container">
      <!-- 上下架 -->
      <el-select
        v-model="listQuery.shelf"
        style="width: 120px"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option
          v-for="(item, index) in shelfStatusOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <!-- 添加 按钮 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="createCountry"
      >
        {{ $t('pages.payOpenCountry.action.add') }}
      </el-button>

      <!-- 刷新 按钮 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        {{ $t('pages.payOpenCountry.action.refresh') }}
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('pages.payOpenCountry.word.loading')"
      fit
      highlight-current-row
    >
      <!-- 国家信息 -->
      <el-table-column width="200" :label="$t('pages.payOpenCountry.table.countryInfo')" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 45px; height: 30px"
            :src="scope.row.country.nationalFlag"
            :preview-src-list="[scope.row.country.nationalFlag]"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>

      <!-- 国家名称 -->
      <el-table-column
        width="200"
        :label="$t('pages.payOpenCountry.table.countryName')"
        prop="country.aliasName"
        align="center"
      />

      <!-- 国家货币 -->
      <el-table-column :label="$t('pages.payOpenCountry.table.currency')" prop="currency" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="clickInputCurrency(scope.row)">
            <span v-if="!scope.row.currency">{{ $t('pages.payOpenCountry.action.inputCurrency') }}</span>
            <span v-else>{{ scope.row.currency }}</span>
          </el-button>
        </template>
      </el-table-column>

      <!-- 汇率 -->
      <el-table-column
        :label="$t('pages.payOpenCountry.table.usdExchangeRate')"
        prop="usdExchangeRate"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="clickUpdateRate(scope.row)">
            <span v-if="!scope.row.usdExchangeRate">{{ $t('pages.payOpenCountry.action.inputExchangeRate') }}</span>
            <span v-else>{{ scope.row.usdExchangeRate }}</span>
          </el-button>
        </template>
      </el-table-column>

      <!-- 展示权重 -->
      <el-table-column :label="$t('pages.payOpenCountry.table.sortWeight')" prop="sort" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="clickInputUpdateSort(scope.row)">
            <span v-if="!scope.row.sort">{{ $t('pages.payOpenCountry.action.inputSortWeight') }}</span>
            <span v-else>{{ scope.row.sort }}</span>
          </el-button>
        </template>
      </el-table-column>

      <!-- 上下架 -->
      <el-table-column :label="$t('pages.payOpenCountry.table.shelf')" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.shelf"
            :active-value="true"
            :inactive-value="false"
            @change="handleSwitchChange(scope.row)"
          />
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" :label="$t('pages.payOpenCountry.table.actions')" align="center" width="100">
        <!-- 关联渠道 -->
        <template slot-scope="scope">
          <el-button type="text" @click="clickAssociateChannel(scope.row)"
            >{{ $t('pages.payOpenCountry.action.associateChannels') }}</el-button
          >
          <!-- <el-button type="text" @click="clickAssociateChannelDetails(scope.row)">详情</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.cursor"
      :limit.sync="listQuery.limit"
      @pagination="renderData"
    />

    <!-- 关联渠道组件 -->
    <associated-channels
      v-if="formAssociatedChannelVisible"
      :row="selectedRow"
      @close="
        formAssociatedChannelVisible = false;
        selectedRow = {};
      "
    />

    <country-select v-if="countrySelectVisible" @close="countrySelectClose" />
  </div>
</template>
<script>
import {
  pagePayOpenCounty,
  updatePayOpenCountyShelf,
  updatePayOpenCountryExchangeRate,
  updatePayOpenCountryCurrent,
  updatePayOpenCountrySort
} from "@/api/sys-pay";
import Pagination from "@/components/Pagination";
import AssociatedChannels from "./associated-channels";
import CountrySelect from "./country-select";
export default {
  name: "CountryCodeInfo",
  components: { Pagination, AssociatedChannels, CountrySelect },
  data() {
    return {
      shelfStatus: [
        { value: true, name: "Enabled" },
        { value: false, name: "Disabled" }
      ],
      countrySelectVisible: false,
      formAssociatedChannelVisible: false,
      selectedRow: {},
      //
      formVisible: false,
      textOptTitle: "",
      list: [],
      total: 0,
      listQuery: {
        cursor: 1,
        limit: 30,
        shelf: true,
        countryId: "",
        id: ""
      },
      listLoading: true,
      uploadLoading: false
    };
  },
  created() {
    this.renderData();
  },
  computed: {
    shelfStatusOptions() {
      return this.shelfStatus.map(item => ({
        ...item,
        label: this.getShelfStatusName(item.value, item.name)
      }));
    }
  },
  methods: {
    renderData(isClean) {
      const that = this;
      that.listLoading = true;
      if (isClean === true) {
        that.list = [];
        that.listQuery.cursor = 1;
      }
      pagePayOpenCounty(that.listQuery).then(res => {
        const { body } = res;
        that.total = body.total || 0;
        that.list = body.records;
        that.listLoading = false;
      });
    },
    handleSearch() {
      this.renderData(true);
    },
    createCountry() {
      this.countrySelectVisible = true;
    },
    countrySelectClose() {
      this.countrySelectVisible = false;
      this.renderData();
    },
    //
    handleClose() {
      // 去除校验
      this.$refs.form.clearValidate();
      this.formVisible = false;
    },
    clickInputUpdateSort(row) {
      const that = this;
      that
        .$prompt(this.$t('pages.payOpenCountry.prompt.inputSortWeight'), this.$t('pages.payOpenCountry.prompt.title'), {
          confirmButtonText: this.$t('pages.payOpenCountry.action.confirm'),
          cancelButtonText: this.$t('pages.payOpenCountry.action.cancel'),
          inputPattern: /^\d{1,5}$/,
          inputErrorMessage: this.$t('pages.payOpenCountry.validation.sortRange'),
          closeOnClickModal: false
        })
        .then(({ value }) => {
          updatePayOpenCountrySort(row.id, value)
            .then(res => {
              that.$opsMessage.success();
              that.renderData();
            })
            .catch(er => {
              console.error(er);
              that.$opsMessage.fail();
            });
        })
        .catch(() => {});
    },
    clickInputCurrency(row) {
      const that = this;
      that
        .$prompt(this.$t('pages.payOpenCountry.prompt.inputCurrency'), this.$t('pages.payOpenCountry.prompt.title'), {
          confirmButtonText: this.$t('pages.payOpenCountry.action.confirm'),
          cancelButtonText: this.$t('pages.payOpenCountry.action.cancel'),
          closeOnClickModal: false
        })
        .then(({ value }) => {
          updatePayOpenCountryCurrent(row.id, value)
            .then(res => {
              that.$opsMessage.success();
              that.renderData();
            })
            .catch(er => {
              console.error(er);
              that.$opsMessage.fail();
            });
        })
        .catch(() => {});
    },
    clickUpdateRate(row) {
      const that = this;
      that
        .$prompt(this.$t('pages.payOpenCountry.prompt.inputExchangeRate'), this.$t('pages.payOpenCountry.prompt.title'), {
          confirmButtonText: this.$t('pages.payOpenCountry.action.confirm'),
          cancelButtonText: this.$t('pages.payOpenCountry.action.cancel'),
          inputPattern: /^\d{1,5}(\.\d{0,8})?$/,
          inputErrorMessage: this.$t('pages.payOpenCountry.validation.exchangeRateRange'),
          closeOnClickModal: false
        })
        .then(({ value }) => {
          updatePayOpenCountryExchangeRate(row.id, value)
            .then(res => {
              that.$opsMessage.success();
              that.renderData();
            })
            .catch(er => {
              console.error(er);
              that.$opsMessage.fail();
            });
        })
        .catch(() => {});
    },
    clickAssociateChannel(row) {
      const that = this;
      that.selectedRow = row;
      that.formAssociatedChannelVisible = true;
    },
    clickAssociateChannelDetails() {},
    getShelfStatusName(value, fallback) {
      const key = `pages.payOpenCountry.shelfStatus.${value}`;
      const translatedName = this.$t(key);
      return translatedName === key ? fallback : translatedName;
    },
    handleSwitchChange(row) {
      updatePayOpenCountyShelf(row.id, row.shelf)
        .then(res => {})
        .catch(er => {
          row.shelf = !row.shelf;
        });
    }
  }
};
</script>
<style scoped lang="scss">
.bottom {
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 25px;
  .line {
    display: flex;
    > div {
      width: 100%;
    }
  }
}
</style>
