<template>
  <div>
    <Card class="mb15">
      <p slot="title">
        0。自定义字体文件使用
      </p>
      <Alert type="warning">
        <div class="icon-exp-row">
          <Icon
            custom="ems ems-copy-icon"
            size="24"
          ></Icon>
          <span>{{ iconHtml }}</span>
        </div>
        </br>
        <div class="icon-exp-row">
          <Button icon="ems-iconfont ems-edit-icon"></Button>
          <span>{{ buttonIconHtml }}</span>
        </div>
        <div class="icon-exp-row">
          <Button
            icon="ems-iconfont ems-delete-icon"
            style="color: #F99C34;"
          ></Button>
          <span>{{ buttonIconHtml2 }}</span>
        </div>
      </Alert>
    </Card>

    <Card class="mb15">
      <p slot="title">
        1。pageModal
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("弹框组件") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$pageModal(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Button
          type="primary"
          @click="pageModal"
        >
          {{ this.$t("操作") }}
        </Button>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        2。SidelipPage
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("二级菜单组件") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Button
          type="primary"
          @click="sidelipPage"
        >
          {{ this.$t("操作") }}
        </Button>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        3。SidelipPage
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("值集组件") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Form
          :label-width="100"
        >
          <FormItem :label="$t('币种')">
            <DataSelect
              style="width:200px"
              transfer
              clearable
              code="currency"
              :placeholder="$t('请选择')"
            ></DataSelect>
          </FormItem>
        </Form>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        4。SelectCompany
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("归属公司") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Form
          :label-width="100"
        >
          <FormItem :label="$t('归属公司')">
            <SelectCompany
              style="width:200px"
              :placeholder="$t('请选择')"
              :flag="true"
              filterable
              clearable
              transfer
            ></SelectCompany>
          </FormItem>
        </Form>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        5。SelectEmployee
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("项目成员") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Form
          :label-width="100"
        >
          <FormItem :label="$t('项目成员')">
            <SelectEmployee
              style="width:200px"
              :title="$t('请选择')"
              :searchInputPlaceholder="$t('搜索姓名')"
              :isMultiple="true"
              :isShowCheckbox="true"
              :len="9999999"
              clearable
            ></SelectEmployee>
          </FormItem>
        </Form>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        6。Confirm
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("确认框") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Button
          type="primary"
          @click="confirm"
        >
          {{ this.$t("确认框") }}
        </Button>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        7。DownloadFile
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("下载文件") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Button
          type="primary"
          @click="downloadFile"
        >
          {{ this.$t("下载文件") }}
        </Button>
      </div>
    </Card>

    <Card class="mb15">
      <p slot="title">
        8。baseLangConfig
      </p>
      <div>
        <Alert type="warning">
          {{ this.$t("多国语言弹框") }}
          <template slot="desc">
            <div>{{ this.$t("使用方式") }}</div>
            <div>
              new this.$sidelipPage(
              CopyBig, {
              props: {
              row: param.row
              }
              }, (data) => {
              this.search(1);
              }
            </div>
          </template>
        </Alert>
        <Button
          type="primary"
          @click="baseLangConfig"
        >
          {{ this.$t("多国语言弹框") }}
        </Button>
      </div>
    </Card>
  </div>
</template>

<script>
import example from './example.vue';
import BaseLangConfig from '../../components/baseLangConfig/BaseLangConfig.vue';

export default {
  data() {
    return {
      iconHtml: '<Icon custom="ems ems-copy-icon" size="24" ></Icon>',
      buttonIconHtml: '<Button icon="ems-iconfont ems-edit-icon"></Button>',
      buttonIconHtml2: '<Button icon="ems-iconfont ems-delete-icon" style="color: #F99C34;"></Button>'
    };
  },
  methods: {
    pageModal() {
      new this.$pageModal(
        example,
        {
          props: {
          }
        },
        data => {
        }
      );
    },
    sidelipPage() {
      new this.$sidelipPage(
        example,
        {
          props: {
          }
        },
        data => {
        }
      );
    },
    confirm() {
      this.$confirm(
        this.$t('确定要删除么'),
        this
      ).then(() => {
        this.$Message.error(this.$t('六六六'));
      });
    },
    downloadFile() {
      this.$DownloadFile({
        url: '/ems-base-application/mams/sys/account/excel/export/sync',
        method: 'post',
        data: {
          sortDTO: {
            fieldName: '',
            orderBy: 1
          },
          userCode: '',
          userName: '',
          enabled: '',
          total: '',
          mobile: '',
          type: '',
          userIds: '',
          effectBegin: '',
          effectEnd: ''
        }
      },
      this
      );
    },
    baseLangConfig() {
      new this.$pageModal(
        BaseLangConfig, {
          props: {
            readonly: false,
            longText: true
          }
        },
        data => {
          if (data) {
            for (const k in data) {
              this.taxRateLang[k][code] = data[k];
            }
            this.modelForm[code] = data[this.lang];
          }
        }
      );
    }
  }
};
</script>
<style>
.mb15{
  margin-bottom: 15px;
}
.icon-exp-row {
  padding: 10px 0;
}
.icon-exp-row span {
  padding-left: 20px;
}
</style>
