// 指标
<template>
  <div class="target commonFont">
    <div class="target-main">
      <div class="target-main-header">
        <el-row>
          <el-col :span="12">
            <el-button
              @click="dialogVisibleFilter = true"
              size="small"
            >筛选</el-button>
            <el-input
              prefix-icon="el-icon-search"
              placeholder="搜索指标"
              style="width:200px;"
              size="small"
              v-model="queryData.name"
              @change="handleGetTargetList(queryData.indicatorType,queryData.type, queryData.name)"
            ></el-input>
          </el-col>
          <el-col
            :span="12"
            class="target-main-header-right"
          >
            <el-button
              type="primary"
              @click="handleAdd"
              size="small"
            >新增指标</el-button>
            <el-button
              @click="dialogVisibleMoving = true"
              :disabled="!selectedRowList.length"
              size="small"
            >移动到</el-button>
            <el-button
              @click="handleRemove"
              :disabled="!selectedRowList.length"
              size="small"
            >删除</el-button>
          </el-col>
        </el-row>
        <div
          class="target-main-header-tags"
          v-if="this.selectedTargetType"
        >筛选条件：<el-tag
            @close="handleFilterTagClose"
            type="warning"
            closable
            size="small"
          >{{this.selectedTargetType.name}}</el-tag>共筛选出<span class="target-main-header-tags-sum">{{this.tableData.length}}</span>个指标</div>
      </div>
      <div class="target-main-content">
        <div :class=" menuDataClasseHide?'target-main-content-left target-classe-menu-hide':'target-main-content-left target-classe-menu-show'">
          <el-table
            ref="refMenuTable"
            :data="tableMenuData"
            height="400px"
            :header-cell-style="{background:'#f5f4f5'}"
            highlight-current-row
            @row-click="handleMenuCurrentChange"
            @cell-mouse-enter="handleMenuMouseEnter"
            @cell-mouse-leave="handleMenuMouseLeave"
            :row-class-name="tableMenuRowClassName"
          >
            <el-table-column
              label="指标分类"
              prop="name"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div>{{scope.row.name}}({{scope.row.count}})</div>
              </template>
            </el-table-column>
            <el-table-column width="40px">
              <template slot="header">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  size="small"
                  @click="handleMenuAddCalsse"
                ></el-button>
              </template>
              <template slot-scope="scope">
                <el-dropdown
                  @command="handleClasseDropdown"
                  v-if="scope.row.delete===0"
                  szie="small"
                >
                  <div
                    class="el-dropdown-link"
                    style="width:30px;height:15px;color: #3ba1ff;"
                  >{{selectedMenuRowEditIndex===scope.$index?'...':''}}</div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :command="{obj:scope.row,type:0}"
                      icon="el-icon-edit"
                    >编辑</el-dropdown-item>
                    <el-dropdown-item
                      :command="{obj:scope.row,type:1}"
                      icon="el-icon-delete"
                    >删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="target-main-content-handle">
          <div
            @click="menuDataClasseHide = !menuDataClasseHide"
            class="target-main-content-handle-hide"
          ><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
        </div>
        <div class="target-main-content-right">
          <el-table
            :data="tableData"
            height="400px"
            :header-cell-style="{background:'#f5f4f5'}"
            @selection-change="handleSelectionChange"
            @row-click="handleTargetCurrentRowChange"
          >
            <div
              slot="empty"
              class="comonPromptFont"
            >{{$isStringEmpty(this.queryData.name)?'暂无数据':'未找到关于'+this.queryData.name+'的结果'}}</div>
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              label="名称"
              sortable
              prop="name"
            ></el-table-column>
            <el-table-column
              label="指标类型"
              sortable
              prop="typeName"
            ></el-table-column>
            <el-table-column
              label="考核标准"
              prop="keyResult"
            ></el-table-column>
            <el-table-column
              label="权重"
              sortable
              prop="weight"
              :formatter="(row, column, cellValue, index)=>cellValue*100+'%'"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="this.tablePage.currPage>1"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            :current-page.sync="tablePage.currPage"
            :page-size="tablePage.pageSize"
            :page-sizes="[20,50,100]"
            layout="sizes, prev, pager, next"
            :total="tablePage.totalCount"
            class="target-main-content-right-page"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <target-filtrate
      :isShowTargetFiltrate.sync="dialogVisibleFilter"
      @cd="handlePopupFiltrateSubmit"
    />
    <popup-radio
      :isShowPopupRadio.sync="dialogVisibleMoving"
      @cd="handlePopupMove"
    />
    <el-dialog
      :visible.sync="dialogMenuListModel.visible"
      :title="dialogMenuListModel.title"
      width="500px"
    >
      <el-form size="small">
        <el-form-item
          label="分类名称："
          required
          label-width="100px"
        >
          <el-input v-model="dialogMenuListModel.name" />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogMenuListModel.visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleDialogMenuListUpdateSubmit"
        >确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import TargetFiltrate from '@/components/TargetFiltrate'
