<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('CALL_REPAIR_RECORD')">
      <MomTable
        ref="MomTable"
        row-key="id"
        :mega-extend="{
          rowAction: false,
        }"
        :columns="columns"
        :data-source="
          repairTicketDetail ? repairTicketDetail.errorAppearanceList : []
        "
        :pagination="false"
        :show-util-operator="false"
      ></MomTable>
      <a-row
        v-if="
          repairTicketDetail &&
          repairTicketDetail.imgUrlList &&
          repairTicketDetail.imgUrlList.length > 0
        "
        :gutter="24"
      >
        <a-col :span="18">
          <MultipleUpload
            :image-url-list="repairTicketDetail.imgUrlList"
            :limit="repairTicketDetail.imgUrlList.length"
            :is-show-upload-button="false"
          />
        </a-col>
      </a-row>
      <a-descriptions>
        <!--申请时间-->
        <a-descriptions-item :label="`${$t('APPLICATION_TIME')}`">{{
          repairTicketDetail.callTime
        }}</a-descriptions-item>
        <!--申请人员-->
        <a-descriptions-item :label="`${$t('APPLY_PERSONNEL')}`">{{
          repairTicketDetail.callUser
        }}</a-descriptions-item>
        <!--故障等级-->
        <a-descriptions-item :label="`${$t('ERROR_LEVEL')}`">
          {{ formatData(errorLevelList, repairTicketDetail.errorLevel) }}
          <Icon
            type="edit"
            class="ml-2 cursor-pointer"
            style="color: #0ea8d0"
            @click="handleEdit()"
          />
        </a-descriptions-item>
        <a-descriptions-item v-if="repairTicketDetail.callAudioUrl">
          <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="repairTicketDetail.callAudioUrl"></AudioCard>
          </div>
        </a-descriptions-item>
      </a-descriptions>
      <MegaDrawer
        width="520"
        :title="$t('ERROR_LEVEL') + $t('MODIFY')"
        :visible="drawerVisible"
        @close="handleCancel"
        @cancel="handleCancel"
        @ok="handleSave"
      >
        <div slot="main">
          <a-form-model slot="main" ref="ruleForm" :model="form" :rules="rules">
            <a-form-model-item
              :label="$t('ERROR_LEVEL')"
              prop="errorLevel"
              allow-clear
            >
              <a-radio-group v-model="form.errorLevel">
                <a-radio
                  v-for="item in errorLevelList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</a-radio
                >
              </a-radio-group>
            </a-form-model-item>
          </a-form-model>
        </div>
      </MegaDrawer>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { mapState } from "vuex";
import { Icon } from "ant-design-vue";
import { Drawer as MegaDrawer } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import MultipleUpload from "@/components/uploadPicture/multipleUpload";
import AudioCard from "@/components/AudioCard";

export default {
  name: "CallCard",
  components: { Icon, MegaDrawer, MultipleUpload, AudioCard },
  props: {
    repairTicketDetail: {
      type: Object,
      default() {
        return {};
      },
    },
    errorLevelList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeKey: "a",
      drawerVisible: false,
      columns: [
        {
          dataIndex: "errorAppearanceCode", // 故障现象码
          ellipsis: true,
          title: () => this.$t("SYMPTOM_CODE"),
        },
        {
          dataIndex: "errorAppearanceName", // 故障现象描述
          ellipsis: true,
          title: () => this.$t("SYMPTOM_DESCRIBE"),
        },
        {
          dataIndex: "errorAppearanceRemark", // 备注
          ellipsis: true,
          title: () => this.$t("REMARK"),
        },
      ],
      form: {
        id: "",
        errorLevel: "",
      },
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
    rules() {
      return {
        errorLevel: [
          {
            required: true,
            message: this.$t("PLACESELECT"),
            trigger: "change",
          },
        ],
      };
    },
  },
  mounted() {},
  methods: {
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    onStartAudio(data) {
      const audio = document.getElementById(`audio`);
      // audio.onplay((res) => {
      //   console.log(res);
      // });
      audio.play();
    },
    handleEdit() {
      const { id, errorLevel } = this.repairTicketDetail;
      const params = {
        id,
        errorLevel,
      };
      this.form = { ...params };
      this.drawerVisible = true;
    },
    handleSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          this.$axios
            .put(
              `${ApiConstant.PREFIX_CORE}/api/epm/erm/repair-ticket`,
              this.form
            )
            .then(() => {
              this.$message.success(this.$t("EDIT_SUCCESS"));
              this.$emit("returnData");
              this.handleCancel();
            })
            .catch((e) => {
              this.confirmLoading = false;
            });
        }
      });
    },
    handleCancel() {
      this.confirmLoading = false;
      this.$refs.ruleForm.clearValidate();
      this.drawerVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
</style>
