/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="openatc-planmanu">
  <div class="title" style="display:flex;">{{$t('openatccomponents.main.routeOptimize')}}</div>
  <el-menu @select="selectPlan" v-loading="loading">
    <el-menu-item :index="String(plan.id)" v-for="(plan, index) in planData" :key="index">
        <span slot="title">{{plan.name}}</span>
    </el-menu-item>
  </el-menu>
  <div class="btnGroup" v-show="false">
    <div class="addbtn" :style="{zIndex: zIndexObj.addZIndex}">
      <button slot="reference" class="btn" @click="onAdd" ref="addbtn">{{$t('openatccomponents.common.add')}}</button>
    </div>
    <div class="operate">
      <el-dropdown trigger="click" @command="switchOperate">
        <span class="el-dropdown-link">
          {{$t('openatccomponents.greenwaveoptimize.operation')}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-edit" command="Edit">{{$t('openatccomponents.common.edit')}}</el-dropdown-item>
          <el-dropdown-item icon="el-icon-delete" command="Delete">{{$t('openatccomponents.common.delete')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
  <!-- <Messagebox :visible="deleteDiologVisible" :text="`${$t('openatccomponents.greenwaveoptimize.isdelete')}${chooseName} ?`" @cancle="closeDeleteDialog" @ok="handleDelete"/> -->
  <!-- <AddOptimizeDialog  ref="addOptimizeDialog"
                      @closeDialog="closeAddDialog"
                      @updateRoute="updateRoute"/> -->
</div>
</template>

<script>
// import Messagebox from '../../components/MessageBox'
// import AddOptimizeDialog from './components/addOptimizeDialog'
import { AddRoute, DeleteRoute, UpdateRoute } from '../../../api/route'
import { getMessageByCode } from '../../../utils/responseMessage'
export default {
  name: 'PlanMenu',
  components: {
    // Messagebox
    // AddOptimizeDialog
  },
  props: {
    planData: {
      type: Array
    },
    zIndexObj: {
      type: Object
    },
    loading: {
      type: Boolean
    }
  },
  watch: {
    planData: {
      handler: function (val) {
        if (this.chooseId) {
          this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
        }
        // if (val && !val.length) {
        //   // 模拟一次手动点击，触发tip显示
        //   this.$refs.addbtn.click()
        // }
      },
      deep: true
    }
  },
  data () {
    return {
      route: {},
      chooseId: 0, // 选中的计划id
      chooseName: '', // 选中的计划name
      deleteDiologVisible: false,
      addNum: 0,
      isEdit: false
    }
  },
  methods: {
    selectPlan (id) {
      // 选择某一方案
      this.chooseId = Number(id)
      let plan = this.planData.filter(ele => ele.id === this.chooseId)[0]
      for (let dev of plan.devs) {
        dev.isused = true
      }
      this.route = JSON.parse(JSON.stringify(plan))
      this.chooseName = this.planData.filter(ele => ele.id === this.chooseId)[0].name
      let ids = []
      this.route.devs.forEach(item => {
        ids.push(item.agentid)
      })
      this.$emit('chooseRoute', this.chooseId, this.route, ids)
      this.$emit('resetContentComponent')
    },
    onAdd () {
      this.isEdit = false
      this.$refs.addOptimizeDialog.show()
      this.$emit('editStart')
    },
    onEdit () {
      if (!this.chooseId) {
        this.$message({
          message: this.$t('openatccomponents.greenwaveoptimize.nochooseplan'),
          type: 'warning'
        })
        return
      }
      this.isEdit = true
      this.$refs.addOptimizeDialog.show(this.route)
      this.$emit('editStart')
    },
    onDelete () {
      if (!this.chooseId) {
        this.$message({
          message: this.$t('openatccomponents.greenwaveoptimize.nochooseplan'),
          type: 'warning'
        })
        return
      }
      this.deleteDiologVisible = true
    },
    handleDelete () {
      DeleteRoute(this.chooseId).then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.deleteDiologVisible = false
        this.resetChooseId()
        this.$message({
          message: this.$t('openatccomponents.common.deletesuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            this.$emit('refresh')
          }
        })
      })
    },
    resetChooseId () {
      // 重置为未选择状态
      this.chooseId = 0
      this.$emit('chooseRoute', this.chooseId)
    },
    closeDeleteDialog () {
      this.deleteDiologVisible = false
    },
    updateRouteName (data) {
      UpdateRoute(data).then(res => {
        if (!res.data.success) {
          if (res.data.code === '5001') {
            this.$message.error(this.$t('openatccomponents.greenwaveoptimize.namerepeat'))
          } else {
            this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          }
          return
        }
        this.closeAddDialog()
        this.$message({
          message: this.$t('openatccomponents.common.updatesuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            this.$emit('refresh')
          }
        })
      })
    },
    addRoute (data) {
      AddRoute(data).then(res => {
        if (!res.data.success) {
          if (res.data.code === '5001') {
            this.$message.error(this.$t('openatccomponents.greenwaveoptimize.addfail'))
          } else {
            this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          }
          return
        }
        this.closeAddDialog()
        this.$message({
          message: this.$t('openatccomponents.common.addsuccess'),
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            this.$emit('refresh')
          }
        })
      })
    },
    updateRoute (data) {
      if (this.isEdit) {
        const obj = {
          ...data,
          id: this.chooseId
        }
        this.updateRouteName(obj)
      } else {
        this.addRoute(data)
      }
    },
    closeAddDialog () {
      this.isEdit = false
      this.$refs.addOptimizeDialog.close()
    },
    clickMask () {
      // 点击其他地方关闭蒙层
      this.maskVisible = false
    },
    switchOperate (command) {
      switch (command) {
        case 'Edit':
          this.onEdit()
          break
        case 'Delete':
          this.onDelete()
          break
        default:
          console.log(command)
          break
      }
    }
  }
}
</script>

