<template>
    <div class="page_project">
        <div style="display:flex;justify-content: space-between;width:100%;margin-bottom:20px;">
            <div class="cell clearfix" style="margin-bottom:0;">
                <el-input style="width: 180px;margin-right:10px;" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                <el-button style="margin-right:10px;" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction" >搜索</el-button>
                <label class="title"><span class="name">状态</span> : </label>
                <el-select v-model="is_start" style="width:140px;margin-right:10px;" placeholder="请选择" @change="changeStart">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <label class="title"><span class="name">是否收费预估项:</span> : </label>
                <el-select v-model="is_charge" style="width:140px;margin-right:10px;" placeholder="请选择" @change="changeOption">
                    <el-option
                    v-for="item in optionOne"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" @click="openForm(0)">新增</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)', color: '#606266'}">
            <el-table-column prop="date" label="序号" width="80" align="center">
                 <template  slot-scope="scope">
                      {{scope.$index+1}}
                 </template>
            </el-table-column>
            <el-table-column prop="date" label="名称" align="center">
                <template  slot-scope="scope">
                    {{scope.row.project_name}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="费用类别" align="center">
                  <template  slot-scope="scope">
                     {{getCostClassify(scope.row.cost_classify)}}
                  </template>
            </el-table-column>
            <el-table-column prop="date" label="执行科室" width="140" align="center">
                <template  slot-scope="scope">
                    {{getExecutiveSection(scope.row.executive_section)}}
                </template>
            </el-table-column>
            <el-table-column label="医保编码" width="140" align="center">
                <template  slot-scope="scope">
                   {{scope.row.medical_code}}
                </template>
            </el-table-column>
            <el-table-column label="状态" width="60" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.medical_status ==0"></span>
                  <span v-if="scope.row.medical_status ==1">停用</span>
                  <span v-if="scope.row.medical_status ==2">收费</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <el-button @click="editHisProject(scope.row.id)" type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="deleteProject(scope.row.id,scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            background
            align="right"
            style="margin-top:20px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
         >
        </el-pagination>

        <add-project ref="addProject"></add-project>
        <editProject ref="editProject"></editProject>
    </div>
</template>

<script>
import addProject from './addProject'
import editProject from './editProject'
import { getProjectList,deleteHisProject } from "@/api/project/project"
import { getDictionaryDataConfig } from "@/utils/data";
export default {
    components:{
        addProject,
        editProject
    },
    data(){
        return{
            search_input:'',
            options: [
             {value:0,label:'全部'},
             {value:1,label: '停用'},
             {value:2,label: '收费'}
            ],
            optionOne:[
              {value:0,label:'全部'},
              {value:1,label:'是'},
              {value:2,label:'否'}
            ],
            value: '',
            limit:20,
            page:1,
            total:0,
            tableData: [],
            is_start:0,
            is_charge:0
        }
    },
    methods:{
        changeStart(){
         this.getlist()
        },
        handleSizeChange(val) {
            this.limit = val
            this.getlist()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getlist()
        },
        searchAction(){
           this.getlist()   
        },
        clickSelfPayment(){
            this.$refs.selfPayment.show();
        },
        clickMainTain(){
        },
        openForm(id){
           this.$refs.addProject.show(id);
        },
        editHisProject(id){
           this.$refs.editProject.show(id)
        },
        getCostClassify(id){
          var costClassify = getDictionaryDataConfig('system','cost_classify')
          var name = ""
          for(let i=0;i<costClassify.length;i++){
             if(id == costClassify[i].id){
               name = costClassify[i].name
             }
          }
          return name
        },
        getExecutiveSection(id){
          var executiveSection =  getDictionaryDataConfig('system','executive_section')
          var name = ""
          for(let i=0;i<executiveSection.length;i++){
            if(id == executiveSection[i].id){
               name = executiveSection[i].name
            }
          }
          return name
        },
      
        getlist(){
            var params = {
               keyword:this.search_input,
               is_charge:this.is_charge,
               is_start:this.is_start,
               limit:this.limit,
               page:this.page,
            }
           console.log("222",params)
          getProjectList(params).then(response=>{
             if(response.data.state == 1){
               var projecList = response.data.data.projecList
               console.log('projectlist',projecList)
               this.tableData = projecList
               var total = response.data.data.total
               this.total = total
             }
          })  
        },
        deleteProject(id,index){
            this.$confirm("确认删除此项目吗?", "删除", {
            confirmButtonText: "确 定",
            cancelButtonText: "取 消",
            type: "warning"
           }).then(() => {
            deleteHisProject(id).then(response => {
               if (response.data.state == 1) {
                 var msg = response.data.data.msg
                 this.$message.success("删除成功")
                this.tableData.splice(index, 1);
                }
             });
            })
            .catch(() => {});
        },
        changeOption(){
          this.getlist()
        }
        
    },
    created(){
      this.getlist()
     
    }
}
</script>
