<template>
  <div class="sourceFile">
    <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" @click="down(scope.row)">下载</el-button>
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.extractView!==1 "
            @click="conversion(scope.row)"
          >转换视图</el-button>
          <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="modelName" label="源文件名称"></el-table-column>
      <el-table-column prop="modelSize" label="大小"></el-table-column>
      <el-table-column prop="createrTime" 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.extractView == 2 "
          >提取失败</el-button>
          <el-button
            type="text"
            size="small"
            style="color: #7dd012;"
            v-else-if="scope.row.extractView == 1 "
          >提取成功</el-button>
          <el-button
            type="text"
            size="small"
            style="color: #ffa913;"
            v-else-if="scope.row.extractView == 0 "
          >提取中</el-button>
        </template>
      </el-table-column>
    </el-table>
    <conversionView :id="curId" :info="conversionViewInfo" v-model="conversionViewModal"></conversionView>
  </div>
</template>

<script>

import conversionView from './conversionView.vue';
export default {
  components: { conversionView },
  data() {
    return {
      loading: false,
      conversionViewModal: false,
      conversionViewInfo: {},
      list: [],
      curId: ''
    };
  },
  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('/model/modelFileList', { projectId: projectId }, 'POST')
        .then(data => {
          this.loading = false;
          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 '';
    },
    down(row) {
      // 下载
      window.location.href = row.url;
    },
    conversion(row) {
      // 转换视图
      this.curId = '';
      this.conversionViewInfo = {};
      this.conversionViewInfo = row;
      this.curId = row.id;
      this.conversionViewModal = true;
      // console.log(this.curId);
    },
    conversionViewSwitch(val) {
      // 弹窗开关控制
      this.conversionViewModal = val;
    },
    del(row) {
      // 删除
      const param = row.id;
      const modelName = row.modelName;
      this.$confirm(`是否要删除文件 ${modelName}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      })
        .then(() => {
          this.$axios('/model/deleteModelFile', { id: param }, 'POST')
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$eventHub.$emit('bus-refresh', false);
            })
            .catch(resultMsg => {
              // console.log(resultMsg);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  },
  computed: {},
  created: function() {
    this.$eventHub.$on('bus-conversionViewSwitch', this.conversionViewSwitch);
  },
  beforeMount: function() { },
  mounted: function() {
    this.$on('bridge', val => {
      this.childAction(val);
    });
    /// 此时通过$on进行监听中间桥接函数bridge对目的方法childAction进行触发
    this.search();
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
