<template>
  <lay-container style="padding: 20px">
    <lay-card>
      <div style="padding: 10px">
        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">加扣分项列表</span>
        <lay-button size="sm" border="green" @click="addShowMsd()">新增</lay-button>
      </div>
      <lay-table size="lg" ref="tableRef6" children-column-name="children" :columns="columns6"
                 :data-source="dataSource6">
        <template v-slot:score_type="{data}">
          <lay-tag v-if="data.score_type==1" type="normal">加分</lay-tag>
          <lay-tag v-if="data.score_type==2" type="danger">减分</lay-tag>
        </template>
        <!-- <template v-slot:scoring_category="{data}">
          <span v-if="data.scoring_category==1">年度</span>
          <span v-if="data.scoring_category==2">季度</span>
          <span v-if="data.scoring_category==3">院外评分</span>
        </template> -->
        <template v-slot:operator="{data}">
          <lay-space size="lg">
            <span style="color: #00A394;cursor: pointer" @click="editShowMsd(data)">编辑</span>
            <lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
              <span style="color: #00A394;cursor: pointer">删除</span>
            </lay-popconfirm>
          </lay-space>
        </template>
      </lay-table>
    </lay-card>
    <lay-layer v-model="addShow" :title="addIsEdit==1?'新增加扣分项':'编辑考评项目'" :type="4" :shade="true" :area="['950px','100%']" :btn="addButton">
      <lay-container fluid="true" style="padding: 20px">
        <lay-form :model="addData">
          <lay-form-item required label-width="150px" label="加减分类型" prop="score_type">
            <lay-select v-model="addData.score_type" placeholder="请选择">
              <lay-select-option :value="1" label="加分"></lay-select-option>
              <lay-select-option :value="2" label="减分"></lay-select-option>
            </lay-select>
          </lay-form-item>
          <lay-form-item required label-width="150px" label="单次评分上限" prop="single_score_max">
            <lay-input-number v-model="addData.single_score_max" :precision="2" :step="0.1"></lay-input-number>
          </lay-form-item>
          <lay-form-item required label-width="150px" label="单次评分下限" prop="single_score_min">
            <lay-input-number v-model="addData.single_score_min" :precision="2" :step="0.1"></lay-input-number>
          </lay-form-item>
          <lay-form-item required label-width="150px" label="项目名称" prop="project_name">
            <lay-textarea placeholder="请输入项目名称" v-model="addData.project_name"></lay-textarea>
          </lay-form-item>
          <!-- <lay-form-item required label-width="150px" label="项目代码" prop="project_code">
            <lay-input v-model="addData.project_code" placeholder="请输入项目代码"></lay-input>
          </lay-form-item> -->
          <!-- <lay-form-item required label-width="150px" label="评分类型" prop="scoring_category">
            <lay-select v-model="addData.scoring_category"  placeholder="请选择">
              <lay-select-option :value="1" label="年度"></lay-select-option>
              <lay-select-option :value="2" label="季度"></lay-select-option>
              <lay-select-option :value="3" label="院外评分"></lay-select-option>
            </lay-select>
          </lay-form-item> -->
          <!-- <lay-form-item required label-width="150px" label="所属考评项目" prop="related_evaluation_project">
            <lay-select v-model="addData.related_evaluation_project"  placeholder="请选择">
              <lay-select-option v-for="item in categoryList" :value="item.id" :label="item.project_name"></lay-select-option>
            </lay-select>
          </lay-form-item> -->
          <!-- <lay-form-item required label-width="150px" label="每次填报次数上限" prop="annual_submission_limit">
            <lay-input-number v-model="addData.annual_submission_limit"></lay-input-number>
          </lay-form-item> -->
          <lay-form-item required label-width="150px" label="评分标准" prop="scoring_criteria">
            <lay-textarea placeholder="请输入" v-model="addData.scoring_criteria"></lay-textarea>
          </lay-form-item>
        </lay-form>
      </lay-container>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import {
  getHierarchicalTwo,
  scoringGetHierarchicalData,
  scoringGetHierarchicalDataCreate,
  scoringGetHierarchicalDataDelete,
  scoringGetHierarchicalDataUpdate,
} from '../../api/module/home'
import {ref, watch, onMounted, reactive} from 'vue'
import {layer} from '@layui/layer-vue'
import {verificationImg} from "@/api/module/commone";
//列表内容
const dataSource6 = ref([]);
const addShow = ref(false)
//1 add  2 edit
const addIsEdit = ref(1)
const addData = reactive({
  project_code: '',
  project_name: '',
  single_score_max:0,
  single_score_min: 0,
  score_type:null,
  related_evaluation_project:null,
  scoring_category:null,
  annual_submission_limit:0,
  scoring_criteria:'',
})
const  categoryList= ref();
onMounted(() => {
  getHierarchicalData()
  getHierarchicalTwoList();
})
const getHierarchicalTwoList = () => {
  getHierarchicalTwo({}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      categoryList.value = res.data;
    } else {
      layer.msg(res.msg, {icon: 2})
    }
  })
} 
const getHierarchicalData = () => {
  scoringGetHierarchicalData({page:1,size:1000}).then((res) => {
    console.log(res)
    if (res.code == 1) {
      dataSource6.value = res.data;
    } else {
      layer.msg(res.msg, {icon: 2})
    }
  })
}
const addShowMsd = () => {
  addShow.value = true;
  addIsEdit.value=1;
}
const editShowMsd = (data) => {
  console.log(data);
  addShow.value = true;
  addData.id=data.id;
  addData.project_name=data.project_name;
  addData.project_code=data.project_code;
  addData.scoring_category=parseInt(data.scoring_category);
  addData.annual_submission_limit=data.annual_submission_limit;
  addData.related_evaluation_project=parseInt(data.related_evaluation_project);
  addData.scoring_criteria=data.scoring_criteria;
  addData.single_score_max=data.single_score_max;
  addData.single_score_min=data.single_score_min;
  addData.score_type=parseInt(data.score_type);
  addIsEdit.value=2;
}
const delShowMsd = async (data) => {
  var res = await scoringGetHierarchicalDataDelete({id: data.id});
  console.log(res)
  if (res.code == 1) {
    layer.msg('删除成功！', {icon: 1})
    getHierarchicalData();
  } else {
    layer.msg(res.msg, {icon: 2})
  }
}
const columns6 = [
  {
    title: "序号",
    width: "60px",
    key: "id"
  },
  {
    title: "加减分类型",
    width: "90px",
    customSlot: 'score_type',
    key: "score_type"
  },
  {
    title: "项目名称",
    width: "100px",
    key: "project_name",
    ellipsisTooltip:true,
  },
  {
    title: "单次评分上限",
    width: "100px",
    key: "single_score_max"
  },
  {
    title: "单次评分下限",
    width: "100px",
    key: "single_score_min"
  },
  {
    title: "评分标准",
    width: "100px",
    key: "scoring_criteria",
    ellipsisTooltip:true,
  },
  {
    title: '操作',
    width: '100px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]
const addButton = ref([
  {
    text: "确认",
    callback: async () => {
      console.log(addData);
      if (addData.project_name == '') {
        layer.msg('项目名称不能为空！', {icon: 2})
        return;
      }
      if (addData.score_type == null || addData.score_type == '') {
        layer.msg('加减分类型不能为空！', {icon: 2, time: 1000})
        return;
      }
      if (addData.single_score_max <=0) {
        layer.msg('单次评分上限不能为0！', {icon: 2, time: 1000})
        return;
      }
      if (addData.single_score_min <=0) {
        layer.msg('单次评分下限不能为0！', {icon: 2, time: 1000})
        return;
      }
      if (addData.project_name =='') {
        layer.msg('评分标准不能为空！', {icon: 2, time: 1000})
        return;
      }
      if(addIsEdit.value==1){
        var res = await scoringGetHierarchicalDataCreate(addData);
      }else{
        var res = await scoringGetHierarchicalDataUpdate(addData);
      }
      console.log(res)
      if (res.code == 1) {
        layer.msg('提交成功！', {icon: 1})
        addShow.value = false;
        getHierarchicalData();
      } else {
        layer.msg(res.msg, {icon: 2})
      }
    }
  },
  {
    text: "取消",
    callback: () => {
      addShow.value = false;
    }
  }
])
</script>
<style>
.layui-table-header .layui-table-cell {
  background-color: #ECF8FA !important;
}
</style>
