<template>
  <div>
    <el-drawer
      :title="$route.meta.title"
      direction="rtl"
      size="68%"
      :visible.sync="visible"
      append-to-body
      @close="$emit('update:isShow', false)"
    >
      <section class="drawer-container">
        <el-descriptions
          class="drawer-container__desc"
          size="small"
          border
          ref="elDesc"
          :column="2"
          direction="vertical"
          :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }"
        >
          <el-descriptions-item label="名称">
            {{ form["name"] }}
          </el-descriptions-item>

          <el-descriptions-item label="区域分组">
            {{
              form['"group']
            }}
          </el-descriptions-item>

          <el-descriptions-item label="年份">
            {{ form["year"] }}
          </el-descriptions-item>

          <el-descriptions-item label="标题">
            {{ form["title"] }}
          </el-descriptions-item>

          <el-descriptions-item label="备注" span="2">
            <div v-html="form['remark']"></div>
          </el-descriptions-item>

          <el-descriptions-item label="提示" span="2">
            <div v-html="form['tip']"></div>
          </el-descriptions-item>

          <el-form-item label="填报图" prop="image_id">
            <el-upload
              :file-list="form['image_id']"
              accept="application/msword,image/jpeg,application/pdf,image/png,application/vnd.ms-powerpoint,text/plain,application/x-zip-compressed,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            >
            </el-upload>
          </el-form-item>

          <el-descriptions-item label="是否需要签名">
            {{
              [
                { value: 1, label: "是" },
                { value: 0, label: "否" },
              ].find((i) => i["value"] === form["need_sign"])
                ? [
                    { value: 1, label: "是" },
                    { value: 0, label: "否" },
                  ].find((i) => i["value"] === form["need_sign"])["label"]
                : ""
            }}
          </el-descriptions-item>
        </el-descriptions>
      </section>
    </el-drawer>
  </div>
</template>

<script>
import { show } from "@/api/aspiration/aspiration";

export default {
  name: "AspirationShow",
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true,
    },

    area: {
      type: [Array, Object],
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",

        area_id: "",

        year: "",

        title: "",

        remark: "",

        tip: "",

        image_id: [],

        need_sign: "",
      },
    };
  },
  watch: {
    isShow(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("update:isShow", newVal);
    },
  },
  methods: {
    async getDetail(id) {
      try {
        const detail = await show({
          id,
        });
        for (let key in this.form) {
          if (detail.hasOwnProperty(key)) {
            this.form[key] = detail[key];
          }
        }
      } catch (err) {
        console.error(err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.span2 {
  grid-column: span 2;
}
::v-deep .el-form-item > * {
  max-width: 100%;
}
.drawer-container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  & > * {
    flex: 1;
  }
}
</style>
