<template>
  <div class="fileConversion">
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="list"
      style="width: 100%"
      height="600"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.conversionStatus!==2 "
            @click="again(scope.row)"
          >重试</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="viewName" label="视图名称"></el-table-column>
      <el-table-column prop="modelName" label="源文件名称"></el-table-column>
      <el-table-column prop="startTime" label="开始转换时间"></el-table-column>
      <el-table-column label="转换状态">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            style="color: #ff4c4c;"
            v-if="scope.row.conversionStatus===2 "
          >转换失败</el-button>
          <el-button
            type="text"
            size="small"
            style="color: #7dd012;"
            v-else-if="scope.row.conversionStatus===1 "
          >转换成功</el-button>
          <el-button
            type="text"
            size="small"
            style="color: #ffa913;"
            v-else-if="scope.row.conversionStatus===0 "
          >转换中</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="spendingTime" label="耗时(s)"></el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      loading: false,
      list: [],
    };
  },
  watch: {
  },
  methods: {
    childAction(val = 'hello world') {
      // 组件刷新
      // console.log(val);
      this.search();
    },
    search() {
      // 列表查询
      this.loading = true;
      const projectId = sessionStorage.getItem('projectId')
        ? sessionStorage.getItem('projectId')
        : '';
      this.$axios('/modelView/viewList', { projectId: projectId }, 'POST')
        .then(data => {
          this.loading = false;
          // console.log('===========list', data);
          this.list = [];
          this.list = data.data.value;
        })
        .catch(resultMsg => {
          this.loading = false;
          // console.log(resultMsg);
        });
    },
    tableRowClassName({ row, rowIndex }) {
      // 增加隔行颜色
      if ((rowIndex % 2) === 1) {
        return 'success-row';
      }
      return '';
    },
    again(row) {
      // 重试
      this.loading = true;
      this.$axios(`/modelView/viewRetry`, {'id': row.id}, 'GET')
        .then(data => {
          this.loading = false;
          // console.log('===========list', data);
        })
        .catch(resultMsg => {
          this.loading = false;
          // console.log(resultMsg);
        });
    }
  },
  computed: {},
  created: function() { },
  beforeMount: function() { },
  mounted: function() {
    this.$on('bridge', val => {
      this.childAction(val);
    });
    /// 此时通过$on进行监听中间桥接函数bridge对目的方法childAction进行触发
    this.search();
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
