<template>
  <div class="wrap">
    <div class="main" v-loading="mainLoading">
      <baseTable :tableData="tableData" :tabLoading="tabLoading"

                 :tableColumn="tableColumn" :border="false"
      >
        <!--        触发类型-->
        <template #enabledType="{row}">
          {{ row.enabledType == 0 ? '手动' : '自动' }}
        </template>
        <!--        启用/停用-->
        <template #enabledState="{row}">
          <el-switch
            :disabled="true"
            v-model="row.enabledState"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
        <!--        操作-->
        <template #operation="{row}">
          <div class="btnList">
            <div class="settingBtn" @click="sonTableEditHandle(row)">
              <img src="./images/设置.png" alt="">
            </div>
            <div class="deleBtn" @click="activedOnFunc(row)">
              <img src="./images/删除.png" alt="">
            </div>
          </div>
        </template>
      </baseTable>
      <div class="receiptsAddRow">
        <el-link
          type="primary"
          @click="addRowHandle"
          :underline="false"
        >+ 添加
        </el-link
        >
      </div>
    </div>
    <baseRightDialog ref="settingForm"
                     :footerShow="true"
                     :dialogVisible.sync="settingFormShow"
                     title="分发设置"
                     @handleClose="settingFormShow=false"
                     :submitShow="true"
                     :size="'50%'"
                     @handleConfirmClick="sonTableSaveHandle"

    >
      <settingForm ref="settingForm" v-if="settingFormShow" @saveSuccessHandle="saveSuccessHandle"></settingForm>
    </baseRightDialog>
  </div>
</template>

