<template>
  <div>
    <el-card class="el-card">
      <el-form :model="filterQuery" class="query-form" size="mini" label-width="100px" v-if="showSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item class="query-form-item" label="患者信息:">
              <el-input v-model="filterQuery.name" placeholder="请输入患者信息"
                        style="width: 90%"
                        clearable="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="query-form-item" label="创建时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 90%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>


      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询
          </el-button
          >
          <el-button type="primary" icon="el-icon-plus" @click="enterPatientInfo"
          >录入患者信息
          </el-button
          >
        </el-button-group>
      </div>
    </el-card>
    <el-divider style="margin: 15px"></el-divider>
    <el-card class="el-card">

      <el-row :gutter="8">
        <el-col :span="6" v-for="(bazi,key) in list" :key="key" :xs="12" :sm="8" :md="6" :lg="6">
          <BaziPanel :info="bazi" @baziPanel="getValue"></BaziPanel>
        </el-col>
      </el-row>
      <!--      <pagination style="height: 20px"-->
      <!--                  v-show="total>0"-->
      <!--                  :total="total"-->
      <!--                  :page-sizes=[12,24,36]-->
      <!--                  :page.sync="filterQuery.page"-->
      <!--                  :limit.sync="filterQuery.limit"-->
      <!--                  @pagination="getList"-->
      <!--      />-->
    </el-card>
    <el-dialog
      :title=title
      :visible.sync="addOrderVisible"
      width="85%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="addOrderVisible"
      @close="closeDialog"
    >
      <addOrder
        :closeDialog="closeDialog"
        :orderQuery="idQuery"
        :sickerAdNum="sickerAdNum"
        :sickerAdName="sickerAdName"
        :viewType="2"
        :errView="0"
        :viewTypeKsck=true
      ></addOrder>
    </el-dialog>


    <el-dialog
      title="录入患者信息"
      :visible.sync="enterPatientInfoVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="enterPatientInfoVisible"
      @close='closeDialog'
    >
      <el-form class="query-form" size="mini">
        <!--        <el-form-item class="query-form-item" label-width="18%" label="患者编码:" :required="true">-->
        <!--          <el-input-->
        <!--            v-model="addInfo.code"-->
        <!--            placeholder="请输入患者编码"-->
        <!--            clearable-->
        <!--          >-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <el-form-item class="query-form-item" label-width="18%" label="姓 名:" :required="true">
          <el-input
            v-model="addInfo.name"
            placeholder="请输入姓名"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="住院号:" :required="true">
          <el-input
            v-model="addInfo.adNum"
            placeholder="请输入住院号"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="身份证号:">
          <el-input
            v-model="addInfo.idNum"
            placeholder="请输入身份证号"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="手机号:">
          <el-input
            v-model="addInfo.phone"
            placeholder="请输入手机号"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="性别:">
          <el-select v-model="addInfo.gender" placeholder="请输入性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="出生年月:">
          <el-date-picker
            v-model="addInfo.bornDate"
            type="date"
            placeholder="请输入出生年月"
            clearable
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="query-form-item" label-width="18%" label="备注:">
          <el-input
            type="textarea"
            v-model="addInfo.remark"
            placeholder="备注"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item style="text-align: center;">
          <el-button-group>
            <el-button type="primary" @click="onInfoSubmit"
            >提交
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>

</template>

<script>
import BaziPanel from '@/components/inout/baziPanel.vue'
import {getSkSickerList, getOrderListbyCode, addInfoSkSicker, clickToTriggerbyCode} from '@/api/inout/ioDepartmentOrder'
import addOrder from "@/views/inout/DialogCreateOrder";
import {isBlank} from "@/utils/strUtil";

