<!-- 供应商信息管理--生成账号提示 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :appendToBody="appendToBody"
                 :title="$t('common.tip')" width="900px" :footerVisible="footerVisible" :api="api">
      <div class="result-box">
        <el-row>
          <i class="el-icon-warning"></i>
        </el-row>
        <p>{{$t('enterpriseInfoManage.supplierInfoManage.generateTip1')}}</p>
        <p>{{$t('enterpriseInfoManage.supplierInfoManage.generateTip2') + form.website + $t('enterpriseInfoManage.supplierInfoManage.generateTip3')}}</p>
        <data-table :operateBtnLayout="operateBtnLayout" :sourceData="sourceData" :columns="columns" :showPage="false">
        </data-table>
      </div>
      <el-row type="flex" justify="center" class="marginBottom">
        <auth-button class="copybtn" size="medium" type="primary" @click="createCopy" :data-clipboard-text="textBlock"
                     :label="$t('enterpriseInfoManage.supplierInfoManage.copy')"></auth-button>
        <auth-button size="medium" :label="$t('enterpriseInfoManage.supplierInfoManage.close')" @click="dialogVisible = false"></auth-button>
      </el-row>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, authButton, DataTable } from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage'
import Clipboard from 'clipboard'
export default {
  extends: new BaseEdit(),
  name: 'generateAccountEdit',
  components: {
    DialogEdit,
    authButton,
    DataTable
  },
  props: {
    accountItem: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      appendToBody: true,
      footerVisible: false,
      operateBtnLayout: '',
      sourceData: [],
      columns: [
        // 联系人
        {
          prop: 'employeeName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contact,
          width: '200px'
        },
        // 账号
        {
          prop: 'accountName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip4,
          width: '200px'
        },
        // 初始密码
        {
          prop: 'password',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip5,
          width: '200px'
        }
      ]
    }
  },
  computed: {
    textBlock () {
      let msg = ''
      msg = msg + this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip1 + '\n'
      msg = msg + this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip2 +
        this.form.website + this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip3 + '\n'
      this.sourceData.forEach(it => {
        msg = msg + this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.contact + ':' + it.employeeName + ';' +
          this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip4 + ':' + it.accountName + ';' +
          this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.generateTip5 + ':' + it.password + '\n'
      })
      return msg
    },
    api () {
      return {}
    }
  },
  mounted () {
  },
  methods: {
    createCopy () {
      let clipboard = new Clipboard('.copybtn', {
        text: () => {
          return this.textBlock
        }
      })
      clipboard.on('success', e => {
        this.success(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.copySuccess)
        this.dialogVisible = false
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.error(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.copyFail)
        clipboard.destroy()
      })
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.form.website = process.env.VUE_APP_LOGIN_URL
        this.sourceData = this.accountItem
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/generateAccountEdit.scss';
</style>
