<template>
  <div class="displayInfo" v-loading="mainLoading">
    <div class="typeSetting">
      <div class="btn">
        <div class="title">显示类型</div>
        <div class="chunk">
          <el-button
            v-if="!editFlag"
            icon="el-icon-edit"
            type="primary"
            @click="editFlag=true"
          >编辑
          </el-button>
          <el-button
            v-if="editFlag"
            icon="el-icon-close"
            @click="getRuleForm"
            :loading="saveLoading"
          >取消
          </el-button>
          <el-button
            v-if="editFlag"
            icon="el-icon-first-aid-kit"
            type="primary"
            @click="saveHandle"
            :loading="saveLoading"
          >保存
          </el-button>
        </div>
      </div>
      <template v-if="!editFlag">
        <div class="radio" style="margin-bottom: 20px">
          <el-radio-group v-model="displayType" :disabled="true">
            <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="'right'"
            labelWidth="100px"
            @onSubmit="onSubmit"
            :lookFlag="true"
          >
          </baseNewForm>
        </div>
      </template>
      <template v-else>
        <div class="radio" style="margin-bottom: 20px">
          <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="'right'"
            labelWidth="100px"
            @onSubmit="onSubmit"
          >
          </baseNewForm>
        </div>
      </template>

    </div>
    <div class="main">
      <div class="content">
        <div class="showItem">
          <div class="itemTitle">查询</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('查询')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="index">
              <div class="name">{{ item.viewName }}</div>
            </div>
          </div>
        </div>
        <div class="showItem">
          <div class="itemTitle">列表</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('列表')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in dbListFiled" :key="index">
              <div class="name">{{ item.viewName }}</div>
            </div>
          </div>
        </div>
        <div class="showItem">
          <div class="itemTitle">新增</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('新增')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in dbAddFiled" :key="index">
              <div class="name">{{ item.viewName }}</div>
            </div>
          </div>
        </div>
        <div class="showItem">
          <div class="itemTitle">修改</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('修改')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in dbEditFiled" :key="index">
              <div class="name">{{ item.viewName }}</div>
            </div>
          </div>
        </div>
        <div class="showItem">
          <div class="itemTitle">查看</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('查看')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in dbShowFiled" :key="index">
              <div class="name">{{ item.viewName }}</div>
            </div>
          </div>
        </div>
        <div class="showItem">
          <div class="itemTitle">按钮</div>
          <div class="setting">
            <div class="settingBox" @click="settingHandle('按钮')">
              <div class="img">
                <img src="./images/设置.png" alt="">
              </div>
              <div class="value">设置</div>
            </div>
          </div>
          <div class="showCheckBoxList">
            <div class="showCheckBoxItem" v-for="(item,index) in btnShowList" :key="index">
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--     -->
    <base-right-dialog
      ref="mainTableAddtDialog"
      :footerShow="true"
      :dialogVisible.sync="mainTableDialogShow"
      :title="activeTitle + '设置'"
      :submitShow="true"
      :size="'50%'"
      @handleConfirmClick="mainTableSaveHandle"
      @handleClose="mainTableDialogShow=false"
    >
      <div class="mainTable">
        <settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
      </div>
    </base-right-dialog>
  </div>
</template>
<script>
import settingChunk from '@/views/masterDataOptions/displayInfo/settingChunk.vue'
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
import { getApiModuleApi } from '@/api/apiChunks/index.js'
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
import { authApi } from '@/api/apis/auth'