export default {
  components: {BaziPanel, addOrder},
  name: 'IoDepartmentOrder',
  data() {
    return {
      title: "新增单据",
      resultQuery: {
        orderId: null,
        code: null,
        page: 1,
        limit: 12
      },
      total: 0,
      list: [],
      showSearch: true,
      filterQuery: {
        name: '',
        page: 1,
        limit: 12,
        startTime: null,
        endTime: null,
      },
      screenWidth: window.innerWidth,
      sickerAdNum: null,
      sickerAdName: null,
      addOrderVisible: false,
      enterPatientInfoVisible: false,
      idQuery: {
        billNo: null,
        corpOrderId: null,
        action: null,
        invCode: null,
        fromCorp: null,
        fromCorpName: null,
        fromName: null,
        fromInvCode: null,
        remark: null,
        fromType: 2,
        errMsg: null,
        checkPreInOrders: null,
        checkPreInInvCode: null,
        checkPreInSpaceCode: null,
        curSpaceCode: null,
        preSpaceCode: null,
        preCurSpaceCode: null,  //单据
        sickerAdNum: null,
      },
      orderListDate: [],
      addInfo: {
        code: null,
        name: null,
        adNum: null,
        idNum: null,
        phone: null,
        gender: null,
        bornDate: null,
        remark: null,
        deptName: this.$store.getters.locDeptName,
        deptCode: this.$store.getters.locDeptCode
      },
      span: 6,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      actDateRange: [],
    }
  },
  computed: {
    cols() {
      const colCount = Math.floor(this.screenWidth / 200); // 假设每列最小宽度为100px
      this.span = 24 / colCount; // 假设总共有24格
      console.log(this.span)
      // return Array.from({length: colCount}, (_, index) => ({span}));
    },
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    getValue(info) {
      console.log(info)
      let query = {
        adNum: info.adNum
      }
      clickToTriggerbyCode(query).then((response) => {

      }).catch((error) => {

      })

      getOrderListbyCode(query)
        .then((response) => {
          if (response.code === 20000) {
            if (this.orderListDate.length > 0) {
              this.idQuery = this.orderListDate[0]; // 确保数组不为空
            } else {
              // 处理订单列表为空的情况，设置默认值或者显示消息
            }
            this.sickerAdNum = info.adNum;
            this.sickerAdName = info.name;
            this.addOrderVisible = true;
            this.list = response.data || [];
          } else {
            this.$message.error(response.message)
          }
        }).catch((error) => {
        this.$message.error(error.message)
        this.list = []
        this.total = 0
      })
      console.log("this.idQuery" + this.idQuery)
      console.log("this.sickerAdNum" + this.sickerAdNum)
    },
    closeDialog() {
      this.addOrderVisible = false;
      this.enterPatientInfoVisible = false;
      this.getList();
    },
    getList() {
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0];
        this.filterQuery.endTime = this.actDateRange[1];
      }
      getSkSickerList(this.filterQuery)
        .then((response) => {
          if (response.code === 20000) {
            this.list = response.data.list || []
            this.total = response.data.total || 0
          } else {
            this.$message.error(response.message)
          }
        })
        .catch((error) => {
          this.$message.error(error.message)
          this.list = []
          this.total = 0
        })
    },
    onSubmit() {
      this.getList()
    },
    onInfoSubmit() {
      if (isBlank(this.addInfo.name)) {
        this.$message.error('姓名不能为空')
        return
      } else if (isBlank(this.addInfo.adNum)) {
        this.$message.error('住院号不能为空')
        return
      }

      addInfoSkSicker(this.addInfo).then((response) => {
        if (response.code === 20000) {
          this.$message.success(response.data)
          this.addInfo = {
            code: null,
            name: null,
            adNum: null,
            idNum: null,
            phone: null,
            gender: null,
            bornDate: null,
            remark: null,
            deptName: this.$store.getters.locDeptName,
            deptCode: this.$store.getters.locDeptCode

          }
          this.closeDialog();
        } else {
          this.$message.error(response.message)
        }
      })
        .catch((error) => {
          this.$message.error(error.message)

        })
    },
    enterPatientInfo() {
      this.enterPatientInfoVisible = !this.enterPatientInfoVisible;
    },
    onReset() {
      this.filterQuery = {
        name: '',
        page: 1,
        limit: 24
      }
      this.getList()
    },
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    handleResize() {
      this.screenWidth = window.innerWidth;
      const colCount = Math.floor(this.screenWidth / 600); // 假设每列最小宽度为100px
      this.span = 24 / colCount; // 假设总共有24格
      console.log(this.span)
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
</style>

