<template>
  <div class="main-page">
    <div class="tab-btn">
      <el-button
        :class="{active:activeTab=='1'}"
        @click="changeTab(1)"
      >胸痛中心</el-button>
      <el-button
        :class="{active:activeTab=='2'}"
        @click="changeTab(2)"
      >卒中中心</el-button>
    </div>
    <div class="main-page-body">
      <div class="mainContent">
        <el-form
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          size="small"
        >
          <el-form-item
            prop="queryTime"
            label="查询时间"
          >
            <el-date-picker
              v-model="searchForm.queryTime"
              type="year"
              placeholder="请选择查询时间"
              value-format="yyyy"
              format="yyyy"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            prop="area"
            label="区域选择"
          >
            <el-select
              v-model="searchForm.area"
              placeholder="请选择区域"
              style="width: 100%"
              :clearable="true"
            >
              <el-option
                label="全部"
                value=""
              />
              <el-option
                v-for="item in areaList"
                :label="item.name"
                :key="item.id"
                :value="item.val"
              />
            </el-select>
          </el-form-item>
          <div class="btns">
            <el-button
              type="primary"
              size="small"
              @click="searchFormSub"
            >查询</el-button>
            <el-button
              size="small"
              @click="resetForm('searchForm')"
            >重置</el-button>
          </div>
        </el-form>
        <div class="bt">
          <el-button
            type="primary"
            v-if="!checkPermission()"
            size="small"
            @click="showSaveDialog()"
          >新增</el-button>
        </div>
        <table-mixin
          :pageSize="pageSize"
          :pageNum="pageNum"
          :total="total"
          :pagination="pagination"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        >
          <el-table
            v-loading="tableData.loading"
            :data="tableData.body"
            @sort-change="handleSortChange"
          >
            <div
              slot="empty"
              class="noData"
            ></div>
            <el-table-column
              v-for="(item,index) in tableData.head"
              :prop="item.key"
              :label="item.name"
              align="left"
              :formatter="item.formatter"
              :sortable="item.sortable"
              :fixed="item.fixed"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              width="auto"
              min-width="150px"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="showSaveDialog('detail', scope.row)"
                >查看详情</el-link>
                <el-link
                  type="primary"
                  v-if="!checkPermission()"
                  @click="showSaveDialog('update', scope.row)"
                >修改</el-link>
                <el-link
                  type="primary"
                  v-if="!checkPermission()"
                  @click="delHandler(scope.row.id)"
                >删除</el-link>
                <el-link
                  type="primary"
                  v-if="(scope.row.auditStatus === 1 || scope.row.auditStatus === 5) && checkPermission()"
                  @click="auditHandler(scope.row.id)"
                >审核</el-link>
              </template>
            </el-table-column>
          </el-table>
        </table-mixin>
        <SaveDialog
          ref="saveDialog"
          @subsucc="search"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { tableDataMixin } from '../../common/js/mixin'
import { queryHospitalList } from '@/api/common'
import { queryScreeningPageList, deleteScreeningById, toExamineScreening } from '@/api/screenTaskStatistics'
import SaveDialog from './components/saveDialog.vue'
import { getDic } from '../../util/dict'
export default {
  name: 'expertPage',
  mixins: [tableDataMixin],
  components: {
    SaveDialog
  },
  data() {
    return {
      searchForm: {
        area: '',
        queryTime: new Date().getFullYear() + ''
      },
      areaList: [],
      activeTab: '1',
      hospitalList: [],
      auditStatusList: [],
      selectLoading: false,
      tableData: {
        loading: false,
        head: [
          {
            name: '医院名称',
            key: 'hospitalName',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '所属区域',
            key: 'areaStr',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '筛查任务要求',
            key: 'taskCount',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '筛查任务完成量',
            key: 'taskCompleteCount',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '完成率',
            key: 'completeRate',
            sortable: false,
            width: '80',
            fixed: false
          },
          {
            name: '类型',
            key: 'typeStr',
            sortable: false,
            width: '120',
            fixed: false
          },
          {
            name: '完成量排序',
            key: 'sort',
            sortable: false,
            width: '80',
            fixed: false
          },
          {
            name: '审核状态',
            key: 'auditStatusStr',
            sortable: false,
            width: '100',
            fixed: false
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['area']).then(res => {
      this.areaList = res.area
    })
    this.search()
  },
  methods: {
    changeTab(num) {
      this.activeTab = num;
      this.searchFormSub();
    },
    getTableData() {
      this.tableData.loading = true
      const params = {
        ...this.searchForm,
        centerType: this.activeTab,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      queryScreeningPageList(params).then((res) => {
        if (res.msg == 201) {
          this.dealTableResponse(res)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    showSaveDialog(type = 'add', row) {
      console.log(row)
      this.$refs.saveDialog.init(type, this.activeTab, row)
    },
    delHandler(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteScreeningById({ id: id }).then(res => {
          if (res.msg === 201) {
            this.$message.success(res.content)
          } else {
            this.$message.error(res.content)
          }
          this.search()
        })
      })
    },
    auditHandler(id) {
      this.$confirm('是否审批通过？', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '拒绝',
        distinguishCancelAndClose: true,
        type: 'warning'
      }).then(() => {
        this.auditData(id, 2)
      }).catch(action => {
        if (action === 'cancel') {
          this.auditData(id, 3)
        }
      })
    },
    auditData(id, auditStatus) {
      toExamineScreening({ id: id, auditStatus: auditStatus }).then(res => {
        if (res.msg === 201) {
          this.$message.success('操作成功！')
        } else {
          this.$message.error(res.content)
        }
        this.search()
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
  .bt {
    margin-bottom: 16px;
  }
  .btns {
    float: right;
  }
}
.main-page {
  .tab-btn {
    font-size: 0;
    button.el-button {
      position: relative;
      font-size: 14px;
      border-radius: 0;
      margin-left: 0;
      margin-right: 0;
      &.active {
        border-color: #fff;
        color: #3b88d9;
        &:before {
          content: "";
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: #3b88d9;
          margin-right: 8px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
