<template>
  <div class="app-container">
    <el-dialog
      :title="$t('pages.luckyBoxGiftDetails.dialog.listTitle')"
      :visible.sync="isDialog"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :fullscreen="true"
      top="20px"
    >
      <div class="filter-container">
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          :disabled="isAdd"
          @click="handleAdd"
        >
          {{ $t("pages.luckyBoxGiftDetails.action.add") }}
        </el-button>
        <el-alert
          :title="$t('pages.luckyBoxGiftDetails.alert.title')"
          type="warning"
          :description="description"
          show-icon
          :closable="false"
        />
      </div>
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column type="index" width="50" label="No" />
        <el-table-column
          prop="sysOrigin"
          :label="$t('pages.luckyBoxGiftDetails.table.platform')"
          align="center"
          width="280"
        />
        <el-table-column
          prop="name"
          :label="$t('pages.luckyBoxGiftDetails.table.name')"
          align="center"
          width="280"
        />
        <el-table-column
          :label="$t('pages.luckyBoxGiftDetails.table.cover')"
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.photoUrl"
              :preview-src-list="[scope.row.photoUrl]"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="giftCandy"
          :label="$t('pages.luckyBoxGiftDetails.table.gold')"
          align="center"
          width="280"
        />
        <el-table-column
          prop="createTime"
          :label="$t('pages.luckyBoxGiftDetails.table.createdAt')"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$t('pages.luckyBoxGiftDetails.table.actions')"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click.native="hanldeEidt(scope.row)">{{
              $t("pages.luckyBoxGiftDetails.action.edit")
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-dialog
          :title="$t('pages.luckyBoxGiftDetails.dialog.formTitle')"
          width="550px"
          top="50px"
          :visible.sync="innerEditVisible"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          append-to-body
        >
          <div style="height: 500px;overflow: auto;">
            <el-form
              ref="dataForm"
              :rules="formRules"
              :model="formData"
              class="i18n-form"
              style="width: 400px; margin-left:50px;"
            >
              <el-form-item
                :label="$t('pages.luckyBoxGiftDetails.form.system')"
                prop="sysOrigin"
              >
                <el-select
                  v-model="formData.sysOrigin"
                  :placeholder="$t('pages.luckyBoxGiftDetails.placeholder.selectSystem')"
                  style="width:100%;"
                  class="filter-item"
                >
                  <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-form-item>
              <el-form-item
                :label="$t('pages.luckyBoxGiftDetails.form.name')"
                prop="name"
              >
                <el-input
                  v-model="formData.name"
                  :placeholder="$t('pages.luckyBoxGiftDetails.placeholder.name')"
                />
              </el-form-item>
              <el-form-item
                :label="$t('pages.luckyBoxGiftDetails.form.sort')"
                prop="sort"
              >
                <el-input
                  v-model="formData.sort"
                  :placeholder="$t('pages.luckyBoxGiftDetails.placeholder.sort')"
                />
              </el-form-item>
              <el-form-item :label="$t('pages.luckyBoxGiftDetails.form.giftType')">
                <el-select
                  v-model="formData.giftType"
                  :placeholder="$t('pages.luckyBoxGiftDetails.placeholder.giftType')"
                  style="width:100%;"
                  class="filter-item"
                  @change="getGiftListInfo()"
                >
                  <el-option
                    v-for="item in localizedGiftConfigTabs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                prop="giftId"
                :label="$t('pages.luckyBoxGiftDetails.form.resource')"
              >
                <el-select
                  v-model="formData.giftId"
                  v-loading="giftLoading"
                  :placeholder="$t('pages.luckyBoxGiftDetails.placeholder.select')"
                  style="width:100%;"
                  @change="showPhoto"
                >
                  <el-option
                    v-for="(item, index) in gifts"
                    :key="index"
                    :label="item.id"
                    :value="item.id"
                    :style="'height:65px'"
                  >
                    <div style="float: left;">
                      <img :src="item.giftPhoto" width="65px" height="65px">
                    </div>
                  </el-option>
                </el-select>
                <div style="float: left;">
                  <img class="img" :src="photoUrl" width="65px" height="65px">
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerEditVisible = false">
              {{ $t("common.cancel") }}
            </el-button>
            <el-button
              :loading="submitLoading"
              type="primary"
              @click="handleSubmit"
            >
              {{ $t("common.submit") }}
            </el-button>
          </div>
        </el-dialog>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGameLuckyBoxGiftConfig, addOrUpdateGiftConfig } from '@/api/game-lucky-box-config'
