<template>
  <div>
    <div>
      <div class="middlebox">
        <div class="contenttitle">
          体检查询 /
          <span class="contenttitleBold"
            >组合项目检查状态</span
          >
        </div>
      </div>
      <div :style="'display: block;'">
        <div style="background-color: #fff; padding: 15px; border-radius: 8px;display: flex;flex-wrap: wrap;    margin-bottom: 10px;height:35px;margin-top: 7px;">
          <div class="query">
            <span>体检单位：</span>
            <el-input placeholder="请选择体检单位" v-model="patientRegister.query.cusOrgOCX" style="width:300px;" size="small"
              disabled>
              <el-button slot="append" icon="el-icon-search" @click="report.dialogCusOrgOCX = true"
                style="font-size: 20px;"></el-button>
            </el-input>
          </div>
          <div class="query">
            <span>组合项目：</span>
            <el-input placeholder="请选择组合项目" v-model="patientRegister.query.asbitemOCX" style="width:240px;" size="small"
              disabled>
              <el-button slot="append" icon="el-icon-search" @click="report.dialogAsbitemOCX = true"
                style="font-size: 20px;"></el-button>
            </el-input>
          </div>
          <div class="query">
            <span>检查状态：</span>
            <el-select v-model="patientRegister.query.checkCompleteFlag" placeholder="请选择" clearable style="width: 80px"
              size="small">
              <el-option v-for="item in dict.checkCompleteFlag" :key="item.id" :label="item.displayName" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="query">
            <el-button type="primary" @click="btnQuery" size="small" class="commonbutton">查询</el-button>
          </div>
        </div>
        <div style="background-color: #fff; padding: 15px; border-radius: 8px;">
          <el-table :data="dataList" border :height="window.pageHeight < 600 ? 415 : window.pageHeight - 185-20" row-key="id"
            size="small" highlight-current-row ref="dataList" :row-class-name="tableRowClassName">
            <el-table-column prop="asbitemName" label="组合项目名称" min-width="120" />
            <el-table-column prop="completeFlag" label="检查状态" min-width="70" align="center">
              <template slot-scope="scope">
                <div>{{ dddw(dict.checkCompleteFlag, 'id', scope.row.completeFlag, 'displayName') }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="isCharge" label="收费状态" width="70" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.checkCompleteFlag == 'Y' ? '已收费' : '未收费' }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="standardPrice" label="标准价格" width="70" align="center"/>
            <el-table-column prop="chargePrice" label="应收价格" width="70" align="center"/>
            <el-table-column prop="patientRegisterNo" label="人员条码号" width="130" />
            <el-table-column prop="patientNo" label="档案号" width="130" />
            <el-table-column prop="medicalTimes" label="体检次数" width="70" align="center"/>
            <el-table-column prop="customerOrgName" label="单位" width="180" />
            <!--
            <el-table-column prop="customerOrgParentName" label="单位" width="180">
              <template slot-scope="scope">
                <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgParentName : scope.row.customerOrgName }}</div>
              </template>
            </el-table-column>
            -->
            <el-table-column prop="departmentName" label="部门" width="180" />
            <!--
            <el-table-column prop="customerOrgName" label="部门" width="180">
              <template slot-scope="scope">
                <div>{{ scope.row.customerOrgParentName ? scope.row.customerOrgName : "" }}</div>
              </template>
            </el-table-column>
            -->
            <el-table-column label="分组/套餐" width="150">
              <template slot-scope="scope">
                <!--
                <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId === dict.personOrgId">                
                  {{ dddw(dict.medicalPackage, "id", scope.row.medicalPackageId, "displayName") }}
                </div>
                <div v-if="scope.row.medicalPackageId !== dict.personOrgId && scope.row.customerOrgId !== dict.personOrgId">                
                  {{ dddw(dict.customerOrgGroupAll, "id", scope.row.customerOrgGroupId, "displayName") }}                
                </div>
                -->
                <div v-if="scope.row.medicalPackageName">
                  {{ scope.row.medicalPackageName }}
                </div>
                <div v-if="scope.row.customerOrgGroupName">
                  {{ scope.row.customerOrgGroupName }}
                </div>
              </template>           
            </el-table-column>
            <el-table-column prop="patientName" label="姓名" width="80" />
            <el-table-column prop="sexName" label="性别" />
            <!--
            <el-table-column prop="sexId" label="性别" >
              <template slot-scope="scope">
                <div>{{ dddw(dict.sex, "id", scope.row.sexId, "displayName") }}</div>
              </template>
            </el-table-column>
            -->
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="mobileTelephone" label="手机" width="120" />
            <el-table-column prop="telephone" label="电话" width="100" />
          </el-table>
        </div>
      </div>
    </div>
    <!--通用选单位、体检次数、分组的控件-->
    <el-dialog title="体检单位选择" :visible.sync="report.dialogCusOrgOCX" :close-on-click-modal="false" width="880px"
      height="600px">
      <CusOrgOCX />
    </el-dialog>
    <!--通用选组合项目的控件-->
    <el-dialog title="组合项目选择" :visible.sync="report.dialogAsbitemOCX" :close-on-click-modal="false" width="700px"
      height="600px">
      <AsbitemOCX />
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { mapState, mapActions } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, objCopy, arrayReduce, arrayExistObj, tcdate } from "@/utlis/proFunc";
import CusOrgOCX from "../../components/report/CusOrgOCX.vue"
import AsbitemOCX from "../../components/report/AsbitemOCX.vue"
export default {
  components: {
    CusOrgOCX,
    AsbitemOCX,
  },
  data() {
    return {
      dataList: [], //列表数据 
    };
  },

  created() {
    this.dictInit();
  },

  //挂载完成
  mounted() {
    // this.btnQuery();
  },

  computed: {
    ...mapState(["window", "dict", "patientRegister", "report"]),
  },

  methods: {
    moment, dddw,
    //数据初始化
    dictInit() {
      //性别
      getapi("/api/app/sex").then((res) => {
        if (res.code == 1) {
          this.dict.sex = res.data;
        }
      });

      //体检中心
      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
        (res) => {
          if (res.code == 1) {
            this.dict.organization = res.data;
          }
        }
      );

      //体检单位树
      getapi("/api/app/customerorg/getbycodeall").then((res) => {
        if (res.code == 1) {
          this.patientRegister.customerOrgTreeAll = res.data;
          tcdate(this.patientRegister.customerOrgTreeAll);
        }
      });

      //体检类别
      getapi("/api/app/medical-type/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.medicalType = res.data;
        }
      });

      //人员类别
      getapi("/api/app/personnel-type/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.personnelType = res.data;
        }
      });

      //婚姻状况
      getapi("/api/app/MaritalStatus/GetMaritalStatusList").then((res) => {
        if (res.code == 1) {
          this.dict.maritalStatus = res.data;
        }
      });

      //性激素期
      getapi("/api/app/sex-hormone-term/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.sexHormoneTerm = res.data;
        }
      });

      //民族
      getapi("/api/app/nation/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.nation = res.data;
        }
      });

      //籍惯 ，出生地
      getapi("/api/app/birth-place/in-filter").then((res) => {
        if (res.code == 1) {
          this.dict.birthPlace = res.data;
        }
      });

      //套餐
      postapi("/api/app/medicalpackage/GetBasicList",{}).then((res) => {
        if (res.code == 1) {
          this.dict.medicalPackage = res.data;
        }
      });

      //分组，所有分组，不限单位，不限次数
      getapi("/api/app/customer-org-group").then((res) => {
        if (res.code == 1) {
          this.dict.customerOrgGroupAll = res.data.items;
        }
      });

      //支付方式
      getapi("/api/app/pay-mode").then((res) => {
        if (res.code == 1) {
          this.dict.payMode = res.data;
        }
      });

      //体检类别 树结构
      getapi("/api/app/item-type/by-code-all").then((res) => {
        if (res.code == 1) {
          this.dict.itemTypeTree = res.data;
          tcdate(this.dict.itemTypeTree);
        }
      });

      postapi("/api/app/asbitem/GetBasicList",{}).then((res) => {
        if (res.code == 1) {
          this.dict.asbItemAll = res.data;
        }
      });

      console.log("dict", this.dict);
    },
    
    tableRowClassName({ row, rowIndex }) {
      switch (row.completeFlag) {
        case '0':
          return 'danger';
        case '2':
          return 'info';  
        default:
          return '';
      }     
    },

    //查询
    btnQuery() {
      let body = {}, customerOrgs = [], asbitemIds = [];
      // {
      //   "customerOrgs": [
      //     {
      //       "customerOrgId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      //       "customerOrgRegisterId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
      //       "customerOrgGroupId": [
      //         "3fa85f64-5717-4562-b3fc-2c963f66afa6"
      //       ],
      //       "dateType": "string",
      //       "startDate": "string",
      //       "endDate": "string"
      //     }
      //   ],
      //   "asbitemIds": [
      //     "3fa85f64-5717-4562-b3fc-2c963f66afa6"
      //   ],
      //   "completeFlag": "string"
      // }

      if (this.report.dataCusOrgOCX.length > 0) {
        this.report.dataCusOrgOCX.forEach(e => {
          let rd = {
            startDate: moment(e.startDate).format('yyyy-MM-DD'),
            endDate: moment(e.endDate).format('yyyy-MM-DD'),
            dateType: e.dateType == 'summaryDate' ? '3' : (e.dateType == 'medicalStartDate' ? '2' : '1')
          }

          if (e.customerOrgId) {
            rd.customerOrgId = e.customerOrgId
            if (e.customerOrgId == this.dict.personOrgId) {
              rd.customerOrgRegisterId = null
              rd.customerOrgGroupId = []
            } else {
              rd.customerOrgRegisterId = e.customerOrgRegister.id
              rd.customerOrgGroupId = e.customerOrgGroupIds
            }
          }
          customerOrgs.push(rd)
        })
      }

      if (this.report.dataAsbitemOCX.length > 0) {
        this.report.dataAsbitemOCX.forEach(e => {
          asbitemIds.push(e.id)
        })
      }

      body.customerOrgs = customerOrgs
      body.asbitemIds = asbitemIds

      if (this.patientRegister.query.checkCompleteFlag) body.completeFlag = this.patientRegister.query.checkCompleteFlag

      //console.log('/api/app/peisreport/getpatientregisterreport',body)


      postapi('/api/app/peisreport/getregisterasbitemregistercheckstatus', body).then(res => {
        if (res.code != -1) {
          this.dataList = res.data;
        }
      })
    },
  },

  //监听事件
  watch: {
    //触发查询事件
    // "patientRegister.query.times"(newVal, oldVal) {
    //   if (newVal != oldVal) {
    //     //alert('触发查询事件')
    //     this.query();
    //   }
    // },

  },
};
</script>
<style scoped>
@import '../../assets/css/global_button.css';
@import '../../assets/css/global_card.css';
@import '../../assets/css/global_input.css';
@import '../../assets/css/global_table.css';
@import '../../assets/css/global.css';

.query {
  margin-left: 10px;
      font-size: 14px;
    color: #232748;
    font-weight: 400;
    font-family: "NotoSansSC-Regular";
}
::v-deep .el-icon-search:before {
  color: #00F;
}

</style>
