<template>
  <div class="boxView">
    <div class="left">
      <el-form class="form" ref="interfaceForm" size="mini" label-width="110px">
        <el-form-item v-for="(item, index) in InterfaceView" :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.ctype === 'input'" v-model="item.value" placeholder="请输入" disabled></el-input>
          <!-- 文本框 -->
          <el-input v-if="item.ctype === 'text'" type="textarea" placeholder="请输入" :rows="2" disabled></el-input>
          <!-- 下拉框 -->
          <!-- onmousedown="javascript:return false;" -->
          <el-select v-if="item.ctype === '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.ctype === 'datetime'" v-model="item.value" type="datetime" placeholder="选择日期时间"
            disabled></el-date-picker>
          <el-date-picker v-if="item.ctype === '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 style="font-size:13px">新增字段</span>
        <el-button class="middle" type="success" size="mini" @click="addAssembly" style="padding:6px;margin:4px 8px;"><i
            class="iconfont icon-add"></i>添加字段
        </el-button>
      </div>
      <el-collapse>
        <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="InterfaceView" max-height="500"
            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">
          <template slot="title">
            <div class="properties">
              <span> 修改名称 </span>
              <span class="btn">
                <span @click="stopPropOne" style="margin:0 8px">
                  <el-button type="primary" style="padding:6px" size="mini" @click="applicationClick"><i
                      class="iconfont icon-dui"></i>应 用
                  </el-button>
                </span>
                <span @click="stopPropTwo">
                  <el-button style="padding:6px" 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="100px">
            <el-form-item label="中文名：">
              <el-input v-model="componentForm.name"></el-input>
            </el-form-item>
            <el-form-item label="是否必填：">
              <el-select v-model="componentForm.require" clearable placeholder="请选择" style="width:100%">
                <el-option :value="true" label="是"></el-option>
                <el-option :value="false" label="否"></el-option>
              </el-select>
            </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>


    <el-dialog v-dialogDrag z-index='1000' title="添加字段" :visible.sync="worldStatus" width="45%"
      :close-on-click-modal="false" :close-on-press-escape="false" :before-close="cancel">
      <!-- <el-form :model="worldForm" :rules="ruleForm" ref="ruleForm" label-width="100px" class="diaForm">

      </el-form> -->
      <el-form ref="structureForm"  :model="structureForm" label-width="110px" :rules="rules">

        <el-form-item label="字段名称：" prop="columnName" :rules="rules.columnName">
          <el-input v-model="structureForm.columnName"></el-input>
        </el-form-item>
        <el-form-item label="中文名称：" prop="columnChnName" :rules="rules.columnChnName">
          <el-input v-model="structureForm.columnChnName"></el-input>
        </el-form-item>
        <el-form-item label="字段类型：" prop="columnClass" :rules="{
            required: true,
            message: '请选择字段类型',
            trigger: 'blur',
          }">
          <el-select v-model="structureForm.columnClass">
            <el-option v-for="(item, index) in columnClassList" :key="index" :label="item.label" :value="item.valueInt">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <div class="NumClass">
          <el-form-item label="长度：" style="width: 50%" prop="columnWidth"
            :rules="{ required: true, message: '请输入长度', trigger: 'blur' }">
            <el-input-number :step="1" step-strictly v-model="structureForm.columnWidth" controls-position="right"
              :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="小数位数：" style="width: 50%">
            <el-input-number step-strictly v-model="structureForm.columnPoint" controls-position="right" :min="0">
            </el-input-number>
          </el-form-item>
        </div> -->
        <!-- <div class="title"></div> -->
        <el-form-item class="radio" prop="columnInputType" :rules="{
            required: true,
            message: '请选择输入方式',
            trigger: 'blur',
          }" label="输入方式：">
          <el-radio-group v-model="structureForm.columnInputType"
            @change="InputTypeChange(structureForm.columnInputType)">
            <el-radio v-for="(item, index) in columnInputTypeList" :key="index" :label="item.value">{{ item.label }}
            </el-radio>
          </el-radio-group>
          <el-select v-model="OptionValue" v-if="OptionType" style="width: 50%" @change="getOptionValue(OptionValue)">
            <el-option v-for="(item, index) in downTypeList" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="radio" label="字段属性：">
          <el-checkbox :value="structureForm.columnCanNull" @change="changeShowAccountStatus">是否必填</el-checkbox>
        </el-form-item>

        <div class="sub-btn">
          <el-button type="success" size="mini" @click="resetStructureClick">添加</el-button>
          <!-- <el-button type="danger" size="mini" @click="deleteStructureClick">删除</el-button> -->
          <!-- <el-button type="primary" size="mini" @click="preservationClick">保存</el-button> -->
          <el-button type="primary" size="mini" @click="offStructureClick">关闭</el-button>
        </div>
      </el-form>
    </el-dialog>


  </div>