import { mapGetters } from 'vuex'
import { giftConfigTabs } from '@/constant/type'
import { listByTabV2 } from '@/api/gift'
export default {
  name: 'GiftConfigTable',
  components: { },
  props: {
    standardInfo: {
      type: Object,
      required: true
    },
    updateGiftData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      standardConfig: {
        id: '',
        giftQuantity: ''
      },
      gifts: [],
      isAdd: true,
      photoUrl: '',
      giftPhoto: '',
      giftLoading: false,
      giftConfigTabs,
      dataList: [],
      isDialog: true,
      innerEditVisible: false,
      listQuery: {
        standardId: '',
        sysOrigin: 'HALAR'
      },
      formData: {
        id: '',
        standardId: '',
        sysOrigin: 'HALAR',
        name: '',
        giftType: '',
        giftId: '',
        sort: ''
      },
      gift: {
        id: '',
        giftPhoto: ''

      },
      submitLoading: false,
      listLoading: true
    }
  },
  computed: {
    description() {
      return this.$t('pages.luckyBoxGiftDetails.alert.description', {
        count: this.standardConfig.giftQuantity
      })
    },
    localizedGiftConfigTabs() {
      return this.giftConfigTabs.map(item => ({
        ...item,
        label: this.$t(`pages.luckyBoxGiftDetails.giftType.${item.value}`)
      }))
    },
    formRules() {
      const commonRules = [
        {
          required: true,
          message: this.$t('pages.luckyBoxGiftDetails.validation.requiredField'),
          trigger: 'blur'
        }
      ]
      return {
        sysOrigin: commonRules,
        sort: commonRules,
        giftType: commonRules
      }
    },
    ...mapGetters(['permissionsSysOriginPlatforms'])
  },
  watch: {
    standardInfo: {
      handler(newVal) {
        this.standardConfig = newVal
        this.listQuery.standardId = this.standardConfig.id
        this.renderData()
      },
      immediate: true
    },
    updateGiftData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        Object.assign(this.formData, newVal)
        this.giftData = newVal
        this.getGiftList()
      }
    }
  },
  created() {
    if (!this.permissionsFirstSysOrigin) {
      return
    }
    this.listQuery.sysOrigin = this.permissionsFirstSysOrigin.value
    this.renderData()
  },
  methods: {
    renderData() {
      const that = this
      that.listLoading = true
      getGameLuckyBoxGiftConfig(that.listQuery).then(res => {
        const { body } = res
        that.dataList = body
        that.isAdd = parseInt(that.standardConfig.giftQuantity) === parseInt(that.dataList.length)
        that.listLoading = false
      }).catch(er => {
        that.listLoading = false
      })
    },
    handleAdd() {
      this.innerEditVisible = true
      this.formData = {}
      this.photoUrl = ''
    },
    handleClose() {
      this.$emit('close')
    },
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.submitLoading = true
          that.formData.standardId = that.listQuery.standardId
          addOrUpdateGiftConfig(that.formData).then(res => {
            that.submitLoading = false
            that.innerEditVisible = false
            that.renderData()
            this.$emit('success', 'create')
          }).catch(er => {
            that.submitLoading = false
            that.innerEditVisible = false
            console.error(er)
            this.$emit('fail')
          })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    getGiftListInfo() {
      const that = this
      that.formData.giftId = ''
      that.photoUrl = ''
      that.getGiftList()
    },
    hanldeEidt(row) {
      this.innerEditVisible = true
      this.giftData = row
      this.formData = this.giftData
      this.photoUrl = this.giftData.photoUrl
    },
    showPhoto() {
      const that = this
      const item = this.gifts.find(item1 => item1.id === that.formData.giftId) || that.gift
      that.photoUrl = item.giftPhoto
    },
    getGiftList() {
      const that = this
      that.giftLoading = true
      listByTabV2({ 'sysOrigin': that.formData.sysOrigin, 'giftTab': that.formData.giftType }).then(res => {
        that.gifts = res.body || []
        that.giftLoading = false
        this.showPhoto()
      }).catch(er => {
        that.giftLoading = false
        console.error(er)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.col-margin {
  margin-bottom: 20px;
}
img[src=""],img:not([src]){
            opacity: 0;
        }
</style>
