<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in inquiryOrderList" :key="item.orderId">
        <el-card class="card-item" style="height: 300px; overflow: hidden; position: relative;">
          <div slot="header" class="clearfix">
            <span>{{ JSON.parse(item.patientJson).patientName }}</span>
            <span style="margin-left: 10px;">{{ JSON.parse(item.patientJson).sex==1 ? '男' : '女' }}</span>
            <span style="margin-left: 10px;">{{ JSON.parse(item.patientJson).age }}岁</span>
            <dict-tag type="success" style="float: right;" :options="inquiryStatusOptions" :value="item.status" />
          </div>
          <div style="margin-top: 5px;">
            <el-tooltip class="item" effect="dark" :content="item.title" placement="top" :popper-options="{ width: '500px' }">
              <p class="ellipsis">病情描述: {{ item.title }}</p>
            </el-tooltip>
            <p style="display: inline-flex; align-items: center;">
              <dict-tag  :options="inquiryTypeOptions" :value="item.inquiryType" />
              <span style="margin: 0 5px;"></span>
              <dict-tag :options="inquiryOrderTypeOptions" :value="item.orderType" />
            </p>
            <p>{{ item.createTime }}</p>
          </div>
          <div style="position: absolute; bottom: 10px; right: 10px;">
            <el-button v-if="item.status==2" type="success" plain round size="mini" @click="handledetails(item)">抢单</el-button>
            <el-button size="mini" type="text" @click="handledetails(item)" icon="el-icon-share">详情</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-drawer :with-header="false" size="75%" :title="show.title" :visible.sync="show.open">
      <inquiryOrderDetails  ref="Details" />
   </el-drawer>
  </div>
</template>

<script>
import { getInquiryOrderList,receiveOrder,refuseOrder } from "@/api/inquiryOrder";
import inquiryOrderDetails from '../../components/order/inquiryOrderDetails.vue';
export default {
  name: "inquiryOrder",
  components: { inquiryOrderDetails },
  data() {
    return {
      show:{
        title:"问诊详情",
        open:false,
      },
      // 总条数
      total: 0,
      // 问诊订单表格数据
      inquiryOrderList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      inquiryStatusOptions:[],
      inquiryTypeOptions:[],
      inquiryPayOptions:[],
      inquiryOrderTypeOptions:[],
      orOptions:[],
    };
  },

  created() {
      this.getDicts("sys_inquiry_status").then(response => {
        this.inquiryStatusOptions = response.data;
      });
      this.getDicts("sys_inquiry_type").then(response => {
        this.inquiryTypeOptions = response.data;
      });
      this.getDicts("sys_inquiry_pay").then(response => {
        this.inquiryPayOptions = response.data;
      });
      this.getDicts("sys_inquiry_order_type").then(response => {
        this.inquiryOrderTypeOptions = response.data;
      });
      this.getList();
  },
  methods: {
    refresh() {
      this.getList();
    },
    handleReceiveOrder(row){
      const orderId = row.orderId
      var data={
        orderId:orderId
      }
      this.$confirm('确认接单吗？', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return receiveOrder(data);
        }).then(() => {
          this.getList();
          this.msgSuccess("接单成功");
        }).catch(() => {});
    },

    handleRefuseOrder(row){
      const orderId = row.orderId
      var data={
        orderId:orderId
      }
      this.$confirm('确认拒单吗？', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return refuseOrder(data);
        }).then(() => {
          this.getList();
          this.msgSuccess("拒单成功");
        }).catch(() => {});
    },
    handledetails(row){
        this.show.open=true;
        setTimeout(() => {
              this.$refs.Details.getDetails(row.orderId);
        }, 1);
    },
    /** 查询问诊订单列表 */
    getList() {
      this.loading = true;
      this.queryParams.isReceive = 0;
      this.queryParams.status = 2
      getInquiryOrderList(this.queryParams).then(response => {
        this.inquiryOrderList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    }
  }
};
</script>

<style>
.card-item {
  height: 300px; /* 设置卡片固定高度 */
  overflow: hidden; /* 隐藏超出卡片高度的内容 */
  margin: 20px; /* 设置卡片的上下左右间距 */
}
.tooltip-text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出容器宽度的内容 */
  text-overflow: ellipsis; /* 使用省略号表示被修剪的文本 */
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
