<template>
  <el-dialog
    :modal="false"
    ref="froms"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    title="视图关联"
    :visible.sync="showModal"
    width="91.67%"
    style="margin-left:4.46%"
  >
    <div class="conversionView">
      <div class="conversionView_main">
        <div class="main_top">项目结构树</div>
        <div
          class="main_center"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div style="height:100%;">
            <el-tree
              :data="list"
              :default-expand-all="true"
              :highlight-current="true"
              @node-click="checkSelect"
              :expand-on-click-node="false"
              class="filter-tree"
              :props="defaultProps"
              ref="tree"
            >
              <span slot-scope="{ node, data }">
                <el-radio v-model="radioTree" :label="data.rownum">
                  <span class="tree-node__label">{{ node.label }}</span>
                </el-radio>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
      <div class="conversionView_main">
        <div class="main_top">Revit中视图</div>
        <div
          class="main_center"
          v-loading="loadingRight"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table
            ref="singleTable"
            :data="listright"
            @row-click="rowClick"
            tooltip-effect="light"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="提取">
              <template slot-scope="scope">
                <span v-if="scope.row.viewLocation">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="viewName" label="视图" min-width="100"></el-table-column>
            <el-table-column label="导航节点" show-overflow-tooltip min-width="250">
              <template slot-scope="scope">
              {{scope.row.viewLocation ? scope.row.viewLocation + thisNode : ''}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialogfooter">
      <el-button type="primary" @click="sure">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 标签信息
    id: [String, Number],
    info: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 是否显示对话框
    value: Boolean
  },
  data() {
    return {
      radioTree: '',
      loading: false,
      loadingRight: false,
      setCheckedString: '',
      setCheckedArray: [],
      from: {},
      froms: [],
      showModal: this.value,
      list: [],
      listright: [],
      modelId: '',
      viewLocation: '',
      defaultProps: {
        children: 'list',
        label: 'name',
        id: 'innerNo'
      },
      currentRow: '',
      thisNode: ' '
    };
  },
  watch: {
    value(val) {
      // this.$nextTick(() => {});
      this.showModal = val;
      if (val === true) {
        this.modelId = this.id;
        this.viewLocation = this.info.viewLocation;
        this.modelName = this.info.modelName;
        this.searchRight();
        this.search();
        this.setCheckedString = '';
        this.setCheckedArray = [];
        this.from = {};
        this.froms = [];
        this.radioTree = '';
      }
    },
    showModal(val) {
      if (val !== this.value) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    searchRight() {
      // 表格列表查询
      this.loadingRight = true;
      this.$axios(`/modelView/queryViewList`, { 'modelId': this.modelId }, 'GET')
        .then(data => {
          this.loadingRight = false;
          this.listright = [];
          this.listright = data.data.value;
        })
        .catch(resultMsg => {
          this.loadingRight = false;
          console.log('queryViewList request error', resultMsg);
        });
    },
    rowClick(row) {
      // 点击表格时
      if (!this.radioTree && this.radioTree !== 0) {
        // 如果结构树没有选或者选项目时跳出函数
        return;
      }
      if (this.setCheckedString === '') {
        // 没有拼好字段时跳出
        return;
      }
      if (!row.viewLocation) {
        // 如果行内目前是空的
        row.viewLocationArr = [];
      }
      row.viewLocationStr = this.setCheckedString;
      if (row.viewLocationArr.length < 1) {
        row.viewLocation = '';
        row.viewLocationArr.push(row.viewLocationStr);
        row.viewLocation = row.viewLocationArr.join(';');
        this.thisNode = ' ';
        const from = {};
        for (const key in this.from) {
          from[key] = this.from[key];
        }
        from.id = row.id || '';
        from.viewId = row.viewId || '';
        from.viewName = row.viewName || '';
        this.froms.push(from);
      } else {
        for (let i = 0; i < row.viewLocationArr.length; i++) {
          if (row.viewLocationStr === row.viewLocationArr[i]) {
            // 判断是否重复关联
            this.alike = true;
            break;
          } else {
            this.alike = false;
          }
        }
        if (this.alike === true) {
          return;
        }
        row.viewLocation = '';
        row.viewLocationStr = this.setCheckedString;
        row.viewLocationArr.push(row.viewLocationStr);
        row.viewLocation = row.viewLocationArr.join(';');
        this.thisNode = '';
        setTimeout(() => {
          // 表格数据实时变化
          this.thisNode = ' ';
        }, 500);
        const from = {};
        for (const key in this.from) {
          from[key] = this.from[key];
        }
        from.id = row.id || '';
        from.viewId = row.viewId || '';
        from.viewName = row.viewName || '';
        this.froms.push(from);
      }
    },
    checkSelect(data) {
      // 树形控件被点击
      if (data.type === 'PROJECT') {
        this.setCheckedArray = [];
        this.setCheckedString = '';
        return;
      }
      this.radioTree = data.rownum;
      this.from = {};
      const projectNo = sessionStorage.getItem('projectNo')
        ? sessionStorage.getItem('projectNo')
        : '';
      this.from.projectId = data.projectId || '';
      this.from.projectNo = projectNo;
      this.from.modelId = this.modelId || '';
      this.from.viewLocation = this.viewLocation || '';
      this.from.viewNode = data.type || '';
      this.from.modelName = this.modelName || '';
      if (this.from.viewNode === 'STAGING') {
        this.from.stagingNo = data.innerNo || '';
        this.from.stagingName = data.name || '';
      } else if (this.from.viewNode === 'BUILD') {
        this.from.stagingNo = data.stagingNo || '';
        this.from.stagingName = data.stagingName || '';
        this.from.buildNo = data.innerNo || '';
        this.from.buildName = data.name || '';
      } else if (this.from.viewNode === 'FLOOR') {
        this.from.stagingNo = data.stagingNo || '';
        this.from.stagingName = data.stagingName || '';
        this.from.buildNo = data.buildNo || '';
        this.from.buildName = data.buildName || '';
        this.from.floorNo = data.innerNo || '';
        this.from.floorName = data.name || '';
      } else if (this.from.viewNode === 'ROOM') {
        this.from.stagingNo = data.stagingNo || '';
        this.from.stagingName = data.stagingName || '';
        this.from.buildNo = data.buildNo || '';
        this.from.buildName = data.buildName || '';
        this.from.floorNo = data.floorNo || '';
        this.from.floorName = data.floorName || '';
        this.from.roomNo = data.innerNo || '';
        this.from.roomName = data.name || '';
      }
      this.setCheckedArray = [];
      this.setCheckedString = '';
      if (data.type === 'STAGING') {
        this.setCheckedArray.push(data.projectName, data.name);
      } else if (data.type === 'BUILD') {
        this.setCheckedArray.push(data.projectName, data.stagingName, data.name);
      } else if (data.type === 'FLOOR') {
        this.setCheckedArray.push(data.projectName, data.stagingName, data.buildName, data.name);
      } else if (data.type === 'ROOM') {
        this.setCheckedArray.push(data.projectName, data.stagingName, data.buildName, data.floorName, data.name);
      }
      this.setCheckedString = '/' + this.setCheckedArray.join('/');
    },
    search() {
      // 树形控件列表查询
      this.loading = true;
      const projectNo = sessionStorage.getItem('projectNo')
        ? sessionStorage.getItem('projectNo')
        : '';
      this.$axios(
        '/project/queryProjectTree',
        {
          projectNo: projectNo,
          dataNodes: [0, 1, 2, 3, 4]
        },
        'POST'
      )
        .then(data => {
          this.loading = false;
          this.list = [];
          this.list.push(data.data.value);
        })
        .catch(resultMsg => {
          this.loading = false;
          // console.log(resultMsg);
        });
    },
    sure() {
      // 确定
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$axios('/modelView/relationTree', this.froms, 'POST')
        .then(data => {
          loading.close();
          this.$emit('input', false);
          this.$eventHub.$emit('bus-refresh', true);
        })
        .catch(resultMsg => {
          loading.close();
          // console.log(resultMsg);
        });
    },
    cancel() {
      // 弹窗取消
      this.$emit('input', false);
    }
  },
  computed: {},
  created: function() { },
  beforeMount: function() { },
  mounted: function() { },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
