<template>
  <div class="app-container-assist">
    <div class="filter-container">
      <el-select
        v-model="listQuery.sysOrigin"
        :placeholder="$t('pages.regionConfig.filter.system')"
        style="width:120px;"
        class="filter-item"
        @change="handleSysOriginSearch"
      >
        <el-option
          v-for="item in permissionsSysOriginPlatforms"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left;">
            <sys-origin-icon :icon="item.value" :desc="item.value"
          /></span>
          <span style="float: left;margin-left:10px">{{ item.label }}</span>
        </el-option>
      </el-select>
      <el-select
        v-model="listQuery.regionId"
        v-loading="loading"
        clearable
        style="width:150px;"
        class="filter-item"
        :placeholder="$t('pages.regionConfig.placeholder.select')"
        @change="handleSearch"
      >
        <el-option
          v-for="(item, index) in regions"
          :key="index"
          :label="item.regionName"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.type"
        clearable
        :placeholder="$t('pages.regionConfig.assist.filter.type')"
        style="width:250px;"
        class="filter-item"
        @change="handleSearch"
      >
        <el-option
          v-for="item in regionAssistTypes"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        {{ $t('pages.regionConfig.assist.action.search') }}
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        {{ $t('pages.regionConfig.action.add') }}
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column :label="$t('pages.regionConfig.table.regionName')" prop="regionName" align="center" />
      <el-table-column :label="$t('pages.regionConfig.assist.table.type')" align="center" prop="typeName" />
      <el-table-column :label="$t('pages.regionConfig.assist.table.value')" align="center" min-width="100">
        <template slot-scope="scope">
          {{ getDesc(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" :label="$t('pages.regionConfig.table.createdAt')" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('pages.regionConfig.table.actions')" align="center" width="50">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleUpdate(scope.row)"
                >{{ $t('pages.regionConfig.action.edit') }}</el-dropdown-item
              >
              <el-dropdown-item @click.native="handleDelete(scope.row)"
                >{{ $t('pages.regionConfig.assist.action.delete') }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      :title="dialogTitle"
      :visible.sync="formVisible"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div v-loading="submitLoading">
        <div class="drawer-form">
          <el-form ref="form" :model="form" :rules="rules" label-width="110px">
            <el-form-item label-width="0">
              <el-col :md="12" :sm="24" class="col-margin">
                <el-form-item prop="type" :label="$t('pages.regionConfig.assist.filter.type')">
                  <el-select
                    v-model="form.type"
                    :placeholder="$t('pages.regionConfig.assist.filter.type')"
                    style="width:100%;"
                    class="filter-item"
                    :disabled="form.id !== ''"
                  >
                    <el-option
                      v-for="item in regionAssistTypes"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item prop="regionId" :label="$t('pages.regionConfig.table.regionName')">
                  <el-select
                    v-model="form.regionId"
                    v-loading="loading"
                    style="width:100%;"
                    class="filter-item"
                    :placeholder="$t('pages.regionConfig.placeholder.select')"
                    :disabled="form.id !== ''"
                  >
                    <el-option
                      v-for="(item, index) in regions"
                      :key="index"
                      :label="item.regionName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item
              v-if="'DIAMOND_EXCHANGE_GOLD' === form.type"
              label-width="110px"
            >
                <el-input
                  v-model="form.data"
                  v-number
                  :placeholder="$t('pages.regionConfig.assist.placeholder.diamondExchangeGoldRatio')"
                />
            </el-form-item>
            <el-form-item
              v-if="'MIN_EXCHANGE_DIAMOND' === form.type"
              label-width="110px"
            >
                <el-input
                  v-model="form.data"
                  v-number
                  :placeholder="$t('pages.regionConfig.assist.placeholder.minExchangeDiamond')"
                />
            </el-form-item>
            <el-form-item
              v-if="'WITHDRAW_PROPORTION_TIPS' === form.type"
              label-width="0"
            >
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.gteUsd')">
                  <el-input
                    v-model="data.start"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.gteUsd')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.lteUsd')">
                  <el-input
                    v-model="data.end"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.lteUsd')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.oneUsdGold')">
                  <el-input
                    v-model="data.value"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.oneUsdGold')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.tipText')">
                  <el-input
                    v-model="data.text"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.tipText')"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item
              v-if="'COIN_SELLER_WITHDRAW_PROPORTION_TIPS' === form.type"
              label-width="0"
            >
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.gteUsd')">
                  <el-input
                    v-model="data.start"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.gteUsd')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.lteUsd')">
                  <el-input
                    v-model="data.end"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.lteUsd')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.oneUsdGold')">
                  <el-input
                    v-model="data.value"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.oneUsdGold')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.tipText')">
                  <el-input
                    v-model="data.text"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.tipText')"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item
              v-if="'WITHDRAW_PROPORTION_DIAMOND_TIPS' === form.type"
              label-width="0"
            >
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.gteDiamond')">
                  <el-input
                    v-model="data.start"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.gteDiamond')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.lteDiamond')">
                  <el-input
                    v-model="data.end"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.lteDiamond')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.oneDiamondGold')">
                  <el-input
                    v-model="data.value"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.oneDiamondGold')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.tipText')">
                  <el-input
                    v-model="data.text"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.tipText')"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item
              v-if="'WITHDRAW_PROPORTION_DIAMOND_USD_TIPS' === form.type"
              label-width="0"
            >
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.gteDiamond')">
                  <el-input
                    v-model="data.start"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.gteDiamond')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.lteDiamond')">
                  <el-input
                    v-model="data.end"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.lteDiamond')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.oneUsdDiamond')">
                  <el-input
                    v-model="data.value"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.oneUsdDiamond')"
                  />
                </el-form-item>
              </el-col>
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.tipText')">
                  <el-input
                    v-model="data.text"
                    :placeholder="$t('pages.regionConfig.assist.placeholder.tipText')"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label-width="0">
              <el-col
                v-if="'RESIDUE_TARGET_EXCHANGE_PROPORTION' === form.type"
                :md="12"
                :sm="24"
              >
                <el-form-item
                  :label="$t('pages.regionConfig.assist.form.targetExchangeLabel', { target: form.data > 0 ? form.data : '?' })"
                  prop="data"
                >
                  <el-input
                    v-model="form.data"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.targetQuantity')"
                  />
                </el-form-item>
              </el-col>
              <el-col
                v-if="
                  'ROOM_CONTRIBUTION_ACTIVITY_RATIO' === form.type ||
                    'GIFT_TO_OWN_GOLD_RATIO' === form.type ||
                    'GIFT_TO_OTHER_GOLD_RATIO' === form.type ||
                    'HOST_TERMINATION_FEE' === form.type ||
                    'WITHDRAWAL_COMMISSION_RATIO' === form.type ||
                    'GIFT_TO_OTHER_DIAMOND_RATIO' === form.type ||
                    'GIFT_TO_OTHER_DIAMOND_RATIO_AGENCY' === form.type ||
                    'GIFT_TO_OWN_GOLD_RATIO_AGENCY' === form.type ||
                    'GIFT_TO_OTHER_GOLD_RATIO_AGENCY' === form.type ||
                    'GIFT_TARGET_RATIO' === form.type ||
                    'GIFT_TO_OTHER_GOLD_RATIO_NORMAL' === form.type ||
                    'GIFT_TO_OWN_GOLD_RATIO_NORMAL' === form.type
                "
                :md="12"
                :sm="24"
              >
                <el-form-item :label="$t('pages.regionConfig.assist.table.value')" prop="data">
                  <el-input
                    v-model="form.data"
                    v-number
                    :placeholder="$t('pages.regionConfig.assist.placeholder.content')"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item
              v-if="'ROOM_CONTRIBUTION_ACTIVITY_RATIO' === form.type"
              label-width="0"
            >
              <el-col :md="12" :sm="24">
                <el-form-item :label="$t('pages.regionConfig.assist.form.image')">
                  <upload-image
                    v-model="form.imgUrl"
                    :file-dir="$application.fileBucket.back"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div class="drawer-footer">
          <el-button type="primary" @click="submitForm()">{{ $t('pages.regionConfig.action.save') }}</el-button>
          <el-button @click="handleClose()">{{ $t('pages.regionConfig.assist.action.cancel') }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  regionAssistConfigTable,
  updateRegionAssistConfig,
  addRegionAssistConfig,
  deleteRegionAssistConfig,
  regionConfigTable
} from "@/api/sys";
import { regionAssistTypes } from "@/constant/type";
import { mapGetters } from "vuex";