</template>
<script>
  import Sortable from "sortablejs";
  import {
    message
  } from "@/utils/common";
  import {
    getFindList
  } from "@/api/system-management/templateSetting"
  import rules from "../../templateSetting/components/third/components/rules";
  export default {
    props: {
      InterfaceView: {
        type: Array,
        default: () => []
      },
      columns: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        columnInputTypeList: [],
        columnClassList: [],
        downTypeList: [],
        OptionType: false,
        OptionValue: "",
        rules,
        structureForm: {
          columnName: "",
          columnChnName: "",
          columnClass: "",
          columnWidth: undefined,
          columnPoint: undefined,
          columnInputType: "",
          note: "",
          columnCanNull: false,
        },
        select: "",
        componentForm: {
          name: "",
          nameEn: "",
          width: "",
          require: null
        },
        worldStatus: false
      }
    },
    methods: {
      getOptionValue(val) {
        getFindList({
          type: val
        }).then(res => {
          if (res.success) {
            let data = {
              type: val,
              // note: res.body.list,
              note: [],
            };
            this.structureForm.note = data;
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      InputTypeChange(val) {
        this.OptionType = val === "2" ? true : false;
        this.OptionValue = val === "2" ? this.OptionValue : "";
        this.optionList = val === "2" ? this.optionList : [];
        this.structureForm.note = val === '2' ? this.structureForm.note : ''
      },
      resetStructureClick() {
        if ((this.InterfaceView.filter(ele => ele.fieldName === this.structureForm.columnName)).length) {
          message("warning", "已存在该英文字段名", 2000)
          return
        }
        if ((this.InterfaceView.filter(ele => ele.fieldNameZh === this.structureForm.columnChnName)).length) {
          message("warning", "已存在该中文字段名", 2000)
          return
        }
        if (this.structureForm.columnInputType === '2' && this.structureForm.note === '') {
          message("warning", "请选择下拉框的值", 3000)
          return
        }
        let data = {
          ctype: "",
          fieldName: this.structureForm.columnName,
          fieldNameZh: this.structureForm.columnChnName,
          id: this.InterfaceView.length + 1,
          label: this.structureForm.columnChnName,
          require: this.structureForm.columnCanNull,
          sort: this.InterfaceView.length + 1,
          tablewidth: "150",
          value: "",
          width: "30%",
        }
        if (this.structureForm.columnClass === 4) {
          data.ctype = 'datetime'
        } else if (this.structureForm.columnClass === 5) {
          data.ctype = 'datetimerange'
        } else {
          if (this.structureForm.columnInputType === '1') {
            data.ctype = 'input'
          } else if (this.structureForm.columnInputType === '2') {
            data.ctype = 'select'
            data.note = this.structureForm.note
          } else if (this.structureForm.columnInputType === '3') {
            data.ctype = 'text'
          }
        }
        this.columns.push(data)
        this.InterfaceView.push(data)
        this.worldStatus = false
      },
      offStructureClick() {
        this.worldStatus = false
      },
      changeShowAccountStatus() {
        this.structureForm.columnCanNull = !this.structureForm.columnCanNull;
      },
      cancel() {
        this.worldStatus = false
      },
      addAssembly() {
        this.worldStatus = true
        this.structureForm = {
          columnName: "",
          columnChnName: "",
          columnClass: "",
          columnWidth: undefined,
          columnPoint: undefined,
          columnInputType: "",
          note: "",
          columnCanNull: false,
        }

      },
      //行拖拽
      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.InterfaceView.splice(oldIndex, 1)[0];
            _this.InterfaceView.splice(newIndex, 0, currRow);
          },
        });
      },

      stopPropOne(e) {
        e.stopPropagation();
      },

      stopPropTwo(e) {
        e.stopPropagation();
      },
      delAssembly() {
        if (!this.select) {
          message("warning", "请选择要删除的项目", 2000);
          return;
        }
        this.$confirm('你确定要删除该字段吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('delAssembly', this.componentForm.nameEn)
        }).catch(() => {});
      },
      changeProp() {},
      //点击项目获取key
      clickFormItem(item, key) {
        this.select = key + 1;
        this.componentForm.name = item.fieldNameZh;
        this.componentForm.nameEn = item.fieldName;
        this.componentForm.width = item.width;
        this.componentForm.require = item.require;
      },
      applicationClick() {
        if (!this.select) {
          message("warning", "请选择要应用的项目", 2000);
          return;
        }
        this.InterfaceView.forEach(ele => {
          if (ele.fieldName === this.componentForm.nameEn) {
            ele.label = this.componentForm.name
            ele.fieldNameZh = this.componentForm.name
            ele.width = this.componentForm.width
            ele.require = this.componentForm.require
          }
        })
      },
      getDictionaries() {
        getFindList({
          type: 'columnClass'
        }).then(res => {
          if (res.success) {
            this.columnClassList = res.body.list;
          } else {
            this.$message.error(res.msg);
          }
        })
        getFindList({
          type: 'columnInputType'
        }).then(res => {
          if (res.success) {
            this.columnInputTypeList = res.body.list;
          } else {
            this.$message.error(res.msg);
          }
        })
        getFindList({
          type: 'downTypeList'
        }).then(res => {
          if (res.success) {
            this.downTypeList = res.body.list;
          } else {
            this.$message.error(res.msg);
          }
        })


      },
    },
    created() {
      this.getDictionaries();
    }
  }

</script>
<style lang="scss" scoped>
  .boxView {
    display: flex;
    justify-content: space-between;

    .left {
      width: 75%;
      border: 1px solid #ccc;
      height: 700px;
      padding: 20px 5px;
      overflow-y: auto;

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

        .colorRed {
          color: red;
        }
      }
    }

    .right {
      width: 24%;
    }
  }

  .sub-btn {
    padding: 8px 0;
    text-align: center;
  }

</style>
