<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" :content="$route.meta.description" hidden-breadcrumb />
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <view-form ref="form" view-code="I18nTextFilter" @on-change="formChange"></view-form>
      <div v-if="canSave" style="margin-bottom: 8px; text-align: center">
        <Button type="primary" style="margin-right: 8px" custom-icon="fa fa-save" @click="save()">{{ $t('Front_Btn_Save') }}</Button>
        <Button v-if="i18nType == 'Server' || i18nType == 'Front'" type="primary" custom-icon="fa fa-plus" @click="$refs.newForm.openDefault({ i18nType: i18nType })">
          {{ $t('Front_Btn_Add') }}
        </Button>
      </div>
      <view-table ref="table" view-code="I18nText" :static="true" :onSearch="loadData">
        <template slot="command" slot-scope="{ row }">
          <Button
            v-if="i18nType == 'Server' || i18nType == 'Front'"
            size="small"
            :title="$t('Front_Btn_Remove')"
            type="warning"
            custom-icon="fa fa-trash-alt"
            @click="remove(row)"
          ></Button>
        </template>
      </view-table>
      <modal-form ref="newForm" view-code="I18nTextEdit" @on-after-save="loadData()"></modal-form>
    </Card>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import i18nTextApi from '../../api/i18nText';
  import modelApi from '../../api/model';

  export default {
    name: 'system-i18nText',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        canSave: false,
        i18nType: null,
        category: null
      };
    },
    computed: {},
    created() {},
    methods: {
      async loadData() {
        this.i18nType = this.$refs.form.data.i18nType;
        this.category = null;

        if (this.i18nType) {
          if (this.i18nType == 'Enum') {
            this.category = this.$refs.form.data.enum;
          } else if (this.i18nType == 'Dict') {
            this.category = this.$refs.form.data.dict;
          } else if (this.i18nType == 'DataView') {
            this.category = this.$refs.form.data.dataView;
          } else {
            this.category = '';
          }

          if (this.category != null) {
            let data = await i18nTextApi.queryForEdit(this.i18nType, this.category);
            this.$refs.table.loadData(data);
            this.canSave = true;
            return;
          }
        }

        this.$refs.table.loadData([]);
        this.canSave = false;
      },
      async formChange() {
        this.loadData();
      },
      async save() {
        this.confirm('Front_Msg_Sure_To_Save', async () => {
          let data = this.$refs.table.data;

          await i18nTextApi.save(this.i18nType, this.category, data);

          this.success('Front_Msg_Success');
        });
      },
      async remove(row) {
        this.confirm('Front_Msg_Sure_To_Delete_Item', async () => {
          await modelApi.remove('I18nText', row.id);

          this.success('Front_Msg_Success', () => {
            this.loadData();
          });
        });
      }
    }
  };
</script>
