<template>
  <div class="structure-box">
    <div class="left">
      <ul>
        <li v-for="(item, index) in leftList" :key="index" :class="activeIndex === index ? 'active' : ''"
          @click="changeLeftVal(item, index)">
          <div v-if="!item.isAnalyzer">
            <span>
              <svg-icon icon-class="topMove" class="topMove" @click="moveUpClick(item)" />
            </span>
            <span>
              <svg-icon icon-class="upMove" @click="moveDownClick(item)" />
            </span>
            <span>{{ item.columnChnName }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="right">
      <el-form ref="structureForm" size="mini" :model="structureForm" label-width="100px" :rules="rules">
        <div class="title">数据类型</div>
        <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',
          }">
          <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>
        <div class="title">字段属性</div>
        <el-form-item class="radio">
          <el-checkbox :value="structureForm.columnCanNull" @change="changeShowAccountStatus">是否必填</el-checkbox>
        </el-form-item>

        <div class="sub-btn" v-if="btnType">
          <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>
    </div>
  </div>
</template>

<script>
  import {
    getFindList
  } from "@/api/system-management/templateSetting"
  import {
    message,
    clearObjValue
  } from "@/utils/common.js";
  import rules from "./rules";
  export default {
    data() {
      return {
        rules,
        columnClassList: [],
        columnInputTypeList: [],

        optionList: [],
        activeIndex: null,
        OptionType: false,
        OptionValue: "",
      };
    },
    props: {
      btnType: {
        type: Boolean,
        default: () => true,
      },
      downTypeList: {
        type: Array,
        default: () => [],
      },
      structureType: {
        type: Boolean,
        default: () => false,
      },
      structureForm: {
        type: Object,
        default: () => {},
      },
      leftList: {
        type: Array,
        default: () => [],
      },
    },
    created() {
      this.getDictionaries();
    },
    mounted() {
      this.OptionValue = "";
      this.OptionType = false;
    },

    methods: {
      changeShowAccountStatus() {
        this.structureForm.columnCanNull = !this.structureForm.columnCanNull;
      },
      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 : ''
      },
      async getOptionValue(val) {
        getFindList({
          type: val
        }).then(res => {
          if (res.success) {
            let data = {
              type: val,
              // note: res.body.list,
              note: [],
            };
            this.structureForm.note = JSON.stringify(data);
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      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);
          }
        })
      },
      offStructureClick() {
        this.$emit("offStructureClick", this.leftList);
        this.OptionValue = "";
        this.OptionType = false;
        this.activeIndex = null;
      },
      preservationClick() {
        // this.structureType  true为修改 false为新增
        // return;
        if (this.activeIndex != null) {
          this.leftList.forEach((item, key) => {
            if (key === this.activeIndex) {
              this.$set(item, "columnChnName", this.structureForm.columnChnName);
              this.$set(item, "columnClass", this.structureForm.columnClass);
              this.$set(
                item,
                "columnInputType",
                this.structureForm.columnInputType
              );
              this.$set(item, "columnName", this.structureForm.columnName);
              this.$set(item, "columnCanNull", this.structureForm.columnCanNull);
              this.$set(item, "columnPoint", this.structureForm.columnPoint);
              this.$set(item, "columnWidth", this.structureForm.columnWidth);
              this.$set(item, "note", this.structureForm.note);
            }
          });
          return;
        }
        this.$refs.structureForm.validate((valid) => {
          if (valid) {
            let arr = [];
            if (this.leftList.length === 0) {
              if (
                this.structureForm.columnInputType === "2" &&
                !this.OptionValue && this.structureForm.columnName != "fonds_no"
              ) {
                message("warning", "请选择输入框下拉值", 3500);
                return;
              }
              this.leftList.push({
                ...this.structureForm,
              });
            } else {
              if (
                this.leftList.filter(
                  (item) =>
                  item.columnChnName === this.structureForm.columnChnName
                ).length
              ) {
                message("warning", "输入的中文名已存在,请重新输入中文名", 3500);
                return;
              }
              if (
                this.leftList.filter(
                  (item) => item.columnName === this.structureForm.columnName
                ).length
              ) {
                message("warning", `输入的英文名已存在,请更换英文名`, 3500);
                return;
              }

              if (
                this.structureForm.columnInputType === "2" &&
                !this.OptionValue && this.structureForm.columnName != "fonds_no"
              ) {
                message("warning", "请选择输入框下拉值", 3500);
                return;
              }
              if (this.structureForm)
                this.leftList.map((item) => {
                  arr.push({
                    ...this.structureForm,
                  });
                });
              if (arr.length > 0) {
                this.leftList.push(arr[0]);
              }
            }
          } else {
            return false;
          }
        });
      },
      resetStructureClick() {
        this.activeIndex = null;
        this.$emit("resetStructureClick");
      },
      changeLeftVal(val, index) {
        this.activeIndex = index;
        if (val.columnInputType === "2") {
          this.OptionType = true;
          this.OptionValue = JSON.parse(val.note).type;
        } else {
          this.OptionType = false;
        }
        this.$emit("changeLeftVal", val);
      },
      moveUpClick(item) {
        let index = this.leftList.indexOf(item);
        if (this.leftList.length > 1 && index !== 0) {
          var temp = this.leftList[index - 1];
          this.leftList[index - 1] = this.leftList[index];
          this.leftList[index] = temp;
        }
      },
      moveDownClick(item) {
        let index = this.leftList.indexOf(item);
        if (this.leftList.length > 1 && index !== this.leftList.length - 1) {
          var temp = this.leftList[index + 1];
          this.leftList[index + 1] = this.leftList[index];
          this.leftList[index] = temp;
        }
      },
      deleteStructureClick() {
        if (this.activeIndex === null) {
          message("warning", "请先选择要删除的结构", 2000);
          return;
        }
        this.OptionType = false;
        clearObjValue(this.structureForm);
        this.leftList.map((item, index) => {
          if (index === this.activeIndex) {
            // this.leftList.splice(index, 1);
            item.isAnalyzer = 'del'
            this.activeIndex = null;
          }
        });
      },
    },
  };

