<template>
  <div>
    <div class="project_content">
      <div class="project_concrete_content project_config_content">
        <div class="project_type">
          <span>项目类型:</span>
          <el-select v-model="projectType" @change="selectProjectType">
            <el-option v-for="(item,index) in projectTypeList" :key="index" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
              <span>{{ item.typeDesc }}</span>
            </el-option>
            <!--<el-option label="基础" value="基础" class="basic"/>
            <el-option label="医嘱" value="医嘱" class="medical_order" />
            <el-option label="手术" value="手术" class="operation"/>
            <el-option label="护理文书风险" value="护理文书风险" class="nurse_risk" />
            <el-option label="护理文书任务" value="护理文书任务" class="nurse_task"/>
            <el-option label="出入院" value="出入院" class="inout_hospital" />
            <el-option label="出入转" value="出入转" class="inout"/>
            <el-option label="关键任务" value="关键任务" class="key_task" />
            <el-option label="体征任务" value="体征任务" class="sign_task"/>
            <el-option label="换床" value="体征任务" class="change_bed"/>
            <el-option label="风险管理" value="风险管理" class="risk_manage"/>
            <el-option label="护理工作" value="护理工作" class="nurse_work" />-->
          </el-select>
        </div>
        <div class="fixed_project">
          <span>固定项目:</span>
          <el-select v-model="fixedProject" @change="selectFixedProject">
            <el-option class="all" label="全部" value="全部" />
            <el-option class="is_fixed" label="是" value="是" />
            <el-option class="no_fixed" label="否" value="否" />
          </el-select>
        </div>
        <div class="project_retrieval">
          <el-input
            v-model="search"
            class="project_retrieval_input"
            size="mini"
            placeholder="检索项目名称或显示名称"/>
          <el-button class="project_retrieval_btn" @click="retrievalBtnEvent">检索</el-button>
        </div>
        <el-button class="project_add_btn" @click="addHandleClick"><i/><span>新增</span></el-button>
        <el-dialog :modal-append-to-body="false" :visible.sync="dialogFormVisible" :title="titleMap[dialogStatus]" class="project_form_dialog">
          <el-form :model="form">
            <el-form-item :label-width="formLabelWidth" label="项目类型：" required>
              <el-select v-model="form.projectType" placeholder="请选择项目类型">
                <el-option v-for="(item,index) in projectTypeList" :key="index" :value="setProjectValueClass(item)" :class="setProjectTypeClass(item)">
                  <span>{{ item.typeDesc }}</span>
                </el-option>
                <!--<el-option label="基础" value="basic"/>
                <el-option label="医嘱" value="medical_order" />
                <el-option label="手术" value="operation"/>
                <el-option label="护理文书风险" value="nurse_risk" />
                <el-option label="护理文书任务" value="nurse_task"/>
                <el-option label="出入院" value="inout_hospital" />
                <el-option label="出入转" value="inout"/>
                <el-option label="关键任务" value="key_task" />
                <el-option label="体征任务" value="sign_task"/>
                <el-option label="换床" value="change_bed"/>
                <el-option label="风险管理" value="risk_manage"/>
                <el-option label="护理工作" value="nurse_work" />-->
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="项目编码：" required>
              <el-input v-model="form.projectCode" autocomplete="off" placeholder="请输入项目编码"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="项目名称：" required>
              <el-input v-model="form.projectName" autocomplete="off" placeholder="请输入项目名称"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="项目编号：" required>
              <el-input v-model="form.projectSN" autocomplete="off" placeholder="请输入项目编号"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="显示名称：" required>
              <el-input v-model="form.projectDisplay" autocomplete="off" placeholder="请输入显示名称"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="排序：" required>
              <el-input v-model="form.ordinal" autocomplete="off" placeholder="请输入排序号"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="固定项目：" required>
              <el-select v-model="form.projectFixed" placeholder="请选择固定项目">
                <el-option label="是" value="Y"/>
                <el-option label="否" value="N"/>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="颜色：">
              <el-color-picker v-model="form.colorHex" placeholder="holder" value="nnnnnnn" @click="changeColor"/>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="是否有效：">
              <el-switch
                v-model="form.enabled"
                active-color="#1890ff"
                active-icon-class="switch_active"
                inactive-color="#bfbfbf"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="project_add_cancel" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addFromSureBtn(titleMap[dialogStatus])">确 定</el-button>
          </div>
        </el-dialog>

        <el-table ref="filterTable" :data="tableData" stripe style="width: calc(100%);">
          <el-table-column class-name="project_sn" prop="projectSN" label="项目编号" min-width="9%" />
          <el-table-column class-name="project_mold" prop="projectType" label="项目类型" min-width="9%"/>
          <el-table-column class-name="project_cold" prop="projectCode" label="项目编码" min-width="10%"/>
          <el-table-column class-name="project_name" prop="projectName" label="项目名称" min-width="13.42%" />
          <el-table-column class-name="project_display" prop="projectDisplay" label="显示名称" min-width="13.42%" />
          <el-table-column class-name="colorHex" prop="colorHex" label="颜色" min-width="10.2%">
            <template slot-scope="scope">
              <div v-if="scope.row.colorHex == '' || scope.row.colorHex == ' ' || scope.row.colorHex == null"/>
              <div v-else>
                <span :style="{'background-color':`${scope.row.colorHex}`}" class="colum_color"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column class-name="project_fixed" prop="projectFixed" label="固定" min-width="7%">
            <template slot-scope="scope">
              <span>{{ scope.row.projectFixed === 'Y' ? "是" : "否" }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="ordinal" prop="ordinal" label="排序" min-width="7%"/>
          <el-table-column class-name="enabled" prop="enabled" label="有效" min-width="10%">
            <template slot-scope="scope">
              <div v-if="scope.row.enabled == '' || scope.row.enabled == ' ' || scope.row.enabled == null"/>
              <div v-else>
                <div :class="scope.row.enabled == 'Y' ? 'columEffective' : 'columInvalid'">
                  <i/>
                  <span>{{ scope.row.enabled === 'Y' ? "有效" : "无效" }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column class-name="operation" prop="operation" label="操作" min-width="10%" >
            <template slot-scope="scope">
              <div v-if="scope.row.enabled == '' || scope.row.enabled == ' ' || scope.row.enabled == null"/>
              <div v-else>
                <el-button type="text" class="colum_btn_edit" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <div class="edit_delete_line"/>
                <span v-if="scope.row.projectFixed == 'N' ">
                  <el-button :disabled="false" type="text" class="colum_btn_delete" size="small" @click="projectTableDelete(scope.row)">删除</el-button>
                  <el-dialog
                    :visible.sync="dialogVisible"
                    :modal-append-to-body="false"
                    :show-close="false"
                    icon="el-icon-info"
                    title="确认要删除此项目吗？"
                    class="project_delete_dialog"
                    width="30%">
                    <div slot="title" class="header-title">
                      <span class="title-name"><i class="el-icon-warning" style="color:#faad14;margin-right:18px"/></span>
                      <span class="title-age">确认要删除此项目吗？</span>
                    </div>
                    <span>删除不可恢复</span>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="projectDeleteSureBtn()">确 定</el-button>
                    </span>
                  </el-dialog>
                </span>
                <span v-else>
                  <el-tooltip class="item" effect="dark" content="固定项目不允许删除，可将项目设置为失效！" placement="top">
                    <div>
                      <el-button :disabled="true" type="text" class="colum_btn_delete" size="small">删除</el-button>
                    </div>
                  </el-tooltip>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="project_pagination">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="tableDataLen"
            :page-sizes="[10, 15, 20]"
            background
            layout="slot,total, prev, pager, next,sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
            <span>第{{ (currentPage-1)*pageSize+1 }}-{{ currentPage*pageSize>tableDataLen? tableDataLen:currentPage*pageSize }}项，</span>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import project from './project-middle.js'
import './../../common/common.css'
export default project
</script>

<style>
  @import './project-middle.css'
</style>
