<template>
    <div class="recordItemWrapper">
        <crumbs title="质控条目" style="min-width: 980px;height:80px" class="recordItemTitle">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="条目名称：">
                   <el-input size="mini" v-model.trim="filter.itemName" placeholder="条目名称" clearable></el-input>
               </el-form-item>
                <el-form-item label="条目类型：">
                    <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                    <el-select v-model="filter.ruleType"
                               clearable
                               filterable
                               placeholder="请选择条目类型"
                               size="mini"
                               class="long-item">
                        <el-option
                                v-for="item in ruleTypeList"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开发状态：">
                    <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                    <el-select v-model="filter.devType"
                               clearable
                               filterable
                               placeholder="请选择开发状态"
                               size="mini"
                               class="long-item">
                        <el-option
                                v-for="item in devTypeList"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="准确率：">
                    <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                    <el-select v-model="filter.accuracyType"
                               clearable
                               filterable
                               placeholder="请选择准确率"
                               size="mini"
                               class="long-item">
                        <el-option
                                v-for="item in accuracyTypeList"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属模块：">
                   <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                   <el-select v-model="filter.module"
                      clearable
                      filterable
                      placeholder="请选择模块"
                      size="mini">
                    <el-option
                      v-for="item in caseLIst"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
               <!-- <el-form-item label="层级定义：">
                   <el-input size="mini" v-model.trim="filter.level" placeholder="层级定义" clearable></el-input>
               </el-form-item> -->
               
            </el-form>
            <el-form :inline="true" class="demo-form-inline demo-form-inline-second">
               <el-form-item label="是否控费：">
                    <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                    <el-select v-model="filter.costControl"
                               clearable
                               filterable
                               placeholder="请选择是否控费"
                               size="mini"
                               class="long-item">
                        <el-option
                                v-for="item in costControlList"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="质控形式：">
                    <!-- <el-input size="mini" v-model.trim="filter.module" placeholder="所属模块" clearable></el-input> -->
                    <el-select v-model="filter.qcType"
                               clearable
                               filterable
                               placeholder="请选择准确率"
                               size="mini"
                               class="long-item">
                        <el-option
                                v-for="item in qcTypeList"
                                :key="item.val"
                                :label="item.name"
                                :value="item.val">
                        </el-option>
                    </el-select>
                </el-form-item>
              <el-form-item :inline="true"  label="条目编码：">
                   <el-input size="mini" v-model.trim="filter.itemCode" placeholder="条目编码" clearable></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button size="mini" @click="filterDatas">确认</el-button>
                   <el-button size="mini" type="warning" @click="AddRecordItem">新增条目</el-button>
                   <el-button size="mini" type="warning" @click="manageBatch">批量管理</el-button>
               </el-form-item>
            </el-form>
        </crumbs>
        <div class="contents">
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <!-- <el-table-column
                        :resizable = "false"
                        prop="id"
                        label="条目ID"
                      >
                </el-table-column> -->
                <el-table-column
                        :resizable = "false"
                        prop="name"
                        label="条目名称"
                >
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="ruleType"
                        label="条目类型"
                        :formatter="typeFormatter"
                >
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="devType"
                        label="开发状态"
                        :formatter="devTypeFormatter"
                >
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="accuracyType"
                        label="准确率"
                        :formatter="accuracyTypeFormatter"
                >
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="casesName"
                        label="所属模块"
                        width="">
                  
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="code"
                        label="条目编码"
                        width="180">
                    <!-- <template slot-scope="scope">
                        <el-button  @click="editRecord(scope.row)" type="text" size="small">标注</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button @click="showDelDialog(scope.row)" class="delete" type="text" size="small">删除</el-button>
                    </template> -->
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="modeName"
                        label="医院数据模块"
                        width="">
                  
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="drgs"
                        label="是否控费"
                        :formatter="dragsFormatter"
                >
                </el-table-column>
                <el-table-column
                        :resizable = "false"
                        prop="type"
                        label="质控形式"
                        :formatter="qcTypeFormatter"
                >
                </el-table-column>
                 <el-table-column
                        :resizable = "false"
                        prop=""
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button  @click="editRecord(scope.row)" type="text" size="small">修改</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button @click="showDelDialog(scope.row)" class="delete" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination :current-page.sync="currentPage"
                               @current-change="currentChange"
                               background
                               :page-size="pageSize"
                               :page-sizes="pageSizeArr"
                               @size-change="handleSizeChange"
                               :layout="pageLayout"
                               :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import api from '@api/records.js';
 import config from '@api/config.js';
  import utils from '@api/utils.js';

  export default {
    name: 'RecordItemList',   //慢病指标值关联维护
    data: function() {
      return {
        list: [],
        searched: false,
        caseLIst:[],
        ruleTypeList:[],
        devTypeList:[],
        accuracyTypeList:[],
        costControlList:[],
        qcTypeList:[],
        filter:{
          itemName:'',
          ruleType:'',
          module:'',
          level:'',
          itemCode:'',
          devType:'',
          accuracyType:'',
          costControl:'',
          qcType:''
        },
        currentPage: 1,
        pageSize: config.pageSize,
        pageSizeArr:config.pageSizeArr,
        pageLayout:config.pageLayout,
        total: 0,
      }
    },
    created() {
      const that = this;
      this.getRuleTypeModule();
      //返回时避免参数未赋值就获取列表
      setTimeout(function(){
        that.getDataList();
      });
      this.getRecordInpModule()
    },
    watch: {
      'filter': {
        handler: function () {
          this.searched = false;
        },
        deep: true
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        const pm = to.param;
        Object.assign(vm, to.params);
        vm.inCurrentPage=to.params.currentPage;
      })
    },
    methods: {
      typeFormatter(row, column, cellValue){
        const li = this.ruleTypeList.filter((it)=>it.val===""+cellValue);
        return li[0]?li[0].name:"";
      },
      devTypeFormatter(row, column, cellValue){
        const li = this.devTypeList.filter((it)=>it.val===""+cellValue);
        return li[0]?li[0].name:"";
      },
      accuracyTypeFormatter(row, column, cellValue){
        const li = this.accuracyTypeList.filter((it)=>it.val===""+cellValue);
        return li[0]?li[0].name:"";
      },
      dragsFormatter(row, column, cellValue){
        const li = this.costControlList.filter((it)=>it.val===""+cellValue);
        return li[0]?li[0].name:"";
      },
      qcTypeFormatter(row, column, cellValue){
        const li = this.qcTypeList.filter((it)=>it.val===""+cellValue);
        return li[0]?li[0].name:"";
      },
     handleSizeChange(val){
        this.pageSize = val;
        this.currentPage = utils.getCurrentPage(this.currentPage, this.total, this.pageSize);
        this.getDataList();
      },
      indexMethod(index) {
          return   index + 1;
      },
      AddRecordItem(){
         const pam = this.searched?{currentPage:this.currentPage,
          pageSize:this.pageSize,
          filter:this.filter}:{currentPage:this.currentPage,
          pageSize:this.pageSize};
        this.$router.push({
          name:'AddRecordItem',
          params:pam
        })
      },
      manageBatch(){
         const pam = this.searched?{currentPage:this.currentPage,
          pageSize:this.pageSize,
          filter:this.filter}:{currentPage:this.currentPage,
          pageSize:this.pageSize};
        this.$router.push({
          name:'ManageItemBatch',
          params:pam
        })
      },
       getRecordInpModule(){
        return api.getRecordCases({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.caseLIst = result.data
          }else{
            this.$message({
              message:result.msg,
              type:'warning',
              showClose: true
            });
          }
        })
      },
      getRuleTypeModule(){
        return api.getRuleTypes({}).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.ruleTypeList = result.data[14];
            this.devTypeList = res.data.data&&res.data.data["15"]
            this.accuracyTypeList = res.data.data&&res.data.data["16"]
            this.costControlList = res.data.data&&res.data.data["17"] 
            this.qcTypeList = res.data.data&&res.data.data["18"]
            this.devTypeList.unshift({name:"全部", val:""})
            this.accuracyTypeList.unshift({name:"全部", val:""})
            this.qcTypeList.unshift({name:"全部", val:""})
            this.costControlList.unshift({name:"全部", val:""})
          }else{
            this.$message({
              message:result.msg,
              type:'warning',
              showClose: true
            });
          }
        })
      },
      getDataList(isTurnPage) {
        const param = this.getFilterItems(isTurnPage);
        this.searched = true;
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        api.getRecordIremList(param).then((res) => {
          loading.close();
          if(res.data.code == '0') {
            this.list = res.data.data.records;
            this.total = res.data.data.total;
           if(this.inCurrentPage!==undefined){
              this.currentPage=this.inCurrentPage;
              this.inCurrentPage = undefined;
            }
          }
        })
      },
      filterDatas() {
        this.currentPage = 1;
        this.getDataList();
      },
      editRecord(row,isShow) {
        // this.$router.push({
        //   name: 'AddRecordInput',
        //  params: {isEdit: true, data: row}
        // });
        const param = {
          id: row.id
        }
       api.getRecordItemDetail(param).then(res =>{
         if(res.data.code == '0'){
          const item = res.data.data[0]
          const pam = this.searched ? {
            currentPage: this.currentPage,
            pageSize:this.pageSize,
            filter: this.filter,
          } : {
            currentPage: this.currentPage,
            pageSize:this.pageSize};
          this.$router.push({
            name:'AddRecordItem',
            params: Object.assign(pam, {isEdit: true, data: item})
          })
         }
       })
            
        
      },
      currentChange(next) {
        this.currentPage = next;
        this.getDataList(true);
      },
      getFilterItems(isTurnPage) {
        //翻页时筛选条件没点确定则清空
        if(isTurnPage&&!this.searched){
        };
        const param = {
          casesId:this.filter.module,
          ruleType:this.filter.ruleType,
          code: this.filter.itemCode.trim(),
          levelNo:this.filter.level.trim(),
          name: this.filter.itemName.trim(),
          current: this.inCurrentPage||this.currentPage,
          size: this.pageSize,
          devType:this.filter.devType,
          drgs:this.filter.costControl,
          type:this.filter.qcType,
          accuracyType:this.filter.accuracyType,
       
        };
        return param;
      },
     warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
      showConfirmDialog(msg,resolve){
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      showDelDialog(row){
        const param = {
         id: row.id 
        };
        const txt ='是否删除该质控条目？';
        this.showConfirmDialog(txt,()=>{
          api.delRecordItem(param).then((res)=>{
            if(res.data.code=='0'){
              this.getDataList();
              this.warning(res.data.msg || '操作成功','success');
            }else{
              this.warning(res.data.msg);
            }
          }).catch((error)=>{
            this.warning(error);
          })
        });
      }
    }
  }
</script>


<style lang="less">
    @import "../../less/admin.less";
    .recordItemWrapper .contents{
      padding: 104px 20px 0;
    }
    .recordItemTitle .contents{
          padding:  0;
    }
    .recordItemTitle .contents{
      form{
        height: 40px;
      }
    }
     .recordItemTitle .demo-form-inline-second{
       float: right;
     }
    .demo-form-inline .long-item .el-input--mini .el-input__inner{
        width: 124px;
    }
    .delete{
        color: red;
    }
    .delete:hover {
        color: red;
    }
    .review{
        color: #22ccc8;
    }
    .pagination {
        min-width: 1010px;
    }
</style>