<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.serviceStatus" @tab-click="handleClick">
      <el-tab-pane label="意向签约" name="INTENTIONAL_SIGNING"></el-tab-pane>
      <el-tab-pane label="服务中" name="SERVICE_CENTER"></el-tab-pane>
      <el-tab-pane label="服务结束" name="SERVICE_END"></el-tab-pane>
      <el-tab-pane label="待续签" name="WAIT_CONTINUOUS_SIGN"></el-tab-pane>
    </el-tabs>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="加入意向时间" prop="intentionalTimeStart" label-width="110px"
        v-if="queryParams.serviceStatus == 'INTENTIONAL_SIGNING'">
        <el-date-picker v-model="intentionalTime" type="daterange" range-separator="至" start-placeholder="开始日期"
          style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="签约时间" prop="signTimeStart" v-if="queryParams.serviceStatus == 'SERVICE_CENTER'">
        <el-date-picker v-model="signTime" type="daterange" range-separator="至" start-placeholder="开始日期"
          style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间" prop="serviceEndTimeStart" v-if="queryParams.serviceStatus == 'SERVICE_END'">
        <el-date-picker v-model="serviceEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
          style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="提交时间" prop="submissionTimeStart" v-if="queryParams.serviceStatus == 'WAIT_CONTINUOUS_SIGN'">
        <el-date-picker v-model="submissionTime" type="daterange" range-separator="至" start-placeholder="开始日期"
          style="width:300px" value-format="yyyy-MM-dd" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="医院" prop="hospitalAgencyId">
        <el-select v-model="queryParams.hospitalAgencyId" filterable placeholder="请选择医院" style="width:200px" clearable
          @clear="clearhospitalAgency" @change="changehospitalAgency">
          <el-option v-for="item in hospitalAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="院区" prop="campusAgencyId" v-if="queryParams.hospitalAgencyId">
        <el-select v-model="queryParams.campusAgencyId" filterable placeholder="请选择院区" style="width:200px" clearable
          @clear="clearcampusAgency" @change="changecampusAgency">
          <el-option v-for="item in campusAgencylist" :key="item.id" :label="item.agencyName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科室" prop="departmentId" v-if="queryParams.campusAgencyId">
        <el-select v-model="queryParams.departmentId" filterable placeholder="请选择科室" style="width:200px" clearable
          @clear="cleardepartment" @change="changedepartment">
          <el-option v-for="item in departmentlist" :key="item.id" :label="item.departmentName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="病区" prop="wardId" v-if="queryParams.departmentId">
        <el-select v-model="queryParams.wardId" filterable placeholder="请选择病区" style="width:200px" clearable>
          <el-option v-for="item in wardlist" :key="item.id" :label="item.departmentName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 门诊：OUTPATIENT_SERVICE，住院：BE_IN_HOSPITAL -->
      <el-form-item label="就诊方式" prop="visitMethod">
        <el-select v-model="queryParams.visitMethod" placeholder="请选择就诊方式" clearable style="width:200px">
          <el-option v-for="dict in dict.type.visit_method" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="签约时诊断" prop="signDiagnosis">
        <el-input v-model="queryParams.signDiagnosis" placeholder="请输入签约时诊断" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="意向来源" prop="intentionalSource">
        <el-input v-model="queryParams.intentionalSource" placeholder="请输入意向来源" clearable style="width:200px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="开单医生" prop="billingDoctorName">
        <el-input v-model="queryParams.billingDoctorName" placeholder="请输入开单医生姓名" clearable style="width:200px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable @keyup.enter.native="handleQuery"
          style="width:200px" />
      </el-form-item>
      <el-form-item label="患者电话" prop="patientPhone">
        <el-input v-model="queryParams.patientPhone" placeholder="请输入患者电话" clearable @keyup.enter.native="handleQuery"
          style="width:200px" />
      </el-form-item>
      <!-- <el-form-item label="身份证号" prop="cardNo">
        <el-input v-model="queryParams.cardNo" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['manage:signRecord:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['manage:signRecord:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['manage:signRecord:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['manage:signRecord:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <el-table v-loading="loading" :data="signRecordList" @selection-change="handleSelectionChange">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="patientName" />
      <el-table-column label="电话" align="center" prop="patientPhone" width="130" />
      <el-table-column label="就诊流水号" align="center" prop="visitSerialNumber" width="130" />
      <el-table-column label="诊断" align="center" prop="mainDiagnosis" />
      <el-table-column label="医院" align="center" prop="hospitalAgencyName" width="130" />
      <el-table-column label="院区" align="center" prop="campusAgencyName" />
      <el-table-column label="科室" align="center" prop="departmentName" />
      <el-table-column label="病区" align="center" prop="wardName" />
      <el-table-column label="就诊方式" align="center" prop="visitMethod">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.visit_method" :value="scope.row.visitMethod" />
        </template>
      </el-table-column>
      <el-table-column label="意向来源" align="center" prop="intentionalSource"
        v-if="queryParams.serviceStatus == 'INTENTIONAL_SIGNING'" />
      <el-table-column label="患者来源" align="center" prop="intentionalSource" v-else />
      <el-table-column label="签约时间" align="center" prop="signTime" width="180"
        v-if="queryParams.serviceStatus == 'SERVICE_CENTER'">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.signTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="加入意向时间" align="center" prop="intentionalTime" width="180"
        v-if="queryParams.serviceStatus == 'INTENTIONAL_SIGNING'">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.intentionalTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务包名称" align="center" prop="packageName" width="130"
        v-if="queryParams.serviceStatus != 'INTENTIONAL_SIGNING'" />
      <div v-else>
        <el-table-column label="开单医生" align="center" prop="billingDoctorName" />
        <el-table-column label="金额" align="center" prop="price" />
        <el-table-column label="缴费状态" align="center" prop="paymentStatus">
          <template slot-scope="scope">
            <span>{{ scope.row.paymentStatus == 'PAID' ? '已缴费' : '' }}
              {{ scope.row.paymentStatus == 'UNPAID_FEES' ? '未缴费' : '' }}
            </span>
          </template>
        </el-table-column>
      </div>
      <el-table-column label="签约时长" align="center" prop="serviceCycle">
        <template slot-scope="scope">
          <span>{{ scope.row.serviceCycle }}月</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="服务状态" align="center"
        prop="serviceStatus" >
      ，意向签约：INTENTIONAL_SIGNING，服务中：SERVICE_CENTER，服务结束：SERVICE_END
        </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handlenewsign(scope.row)"
            v-if="queryParams.serviceStatus == 'INTENTIONAL_SIGNING'">签约</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            v-if="queryParams.serviceStatus == 'INTENTIONAL_SIGNING'">忽略</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            v-if="queryParams.serviceStatus == 'SERVICE_CENTER' || queryParams.serviceStatus == 'SERVICE_END'">详情</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            v-if="queryParams.serviceStatus == 'SERVICE_CENTER'">取消签约</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            v-if="queryParams.serviceStatus == 'SERVICE_CENTER' || queryParams.serviceStatus == 'SERVICE_END'">续约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { getAge } from "@/utils/age";
import { listSignRecord, getSignRecord, delSignRecord, addSignRecord, updateSignRecord } from "@/api/manage/signRecord";
import { selectAgencyList, getDepartmentList, subordinateAgencyList } from "@/api/manage/selectAgencyList";

export default {
  dicts: ['visit_method'],
  name: "SignRecord",
  data() {
    return {
      //医院list
      hospitalAgencylist: [],
      // 院区list
      campusAgencylist: [],
      //科室list
      departmentlist: [],
      //病区list
      wardlist: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 签约记录表格数据
      signRecordList: [],
      intentionalTime: [],
      signTime: [],
      serviceEndTime: [],
      submissionTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        patientName: null,
        patientPhone: null,
        cardNo: null,
        signTimeStart: null,
        signTimeEnd: null,
        hospitalAgencyId: null,
        campusAgencyId: null,
        departmentId: null,
        wardId: null,
        wardName: null,
        visitMethod: null,
        signDiagnosis: null,
        serviceStatus: 'INTENTIONAL_SIGNING',
        intentionalSource: null,
        intentionalTimeStart: null,
        intentionalTimeEnd: null,
        billingDoctorName: null,
        paymentStatus: null,
        serviceEndTimeStart: null,
        serviceEndTimeEnd: null,
        submissionTimeStart: null,
        submissionTimeEnd: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        patientId: [
          { required: true, message: "患者信息表id不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.selectAgencyinfo();
    this.getList();
  },
  methods: {
    /** 查询签约记录列表 */
    getList() {
      this.loading = true;
      listSignRecord(this.queryParams).then(response => {
        this.signRecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        patientId: null,
        patientName: null,
        patientPhone: null,
        cardNo: null,
        signTime: null,
        hospitalAgencyId: null,
        hospitalAgencyName: null,
        campusAgencyId: null,
        campusAgencyName: null,
        departmentId: null,
        departmentName: null,
        wardId: null,
        wardName: null,
        visitSerialNumber: null,
        visitMethod: null,
        signDiagnosis: null,
        reviewDiagnosis: null,
        serviceStatus: "0",
        signStatus: "0",
        intentionalSource: null,
        intentionalTime: null,
        billingDoctorId: null,
        billingDoctorName: null,
        price: null,
        paymentStatus: "0",
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.intentionalTime.length > 0) {
        this.queryParams.intentionalTimeStart = this.intentionalTime[0]
        this.queryParams.intentionalTimeEnd = this.intentionalTime[1]
      }
      if (this.signTime.length > 0) {
        this.queryParams.signTimeStart = this.signTime[0]
        this.queryParams.signTimeEnd = this.signTime[1]
      }
      if (this.serviceEndTime.length > 0) {
        this.queryParams.serviceEndTimeStart = this.serviceEndTime[0]
        this.queryParams.serviceEndTimeEnd = this.serviceEndTime[1]
      }
      if (this.submissionTime.length > 0) {
        this.queryParams.submissionTimeStart = this.submissionTime[0]
        this.queryParams.submissionTimeEnd = this.submissionTime[1]
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.intentionalTime = []
      this.signTime = []
      this.queryParams.signTimeStart = null
      this.queryParams.signTimeEnd = null
      this.queryParams.intentionalTimeStart = null
      this.queryParams.intentionalTimeEnd = null
      this.serviceEndTime = []
      this.submissionTime = []
      this.queryParams.serviceEndTimeStart = null
      this.queryParams.serviceEndTimeEnd = null
      this.queryParams.submissionTimeStart = null
      this.queryParams.submissionTimeEnd = null
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSignRecord(id).then(response => {
        this.form = response.data;
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除签约记录编号为"' + ids + '"的数据项？').then(function () {
        return delSignRecord(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('manage/signRecord/export', {
        ...this.queryParams
      }, `signRecord_${new Date().getTime()}.xlsx`)
    },
    handleClick(tab, event) {
      this.intentionalTime = []
      this.queryParams.intentionalTimeStart = null
      this.queryParams.intentionalTimeEnd = null
      this.signTime = []
      this.queryParams.signTimeStart = null
      this.queryParams.signTimeEnd = null
      this.getList();
    },
    // 格式化日期格式如：2017-9-19 18:04:33
    formatDate(value) {
      if (!value) {
        return
      }
      // 计算日期相关值
      let time = new Date(value)
      let Y = time.getFullYear();
      let M = time.getMonth() + 1;
      let D = time.getDate();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      // 如果传递了type的话
      return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    },
    handlenewsign(row) {
      this.$router.push({
        path: "/patient/newSigning",
        query: {
          patientName: row.patientName,
          patientPhone: row.patientPhone,
          visitMethod: row.visitMethod,
          mainDiagnosis: row.mainDiagnosis,
          visitSerialNumber: row.visitSerialNumber,
          hospitalAgencyName: row.hospitalAgencyName,
          departmentName: row.departmentName,
          paymentStatus: row.paymentStatus,
          sex: row.sex,
          age: row.birthDate ? getAge(row.birthDate) : '',
          patientId: row.id,
          createTime: row.createTime,
        },
      });
    },
    selectAgencyinfo() {
      let query = {
        agencyStatus: 'ON',
        nodeType: 'HOSPITAL',
      }
      selectAgencyList(query).then(res => {
        this.hospitalAgencylist = res.data
      })
    },
    //选中医院获取院区
    changehospitalAgency(id) {
      let query = {
        agencyStatus: 'ON',
        nodeType: 'CAMPUS',
        parentId: id,
      }
      selectAgencyList(query).then(res => {
        this.campusAgencylist = res.data
      })
    },
    //选中院区获取科室
    changecampusAgency(id) {
      let query = {
        nodeType: 'DEPARTMENT',
        agencyId: id,
      }
      getDepartmentList(query).then(res => {
        this.departmentlist = res.data
      })
    },
    //选中科室获取病区
    changedepartment(id) {
      let query = {
        nodeType: 'WARD',
        parentDepartmentId: id,
      }
      getDepartmentList(query).then(res => {
        this.wardlist = res.data
      })
    },
    //清空医院
    clearhospitalAgency() {
      this.queryParams.campusAgencyId = null
      this.queryParams.departmentId = null
      this.queryParams.wardId = null
    },
    //清空院区
    clearcampusAgency() {
      this.queryParams.departmentId = null
      this.queryParams.wardId = null
    },
    //清空科室
    cleardepartment() {
      this.queryParams.wardId = null
    },
  }
};
</script>