<script>
import settingForm from './settingForm.vue'
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
import baseNewSelect from '@/views/applicationList/com/baseNewSelect.vue'
import baseDialog from '@/views/integrationOption/compoments/baseDialog'
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
import { getApiModuleApi } from '@/api/apiChunks'
import { deepClone } from '@/utils/index.js'
import { getUserModuleApi } from '@/api/integrationOption/integrationOption'
import basePage from '@/views/intergrationTask/compoments/basePage.vue'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      mainLoading: false,
      saveLoading: false,
      options: [],
      // 角色字典
      roleDist: {},
      addSwitch: false,
      tabLoading: false,
      tableColumn: [
        {
          title: '应用列表',
          id: 'appName'
        },
        {
          title: '触发类型',
          id: 'enabledType'
        },
        {
          title: '新增接口',
          id: 'addName'
        },
        {
          title: '修改接口',
          id: 'updateName'
        },
        {
          title: '删除接口',
          id: 'deleteName'
        },
        {
          title: '数据权限',
          id: 'permission',
          tooltip: true
        },
        {
          title: '启用/停用',
          id: 'enabledState'
        },
        { title: '操作', id: 'operation' }
      ],
      tableData: [],
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10
      },
      addRole: '',
      settingFormShow: false,
      serviceOptions: []
    }
  },
  methods: {
    //保存/编辑成功
    saveSuccessHandle() {
      this.settingFormShow = false
      this.getTableData()
    },
    //这里需要拿到应用下啦为后续找中文环节做准备
    async initSelect() {
      const res = await authApi('sysApplicationService', '', 'queryEntity', '', {})
      console.log(res)
      this.serviceOptions.options = []
      res.attribute.forEach(item => {
        this.serviceOptions.push({
          id: item.id,
          label: item.name
        })
      })
      return true
    },
    //获取tableData
    async getTableData() {
      const res = await authApi('mdmModuleService', '', 'queryMdmDistribute', '', {
        mdmId: this.$route.query.id
      })
      this.tableData = res.attribute
      console.log(this.tableData, 'table')
      //这边需要开始处理应用列表、新增修改删除接口找中文环节
      //需要将数据权限拼起来
      let compareTypeDist = {
        '1': '=',
        '2': '!=',
        '3': '>',
        '4': '<'
      }
      let connectionSymbolDist = {
        '1': 'and',
        '2': 'or'
      }
      this.tableData.forEach(async(item) => {
        this.$set(item, 'permission', '')
        //找中文名环节
        let obj = this.serviceOptions.find(ele => {
          console.log(ele.id, item.appId, '13')
          return ele.id === item.appId
        })
        this.$set(item, 'appName', obj.label)
        let labelDist = {}
        const res2 = await authApi('sysApplicationApiService', '', 'queryEntity', '', {
          appId: item.appId
        })
        res2.attribute.forEach((item) => {
          labelDist[item.id] = item.apiName
        })
        if (item.deleteApi) {
          this.$set(item, 'deleteName', labelDist[item.deleteApi])
        }
        if (item.updateApi) {
          this.$set(item, 'updateName', labelDist[item.updateApi])
        }
        if (item.addApi) {
          this.$set(item, 'addName', labelDist[item.addApi])
        }
        //开始拼凑权限字段
        item.mdmModuleDistributeDetailEntities.forEach(ele => {
          console.log(ele, 'ele')
          let leftBracket = ele.leftBracket ? ele.leftBracket : ''
          let rightParenthesis = ele.rightParenthesis ? ele.rightParenthesis : ''
          let compareType = compareTypeDist[ele.compareType]
          let connectionSymbol = connectionSymbolDist[ele.connectionSymbol] ? connectionSymbolDist[ele.connectionSymbol] : ''
          item.permission += leftBracket + ele.filedId + ' ' + compareType + ' ' + ele.filedVaule + rightParenthesis + ' ' + connectionSymbol + ' '
        })
      })

    },
    //保存
    sonTableSaveHandle() {
      this.$refs.settingForm.$refs.typeOptionForm.submitForm()
    },
    //设置
    sonTableEditHandle(row) {
      this.settingFormShow = true
      this.$nextTick(() => {
        this.$refs.settingForm.getrowDetails(row.id)
      })
    },
    //删除
    activedOnFunc(row) {
      this.$confirm('确定删除？')
        .then(async(_) => {
          const res = await authApi('mdmModuleService', '', 'deleteMdmDistribute', '', {
            id: row.id
          })
          this.$vmNews('删除成功', 'success')
          this.getTableData()
        })
        .catch((_) => {
        })
    },
    //添加
    addRowHandle() {
      this.settingFormShow = true
    },
    async init() {
      this.mainLoading = true
      const res = await getApiModuleApi({
        tl: 'mdmService',
        as: 'mdmService',
        dj: 'queryMdmModuleRule'
      }, { id: this.$route.query.id })
      res.attribute.forEach(item => {
        item.mdmModuleRoleButtonEntities.forEach(ele => {
          item[ele.buttonType] = true
        })
      })
      this.mainLoading = false
      this.tableData = res.attribute
    },
    //close
    dialogCloseHandle() {
      this.addRole = ''
    },
    //add
    addHandle() {
      this.addSwitch = true
    },
    // 页码
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel
      this.$nextTick(() => {
      })
    }

  },
  components: {
    baseNewForm,
    BaseTable,
    baseDialog,
    baseNewSelect,
    basePage,
    baseRightDialog,
    settingForm
  },
  created() {
    this.initSelect().then(() => {
      this.getTableData()
    })

    this.$emit('flashActive', 4)
  }
}
</script>

<style scoped lang="scss">
.receiptsAddRow {
  margin-top: 15px;
  border: 1px dotted #ccc;
  text-align: center;
  height: 50px;
  line-height: 50px;

}

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

::v-deep .el-form-item {
  display: block !important;
}

.checkChunk {
  display: flex;
  flex-wrap: wrap;
}

.wrap {
  margin-left: 5px;
  background-color: #fbfbfb;
  width: 99.5%;
  overflow: auto;

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

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

  > .main {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;

    .btn {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
  }

}

footer {
  margin-top: 20px;
}

.addBox {
  > .chunk {
    display: flex;
    align-items: center;
  }
}

.btnList {
  display: flex;
  align-items: center;
  justify-content: center;

  .settingBtn {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: #EBEBED;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;

    > img {
      width: 10px;
      height: 10px;
    }
  }

  .deleBtn {
    cursor: pointer;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    background: #EBEBED;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;

    > img {
      width: 10px;
      height: 10px;
    }
  }
}
</style>