</script>

<style lang="scss" scoped>
  .structure-box {
    width: 100%;
    height: 550px;
    max-height: 550px;
    display: flex;
    justify-content: space-between;
    text-align: left;

    .left {
      width: 30%;
      height: 100%;
      overflow-y: auto;

      ul {
        list-style: none;

        li {
          line-height: 30px;
          font-size: 15px;

          :nth-child(2) {
            margin: 0 5px;
          }

          // :nth-child(1) {
          //   margin: 0 3px;
          // }

          i {
            &:hover {
              cursor: pointer;
            }

            &:nth-of-type(2) {
              margin: 0 3px;
            }
          }

          span {
            &:hover {
              cursor: pointer;
            }
          }

          &.active {
            background-color: #cfe2f3;
          }
        }
      }
    }

    .right {
      width: 69%;
      height: 100%;
      overflow-y: auto;

      .el-form {
        .title {
          font-size: 16px;
          border-bottom: 1px solid #ccc;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        .el-form-item {
          &.radio {
            ::v-deep .el-form-item__content {
              margin-left: 0 !important;

              .el-radio-group {
                width: 100%;
                display: flex;
                flex-direction: column;

                .el-radio {
                  line-height: 30px;
                }
              }
            }
          }

          &.checkbox {
            ::v-deep .el-form-item__content {
              margin-left: 0 !important;

              .el-checkbox-group {
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .el-checkbox {
                  width: 50%;
                  margin-right: 0;
                }
              }
            }
          }
        }

        .sub-btn {
          width: 100%;
          text-align: right;
        }
      }
    }

    .NumClass {
      display: flex;
    }
  }

</style>
