<template>
  <a-modal
    v-model:visible="medinceVisible"
    fullscreen
    title="药品订单详情"
    title-align="start"
    :auto-label-width="true"
    :footer="false"
    @cancel="handleClose"
  >
    <div class="titlebox">
      <div class="bar"></div>
      <div class="name">订单信息</div>
    </div>
    <a-form :model="modalForm" ref="modalFormRef" :auto-label-width="true">
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="12">
          <a-form-item field="inquiry_no" label="订单编号：">
            <span>{{ modalForm.order_product_no }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="order_product_status" label="处方编号：">
            <span v-if="modalForm.order_prescription">{{
              modalForm.order_prescription.prescription_code
            }}</span>
            <span v-else>暂无</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="user.created_at" label="下单时间：">
            <span>{{ modalForm.created_at }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="pay_time" label="支付时间：">
            <span v-if="parseTime(modalForm.pay_time)">{{
              parseTime(modalForm.pay_time)
            }}</span>
            <span v-else>-</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="amount_total" label="订单金额：">
            <span>{{ modalForm.amount_total }}元</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="logistics_fee" label="邮费：">
            <span>{{ modalForm.logistics_fee }}元</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="payment_amount_total" label="实付金额：">
            <span>{{ modalForm.payment_amount_total }}元</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="order_product_status" label="订单状态：">
            <span>{{
              formatProductStatus(modalForm.order_product_status)
            }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.cancel_reason">
        <a-col :span="24">
          <a-form-item field="department_custom_name" label="备   注 ：">
            <span>{{
              formatProductCancelReason(modalForm.cancel_reason)
            }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
      <div class="titlebox" v-if="modalForm.order_product_refund">
        <div class="bar"></div>
        <div class="name">退款信息</div>
      </div>
      <a-row
        :gutter="24"
        style="margin-top: 35px"
        v-if="modalForm.order_product_refund"
      >
        <a-col :span="12">
          <a-form-item field="inquiry_refund_no" label="退款编号：">
            <span>{{ modalForm.order_product_refund.product_refund_no }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="escrow_trade_no" label=" 第三方订单编号：">
            <span>{{ modalForm.order_product_refund.refund_id }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_product_refund">
        <a-col :span="12">
          <a-form-item field="inquiry_refund_no" label="退款金额：">
            <span>{{ modalForm.order_product_refund.refund_total }}元</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="escrow_trade_no" label="退款状态：">
            <span>{{
              formatRefundStatus(
                modalForm.order_product_refund.product_refund_status
              )
            }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_product_refund">
        <a-col :span="24">
          <a-form-item field="inquiry_refund_no" label="退款时间：">
            <span
              v-if="parseTime(modalForm.order_product_refund.success_time)"
              >{{ modalForm.order_product_refund.success_time }}</span
            >
            <span v-else>-</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_product_refund">
        <a-col :span="24">
          <a-form-item field="inquiry_refund_no" label="退款原因：">
            <span>{{ modalForm.order_product_refund.refund_reason }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider v-if="modalForm.order_product_refund" />
      <div class="titlebox" v-if="modalForm.order_product_item && modalForm.order_product_item.length > 0">
        <div class="bar"></div>
        <div class="name">药品信息</div>
      </div>
      <a-row
        :gutter="24"
        style="margin-top: 35px"
        v-if="
          modalForm.order_product_item &&
          modalForm.order_product_item.length > 0
        "
      >
        <a-col :span="24">
          <a-form-item field="license_cert" :hide-label="true">
            <a-list>
              <a-list-item
                v-for="item in modalForm.order_product_item"
                :key="item.product_item_id"
              >
                <a-list-item-meta
                  :title="item.product_name + item.product_spec"
                  :description="item.manufacturer + '*' + item.amount"
                >
                  <template #avatar>
                    <a-avatar shape="square">
                      <img
                        alt="avatar"
                        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                      />
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider
        v-if="
          modalForm.order_product_item &&
          modalForm.order_product_item.length > 0
        "
      />
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">地址信息</div>
        <a-space
          style="
            margin-right: 8px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
          "
        >
          <a-button type="primary" status="warning" @click="toggleAddress">{{
            lookAllAddress ? '隐藏完整地址信息' : '查看完整地址信息'
          }}</a-button>
        </a-space>
      </div>
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="12">
          <a-form-item field="inquiry_no" label="收货人姓名：">
            <span v-if="!lookAllAddress">
              {{ modalForm.consignee_name_mask }}</span
            >
            <span v-else>{{ AddressData.consignee_name }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="inquiry_no" label="收货人电话：">
            <span v-if="!lookAllAddress">
              {{ modalForm.consignee_tel_mask }}</span
            >
            <span v-else>{{ AddressData.consignee_tel }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="收货人地址：">
            <span v-if="!lookAllAddress"> {{ modalForm.address_mask }}</span>
            <span v-else>{{ AddressData.address }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">物流信息</div>
      </div>
      <a-row v-if="modalForm.order_product_logistics" style="margin-top: 35px">
        <a
          :href="
            'https://www.baidu.com/s?ie=UTF-8&wd=' +
            modalForm.order_product_logistics.logistics_no
          "
          target="_blank"
          class="express"
          ><span>物流单号：</span
          >{{ modalForm.order_product_logistics.logistics_no }}</a
        >
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item field="license_cert" :hide-label="true">
            <div class="timeline" v-if="modalForm.order_product_logistics">
              <a-timeline>
                <a-timeline-item
                  :label="item.time"
                  :dotColor="formatColor(item.status)"
                  v-for="item in cur_express"
                >
                  {{ item.context }}
                </a-timeline-item>
              </a-timeline>
              <a-button @click="toggleExpand" class="expand">{{
                isExpand ? '收起' : '展开'
              }}</a-button>
            </div>
            <div v-else>暂无物流信息</div>
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider />
      <div class="titlebox" v-if="modalForm.order_prescription">
        <div class="bar"></div>
        <div class="name">处方信息</div>
      </div>
      <a-row
        :gutter="24"
        style="margin-top: 35px"
        v-if="modalForm.order_prescription"
      >
        <a-col :span="24">
          <a-form-item field="license_cert" :hide-label="true">
            <tableUnit
              :pagination="false"
              :columns="chufang_columns"
              :data="chufang_data"
            ></tableUnit>
            <!-- <prescription :data="modalForm.order_prescription"></prescription> -->
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider v-if="modalForm.order_prescription" />
      <div class="titlebox" v-if="modalForm.user_doctor">
        <div class="bar"></div>
        <div class="name">医生信息</div>
        <a-space
          style="
            margin-right: 8px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
          "
        >
          <a-button type="primary" @click="openDcotor"
            >查看医生完整信息</a-button
          >
        </a-space>
      </div>
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="24">
          <a-form-item field="license_cert" :hide-label="true">
            <div class="doctorInfo" v-if="modalForm.user_doctor">
              <a-space size="large">
                <a-image
                  width="80"
                  height="80"
                  class="headImg"
                  :src="modalForm.user_doctor.avatar"
                  v-if="modalForm.user_doctor.avatar"
                >
                </a-image>
                <a-image
                  width="80"
                  height="80"
                  class="headImg"
                  src="https://img.applets.igandanyiyuan.com/basic/file/doctor_avatar.png"
                  v-else
                >
                </a-image>
              </a-space>
              <div class="infobox">
                <div class="name">
                  {{ modalForm.user_doctor.user_name }}&nbsp;&nbsp;{{
                    formatDoctorTitle(modalForm.user_doctor.doctor_title)
                  }}
                </div>
                <div class="hospital">
                  {{
                    modalForm.user_doctor.hospital.hospital_name
                  }}&nbsp;&nbsp;{{
                    modalForm.user_doctor.department_custom_name
                  }}
                </div>
              </div>
            </div>
            <div class="doctorInfo" v-else>暂未分配到医生</div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider v-if="modalForm.user_doctor" />
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">就诊人信息</div>
        <a-space
          style="
            margin-right: 8px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
          "
        >
          <a-button type="primary" status="warning" @click="openPatient"
            >查看就诊人完整信息</a-button
          >
        </a-space>
      </div>
      <a-row
        :gutter="24"
        style="margin-top: 35px"
        v-if="modalForm.order_inquiry_case"
      >
        <a-col :span="24">
          <a-form-item label="就诊人姓名：">
            <span
              >{{ modalForm.order_inquiry_case.name }}&nbsp;&nbsp;（{{
                modalForm.order_inquiry_case.sex == 1 ? '男' : '女'
              }}&nbsp;&nbsp;{{ modalForm.order_inquiry_case.age }}岁）</span
            >
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_inquiry_case">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="病情描述：">
            <span>{{ modalForm.order_inquiry_case.disease_desc }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_inquiry_case">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="确诊疾病：">
            <span
              >{{
                modalForm.order_inquiry_case.disease_class_name
              }}&nbsp;&nbsp;{{
                modalForm.user_doctor.department_custom_name
              }}</span
            >
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">处方上报状态</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="上报状态：">
            <span> {{ fromatReportStatus(modalForm.report_pre_status) }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="上报时间：">
            <span v-if="parseTime(modalForm.report_pre_time)">
              {{ modalForm.report_pre_time }}</span
            >
            <span v-else>-</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.report_pre_fail_reason">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="上报失败原因：">
            <span> {{ modalForm.report_pre_fail_reason }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
    </a-form>

    <div class="titlebox">
      <div class="bar"></div>
      <div class="name">操作</div>
    </div>
    <a-row :gutter="24" style="margin-top: 35px">
      <a-col :span="24">
        <a-form-item field="" label="" no-style>
          <a-space
            style="margin-right: 8px"
            v-if="
              modalForm.report_pre_status == 2 &&
              modalForm.refund_status != 2 &&
              modalForm.refund_status != 3
            "
          >
            <a-button
              type="primary"
              v-has="'admin:sysProductList:report'"
              @click="
                () => {
                  isVisible = true;
                  order_product_id = modalForm.order_product_id;
                }
              "
              >上报处方平台</a-button
            >
          </a-space>
          <!-- 订单状态=2退款状态=4，5支付状态=2上报状态!=1 -->
          <a-space
            style="margin-right: 8px"
            v-if="
              modalForm.order_product_status == 2 &&
              modalForm.pay_status == 2 &&
              (modalForm.refund_status == 4 ||
                modalForm.refund_status == 5 ||
                modalForm.refund_status == 0) &&
              modalForm.report_pre_status != 1
            "
          >
            <a-button
              type="primary"
              v-has="'admin:sysProductList:cancel'"
              status="danger"
              v-show="showCancelOrderBtn"
              @click="
                () => {
                  okVisible = true;
                  cur_product_id = modalForm.order_product_id;
                }
              "
              >取消药品订单</a-button
            >
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
  <!-- 医生详情弹框 -->
  <doctorModal
    :doctorVisible="doctorVisible"
    :doctor_id="doctor_id"
    @doctorVisibleChange="
      () => {
        doctorVisible = false;
        doctor_id = '';
      }
    "
  ></doctorModal>
  <!-- 患者详情弹窗 -->
  <patientModal
    :patientVisible="patientVisible"
    :data="patientData"
    @patientVisibleChange="
      () => {
        patientVisible = false;
      }
    "
  ></patientModal>
  <confirmModal
    :okVisible="okVisible"
    :api="cancelProduct"
    :dealType="'order_inquiry_id'"
    :payment_amount_total="modalForm.payment_amount_total
"   :type="'service'"
    :id="cur_product_id"
    @closeChange="closeChange"
  ></confirmModal>
  <isOkModal
    :isVisible="isVisible"
    :api="reportPrePscription"
    :title="'确定上报处方吗？'"
    :dealType="'order_product_id'"
    :id="order_product_id"
    @closeChangeOk="closeChangeOk"
  ></isOkModal>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, watch, toRefs } from 'vue';
import {
  productList,
  getProductDetail,
  cancelProduct,
  reportPrePscription,
  lookAddress,
  inquiryCase,
} from '@/api/order/list';
import { parseTime } from '@/utils/parseTime';
import {
  formatDoctorTitle,
  fromatReportStatus,
  formatPrescriptionStatus,
  formatPharmacistStatus,
  formatProductCancelReason,
} from '@/utils/format';

const props = defineProps({
  // 是否显示
  medinceVisible: {
    type: Boolean,
    default: false,
  },
  showCancelOrderBtn:{
    type: Boolean,
    default: true,
  },
  modalForm: {
    type: Object,
    default: {
      order_product_refund: {},
      order_product_item: [],
      order_product_logistics: null,
      user_doctor: null,
      order_prescription: null,
    },
  },
});
const { medinceVisible, modalForm,showCancelOrderBtn } = toRefs(props);
const IMG_URL = import.meta.env.VITE_IMG_URL;
const emits = defineEmits(['medinceVisibleChange']);

// Akiraka 20230210 监听删除事件
const okVisible = ref(false);
const cur_product_id = ref('');
const doctorVisible = ref(false);
const doctor_id = ref('');
const isVisible = ref(false);
const order_product_id = ref('');
let express = []; //物流信息；
const cur_express = ref([]);
const isExpand = ref(false);
const patientVisible = ref(false);
const patientData = reactive({});
const lookAllAddress = ref(false);
const AddressData = reactive({});
let chufang_data = ref([]);
const chufang_columns = reactive([
  {
    title: '处方编号',
    dataIndex: 'prescription_code',
  },
  {
    title: '处方状态',
    dataIndex: 'prescription_status',
  },
  {
    title: '药师审核状态',
    dataIndex: 'pharmacist_audit_status',
  },
  {
    title: '医嘱',
    dataIndex: 'doctor_advice',
  },
  {
    title: '药师驳回原因',
    dataIndex: 'pharmacist_fail_reason',
  },
  {
    title: '处方链接',
    dataIndex: 'url',
    slotName: 'url',
  },
]);
watch(
  () => props.modalForm,
  (newValue, oldValue) => {
    let result = newValue.order_prescription;
    let express = newValue.order_product_logistics
      ? JSON.parse(newValue.order_product_logistics.logistics_content)
      : [];
    cur_express.value = express.length > 1 && express.slice(0, 1);
    let data_arr = [{}];
    if (result) {
      chufang_columns.forEach((item) => {
        if (item.dataIndex == 'prescription_status') {
          data_arr[0][item.dataIndex] = formatPrescriptionStatus(
            result[item.dataIndex]
          );
        } else if (item.dataIndex == 'pharmacist_audit_status') {
          data_arr[0][item.dataIndex] = formatPharmacistStatus(
            result[item.dataIndex]
          );
        } else if (item.dataIndex == 'url') {
          data_arr[0][item.dataIndex] =
            IMG_URL +
            '/applet/prescription/' +
            result.order_prescription_id +
            '.pdf';
        } else if (item.dataIndex == 'pharmacist_fail_reason') {
          data_arr[0][item.dataIndex] = result[item.dataIndex]
            ? result[item.dataIndex]
            : '暂无';
        } else {
          data_arr[0][item.dataIndex] = result[item.dataIndex];
        }
      });
      chufang_data.value = data_arr;
    }

   

   
  },
  { immediate: true, deep: true }
);

const { proxy } = getCurrentInstance();


const formatProductStatus = (val) => {
  //订单状态（<!-- 1:待支付 2:待发货 3:已发货 4:已签收 5:已取消 -->
  let data = {
    1: '待支付',
    2: '待发货',
    3: '已发货',
    4: '已签收',
    5: '已取消',
  };
  if (val) {
    return data[val];
  } else {
    return '';
  }
};
const formatRefundStatus = (val) => {
  //问诊订单退款状态（0:无退款 1:申请退款 2:退款中 3:退款成功 4:拒绝退款 5:退款关闭 6:退款异常）
  let data = {
    0: '无退款',
    1: '申请退款',
    2: '退款中',
    3: '退款成功',
    4: '拒绝退款',
    5: '退款关闭',
    6: '退款异常',
  };
  if (val || val == 0) {
    return data[val];
  } else {
    return '';
  }
};
const formatColor = (value) => {
  if (value == '签收') {
    return '#00B42A';
  } else {
    return 'var(--color-fill-4)';
  }
};
const toggleExpand = () => {
  isExpand.value = !isExpand.value;
  if (isExpand.value) {
    cur_express.value = express.slice(0, -1);
  } else {
    cur_express.value = express.slice(0, 1);
  }
};

const handleClose = () => {
  emits('medinceVisibleChange', (medinceVisible.value = false));
};
const toggleAddress = async() => {
    if(!lookAllAddress.value){
        const { data, code } = await lookAddress(modalForm.value.order_product_id);
    if (code == 200) {
      Object.assign(AddressData, data);
    }
    }
  lookAllAddress.value = !lookAllAddress.value;
};
//关闭确认框
const closeChange = (data) => {
  cur_product_id.value = '';
  okVisible.value = false;
  if (data) {
    modalVisible.value = false;
    getProductInfo({ ...pager, ...queryForm });
  }
};
//关闭上传处方平台弹框
const closeChangeOk = (data) => {
  order_product_id.value = '';
  isVisible.value = false;
  if (data) {
    getDetail(modalForm.order_product_id);
  }
};

const openDcotor = () => {
  doctor_id.value = modalForm.value.doctor_id;
  doctorVisible.value = true;
};
const openPatient = async () => {
    if (
        modalForm.value.order_inquiry_case &&
        modalForm.value.order_inquiry_case.inquiry_case_id
    ) {
      const caseInfo = await inquiryCase(modalForm.value.order_inquiry_case.inquiry_case_id);
      Object.assign(patientData, caseInfo.data);
    }
  patientVisible.value = true;
};
</script>

<style lang="scss">
.action {
  margin-bottom: 12px;
}
.doctorInfo {
  display: flex;
  align-items: center;
}
.row {
  line-height: 32px;
  display: flex;
}
.row .nameDesc {
  text-align: right;
  width: 120px;
  color: #000;
}
.row .desc {
  color: #666;
}
.infobox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.headImg {
  margin-right: 20px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.arco-timeline-item-content-wrapper {
  width: 80%;
}
.arco-timeline-item-label {
  margin-left: 10px;
}
.expand {
  margin-top: 15px;
}
.arco-form-item-content {
  word-break: break-all;
}
.express {
  margin-bottom: 15px;
  font-size: 15px;
}
.express span {
  color: #333;
}
</style>
