<style>
  .scoresetForm .scoreForm_List {
    width: 100%;
    min-height: 80px;
    background-color: #F7F7F7;
    padding: 15px;
  }

  .scoresetForm .score_MyNum {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .scoresetForm .addScoreBtn {
    width: 100%;
    height: 40px;
    border: 1px dashed #2961FE;
    text-align: center;
    line-height: 40px;
    margin-top: 20px;
    color: #2961FE;
    cursor: pointer;
  }

  .scoresetForm .scoreIlist:hover {
    color: red;
  }

  .scoresetForm .scoreContent {
    max-height: 450px;
  }

</style>
<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 700px;max-width:700px;" class="scoresetForm">
      <q-card-section>
        <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改分数规则":"新增分数规则"}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap scoreContent">
          <div class="col-12">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Name" ref="Name"
              class="col-12 q-pb-lg" label="规则名称" :rules="[val => !!val || '请填写规则名称']" />
          </div>
          <div class="col-12">
            <div class="scoreForm_List" v-for="(item,index) in msg.DetailList" :key="index" style="margin-bottom:10px;">
              <div class="score_MyNum">
                <div>分数{{index+1}}：</div>
                <div style="cursor:pointer;">
                  <i class="iconfont icon-shanchu scoreIlist" @click="delDeailList(index)"></i>
                </div>
              </div>
              <div>
                <el-input style="width:300px;display:inline-block;" v-model="item.Name" placeholder="分数名称"></el-input>
                <el-input style="width:90px;display:inline-block;margin-left:20px;"
                  @keyup.native="checkPrice(item,'ScoreMin')" v-model="item.ScoreMin" placeholder="最小分数"></el-input>
                <el-input style="width:90px;display:inline-block;margin-left:20px;"
                  @keyup.native="checkPrice(item,'ScoreMax')" v-model="item.ScoreMax" placeholder="最大分数"></el-input>
                <el-select :ref="'colorSelect'+index" placeholder="" v-model="item.Color"
                  style="width: 70px;display:inline-block;margin-left:20px;" @change="handleChange(item.Color,index)">
                  <el-option v-for="item in colorList" :key="item" label=" " :value="item"
                    v-html="'<div style=background-color:'+ item+';width:' +'25px'+';height:'+'25px'+';border-radius:'+'50%'+'></div>'">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="addScoreBtn" @click="addScoreList()">＋新增分数</div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeScoreForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="saveScore" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    SetOKRScoreConfigInfo
  } from '../../api/okr/index'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        msg: {
          Id: 0,
          Name: '', //规则名称
          DetailList: [{
            Name: '', //分数名称
            ScoreMin: '', //最小分数
            ScoreMax: '', //最大分数
            Color: '' //颜色
          }],
        },
        myColor: '',
        colorList: ["#F72E52", "#FA9595", "#ED3AC5", "#F28C1D", "#8175FB", "#FEB528", "#2961FE", "#3FC4FF", "#51BDA5",
          "#08D220"
        ],
        persistent: true
      }
    },
    computed: {},
    created() {
      //  if (this.color && this.color.length > 0) {
      //     this.myColor = this.color;
      //     this.setSelectColor(this.color)
      //   }
    },
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        this.msg.Id = this.saveObj.Id;
        this.msg.Name = this.saveObj.Name;
        this.msg.DetailList = this.saveObj.DetailList;
        this.msg.DetailList.forEach((x, index) => {
          this.setSelectColor(x.Color, index);
        })
      }
    },
    methods: {
      //设置颜色选择框中颜色
      setSelectColor(color, index) {
        let str = `colorSelect${index}`;
        this.$nextTick(() => {
          let dom = this.$refs[str][0];
          if (dom) {
            dom = dom.$el.children[0];
            let inputDom = dom.querySelectorAll(".el-input__inner");
            let icon = dom.querySelectorAll(".el-input__icon");
            inputDom[0].style["background-color"] = color;
            icon[0].style["color"] = "black";
          }
        })
      },
      //关闭天窗
      closeScoreForm() {
        this.$emit('close');
        this.persistent = false;
      },
      handleChange(val, index) {
        this.setSelectColor(val, index);
        //触发update事件更新父组件绑定值
        this.$emit('update', val);
      },
      //保存
      saveScore() {
        for (let i = 0; i < this.msg.DetailList.length; i++) {
          if (this.msg.DetailList[i].Name == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请填写第${i+1}分数名称`
            })
            return;
          }
          if (this.msg.DetailList[i].ScoreMin == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请填写第${i+1}最小分数`
            })
            return;
          }
          if (this.msg.DetailList[i].ScoreMax == '') {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请填写第${i+1}最大分数`
            })
            return;
          }
        }
        SetOKRScoreConfigInfo(this.msg).then(res => {
          if (res.Code == 1) {
            this.$emit('success');
            this.closeScoreForm();
          }
        })
      },
      //新增分数
      addScoreList() {
        let obj = {
          Name: '', //分数名称
          ScoreMin: '', //最小分数
          ScoreMax: '', //最大分数
          Color: '' //颜色
        }
        this.msg.DetailList.push(obj);
      },
      //删除分数
      delDeailList(index) {
        this.msg.DetailList.splice(index, 1);
      }
    },
  }

</script>