<style lang="scss">
//  @import "../../styles/theme/element-variables.scss";
// .btnGroup .operate .el-dropdown-link {
//   color: $--color-primary;
//   cursor: pointer;
// }
</style>

<style lang="scss" scoped>
//  @import "../../styles/theme/element-variables.scss";
.el-menu {
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border-right: none;
}
// .el-menu-item.is-active {
//   background: #eaeaea;
// }
/* 蒙层样式 */
// .mask {
//   position: fixed;
//   left: 0;
//   top: 0;
//   width: 100%;
//   height: 100%;
//   background: #000;
//   opacity: 0.5;
//   z-index: 97;
// }
// /* 原生按钮样式修改 */
// .btnGroup button {
//     width: 70px;
//     height: 40px;
//     padding: 0;
//     line-height: 40px;
//     border: 1px solid #dcdfe6;
//     white-space: nowrap;
//     outline: 0;
//     transition: .1s;
//     font-size: 14px;
//     border-radius: 4px;
//     color: $--button-primary-font-color;
//     background-color: $--color-primary;
//     border-color: $--color-primary;
//     cursor: pointer;
// }
// .btnGroup button:hover {
//     color: $--button-primary-font-color;
//     background-color: $--color-primary;
//     border-color: $--color-primary;
//     opacity: 0.8;
// }
// .deletebtn {
//     position: fixed;
//     bottom: 30px;
//     left: 93px;
// }
// .btnGroup .addbtn {
//     position: fixed;
//     bottom: 30px;
//     left: 17px;
//     z-index: 98;
// }
// .btnGroup .addbtn button {
//   font-weight: 500;
// }
// .btnGroup .operate{
//   position: fixed;
//   bottom: 30px;
//   left: 108px;
//   height: 40px;
//   line-height: 40px;
// }
// /* 提示框相关 */
// .tipContent > div{
//     float: left;
// }
// .tipContent div i {
//   color: $--color-primary;
//   font-size: 30px;
// }
// .tipContent .text {
//     font-size: 14px;
//     font-weight: normal;
//     font-stretch: normal;
//     line-height: 14px;
//     letter-spacing: 1px;
//     color: $--color-primary;
//     margin-left: 7px;
//     line-height: 42px;
// }
</style>