import PopupRadio from '@/components/PopupRadio'
import { apiGetIndicatorLibraryList, apiGetIndicatorTypeDelete, apiGetIndicatorLibraryStatistical, apiGetIndicatorTypeEdit, apiGetIndicatorLibraryItemsMove, apiGetIndicatorLibraryItemsDelete } from '@/api/target'

export default {
  methods: {
    handleAdd () {
      // 新增指标
      this.$router.push({ name: 'workbench-target-add' })
    },
    handlePopupMove (val) {
      // 移动指标分类
      console.log('移动指标分类')
      console.log(val)
      let ids = this.selectedRowList.map(item => {
        return item.id
      }).join(',')
      let para = {
        ids: ids,
        indicatorType: val
      }
      apiGetIndicatorLibraryItemsMove(para).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.selectedRowList = []
          this.handleGetMenuList(this.queryData.type)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleRemove () {
      console.log('删除指标')
      this.$confirm('确认删除选中指标', '提示').then(() => {
        let ids = this.selectedRowList.map(item => {
          return item.id
        }).join(',')
        apiGetIndicatorLibraryItemsDelete({ ids: ids }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.selectedRowList = []
            this.handleGetMenuList(this.queryData.type)
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {

      })
    },
    handleFilterTagClose () {
      // 移除 类型筛选
      this.selectedTargetType = null
      this.queryData.type = -1
      this.handleGetMenuList(this.queryData.type)
    },
    handleMenuAddCalsse () {
      this.dialogMenuListModel.title = '新建分类'
      this.dialogMenuListModel.name = ''
      this.dialogMenuListModel.type = 0
      this.dialogMenuListModel.visible = true
    },
    tableMenuRowClassName ({ row, rowIndex }) {
      // 为行数据 添加 index
      row['index'] = rowIndex
      if (this.queryData.indicatorType === row.indicatorType) {
        return 'target-classe-row-edit-selected'
      }
      return 'target-classe-row-edit'
    },
    handleMenuCurrentChange (row, column) {
      // 选择分类
      if (this.queryData.indicatorType === row.indicatorType) {
        return
      }
      this.selectedRowList = []
      this.queryData.indicatorType = row.indicatorType !== null ? row.indicatorType : -1
      this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name)
    },
    handleMenuMouseEnter (row) {
      // 鼠标移入
      this.selectedMenuRowEditIndex = row.index
    },
    handleMenuMouseLeave (row) {
      // 鼠标移除
      this.selectedMenuRowEditIndex = -1
    },
    handleDialogMenuListUpdateSubmit () {
      // 分类列表  修改名称或添加
      if (this.$isStringEmpty(this.dialogMenuListModel.name)) {
        this.$message.error('分类名称不能为空')
        return
      }
      let para = {
        name: this.dialogMenuListModel.name,
        type: 0
      }
      if (this.dialogMenuListModel.type === 1) {
        para['id'] = this.selectedMenuRowModelEdit.indicatorType
      }
      apiGetIndicatorTypeEdit(para).then(res => {
        this.dialogMenuListModel.visible = false
        if (res.code === 200) {
          this.$message.success(res.msg)
          if (this.dialogMenuListModel.type === 1) {
            // 修改名称
            this.selectedMenuRowModelEdit.name = this.dialogMenuListModel.name
          } else {
            this.handleGetMenuList(this.queryData.type)
          }
        } else {
          this.$message.success(res.msg)
        }
      })
    },
    handleClasseDropdown (val) {
      let { type, obj } = val
      this.selectedMenuRowModelEdit = obj
      if (type === 0) {
        // 编辑分类名称
        this.dialogMenuListModel.title = '修改分类'
        this.dialogMenuListModel.name = obj.name
        this.dialogMenuListModel.type = 1
        this.dialogMenuListModel.visible = true
      } else if (type === 1) {
        // 移除
        this.$confirm('您确定要删除此分类吗？', '提示').then(() => {
          apiGetIndicatorTypeDelete({ id: this.selectedMenuRowModelEdit.indicatorType }).then(res => {
            if (res.code === 200) {
              this.selectedMenuRowModelEdit = null
              this.queryData.indicatorType = -1
              this.handleGetMenuList(this.queryData.type)
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {

        })
      }
    },
    // 指标
    handleTargetCurrentRowChange (val) {
      let changeVal = {
        id: val.id,
        name: val.name,
        keyResult: val.keyResult,
        weight: val.weight * 100,
        type: val.type,
        indicatorType: val.indicatorType
      }
      console.log('跳转')
      console.dir(val)
      this.$router.push({ name: 'workbench-target-add', query: changeVal })
    },
    handleSelectionChange (val) {
      this.selectedRowList = val
    },
    handlePopupFiltrateSubmit (val) {
      // 筛选 选择指标类型
      console.log('筛选类型----')
      console.log(val)
      this.selectedTargetType = val
      this.queryData.type = val ? val.id : -1
      this.handleGetMenuList(this.queryData.type)
    },
    handlePageCurrentChange (val) {
      // 页面
      this.tablePage.currPage = val
      this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, val)
    },
    handlePageSizeChange (val) {
      this.tablePage.pageSize = val
      this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, this.tablePage.currPage)
    },
    handleGetMenuList (type = -1) {
      // type 类型
      // 指标分类列表
      let para = {}
      if (type !== -1) {
        para['type'] = type
      }
      apiGetIndicatorLibraryStatistical(para).then(res => {
        if (res.code === 200) {
          this.tableMenuData = res.data.map(item => {
            if (item.indicatorType === null) {
              item.indicatorType = -1
            }
            return item
          })
          console.log('获取类型')
          console.log(this.tableMenuData)
          this.tableMenuData.forEach((item, index) => {
            if (item.indicatorType === this.queryData.indicatorType) {
              // 选中
              this.$refs.refMenuTable.setCurrentRow(item)
              this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name)
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  获取指标列表
    handleGetTargetList (indicatorType = -1, type = -1, name = '', currPage = 1) {
      console.log(name)
      this.queryData.name = name
      this.queryData.indicatorType = indicatorType
      let para = {
        currPage: currPage,
        pageSize: this.tablePage.pageSize,
        name: name
      }
      if (indicatorType !== -1) {
        para['indicatorType'] = indicatorType
      }
      if (type !== -1) {
        para['type'] = type
      }
      apiGetIndicatorLibraryList(para).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.tablePage.totalCount = data.totalCount
          this.tablePage.totalPage = data.totalPage
          this.tablePage.pageSize = data.pageSize
          this.tablePage.currPage = data.currPage
          this.tableData = data.list
        }
      })
    }
  },
  components: {
    TargetFiltrate,
    PopupRadio
  },
  created () {
    this.handleGetMenuList()
  },
  data () {
    return {
      queryData: {
        name: '', // 搜索数据
        indicatorType: -1, // 分类列表 -1 不传此字段
        type: -1 // 类型
      },
      dialogVisibleFilter: false,
      dialogVisibleMoving: false,
      tableMenuData: [], // { name: '收代理费建', indicatorType: 0,count:1 }
      tableData: [], //
      menuDataClasseHide: false,
      selectedMenuRowEditIndex: -1, // 想要编辑的 行
      selectedMenuRowModelEdit: null, // 编辑行
      selectedRowList: [],
      tablePage: {
        totalCount: 0,
        pageSize: 20,
        totalPage: 1,
        currPage: 1
      },
      selectedTargetType: null,
      dialogMenuListModel: {
        visible: false,
        title: '新建分类',
        name: '',
        type: 0 // 0新建 1 编辑
      }

    }
  }
}
</script>
<style lang="less">
.target-classe-row-edit {
  color: #52575b !important;
}
.target-classe-row-edit-selected {
  color: @fontBlue !important;
}
.target-classe-row-edit:hover {
  cursor: pointer;
  color: @fontBlue !important;
}
</style>
<style lang="less" scoped>
.target {
  background-color: white;
  padding: 28px;
  background-color: #fff;
  &-main-header {
    &-tags {
      padding: 10px 0px;
      .el-tag {
        margin-right: 10px;
      }
      &-sum {
        color: @fontBlue;
        font-size: 14px;
      }
    }
  }
  &-classe-menu-hide {
    width: 1px;
  }
  &-classe-menu-show {
    width: 200px;
  }

  &-font-blue {
    color: @fontBlue;
  }
  &-font-def {
    color: #52575b;
  }
  &-main {
    &-header-right {
      display: flex;
      justify-content: flex-end;
    }
    &-content {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      overflow: hidden;

      &-left {
        display: flex;
        .el-table {
          width: 200px;
          border: 0.5px solid @borderColor;
        }
      }
      &-handle {
        display: flex;
        align-items: center;
        &-hide {
          color: #fff;
          background-color: @borderColor;
          width: 12px;
          height: 20px;
          margin-right: 10px;
          border-bottom-right-radius: 2px;
          border-top-right-radius: 2px;
        }
      }
      &-right {
        flex: 1;
        &-page {
          flex: 1;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>