<!-- 编辑部件 -->
<template>
  <div id='editBujian'>
    <el-tabs v-model="activeName" @tab-click="handleClick" v-show='record'>

      <!-- 基础属性 begin -->
      <el-tab-pane label="基础属性" name="first">
        <el-form ref="form" :model="form" @submit.native.prevent>

          <!-- 文本输入 -->
          <el-form-item v-show='domShowOrHidd.CSVInputStep'>
            <p>选择文件</p>

            <el-col :span='inputSpan'>

              <el-input v-model='form.file' ref='inputStep' @focus='inputStep' size="small"
                v-show='!domShowOrHidd.CSVOutputStep' placeholder="请上传文件" clearable @clear='clearFileId'
                :disabled="statusForm">
              </el-input>

              <!-- 文本输出 -->
              <el-input v-model='form.file' v-show='domShowOrHidd.CSVOutputStep' size="small"
                @keyup.native='clearFileId' placeholder="请输入文件或文件路径" :disabled="statusForm">
              </el-input>
            </el-col>

            <!-- 文本输出 -->
            <el-col :span='6' class="p-l-10" style='transform: translatey(2px);' v-show='domShowOrHidd.CSVOutputStep'>
              <el-button @click='inputStep' size="small" :disabled="statusForm">路径...</el-button>
            </el-col>

          </el-form-item>

          <el-form-item label='列分割符' v-show='domShowOrHidd.CSVInputStep'>
            <el-input v-model='form.delimiter' size="small" :disabled="statusForm" @blur="submitCellContent"
              placeholder="请输入列分割符">
            </el-input>
          </el-form-item>

          <el-form-item label='转义符' v-show='domShowOrHidd.CSVInputStep'>
            <el-input v-model='form.escape' :disabled="statusForm" size="small" @blur="submitCellContent"
              placeholder="请输入转义符"></el-input>
          </el-form-item>

          <el-form-item label='限定符' v-show='domShowOrHidd.CSVInputStep'>
            <el-input v-model='form.quote' :disabled="statusForm" size="small" @blur="submitCellContent"
              placeholder="请输入限定符"></el-input>
          </el-form-item>

          <el-form-item label='列名' v-show='domShowOrHidd.CSVOutputStep'>
            <el-input v-model='form.titleNames' :disabled="statusForm" size="small" @blur.native="submitCellContent"
              placeholder="请输入列名">
            </el-input>
          </el-form-item>

          <el-form-item label='换行符' v-show='domShowOrHidd.CSVInputStep'>
            <el-input v-model='form.lineSeparator' :disabled="statusForm" size="small" @blur.native="submitCellContent"
              placeholder="请输入换行符">
            </el-input>
          </el-form-item>

          <el-form-item label='是否有列头' v-show='domShowOrHidd.CSVInputStep'>
            <el-radio-group :disabled="statusForm" v-model="form.hasTitle" @change="submitStore">
              <el-col :span="12">
                <el-radio label='1'>是</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio label='0'>否</el-radio>
              </el-col>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="数据源：" v-show='domShowOrHidd.DBInputStep'>
            <el-select :disabled="statusForm" @change="dataSourceChange" v-model="form.dataBase" placeholder="请选择数据源">
              <el-option v-for='(item,index) in datasSources' :key='index' :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="数据表：" v-show='domShowOrHidd.DBInputStep'>

            <el-select :disabled="statusForm" v-model="form.tableName" placeholder="请选择数据表">
              <el-option v-for='(item,index) in datasSourceTypes' :key='index' :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label='过滤条件' v-show='domShowOrHidd.DBOutputStep'>
            <el-input v-model='form.filterCondition' :disabled="statusForm" size="small"
              @blur.native="submitCellContent" placeholder="请输入过滤条件">
            </el-input>
          </el-form-item>

          <el-form-item v-if='temporary'>
            <p>部件参数暂未开放...</p>
          </el-form-item>

        </el-form>

      </el-tab-pane>
      <!-- 基础属性 end -->

      <!-- 字段属性 begin-->
      <el-tab-pane label="字段属性" name="second">

        <el-button size='mini' @click='getDatas'>刷新</el-button>

        <el-table :data="tableData" style="width: 100%;margin-top:15px">
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="type" label="类型">
          </el-table-column>
          <el-table-column prop="length" label="长度">
          </el-table-column>
          <el-table-column prop="scale" label="大小">
          </el-table-column>
          <el-table-column prop="caption" label="描述">
          </el-table-column>
          <el-table-column prop="format" label="格式">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 字段属性 end-->
    </el-tabs>

    <!-- 另存为参数复制 -->
    <el-dialog title="选择文件" :visible.sync="getPathss" :close-on-click-modal='closeOnClick' :lock-scroll='closeOnClick'
      width="45%" :modal='closeOnClick'>

      <!-- 路径树 -->
      <el-row>
        <el-col :span='11' class="p-r-20">
          <el-input v-model='pathTreeVal' size="small" placeholder="请选择路径" :readonly='!domShowOrHidd.CSVOutputStep'>
          </el-input>
        </el-col>

        <el-col :span='6' class="p-r-20" v-show='!domShowOrHidd.CSVOutputStep'>
          <el-upload :disabled="statusForm" :action="nozzle.dataModelServiceUploadFile" :show-file-list='false'
            :before-upload='beforeUpload' :on-success="uploadSuccess" :data='uploadDatas' :on-error='errorUpload'
            style='width:100%;height:31px'>
            <el-button size="small">
              上传文件
            </el-button>
          </el-upload>
        </el-col>

        <el-col :span='7'>
          <el-input v-model.trim="docName" placeholder="请输入查询的文件名称" clearable size="mini"
            @keyup.enter.native="getDocName" class='m-b-10'>
            <el-button slot="append" icon="el-icon-search" @click='getDocName'></el-button>
          </el-input>
        </el-col>
      </el-row>

      <el-tree :props="props" node-key='fileId' :load="loadNode" lazy @node-click='pathTreeCb' ref="tree"
        :default-expanded-keys="[defaultPath]" highlight-current class="m-b-10" :render-content="renderContent">

      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button type='primary' @click="preservationPath">确 定</el-button>
        <el-button @click="getPathss = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  /**
   * 组件注意事项：
   * 1、获取图形类型，进行部件参数赋值
   * 2、根据图形类型，对部件参数进行查看状态（实时禁用）
   * 3、根据部件修改参数变化，进行图形赋值
   * 
   * 部件参数展示，注意事项
   * 1、添加部件，在data属性中，将部件类型进行添加，形成一对一的方式展示
   * 2、form参数中所有属性值，是当前部件中所有属性集合
   * 3、每添加一种部件类型，需在init初始化方法中，对当前部件属性值，进行显隐操作
   */
  let id = 0;
  import Vue from 'vue'
  import {
    notify,
    deepClone
  } from '../util/item';
  import project from '../mixins/project'

  export default {
    data() {
      return {
        copyForm: null,
        closeOnClick: false,
        getPathss: false,
        inputSpan: 24,
        activeName: 'first',
        pathTreeVal: '',
        docName: '',
        defaultPath: '',
        pathTreeId: '',
        datasSources: [],
        datasSourceTypes: [],
        props: {
          label: 'fileName',
          children: 'zones',
          isLeaf: 'leaf'
        },
        currentPath: '', //当前文本选择路径
        form: { //数据参数，将返回到前面进行cell参数赋值
          file: '', //文件路径
          fileId: '', //文件路径id
          fields: '', //获取上传到的数据参数
          delimiter: '', //列分隔符
          escape: '', //转义符
          quote: '', //限定符
          lineSeparator: '', //换行符
          hasTitle: '', //是否有列头
          titleNames: '', //列名
          dataBase: '', //数据源
          tableName: '', //数据表
          filterCondition: '', //过滤条件
        }, //图形类型，每个类型对应一组表单参数
        domShowOrHidd: {
          CSVInputStep: false,
          DBInputStep: false,
          FieldChooseStep: false,
          DataSplitStep: false,
          ModelForecastStep: false,
          ModelApplyStep: false,
          ModeSaveStep: false,
          CSVOutputStep: false,
          DBOutputStep: false,
        },
        temporary: false,
        record: true, //记录上一次点击情况
        uploadDatas: { //上传文件字段
          path: ''
        },
        tableData: [],
      };
    },
    mixins: [project],
    props: {
      statusForm: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      statusForm(val, oldVal) {
        // 是否为查看状态，查看状态禁止修改参数
        this.statusForm = val;
      }
    },
    computed: {},
    mounted() {
      this.dataSourceChanges();
    },
    methods: {
      oldDatas() {
        return this.copyForm
      },
      init(val = '', forms = {}) {
        /**
         * 表单状态参数值
         * @param {Number} type 当前点击图形的类型参数值
         */
        // 参数重置，this.$options.data()---原始的数据，this.$data---组件内对象
        // Object.assign(this.$data, this.$options.data());

        // 暂无部件选项时，参数重置
        this.temporary = true;
        this.activeName = 'first';

        // 部件区初始化还原
        for (let items of Object.keys(this.domShowOrHidd)) {
          this.domShowOrHidd[items] = false;
        }

        if (val === '') {
          this.record = false;
          return
        }

        // 第一次点击图形，进行赋值
        this.submitCellContent();

        // 清理文件和文件路径选择
        this.pathTreeVal = '';
        this.pathTreeId = '';

        // 清空重复利用字段参数
        for (let key of Object.keys(this.form)) {
          this.$set(this.form, key, '');
        }

        // 字段属性
        // console.log(forms);
        let fiel = forms['fields'] ? (forms['fields'] === '' ? '[]' : forms['fields']) : '[]';

        this.tableData = JSON.parse(fiel);

        // 参数赋值
        this.form = Object.assign(this.form, forms);
        console.log(this.form);

        // 输入框处理
        this.record = true;
        this.domShowOrHidd[val] = true;

        switch (val) {
          case 'CSVInputStep':
            this.temporary = false;
            this.inputSpan = 24;
            break;
          case 'CSVOutputStep':
            // 文本输入，有参数值
            this.inputSpan = 18;
            this.temporary = false;
            this.$set(this.domShowOrHidd, 'CSVInputStep', true);
            break;
          case 'DBInputStep':
            // 数据库输入
            this.temporary = false;
            this.$set(this.domShowOrHidd, 'DBOutputStep', true);
            this.dataSourceChange(this.form.dataBase);
            break;
          case 'DBOutputStep':
            // 数据库输出
            this.temporary = false;
            this.$set(this.domShowOrHidd, 'DBInputStep', true);
            this.$set(this.domShowOrHidd, 'DBOutputStep', false);
            this.dataSourceChange(this.form.dataBase)
            break;
        }
      },
      submitCellContent() {
        // 参数另存为
        this.copyForm = Object.assign(this.form);

      },
      submitStore() {
        // 保存数据参数到图形
        this.$emit('submitCellContent', this.form)
      },
      uploadSuccess(response, file, fileLis) {
        // 文件上传成功时的钩子
        // 成功则刷新当前文件目录
        this.$store.state.system.fullLoading = false
        notify(response)
        if (response.code === 200) {
          this.form.file = Object.values(response.data)[0];
          this.form.fileId = Object.keys(response.data)[0];

          // 上传内容存储
          this.submitStore()

          // 重新渲染当前树结构
          this.getChildPath(this.pathTreeId, '', (res) => {
            this.$refs.tree.updateKeyChildren(this.pathTreeId, res)
          })

        }

      },
      beforeUpload(file) {
        // 文件上传前的钩子
        this.$store.state.system.fullLoading = true

        return true
      },
      errorUpload() {
        // 文件上传失败的钩子
        console.log('上传失败');
        this.$store.state.system.fullLoading = false
      },
      getDatas() {
        // 获取数据结构，重新补充字段属性，字段属性刷新

        // if (this.form.fileId === '' && this.form.stepType === 'CSVInputStep') {
        //   this.$notifyOrType.warning('请先上传文件再进行处理')
        //   return
        // }

        // if (this.form.delimiter === '') {
        //   this.$notifyOrType.warning('请先填写列分隔符，再进行获取数据')
        //   return
        // }

        // if (this.form.hasTitle === '') {
        //   this.$notifyOrType.warning('请先选择是否有表头，再进行获取数据')
        //   return
        // }

        let copyData = Object.assign({}, this.form);
        delete copyData['fields']

        let params = {
          fileId: this.form.fileId !== "" ? this.form.fileId : null,
          stepContentJson: JSON.stringify(copyData)
        }
        this.$http.get(this.nozzle.dataModelQueryInputDataConfig, {
          params: params
        }).then(response => {
          let res = response.data.data ? response.data.data : [];

          let fields = res.length !== 0 ? res : null;
          this.form.fields = fields;

          // 填充字段属性
          let fiel = fields ? (fields === '' ? '[]' : fields) : '[]';

          this.tableData = JSON.parse(fiel);
          // 字段属性存储
          this.submitStore()
        })
      },
      handleClick(tab, event) {
        // 标签页面切换
        // console.log(tab, event);
      },
      lazyloadChange(val) {
        // 获取文本路径
        this.currentPath = '/' + this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels.join('/');
        this.form.fileId = val[val.length - 1];
        this.form.file = this.currentPath;
        this.submitStore()

      },
      renderContent(h, {
        node,
        data,
        store
      }) {
        // 添加文件图标
        return ( <span class = "custom-tree-node" >
          <i class = {
            data.className
          } > </i> <span style = "margin-left:5px;">{
          node.label
        } </span></span > );
    },
    clearPath(response) {
      // 文件是否存在子节点
      let res = response.data.data ? response.data.data : [];
      res.map((v, i) => {
        if (v['isDir'] === 1) {
          // 判断是否为文件夹，1为文件夹，0为文件
          v['leaf'] = false
          v['className'] = 'el-icon-folder'
        } else {
          v['leaf'] = true
          v['className'] = 'el-icon-document'
        }
        return v;
      })
      return res
    },
    preservationPath() {
      // 保存路径

      if (this.pathTreeVal !== '') {
        this.form.fileId = this.pathTreeId;
        this.form.file = this.pathTreeVal;
        // 进行保存
        this.submitStore();
      }

      this.getPathss = false;
    },
    clearFileId() {
      // 输出框，删除id
      this.form.fileId = '';
      // 进行保存
      this.submitStore();
    },
    pathTreeCb(data) {
      // 选择文件或文件路径
      let val = `${data.filePath}/${data.fileName}`.replace("//", '/');

      if (data.isDir === 1) {
        // 上传文件
        this.uploadDatas.path = val;
      }

      this.pathTreeVal = val;
      this.pathTreeId = data.fileId;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 文件根目录
        this.$http.get(this.nozzle.dataModelQueryRootDirectoryFile).then(response => {

          let res = this.clearPath(response);
          return resolve(res);
        })
      } else {
        // 文件子路径
        this.getChildPath(node.data.fileId, resolve);
      }
    },
    getChildPath(fileId, resolve = function () {}, cb = null) {
      // 定位打开文件树结构
      this.$http.get(this.nozzle.dataModelQueryFileById, {
        params: {
          fileFolderId: fileId
        }
      }).then(response => {

        let res = this.clearPath(response);

        if (cb !== null) {
          cb(res)
          return
        }
        return resolve(res);
      })

    },
    getDocName() {
      // 查询文件名称
      if (this.docName === '') {
        return
      }

      this.$http.get(this.nozzle.dataModelQueryWithFileName, {
        params: {
          fileName: this.docName
        }
      }).then(response => {
        let res = response.data.data;
        if (response.data.data === null) {
          // 暂无数据

          this.$notifyOrType.warning('该条件下无文件信息，请更换条件试试')
        } else {
          // 数据定位，默认第一条数据
          this.openPath(res[0]['relationIds']);

          // 文件路径标识
          this.pathTreeCb(res[0])
        }

      })
    },
    openPath(res) {
      // 获取子节点文件内容

      for (let [keys, values] of res.entries()) {
        setTimeout(() => {
          this.defaultPath = values;
          this.$refs.tree.setCurrentKey(values)
        }, 500 * keys);
      }

    },
    inputStep(val) {
      // 获取焦点展开文件或文件路径选择
      this.getPathss = true;

      if (this.form.stepType === "CSVInputStep") {
        // 文本输入
        this.$refs.inputStep.blur();
      }

      // 清除选中状态
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.tree.setCurrentKey()
        }, 100);
      })
    },
    async dataSourceChanges() {
      // 连接列表渲染
      let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
        dbType: 'Relational'
      });

      let dataBase = [];
      for (let item of datas.values()) {
        dataBase.push({
          value: item
        })
      }
      this.datasSources = dataBase;
    },
    async dataSourceChange(val = '') {
      // 数据表内容获取以及填充
      if (val === '') {
        this.datasSourceTypes = [];
        return
      }

      let datas = await this.getHttpDatas(this.nozzle.getAllTableNameByDateSourceName, {
        dataSourceName: val,
        pageSize: 999999,
        pageNo: 1
      });
      datas = datas['list'] ? datas['list'] : [];
      let dataBase = [];
      for (let item of datas.values()) {
        dataBase.push({
          value: item
        })
      }
      this.datasSourceTypes = dataBase;

    },
  }
  }