function getFormData() {
  return {
    id: "",
    sysOrigin: "",
    regionId: "",
    type: "",
    data: "",
    imgUrl: ""
  };
}
export default {
  name: "RegionAssistConfig",
  data() {
    return {
      list: [],
      regionAssistTypes,
      regions: [],
      loading: false,
      listQuery: {
        sysOrigin: "ATYOU",
        type: "",
        regionId: ""
      },
      formVisible: false,
      textOptTitle: "",
      form: getFormData(),
      submitLoading: false,
      rules: {
        regionId: [{ required: true, message: this.$t("pages.regionConfig.assist.validation.selectRegion"), trigger: "blur" }],
        type: [{ required: true, message: this.$t("pages.regionConfig.assist.validation.selectType"), trigger: "blur" }],
        data: [{ required: true, message: this.$t("pages.regionConfig.assist.validation.enterValue"), trigger: "blur" }]
      },
      data: {},
      listLoading: true
    };
  },
  // 支持小数点
  directives: {
    number: {
      bind(el) {
        el.addEventListener("input", e => {
          e.target.value = e.target.value
            .replace(/[^0-9.]/g, "")
            .replace(/(\..*)\./g, "$1");
        });
      }
    }
  },
  computed: {
    ...mapGetters(["permissionsSysOriginPlatforms"]),
    dialogTitle() {
      if (!this.textOptTitle) {
        return "";
      }
      return this.$t("pages.regionConfig.dialog.title", {
        action: this.$t(`pages.regionConfig.action.${this.textOptTitle}`),
        system: this.listQuery.sysOrigin
      });
    }
  },
  created() {
    this.listRegion();
    this.renderData();
  },
  methods: {
    renderData() {
      const that = this;
      that.listLoading = true;
      regionAssistConfigTable(that.listQuery).then(res => {
        const { body } = res;
        that.list = body;
        that.listLoading = false;
      });
    },
    handleSearch() {
      this.renderData();
    },
    handleSysOriginSearch() {
      this.listRegion();
      this.renderData();
    },
    listRegion() {
      const that = this;
      that.loading = true;
      regionConfigTable({ sysOrigin: that.listQuery.sysOrigin })
        .then(res => {
          that.regions = res.body || [];
          that.loading = false;
        })
        .catch(er => {
          that.loading = false;
        });
    },
    submitForm() {
      const that = this;
      if (
        that.form.type === "WITHDRAW_PROPORTION_TIPS" ||
        that.form.type === "COIN_SELLER_WITHDRAW_PROPORTION_TIPS" ||
        that.form.type === "WITHDRAW_PROPORTION_DIAMOND_TIPS" ||
        that.form.type === "WITHDRAW_PROPORTION_DIAMOND_USD_TIPS"
      ) {
        that.form.data = JSON.stringify(that.data);
      }
      that.$refs.form.validate(valid => {
        if (valid) {
          that.submitLoading = true;
          that.form.sysOrigin = that.listQuery.sysOrigin;

          if (that.form.id) {
            updateRegionAssistConfig(that.form)
              .then(res => {
                that.submitLoading = false;
                that.formVisible = false;
                that.form = getFormData();
                that.renderData();
              })
              .catch(er => {
                that.submitLoading = false;
                console.error(er);
                this.$emit("fail");
              });
            return;
          }
          addRegionAssistConfig(that.form)
            .then(res => {
              that.submitLoading = false;
              that.formVisible = false;
              that.form = getFormData();
              that.renderData();
            })
            .catch(er => {
              that.submitLoading = false;
              console.error(er);
            });
        } else {
          console.error("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.formVisible = false;
    },
    handleCreate() {
      this.formVisible = true;
      this.textOptTitle = "add";
      this.form = getFormData();
    },
    getDesc(row) {
      if (
        row.type === "WITHDRAW_PROPORTION_TIPS" ||
        row.type === "COIN_SELLER_WITHDRAW_PROPORTION_TIPS"
      ) {
        const obj = JSON.parse(row.data);
        return (
          this.$t("pages.regionConfig.assist.description.oneUsd", { value: obj.value }) +
          " " +
          this.$t("pages.regionConfig.assist.description.range") +
          ":" +
          obj.start +
          "~" +
          obj.end +
          " " +
          this.$t("pages.regionConfig.assist.description.tip") +
          ":" +
          obj.text
        );
      }
      if (
        row.type === "WITHDRAW_PROPORTION_DIAMOND_TIPS" ||
        row.type === "WITHDRAW_PROPORTION_DIAMOND_USD_TIPS"
      ) {
        const obj = JSON.parse(row.data);
        return (
          this.$t("pages.regionConfig.assist.description.oneDiamond", { value: obj.value }) +
          " " +
          this.$t("pages.regionConfig.assist.description.range") +
          ":" +
          obj.start +
          "~" +
          obj.end +
          " " +
          this.$t("pages.regionConfig.assist.description.tip") +
          ":" +
          obj.text
        );
      }
      return row.data;
    },
    handleUpdate(row) {
      this.textOptTitle = "edit";
      this.formVisible = true;

      const resForm = Object.assign({}, row);
      this.form = resForm;
      if (
        resForm.type === "WITHDRAW_PROPORTION_TIPS" ||
        resForm.type === "COIN_SELLER_WITHDRAW_PROPORTION_TIPS" ||
        row.type === "WITHDRAW_PROPORTION_DIAMOND_TIPS" ||
        row.type === "WITHDRAW_PROPORTION_DIAMOND_USD_TIPS"
      ) {
        this.data = JSON.parse(resForm.data);
      }
    },
    handleDelete(row) {
      const that = this;
      that
        .$confirm(
          this.$t("pages.regionConfig.assist.confirm.delete"),
          this.$t("pages.regionConfig.confirm.title"),
          {
          type: "warning"
          }
        )
        .then(() => {
          that.listLoading = true;
          deleteRegionAssistConfig(row.id).then(res => {
            that.listLoading = false;
            that.$message.success(this.$t("pages.regionConfig.assist.message.deleteSuccess"));
            that.renderData();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
