<template>
  <div class="displayInfo">
    <div class="btn">
      <div class="chunk">
        <el-button
            icon="el-icon-back"
            @click="
            $router.replace({ path: '/integrationOption/masterDataOptions' })
          "
        >返回
        </el-button
        >
      </div>
      <div class="chunk">
        <el-button
            icon="el-icon-first-aid-kit"
            type="primary"
            @click="saveHandle"
            :loading="saveLoading"
        >保存
        </el-button
        >
      </div>
    </div>
    <div class="main" v-loading="mainLoading">
      <div class="title">显示类型</div>
      <div class="radio">
        <el-radio-group v-model="displayType">
          <el-radio label="1">树形</el-radio>
          <el-radio label="2">列表</el-radio>
        </el-radio-group>
      </div>
      <div class="form" v-if="displayType == 1">
        <baseNewForm
            ref="optionForm"
            :spanNumber="24"
            :isFunBtn="false"
            :formRow="formRow"
            :ruleForm="ruleForm"
            :labelPosition="'left'"
            labelWidth="80px"
            @onSubmit="onSubmit">
        </baseNewForm>
      </div>
      <div class="tabIndex">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">查询</el-menu-item>
          <el-menu-item index="2">列表</el-menu-item>
          <el-menu-item index="3">新增</el-menu-item>
          <el-menu-item index="4">修改</el-menu-item>
          <el-menu-item index="5">查看</el-menu-item>
        </el-menu>
      </div>
      <div class="content">
        <el-transfer
            style="text-align: left; display: inline-block;"
            v-model="contentFormArr"
            filterable
            :titles="['全部字段', '显示字段']"
            target-order="push"
            @change="handleChange"
            @right-check-change="rightCheckChange"
            :props="propsKey"
            :data="data">
          <span slot-scope="{ option }">{{ option.name }}</span>
        </el-transfer>
        <div class="buttonList">
          <div class="upBtn">
            <el-button type="primary" icon="el-icon-top" @click="upHanlde"
                       :disabled="rightActived.length !== 1"></el-button>
          </div>
          <div class="downBtn">
            <el-button type="primary" icon="el-icon-bottom" @click="downHanlde"
                       :disabled="rightActived.length !==1"></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
import {getApiModuleApi} from "@/api/apiChunks/index.js";