export default {
  name: 'index.vue',
  data() {
    return {
      formRow: [
        {
          elCol: [
            {
              type: 'select',
              title: '显示字段',
              id: 'viewFiled',
              row: 6,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            },
            {
              type: 'select',
              title: '上级id字段',
              id: 'upIdFiled',
              row: 6,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        }
      ],
      ruleForm: {},
      ainLoading: false,
      displayType: '1',//显示类型
      saveLoading: false,//保存loading
      activeTitle: '',//当前选中的key名用于右弹窗
      mainTableDialogShow: false,
      mainLoading: false,
      'dbQueryFiled': [],//查询
      'dbAddFiled': [],//新增
      'dbEditFiled': [],//修改
      'dbShowFiled': [],//查看
      'dbListFiled': [],//列表
      btnShowList: [],//已选中的按钮
      allFiledList: [
        {
          buttonName: '新建',
          buttonValue: 'new',
          buttonType: '1'
        }, {
          buttonName: '重置',
          buttonValue: 'resize',
          buttonType: '2'
        }, {
          buttonName: '查询',
          buttonValue: 'search',
          buttonType: '3'
        }, {
          buttonName: '修改',
          buttonValue: 'edit',
          buttonType: '4'
        }, {
          buttonName: '删除',
          buttonValue: 'dele',
          buttonType: '5'
        }, {
          buttonName: '查看',
          buttonValue: 'view',
          buttonType: '6'
        }, {
          buttonName: '下发',
          buttonValue: 'send',
          buttonType: '7'
        }
      ],//所有按钮
      dist: {
        '查询': ['queryFiled', 'dbQueryFiled', 1],
        '列表': ['listFiled', 'dbListFiled', 2],
        '新增': ['addFiled', 'dbAddFiled', 3],
        '修改': ['editFiled', 'dbEditFiled', 4],
        '查看': ['showFiled', 'dbShowFiled', 5]
      },//字典
      editFlag: false
    }
  },
  methods: {
    async initSelect() {
      const res = await getApiModuleApi({
        tl: 'mdmModuleService',
        as: '',
        dj: 'queryMdmMainDBField'
      }, {
        mdmId: this.$route.query.id
      })
      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
          })
        })
      }
    },
    //设置保存成功
    saveSuccessEmit() {
      this.mainTableDialogShow = false
      this.getAllField()
    },
    //验证通过
    async onSubmit() {
      if (this.ruleForm.id) {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
          ...this.ruleForm,
          mdmId: this.$route.query.id,
          viewName: this.displayType
        })
        this.$vmNews('保存成功', 'success')
        this.editFlag = false
        this.getRuleForm()
      } else {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'saveMdmView', '', {
          ...this.ruleForm,
          mdmId: this.$route.query.id,
          viewName: this.displayType

        })
        this.$vmNews('保存成功', 'success')
        this.editFlag = false
        this.getRuleForm()
      }

    },
    //获取类型
    async getRuleForm() {
      this.ruleForm = {}
      const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
        mdmId: this.$route.query.id
      })
      console.log(res.attribute, 'res.attribute', res)
      this.ruleForm = res.attribute ? res.attribute : {}
      this.displayType = this.ruleForm.viewName ? this.ruleForm.viewName : '1'
      this.editFlag = false
    },
    //保存
    saveHandle() {
      if (this.displayType === '1') {
        this.$refs.optionForm.submitForm()
      } else {
        this.onSubmit()
      }
    },
    //点击设置
    settingHandle(key) {
      if (!this.ruleForm.id) {
        this.$vmNews('请先添加显示类型后再配置按钮')
        return
      }
      this.activeTitle = key
      this.mainTableDialogShow = true
      this.$nextTick(() => {
        this.$refs.settingChunk.getAllBtn(key)
      })
    },
    //右弹窗点击保存
    mainTableSaveHandle() {
      this.$refs.settingChunk.saveHandle()
    },
    //获取所有字段
    async getAllField() {
      //字段相关
      const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
        id: this.$route.query.id
      })
      console.log(res, 'res')
      this.dbQueryFiled = res.attribute.dbQueryFiled
      this.dbListFiled = res.attribute.dbListFiled
      this.dbAddFiled = res.attribute.dbAddFiled
      this.dbEditFiled = res.attribute.dbEditFiled
      this.dbShowFiled = res.attribute.dbShowFiled
      //按钮相关
      const res2 = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
        mdmId: this.$route.query.id
      })
      res2.attribute.forEach(item => {
        item.name = this.allFiledList[item.buttonType - 1].buttonName
      })
      this.btnShowList = res2.attribute
    }
  },
  components: {
    baseRightDialog,
    baseNewForm,
    settingChunk
  },
  created() {
    //获取显示类型和显示字段
    this.getRuleForm()
    //获取下啦
    this.initSelect()
    //获取所有显示字段
    this.getAllField()
    this.$emit('flashActive', 2)
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__content {
  margin: 0 !important;
}

::v-deep .el-menu-item {
  padding: 0 35px;
}

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

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

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

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

.displayInfo {
  background-color: #f5f5f5;
  position: relative;
  margin-left: 5px;
  width: 99.5%;

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

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

  .typeSetting {
    background-color: #fff;
    padding: 20px 10px 0px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-radius: 16px;
    width: 100%;

    > .btn {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: 600;
        margin-left: 20px;
        margin-bottom: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }
    }

    > .title {
      font-weight: 600;
      margin-left: 20px;
      margin-bottom: 20px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      line-height: 25px;
      text-align: left;
      font-style: normal;
    }

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

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

  .main {
    border-radius: 16px;
    background-color: #fff;
    padding: 15px 10px;
    width: 100%;
    overflow: auto;

    .content {
      margin-top: 1vh;
      display: flex;
      align-items: center;
      width: 2000px;

      .showItem {
        flex: 1;
        margin-left: 15px;
        height: 55vh;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
        padding: 14px 20px;
        position: relative;

        .itemTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          font-style: normal;
          text-align: center;
          padding-bottom: 20px;
          border-bottom: 1px #ebebeb solid;
        }

        .setting {
          width: 100%;
          height: 15vh;
          position: absolute;
          bottom: 0;
          left: 0;
          border-radius: 8px;
          display: none;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, .6);

          .settingBox {
            cursor: pointer;

            .img {
              width: 5vh;
              height: 5vh;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 22px;
              text-align: center;
              font-style: normal;
            }
          }
        }

        &:hover {
          .setting {
            display: flex !important;
          }
        }

        .showCheckBoxList {
          height: 90%;
          overflow: auto;
        }

        .showCheckBoxItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 16px 0 16px;
          border-radius: 4px;
          font-size: 14px;


          .btn {
            color: grey;
            cursor: pointer;
          }
        }
      }
    }
  }


}
</style>
