<style>
  .scoreSetForm .scoreRemind {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .scoreSetForm .scoreTitle {
    color: #F72E52;
    font-size: 12px;
  }

  .scoreSetForm .rule_list {
    width: 100%;
    height: auto;
  }

  .scoreSetForm .score_Top {
    height: 30px;
    background-color: #EEEEEF;
    font-size: 12px;
    padding: 5px 20px;
  }

  .scoreSetForm .score_Tname {
    color: #2D2D2D;
    font-weight: bold;
  }

  .scoreSetForm .score_IconList span {
    display: inline-block;
    margin-right: 20px;
    color: #2961FE;
    cursor: pointer;
  }

  .scoreSetForm .score_IconList span i {
    margin-right: 5px;
  }

  .scoreSetForm .score_IconList span:last-child {
    margin-right: 0;
  }

  .scoreSetForm .rule_InnerList {
    min-height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #F4F4F4;
  }

  .scoreSetForm .rule_Item {
    display: inline-block;
    margin: 10px 30px 10px 0;
  }

  .scoreSetForm .rule_comback {
    width: 60px;
    height: 20px;
    background-color: #EEEEEF;
    color: #2D2D2D;
    text-align: center;
    line-height: 20px;
    margin-top: 5px;
    font-size: 12px;
  }

  .scoreSetForm .score_Num {
    display: inline-block;
    position: relative;
    top: -26px;
  }
  .scoreSetForm .isDefaultColor{
    color:#A1AAB2!important;
  }
</style>
<template>
  <div class="scoreSetForm">
    <div class="scoreRemind" style="margin-bottom:20px;">
      <div class="scoreTitle">
        <i class="iconfont icon-tishi" style="position:relative;top:1px;"></i>
        系统按照OKR规则默认采用0-1（0.1，0.2，0.3.....）的分数制度，若采用新的分数制度，必须满足0-1规则。否则，无法保存规则信息
      </div>
      <div>
        <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增分数规则" @click="addScoreRull(null)" />
      </div>
    </div>
    <div class="rule_list" v-for="(item,index) in dataList" :key="index">
      <div class="scoreRemind score_Top">
        <div class="score_Tname">{{item.Name}}</div>
        <div class="score_IconList">
          <span @click="setDefault(item)" v-if="item.IsDefault==2" class="isDefaultColor"><i class="iconfont icon-dagou"></i>默认</span>
          <span @click="setDefault(item)" v-else><i class="iconfont icon-dagou"></i>默认</span>
          <span @click="addScoreRull(item)"><i class="iconfont icon-edit"></i>编辑</span>
          <span @click="delRuleList(item)"><i class="iconfont icon-shanchu"></i>删除</span>
        </div>
      </div>
      <div class="rule_InnerList">
        <div class="rule_Item" v-for="(subItem,subIndex) in item.DetailList" :key="subIndex">
          <div class="score_Num" :style="{'color':subItem.Color}">分数{{subIndex+1}}：</div>
          <div style="display:inline-block;">
            <div :style="{'color':subItem.Color}">{{subItem.Name}}</div>
            <div class="rule_comback">{{subItem.ScoreMin}}-{{subItem.ScoreMax}}</div>
          </div>
        </div>
      </div>
    </div>
    <scoreset-form v-if="isShowScoreSet" :save-obj="scoreObj" @close="closeScoreForm" @success="refreshPage">
    </scoreset-form>
  </div>
</template>
<script>
  import {
    GetOKRScoreConfigPageList,
    SetOKRScoreConfigState,
  } from '../../api/okr/index';
  import scoresetForm from '../../components/okr/scoreset-form';
  export default {
    meta: {
      title: ""
    },
    components: {
      scoresetForm
    },
    data() {
      return {
        msg: {
          PageIndex: 1,
          PageSize: 12,
          Name: ''
        },
        isShowScoreSet: false,
        scoreObj: {},
        dataList: [],
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //获取okr配置信息
      getList() {
        GetOKRScoreConfigPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
          }
        })
      },
      //新增分数规则
      addScoreRull(obj) {
        if (obj) {
          this.scoreObj = obj;
        } else {
          this.scoreObj = null;
        }
        this.isShowScoreSet = true;
      },
      //关闭流程设置
      closeScoreForm() {
        this.isShowScoreSet = false;
      },
      refreshPage() {
        this.getList();
      },
      //删除分数规则
      delRuleList(item) {
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          let msg = {
            ScoreId: item.Id,
            Type: 2
          }
          SetOKRScoreConfigState(msg).then(res => {
            if (res.Code == 1) {
              this.getList();
            }
          })
        }).onCancel(() => {

        });
      },
      //设为默认
      setDefault(item) {
        let msg = {
          ScoreId: item.Id,
          Type: 1
        }
        SetOKRScoreConfigState(msg).then(res => {
          if (res.Code == 1) {
            this.getList();
          }
        })
      }
    }
  }

</script>
