<template>
  <el-dialog @close="close"
             @opened="dialogInit"
             v-dialogDrag
             v-if="aboutViewDialogVisible"
             style="font-size: 10px;" width = '800px '
             :title =  "$t('aboutInformation.about')"
             :visible.sync="aboutViewDialogVisible">

    <!-- 第一行显示图片 -->
    <el-row >
      <el-image src="./static/AboutImage.png"></el-image>
    </el-row>
    <!-- 第二行显示文字信息 -->
    <div style="text-align: center;padding: 0px;">
      <table style="margin:auto" >
        <tr style="line-height: 50px;">
          <td style="width: 90px;text-align: left;"><label>{{ $t('aboutInformation.softwareName') }}</label></td>
          <td style="text-align: left;"><label > {{$t('aboutInformation.name')}}</label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td style="width: 90px;text-align: left;"><label>{{ $t('aboutInformation.publicationDate') }}</label></td>
          <td style="text-align: left;"><label > {{ $t('aboutInformation.data') }} </label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td style="width: 90px;text-align: left;"><label>{{ $t('aboutInformation.softwareVersion') }}</label></td>
          <td style="text-align: left;"><label>{{ $t('aboutInformation.version') }}</label></td>
        </tr>
        <tr style="line-height: 50px;">
          <td style="width: 90px;text-align: left;"><label>{{ $t('aboutInformation.copyRight') }}</label></td>
          <td style="text-align: left;"><label>{{ $t('aboutInformation.allRight') }}</label></td>
        </tr>
      </table>
    </div>
    <!-- 第三行显示按钮信息 -->
    <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
      <el-button style="margin-bottom: -10px;" size='mini' @click="close">{{$t("common.cancel")}}</el-button>
    </el-row>
  </el-dialog>
</template>

<script>

  export default {
    name:'About',
    //1.声明从父组件接受的value，注意名字一致。
    props: {
      aboutViewDialogVisible: null,//控制弹框的显示
    },
    data() {
      return {

      }
    },
    methods:{

      /**
       * @Description  ：控制对话框的显示
       * @author       : yjz
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      close() {
        this.$emit("update:aboutViewDialogVisible", false);
      },
      ok() {
        this.$emit("update:aboutViewDialogVisible", false);
      },

    },
    computed: {},
    watch: {},
    //无法获取 data中的数据、methods中的方法
    beforeCreate() {},
    //常用的生命周期，可以调用methods中的方法、改变data中的数据
    created() {
    },
    //在挂载开始之前被调用
    beforeMount() {},
    //此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
    mounted() {},
    //运行期间
    beforeUpdate() {},
    updated() {},
    //销毁期间
    beforeDestroy() {},
    destroyed() {},
  }
</script>

<style scoped>
</style>
