<template>
  <div id="detail-1">
    <el-row>
      <el-col :span="24" class="main">
        <van-col span="24" class="one">
          <van-image :src="img_url"></van-image>
        </van-col>
        <van-col span="24" class="two">
          <van-form>
            <van-field v-model="form.term" name="term" label="专利有效性" />
            <van-field v-model="form.name" name="name" label="名称" />
            <van-field v-model="form.create_number" name="create_number" label="申请号" />
            <van-field v-model="form.create_date" name="create_date" label="申请日" />
            <van-field v-model="form.success_number" name="success_number" label="公开(公告)号" />
            <van-field v-model="form.success_date" name="success_date" label="公开(公告)日" />
            <van-field v-model="form.type" name="type" label="专利类型" />
            <van-field v-model="form.inventor" name="inventor" label="发明人" type="textarea" autosize />
            <van-field v-model="form.address" name="address" label="发明人地址" />
            <van-field v-model="form.apply_personal" name="apply_personal" label="申请人" />
            <van-field v-model="form.agent_personal" name="agent_personal" label="代理人" />
            <van-field v-model="form.agent" name="agent" label="代理机构" />
            <van-field v-model="form.abstract" name="abstract" label="摘要" rows="1" autosize type="textarea" />
          </van-form>
        </van-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'detail-1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      img_url: '',
    };
  },
  created() {},
  methods: {
    searchImg(data) {
      if (data.img_url) {
        var url = data.img_url.map((item) => item.url)[0];
        this.$set(this, `img_url`, url);
      } else {
        var url = require('@/assets/fmzl.jpg');
        this.$set(this, `img_url`, url);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaform() {
    return { title: this.$route.meta.title };
  },
  watch: {
    form: {
      deep: true,
      immediate: true,
      handler(val) {
        this.searchImg(val);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    height: 220px;
    border-bottom: 1px solid #f1f1f1;
    .van-image {
      width: 100%;
      height: 219px;
    }
  }
}
</style>
