<template>
  <a-collapse
    v-if="repairResultList && repairResultList.length > 0"
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('REPAIR_RECORD')">
      <div
        v-for="(item, index) in repairResultList"
        :key="index"
        class="repair_order_box mb-2"
      >
        <a-descriptions class="repair_order_item">
          <!--故障原因码-->
          <a-descriptions-item :label="`${$t('ERROR_REASON')}`">{{
            item.errorReasonCode
          }}</a-descriptions-item>
          <!--故障原因描述-->
          <a-descriptions-item :label="`${$t('ERROR_REASON_DESCRIBE')}`">{{
            item.errorReasonName
          }}</a-descriptions-item>
          <!--故障类型-->
          <a-descriptions-item></a-descriptions-item>
          <!--故障维修码-->
          <a-descriptions-item :label="`${$t('ERROR_REPAIR')}`">{{
            item.errorRepairCode
          }}</a-descriptions-item>
          <!--故障维修方案-->
          <a-descriptions-item :label="`${$t('ERROR_REPAIR_PLAN')}`">{{
            item.errorRepairName
          }}</a-descriptions-item>
          <!--备注-->
          <a-descriptions-item :label="`${$t('REMARK')}`">
            {{ item.repairRemark }}
          </a-descriptions-item>
          <!--维修人员-->
          <a-descriptions-item :label="`${$t('EPMS_REPAIR_PERSONNEL')}`">
            {{ item.repairUser }}
          </a-descriptions-item>
          <!--维修时间-->
          <a-descriptions-item :label="`${$t('REPAIR_START_TIME')}`">
            {{ item.repairTime }}
          </a-descriptions-item>
          <!--维修耗时-->
          <a-descriptions-item :label="`${$t('REPAIR_TIME_CONSUM')}`">
            {{ item.repairDuration }}
          </a-descriptions-item>
          <!--维修耗时-->
          <a-descriptions-item v-for="(ele, idx) in fieldExtendList" :key="idx" :label="`${$t(ele.i18nCode)}`">
            {{ item[ele.fieldName] }}
          </a-descriptions-item>

          <a-descriptions-item v-if="item.repairAudioUrl">
            <div class="flex item-center">
              <div
                style="
                  color: rgba(0, 0, 0, 0.85);
                  line-height: 24px;
                  margin-right: 8px;
                "
              >
                {{ $t("VOICE") }}:
              </div>
              <AudioCard :audio-url="item.repairAudioUrl"></AudioCard>
            </div>
          </a-descriptions-item>
        </a-descriptions>
        <a-row v-if="item.repairImgUrlList.length > 0" :gutter="24">
          <a-col :span="18">
            <MultipleUpload
              :image-url-list="item.repairImgUrlList"
              :limit="item.repairImgUrlList.length"
              :is-show-upload-button="false"
            />
          </a-col>
        </a-row>
        <div
          v-if="item.passFlag === 'N'"
          style="position: absolute; top: 3px; right: 20px"
        >
          <svg-icon
            icon-class="no_pass"
            style="width: 83px; height: 35px; margin-top: 10px"
          />
        </div>
        <div v-if="item.rejectReason || item.confirmImgUrlList.length > 0">
          <!-- 是否驳回 -->
          <a-descriptions v-if="item.rejectReason" class="repair_order_item">
            <!--驳回原因-->
            <a-descriptions-item :label="`${$t('EPMS_REJECT_REASON')}`">{{
              item.rejectReason
            }}</a-descriptions-item>
          </a-descriptions>

          <div class="repair_order_item repair_order_item_line">
            <a-row v-if="item.confirmImgUrlList.length > 0" :gutter="24">
              <a-col :span="18">
                <MultipleUpload
                  :image-url-list="item.confirmImgUrlList"
                  :limit="item.confirmImgUrlList.length"
                  :is-show-upload-button="false"
                />
              </a-col>
            </a-row>
          </div>
        </div>
        <div
          v-if="item.passFlag === 'Y'"
          style="position: absolute; top: 3px; right: 20px"
        >
          <svg-icon
            icon-class="pass"
            style="width: 83px; height: 35px; margin-top: 10px"
          />
        </div>
        <div v-if="item.repairEvaluation || item.repairMark">
          <a-descriptions class="repair_order_item" style="padding: 8px 0">
            <!--评价-->
            <a-descriptions-item
              v-if="item.repairEvaluation"
              :label="`${$t('EPMS_REPAIR_EVALUATE')}`"
              >{{ item.repairEvaluation }}</a-descriptions-item
            >
            <!--评分-->
            <a-descriptions-item
              v-if="item.repairMark"
              :label="`${$t('EPMS_REPAIR_SCORE')}`"
            >
              <a-rate v-model="item.repairMark" disabled /><span
                class="ant-rate-text"
                >{{ item.repairMark }}{{ $t("EPMS_STAR") }}</span
              >
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import MultipleUpload from "@/components/uploadPicture/multipleUpload";
import AudioCard from "@/components/AudioCard";

export default {
  name: "CallCard",
  components: { MultipleUpload, AudioCard },
  props: {
    fieldExtendList: {
      type: Array,
      default: () => [],
    },
    repairResultList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeKey: "a",
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
.line {
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #01c9fe, #0ea9d2);
  margin-right: 12px;
}
/deep/ .mega-design-business-table .mega-design-pro-table {
  padding: 0 !important;
  margin-bottom: 24px;
}

.repair_order_box {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 0 24px;
  position: relative;
  .repair_order_item {
    padding: 14px 0 0;
  }
  .repair_order_item_line {
    border-top: 1px solid #e4e8ee;
  }
}
</style>
