<template>
  <div class="interface">
    <div class="left">
      <el-form class="form" ref="interfaceForm" size="mini" label-width="110px">
        <el-form-item v-for="(item, index) in interfaceFormList" :label="item.label" :key="index"
          :style="{ width: item.width }" @click.native="clickFormItem(item, index)" :required="item.require">
          <template slot="label">
            <span :class="{ colorRed: select - 1 === index }">{{
              item.label
            }}</span>
          </template>
          <!-- 输入框 -->
          <el-input v-if="item.type === 'input'" v-model="item.value" placeholder="请输入" disabled></el-input>
          <!-- 文本框 -->
          <el-input v-if="item.type === 'text'" type="textarea" placeholder="请输入" :rows="2" disabled></el-input>
          <!-- 下拉框 -->
          <!-- onmousedown="javascript:return false;" -->
          <el-select v-if="item.type === 'select'" v-model="item.value" clearable placeholder="请选择" disabled>
            <!-- disabled -->
            <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value" disabled>
            </el-option>
          </el-select>
          <!-- 年 -->
          <el-date-picker v-if="item.type === 'datetime'" v-model="item.value" type="datetime" placeholder="选择日期时间"
            disabled></el-date-picker>
          <el-date-picker v-if="item.type === 'datetimerange'" v-model="item.value" type="datetimerange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" disabled></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="top">
        <span>设置属性</span>
        <el-button class="middle" type="success" size="mini" @click="addAssembly"><i class="iconfont icon-add"></i>添加组件
        </el-button>
        <!-- <el-button :loading="btnloading" type="primary" size="mini" @click="submit"><i
            class="iconfont icon-baocun"></i>保存</el-button> -->
      </div>
      <el-collapse @change="handleChange">
        <el-collapse-item title="字段排序" name="1">
          <template slot="title">
            <span style="margin-right: 10px">字段排序</span>
            <el-tooltip class="item" effect="dark" content="表格可以拖拽" placement="top">
              <i class="el-icon-question"></i></el-tooltip>
          </template>
          <el-table class="table-sorta" row-key="id" border size="mini" :data="interfaceFormList" style="width: 100%">
            <el-tooltip class="item" effect="dark" content="表格可以拖拽" placement="top">
              <el-table-column prop="label" label="已选标题字段" align="center">
              </el-table-column>
            </el-tooltip>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="查询条件" name="2">
          <div>
            <label style="padding-left: 15px; padding-right: 5px">查询条件:</label>
            <el-select v-model="criteria" style="width: 70%" clearable multiple size="small" placeholder="请选择">
              <el-option v-for="(item, key) in worderAll" :key="key" :label="item.columnChnName" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-collapse-item>
        <el-collapse-item title="组件属性" name="3">
          <template slot="title">
            <div class="properties">
              <span> 组件属性 </span>
              <span class="btn">
                <span @click="stopPropOne">
                  <el-button type="primary" size="mini" @click="applicationClick"><i class="iconfont icon-dui"></i>应用
                  </el-button>
                </span>
                <span @click="stopPropTwo">
                  <el-button slot="reference" type="danger" size="mini" @click="delAssembly"><i
                      class="iconfont icon-delete"></i>删除</el-button>
                </span>
              </span>
            </div>
          </template>
          <el-form ref="componentForm" size="mini" :model="componentForm" label-width="80px" :rules="rules">
            <el-form-item label="字段：">
              <el-select filterable v-model="componentForm.prop" clearable @change="changeProp" placeholder="请选择"
                style="width:100%">
                <el-option v-for="(item, key) in worderAll" :key="key" :label="item.columnChnName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签：">
              <el-input v-model="componentForm.name"></el-input>
            </el-form-item>
            <el-form-item label="宽度：">
              <el-select v-model="componentForm.width" clearable placeholder="请选择" style="width:100%">
                <el-option value="30%">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="30"></el-progress>
                </el-option>
                <el-option value="50%">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="50"></el-progress>
                </el-option>
                <el-option value="100%">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="100"></el-progress>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  import Sortable from "sortablejs";
  import {
    message
  } from "@/utils/common";
  export default {
    props: {
      componentForm: Object,
      worderAll: Array,
      interfaceFormList: Array,
      formData: Object,
    },
    data() {
      return {

        // 查询条件
        criteria: [],
        //选中的项目
        select: "",
        // 界面表单
        interfaceForm: {},
        rules: {},
      };
    },
    methods: {
      //保存
      submit() {
        if (!this.formData.value) {
          message("warning", "请选择模板", 2000);
          return;
        }
        if (!this.interfaceFormList.length) {
          message("warning", "请先填写组件", 2000);
          return;
        }
        if (
          this.interfaceFormList.filter((item) => item.label === "项目").length
        ) {
          message("warning", "组件未设置字段，不能保存", 3000);
          return;
        }
        let interface_tem = {
          id: 0,
          entityId: this.formData.value.slice(-1)[0], //模板id
          entityType: this.formData.label,
          entityLevel: this.formData.entityLevel,
          // interfaceQuery: JSON.stringify(this.criteria), //查询条件
          interfaceQuery: [], //查询条件
          interfaceShow: [],
          tableShow: [],
        };
        this.interfaceFormList.forEach((item, index) => {
          //组件
          let data = {
            ctype: item.type,
            label: item.label,
            fieldName: item.nameEn,
            fieldNameZh: item.label,
            note: item.note,
            pid: item.prop,
            value: item.value,
            require: item.require,
            sort: index + 1
          };
          if (item.width === "30%") {
            data.width = 8;
          }
          if (item.width === "50%") {
            data.width = 12;
          }
          if (item.width === "100%") {
            data.width = 24;
          }
          interface_tem.interfaceShow.push(data);
        });

        this.criteria.forEach((item) => {
          interface_tem.interfaceQuery.push(
            interface_tem.interfaceShow.filter((ele) => ele.pid === item)[0]
          );
        });
        this.$emit("submit", interface_tem);
      },
      //行拖拽
      rowDrop() {
        const tbody = document.querySelector(
          ".table-sorta .el-table__body-wrapper tbody"
        );
        const _this = this;
        Sortable.create(tbody, {
          onEnd({
            newIndex,
            oldIndex
          }) {
            _this.select = "";
            const currRow = _this.interfaceFormList.splice(oldIndex, 1)[0];
            _this.interfaceFormList.splice(newIndex, 0, currRow);
          },
        });
      },
      //添加组件
      addAssembly() {
        if (!this.formData.value) {
          message("warning", "请先选择模板", 2000);
          return;
        }
        if (this.interfaceFormList.length >= this.worderAll.length) {
          message("warning", "该模板的组件已经达到上限", 2000);
          return;
        }
        let data = {
          id: this.interfaceFormList.length + 1,
          type: "input",
          label: "项目",
          width: "30%",
          length: "1",
          prop: "",
          NameEn: "",
          value: "",
          note: "",
          require: false,
        };
        this.interfaceFormList.push(data);
        this.rowDrop();
      },
      //点击项目获取key
      clickFormItem(item, key) {
        this.select = key + 1;
        this.componentForm.prop = item.prop;
        this.componentForm.name = item.label;
        this.componentForm.nameEn = item.nameEn;
        this.componentForm.width = item.width;
        this.componentForm.type = item.type;
        this.componentForm.note = item.note;
      },
      //选择字段名
      changeProp(val) {
        this.worderAll.forEach((item) => {
          if (item.id === this.componentForm.prop) {
            this.componentForm.type = item.type;
            this.componentForm.name = item.columnChnName;
            this.componentForm.nameEn = item.columnName;
            this.componentForm.note = item.note ? JSON.parse(item.note) : "";
            this.componentForm.require =
              item.columnCanNull === "true" ? true : false;
            if (item.type === "datetimerange") {
              this.componentForm.width = "50%";
            } else if (item.type === "text") {
              this.componentForm.width = "100%";
            } else {
              this.componentForm.width = "30%";
            }
          }
        });
      },
      //手风琴折叠事件
      handleChange(val) {},
      stopPropOne(e) {
        e.stopPropagation();
      },
      //应用
      applicationClick() {
        if (!this.formData.value) {
          message("warning", "请先选择模板", 2000);
          return;
        }
        if (!this.select) {
          message("warning", "请选择要应用的项目", 2000);
          return;
        }
        if (!this.componentForm.prop) {
          message("warning", "请选择项目字段", 2000);
          return;
        }
        if (
          this.interfaceFormList[this.select - 1].label !=
          this.componentForm.name &&
          this.interfaceFormList.filter(
            (item) => item.label === this.componentForm.name
          ).length
        ) {
          message("warning", "该字段已使用", 2000);
          return;
        }
        this.interfaceFormList.forEach((item, key) => {
          if (key === this.select - 1) {
            this.worderAll.forEach(ele => {
              if (ele.columnChnName === this.componentForm.name) {
                item.require = ele.columnCanNull === "true" ? true : false
              }
            })
            item.prop = this.componentForm.prop;
            item.label = this.componentForm.name;
            item.width = this.componentForm.width;
            item.type = this.componentForm.type;
            item.nameEn = this.componentForm.nameEn;
            item.note = this.componentForm.note;
          }
        });
      },
      stopPropTwo(e) {
        e.stopPropagation();
      },
      //删除组件
      delAssembly() {
        if (!this.select) {
          message("warning", "请选择要删除的项目", 2000);
          return;
        }
        this.$confirm("此操作将删除该项目, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.interfaceFormList.forEach((item, key) => {
              if (key === this.select - 1) {
                this.interfaceFormList.splice(key, 1);
              }
            });
            this.interfaceFormList.forEach((item, index) => {
              item.id = index + 1;
            });
            this.select = "";
          })
          .catch(() => {
            // this.$message({
            //   type: "info",
            //   message: "已取消删除",
            // });
          });
      },
    },
  };

</script>

<style lang="scss" scoped>
  .interface {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: left;

    .left {
      width: 69%;
      height: 720px;
      // max-height: 460px;
      overflow-y: auto;
      padding: 20px 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;

      .form {
        display: flex;
        flex-wrap: wrap;

        .colorRed {
          color: red;
        }
      }
    }

    .right {
      width: 30%;
      height: 720px;
      // max-height: 460px;
      overflow-y: auto;
      padding: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;

      .top {
        margin-bottom: 5px;

        .middle {
          margin: 0 3px;
        }
      }

      .btn {
        margin: 5px 10px;
      }
    }
  }

</style>