export default {
  name: "index.vue",
  data() {
    return {
      mainLoading:false,
      saveLoading:false,
      id: "",
      propsKey: {
        key: "id",
        label: "name",
        disabled: "disabled"
      },
      displayType: "1",
      formRow: [
        {
          elCol: [
            {
              type: "select",
              title: "显示字段",
              id: "viewFiled",
              row: 12,
              disabled: false,
              required: true,
              fontSize: 16,
              options: [],
            },
            {
              type: "select",
              title: "上级id字段",
              id: "upIdFiled",
              row: 12,
              disabled: false,
              required: true,
              fontSize: 16,
              options: [],
            },
          ]
        }
      ],
      ruleForm: {},
      activeIndex: "1",
      contentFormArr: [],
      data: [],
      rightActived: [],
      addFiled: [],
      dbAddFiled: [],
      editFiled: [],
      dbEditFiled: [],
      showFiled: [],
      dbShowFiled: [],
      queryFiled: [],
      dbQueryFiled: [],
      listFiled: [],
      dbListFiled: [],
    }
  },
  methods: {
    async init() {
      this.mainLoading = true
      this.activeIndex = "1"
      const res = await getApiModuleApi({
        tl: "mdmService",
        as: "mdmService",
        dj: "queryMdmModuleView",
      }, {
        id: this.$route.query.id
      })
      this.mainLoading = false
      this.addFiled = res.attribute.addFiled
      this.dbAddFiled = res.attribute.dbAddFiled
      this.initDispose(this.addFiled, this.dbAddFiled)
      this.editFiled = res.attribute.editFiled
      this.dbEditFiled = res.attribute.dbEditFiled
      this.initDispose(this.editFiled, this.dbEditFiled)
      this.showFiled = res.attribute.showFiled
      this.dbShowFiled = res.attribute.dbShowFiled
      this.initDispose(this.showFiled, this.dbShowFiled)
      this.queryFiled = res.attribute.queryFiled
      this.dbQueryFiled = res.attribute.dbQueryFiled
      this.initDispose(this.queryFiled, this.dbQueryFiled)
      this.listFiled = res.attribute.listFiled
      this.dbListFiled = res.attribute.dbListFiled
      this.initDispose(this.listFiled, this.dbListFiled)
      this.data = this.queryFiled
      this.contentFormArr = []
      this.dbQueryFiled.forEach(item => {
        this.contentFormArr.push(item.id)
      })

      this.id = res.attribute.mdmModuleViewEntity.id
      if (!res.attribute.mdmModuleViewEntity.viewName) return
      this.displayType = res.attribute.mdmModuleViewEntity.viewName
      this.ruleForm = {
        viewFiled: res.attribute.mdmModuleViewEntity.viewFiled,
        upIdFiled: res.attribute.mdmModuleViewEntity.upIdFiled,
      }

    },
    async initSelect() {
      const res = await getApiModuleApi({
        tl: "mdmService",
        as: "mdmService",
        dj: "queryMdmModuleServerMainFiled"
      }, {
        mdmId: this.$route.query.id
      })
      console.log(res, 'select')
      if (res.status === '200') {
        this.formRow[0].elCol[1].options = []
        this.formRow[0].elCol[0].options = []
        res.attribute.forEach(item => {
          this.formRow[0].elCol[1].options.push({
            label: item.chName,
            id: item.enName,
          })
          this.formRow[0].elCol[0].options.push({
            label: item.chName,
            id: item.enName,
          })
        })
      }
    },
    async saveHandle() {
      if (this.displayType === '1') {
        this.$refs.optionForm.submitForm()
      } else {
        this.saveLoading = true
        let params = {
          id: this.$route.query.id,
          mdmModuleViewEntity: {
            id: this.id,
            viewName: this.displayType
          },
          addFiled: this.dbAddFiled,
          editFiled: this.dbEditFiled,
          showFiled: this.dbShowFiled,
          queryFiled: this.dbQueryFiled,
          listFiled: this.dbListFiled,
        }
        const res = await getApiModuleApi({
          tl: "mdmService",
          as: "mdmService",
          dj: "doSaveMdmModuleView",
        }, params)
        if (res.status === '200') {
          this.$vmNews("保存成功！", "success")
          this.init()
          this.$store.dispatch("GenerateRoutes")
        }
        this.saveLoading = false
      }

    },
    //验证通过
    async onSubmit() {
      if (this.ruleForm.viewFiled === this.ruleForm.upIdFiled) {
        this.$vmNews("显示字段与上级id字段不能相同", "warning")
        return
      }
      this.saveLoading = true
      let params = {
        id: this.$route.query.id,
        mdmModuleViewEntity: {
          id: this.id,
          viewName: this.displayType,
          ...this.ruleForm
        },
        addFiled: this.dbAddFiled,
        editFiled: this.dbEditFiled,
        showFiled: this.dbShowFiled,
        queryFiled: this.dbQueryFiled,
        listFiled: this.dbListFiled,
      }
      const res = await getApiModuleApi({
        tl: "mdmService",
        as: "mdmService",
        dj: "doSaveMdmModuleView",
      }, params)
      if (res.status === '200') {
        this.$vmNews("保存成功！", "success")
        this.$store.dispatch("GenerateRoutes")
        this.init()
      }
      this.saveLoading = false
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key
      this.rightActived = []
      let tempObj = {
        1: ['queryFiled', 'dbQueryFiled'],
        2: ['listFiled', 'dbListFiled'],
        3: ['addFiled', 'dbAddFiled'],
        4: ['editFiled', 'dbEditFiled'],
        5: ['showFiled', 'dbShowFiled']
      }
      this.data = this[tempObj[key][0]]
      this.contentFormArr = []
      this[tempObj[key][1]].forEach(item => {
        this.contentFormArr.push(item.id)
      })
    },
    handleChange(value, direction, movedKeys) {
      let tempObj = {
        1: ['queryFiled', 'dbQueryFiled'],
        2: ['listFiled', 'dbListFiled'],
        3: ['addFiled', 'dbAddFiled'],
        4: ['editFiled', 'dbEditFiled'],
        5: ['showFiled', 'dbShowFiled']
      }
      this.disposeDataArr(value)
      this.rightActived = []
    },
    initDispose(arr1, arr2) {
      arr2.forEach(item => {
        arr1.some(ele => {
          if (item.viewFiled === ele.id) {
            item.id = ele.id
            item.name = ele.name
            return true
          }
          return false
        })
      })
    },
    rightCheckChange(arr) {
      this.rightActived = arr
    },
    // 向上方法
    upHanlde() {
      const index = this.contentFormArr.findIndex(ele => {
        return this.rightActived[0] === ele
      })
      if (index === 0) {
        this.$vmNews("排序为1时无法向上")
        return
      }
      const tempDele = this.contentFormArr.splice(index, 1)
      this.contentFormArr.splice(index - 1, 0, tempDele[0])
      this.disposeDataArr(this.contentFormArr)
    },
    // 向下方法
    downHanlde() {
      const index = this.contentFormArr.findIndex(ele => {
        return this.rightActived[0] === ele
      })
      if (index === this.contentFormArr.length - 1) {
        this.$vmNews("末尾排序无法向下排序")
        return
      }
      const tempDele = this.contentFormArr.splice(index, 1)
      this.contentFormArr.splice(index + 1, 0, tempDele[0])
      this.disposeDataArr(this.contentFormArr)
    },
    disposeDataArr(arr) {
      let tempObj = {
        1: ['queryFiled', 'dbQueryFiled'],
        2: ['listFiled', 'dbListFiled'],
        3: ['addFiled', 'dbAddFiled'],
        4: ['editFiled', 'dbEditFiled'],
        5: ['showFiled', 'dbShowFiled']
      }
      this[tempObj[this.activeIndex][1]] = []
      arr.forEach((idNum, index) => {
        this.data.some(item => {
          if (item.id === idNum) {
            this[tempObj[this.activeIndex][1]].push({...item, sort: index})
            return true
          } else {
            return false
          }
        })
      })
    }
  },
  components: {
    baseNewForm
  },
  created() {
    this.init()
    this.initSelect()
    this.$emit("flashActive", 2)
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-menu-item {
  padding: 0 35px;
}

::v-deep .el-transfer-panel {
  width: 25vw;
  height: 60vh;
}

::v-deep .el-button {
  border-radius: 16px;
}

::v-deep .el-transfer-panel__list {
  height: 50vh;
}
::v-deep .el-transfer-panel__body {
  height: 50vh;
}

.displayInfo {
  background-color: #fbfbfb;
  width: 100%;
  position: relative;

  > .btn {
    display: flex;
    justify-content: flex-end;

    > .chunk {
      margin-left: 10px;
    }
  }

  > .main {
    background-color: #fff;
    border-right: 8px;
    height: 85vh;
    overflow: auto;
    margin-top: 10px;
    padding: 0px 15px;

    > .title {
      font-weight: 600;
      margin: 15px 0;
    }

    > .radio {
      margin: 15px 20px;
    }

    > .tabIndex {
      margin-top: 10px;
    }

    > .content {
      margin-top: 30px;
      display: flex;
      align-items: center;

      .buttonList {
        margin-left: 50px;

        .downBtn {
          margin-top: 30px;
        }
      }
    }
  }

}
</style>
