<template>

  <div v-loading="loading" class="container" style="position:relactive">
    <div style="position:absolute;top:170px;right:100px;z-index:999" v-show="editBtn">
      <!-- <el-button class="miniSuccess" @click="control_edit()">编辑</el-button> -->
      <el-button type="primary" size="mini" :loading="control_btn_l" @click="control_edit()">
        {{control_btn}}
      </el-button>
    </div>

    <el-card v-show="false" body-style="padding: 0px;" class="dashboard-list" shadow="never">
      <!-- <div slot="header">
        <span>看板</span>
        <i class="el-icon-plus" @click="addDashboard" />
      </div> -->
      <ul>
        <draggable v-model="dashboardList" :group="{name: 'dashboard',pull: true}" class="draggable-wrapper" @change="handleOrderChange">
          <li v-for="item in dashboardList" :key="item.dashboard_id" :class="{'dashboard-list-item': true, 'high-light-dashboard': currentDashboard.dashboard_id === item.dashboard_id}">
            <span @click="switchDb(item)">
              <i class="el-icon-document" />
              <span>{{ item.name }}</span>
            </span>
            <el-dropdown szie="mini" trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-more" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{
                    type: 'edit',
                    target: item
                  }">
                  {{ $t('common.edit') }}
                </el-dropdown-item>
                <el-dropdown-item :command="{
                    type: 'delete',
                    target: item
                  }">
                  {{ $t('common.delete') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </li>
        </draggable>
      </ul>
    </el-card>
    <dashboardItem :dashboard="currentDashboard" :mode="isEdit" :title="isTitle" @fatherMethod="getList" />
    <el-dialog :title="$t('dashboard.addOrEditDashboard')" width="750px" :visible.sync="editDialogVisible">
      <el-form label-width="160px">
        <el-form-item :label="$t('dashboard.dashboardName')">
          <el-input v-model="dbObj.name" size="small" style="width: 450px;" :placeholder="$t('dashboard.dashboardNamePlaceholder')" />
        </el-form-item>
        <el-form-item :label="$t('dashboard.dashboardDesc')">
          <el-input v-model="dbObj.desc" type="textarea" :rows="5" size="small" style="width: 450px;" :placeholder="$t('dashboard.dashboardDescPlaceholder')" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="editDialogVisible = false"> {{ $t('common.cancel') }}</el-button>
        <el-button type="primary" size="small" @click="handleSubmit"> {{ $t('common.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import draggable from 'vuedraggable'
import dashboardItem from './dashboardItem'
import { GetDataByName, ExeSqlJiade, PostDataByName, dashboardListJiade } from '@/api/common'
import Cookies from 'js-cookie'
// import { addDashboard, updateDashboard, dashboardList, deleteDashboard, dbOrder } from '@/api/dashboard'
import { addDashboard, updateDashboard, deleteDashboard, dbOrder } from '@/api/dashboard'
export default {
  name: 'Addboard',
  components: { dashboardItem, draggable },
  data() {
    return {
      isEdit: 'view',
      dashboardList: [],
      currentDashboard: undefined,
      editDialogVisible: false,
      dbObj: {},
      loading: false,
      isCollapse: false,
      did: undefined,
      isTitle: '2',
      editBtn: false,
      control_btn: '编辑',
      control_btn_l: false,

      get_role_data: {
        name: 'getChartRole',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          pastureid: Cookies.get('pastureid'),
          empid: Cookies.get('employeid'),
          type: '1',
          id: localStorage.getItem("AddboardIsEditId"),

        }
      },

    }
  },

  created() {
    // console.log('this.$route.params.id', this.$route.params.id)
    // const isEdit = this.$route.params.isEdit

    // this.isEdit = isEdit
    this.did = window.location.href.split('~')[1]
    this.haha = window.location.href.split('~')[2]

    console.log('this.did', this.did)
    console.log('this.haha', this.haha)

    if (this.haha == 3) {
      console.log('this.haha333333333')
      this.isTitle = '3'
      this.editBtn = false
    } else {
      this.isTitle = '2'
      this.get_Role()
    }

    this.getList()



  },

  methods: {


    get_Role() {
      GetDataByName(this.get_role_data).then(res => {
        console.log('权限数据', res.data)
        if (res.data.list[0].statue == 'editOk') {
          this.editBtn = true
        } else {
          this.editBtn = false
        }


      })
    },

    control_edit() {
      this.isEdit = 'edit'
      if (this.control_btn == "编辑") {
        this.control_btn = "正在编辑"
        this.control_btn_l = true
      } else {
        this.control_btn = "编辑"
        this.control_btn_l = false
      }
    },
    // getList() {
    //   this.loading = true
    //   dashboardList().then(resp => {
    //     this.loading = false
    //     this.dashboardList = []
    //     resp.data.order.forEach((id, index) => {
    //       const itemIndex = resp.data.dashboards.findIndex(item => item.dashboard_id === id)
    //       if (itemIndex >= 0) {
    //         this.dashboardList.push(resp.data.dashboards[itemIndex])
    //         resp.data.dashboards.splice(itemIndex, 1)
    //       } else {
    //         console.log(id, index)
    //       }
    //     })
    //     this.dashboardList = this.dashboardList.concat(resp.data.dashboards)
    //     const dashboard = this.dashboardList.find(item => item.dashboard_id === this.$route.query.id)
    //     if (dashboard) {
    //       this.currentDashboard = dashboard
    //     } else {
    //       this.currentDashboard = this.dashboardList[0]
    //     }
    //     if (this.currentDashboard) {
    //       this.$router.push(`/dashboard?id=${this.currentDashboard.dashboard_id}`).catch(_ => { })
    //     }
    //   })
    // },

    getList() {
      this.loading = true

      // if (this.$route.params.id) {
      //   this.did = this.$route.params.id
      // } else {
      //   this.did = this.did
      // }


      if (this.did) {

        this.did = this.did

      } else {
        this.did = localStorage.getItem("AddboardIsEditId")
      }




      var send_data = {
        name: 'getdashboardsV2',
        parammaps: {
          pastureid: Cookies.get('pastureid'),
          empid: Cookies.get('employeid'),
          did: this.did
        }
      }
      console.log('进入大页面=================')

      dashboardListJiade(send_data).then(resp => {
        this.loading = false
        this.dashboardList = []
        console.log('看板列表数据：', resp)
        console.log('看板列表优化数据list：', resp.data.list)
        console.log('看板列表优化数据dashboards：', resp.data.dashboards)

        // resp.data.order.forEach((id, index) => {
        //   const itemIndex = resp.data.dashboards.findIndex(item => item.dashboard_id === id)
        //   if (itemIndex >= 0) {
        //     this.dashboardList.push(resp.data.dashboards[itemIndex])
        //     resp.data.dashboards.splice(itemIndex, 1)
        //   } else {
        //     console.log(id, index)
        //   }
        // })
        this.dashboardList = this.dashboardList.concat(resp.data.dashboards)
        // const dashboard = this.dashboardList.find(item => item.dashboard_id === this.$route.params.id)
        const dashboard = this.dashboardList.find(item => item.dashboard_id === localStorage.getItem("AddboardIsEditId"))


        if (dashboard) {
          this.currentDashboard = dashboard
        } else {
          this.currentDashboard = this.dashboardList[0]
        }
        console.log('this.currentDashboard', this.currentDashboard)

        console.log('this.dashboardList', this.dashboardList)

        if (this.currentDashboard) {
          // this.$router.push({ path: '/customboard/addboard', query: { id: this.currentDashboard.dashboard_id }}).catch(_ => { })
        }
      })

    },
    switchDb(db) {
      if (db.dashboard_id === this.currentDashboard.dashboard_id) {
        this.getList()
        return
      }

      this.currentDashboard = db
      this.$router.push(`/dashboard?id=${this.currentDashboard.dashboard_id}`)
    },
    addDashboard() {
      this.dbObj = {}
      this.editDialogVisible = true
    },
    editDashboard(db) {
      this.dbObj = Object.assign({}, db)
      this.editDialogVisible = true
    },
    handleCommand(cmd) {
      if (cmd.type === 'edit') {
        this.editDashboard(cmd.target)
      } else {
        this.deleteDashboard(cmd.target)
      }
    },
    // handleSubmit() {
    //   if (this.dbObj.dashboard_id) {
    //     updateDashboard(this.dbObj).then(resp => {
    //       this.getList()
    //       this.editDialogVisible = false
    //     })
    //   } else {
    //     addDashboard(this.dbObj).then(resp => {
    //       this.getList()
    //       this.editDialogVisible = false
    //     })
    //   }
    // },
    handleSubmit() {
      if (this.dbObj.dashboard_id) {
        updateDashboard(this.dbObj).then(resp => {
          this.getList()
          this.editDialogVisible = false
        })
      } else {
        console.log('this.dbObj', this.dbObj)

        var data = {
          name: 'insertDashboard',
          parammaps: {
            dname: this.dbObj.name,
            display: this.dbObj.desc,
            pastureid: Cookies.get('pastureid'),
            empid: Cookies.get('employeid'),
            emp: Cookies.get('employename')
          }
        }

        PostDataByName(data).then(response => {
          console.log('新增保存发送参数', data)
          this.$message({
            type: 'success',
            message: this.$t('common.saveSuccess')
          })
          this.getList()
          this.editDialogVisible = false
        })

        // addDashboard(this.dbObj).then(resp => {
        //   this.getList()
        //   this.editDialogVisible = false
        // })
      }
    },
    handleOrderChange(evt) {
      const data = {
        order: this.dashboardList.map(item => item.dashboard_id)
      }
      dbOrder(data)
    },
    deleteDashboard(db) {
      this.$confirm(this.$t('dashboard.deleteConfirm', db.name), this.$t('common.confirm')).then(() => {
        deleteDashboard({ dashboard_id: db.dashboard_id }).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: this.$t('common.deleteSuccess')
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  min-height: calc(100vh - 62px);
  // align-items: stretch;
  .dashboard-list {
    width: 250px;
    min-height: 100%;
    padding: 20px 10px;
    /deep/ .el-card__header {
      div {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #606266;
        i {
          cursor: pointer;
        }
      }
      padding: 5px 0px;
    }
    .dashboard-list-item {
      display: flex;
      justify-content: space-between;
      line-height: 35px;
      font-size: 14px;
      cursor: pointer;
      color: #606266;
      i {
        margin-right: 10px;
        line-height: 35px;
      }
    }
    .high-light-dashboard {
      color: #205cd8;
    }
  }
  .dashboard-wrapper {
    width: 100%;
  }
}
</style>