</script>

<style lang='less'>
  #editBujian {
    width: 100%;

    p {
      color: #001529;
    }

    .el-form-item__label {
      font-size: 14px;
    }

    .el-form-item__label::before {
      width: 0px;
    }

    .el-form-item {
      margin-bottom: 5px;
    }

    .el-upload {
      width: 100%;

      button {
        height: 31px;
      }
    }

    // 标签页面
    .el-tabs--card>.el-tabs__header {
      position: relative;
      left: 0;
      top: 0;
    }

    .el-tabs__nav {
      width: 100%;
    }

    .el-tabs__item {
      width: 50%;
      text-align: center;
    }

    .el-icon-folder:before,
    .el-icon-document:before {
      color: rgb(210, 153, 5);
    }

    // 字段属性样式
    .el-table th>.cell {
      background-color: #f5f5f5;
    }

    .el-table--scrollable-x .el-table__body-wrapper {
      &::-webkit-scrollbar-track-piece {
        background-color: #f0f2f5;
        /*滚动条的背景颜色*/
        border-radius: 5px;
        /*滚动条的圆角宽度*/
      }

      &::-webkit-scrollbar {
        width: 8px;
        /*滚动条的宽度*/
        height: 8px;
        /*滚动条的高度*/
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条的样式*/
        height: 50px;
        background-color: #d0d4d8;
        border-radius: 4px;
        // border: 1px solid #fff;
      }

      &::-webkit-scrollbar-thumb:hover {
        /*垂直滚动条的样式*/
        height: 50px;
        background-color: #9f9fa0;
        border-radius: 4px;
        // border: 1px solid #fff;
      }
    }
  }

</style>