<template>
  <div class="app-container">
    <!-- 顶部筛选 -->
    <div class="top-filter">
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="方案名称:">
          <el-input v-model="filterForm.schemeName" placeholder="请输入方案名称" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="压力模式:">
          <el-select v-model="filterForm.pressurePattern" placeholder="请选择" size="mini" clearable>
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in patternOptions" :key="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="剂型:">
          <el-select v-model="filterForm.dosageForm" placeholder="请选择" size="mini" clearable>
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in typeOptions" :key="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态:">
          <el-select v-model="filterForm.status" placeholder="请选择" size="mini" clearable>
            <el-option label="全部" :value="''"></el-option>
            <el-option label="开启" :value="1"></el-option>
            <el-option label="关闭" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          <el-button size="mini" @click="handleClear">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="top-right">
        <el-button size="mini" type="success" @click="handleDetail({}, 0, '新增')">新增方案</el-button>
      </div>
    </div>
    <!-- 表格展示 -->
    <div class="content">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="{scope, $index}">
            <span>{{ $index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="schemeName" label="方案名称" min-width="200" align="center"></el-table-column>
        <el-table-column label="压力模式" min-width="100" align="center">
          <template slot-scope="scope">
            <dict-tag :options="patternOptions" :value="scope.row.pressurePattern" />
          </template>
        </el-table-column>
        <el-table-column label="剂型" min-width="100" align="center">
          <template slot-scope="scope">
            <dict-tag :options="typeOptions" :value="scope.row.dosageForm" />
          </template>
        </el-table-column>
        <el-table-column prop="decoctTime" label="煎煮时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="preDecoctTime" label="先煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="firstDecoctTime" label="一煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="secondDecoctTime" label="二煎时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="backDownTime" label="后下时间(min)" min-width="120" align="center"></el-table-column>
        <el-table-column label="启用状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">开启</span>
            <span v-else-if="scope.row.status==1">关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160" align="center"></el-table-column>
        <el-table-column prop="createBy" label="创建人" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="220" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleDetail(scope.row, 1, '修改')">修改</el-button>
            <el-button size="mini" @click="handleDetail(scope.row, 2, '详情')">详情</el-button>
            <el-button size="mini" type="info" @click="showDelete=true; id=scope.row.id">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="filterForm.pageNum"
          background
          :page-size="filterForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filterForm.total"
        ></el-pagination>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="showDetail" width="35%" :before-close="handleClose" center>
      <edit :disabled="disabled" :id="id" ref="detailDialog" @success="handleClose();getList()" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetail = false">取 消</el-button>
        <el-button type="primary" @click="submit" v-if="!disabled">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="温馨提示" :visible.sync="showDelete" width="30%" :before-close="handleDeleteClose" center>
      <h3 style="text-align: center;">确认删除吗？</h3>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDelete = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getSchemeList, deleteScheme } from "@/api/decoct/scheme";
import edit from "./components/edit.vue";
export default {
  name: "Scheme",
  components: {
    edit
  },
  data() {
    return {
      filterForm: {
        pageNum: 1,
        total: 0,
        pageSize: 10,
        schemeName: '',
        pressurePattern: '',
        dosageForm: '',
        status: ''
      },
      tableData: [],
      showDetail: false, // 表单弹窗
      title: '',
      disabled: false,
      id: '',
      showDelete: false,
      typeOptions: [],
      patternOptions: []
    };
  },
  created() {
    this.getList()
    this.getDicts("dosage_form").then((response) => {
      this.typeOptions = response.data;
    });
    this.getDicts("pressure_pattern").then((response) => {
      this.patternOptions = response.data;
    });
  },
  methods: {
    // 清空
    handleClear() {
      this.filterForm = {
        pageNum: 1,
        total: 0,
        pageSize: 10,
        schemeName: '',
        pressurePattern: '',
        dosageForm: '',
        status: ''
      }
    },
    // 搜索
    handleSearch() {
      this.getList()
    },
    // 详情按钮点击
    handleDetail(item, type, name) {
      this.showDetail = true;
      this.disabled = type == 2 ? true : false
      this.title = name
      this.id = item.id
      this.$nextTick(() => {
        this.$refs.detailDialog.openDialog()
        if(type >= 1) this.$refs.detailDialog.getDetail()
      })
    },
    // 分页改变
    handleCurrentChange(e) {
      this.filterForm.pageNum = e;
      this.getList()
    },
    handleClose() {
      this.showDetail = false
      this.id = ''
    },
    handleDeleteClose() {
      this.showDelete = false
    },
    submitDelete() {
      deleteScheme(this.id).then((response) => {
        this.msgSuccess('删除成功')
        this.showDelete = false
        this.getList()
      });
    },
    getList() {
      this.loading = true;
      getSchemeList(this.filterForm).then((response) => {
        this.tableData = response.rows
        this.filterForm.total = response.total;
        this.loading = false;
      });
    },
    submit() {
      if(!this.disabled && this.id) {
        this.$refs.detailDialog.toUpdate()
      }else if(!this.disabled && !this.id) {
        this.$refs.detailDialog.toAdd()
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  text-align: center;
  margin-top: 20px;
}
.top-filter{
  display: flex;
  justify-content: space-between;
  // align-items: baseline;
  .top-right{
    padding-top: 5px;
  }

}
</style>
