<template>
  <div id="info-1">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one">
          <van-form label-width="5em">
            <van-field v-model="info.patent_name" name="patent_name" label="专利名称" readonly />
            <van-field v-model="info.create_number" name="create_number" label="专利号" readonly />
            <van-field v-model="info.on_obligee" name="on_obligee" label="变更前权利人" readonly />
            <van-field v-model="info.contact" name="contact" label="联系人" readonly />
            <van-field v-model="info.phone" name="phone" label="联系电话" readonly />
            <van-field v-model="info.email" name="email" label="电子邮箱" readonly />
            <van-field v-model="info.budget" name="budget" label="意向价格(万元)" readonly />
            <van-field v-model="info.type" name="type" label="交易类型" readonly />
            <van-col span="24" class="typeThr" v-if="info.type == '免费许可'">
              <van-col span="24" class="title"> 免费许可承诺书 </van-col>
              <van-col span="24" class="info">
                公开声明：【{{ info.patent_name }}】专利权人许可本专利在【
                <span>{{ info.promise_file.province }}</span>
                】【
                <span>{{ info.promise_file.city }}</span>
                】范围内免费使用，期限至【
                <span>{{ info.promise_file.end_date }}</span>
                】止，被许可人需与许可人签订许可合同后方可使用。
              </van-col>
            </van-col>
            <van-col span="24" class="report">
              <van-col span="24" class="title"> 备查文件 </van-col>
              <van-col span="24" class="info">
                <p class="list" v-for="(item, index) in info.report" :key="index">
                  <span class="textOver">{{ item.name }}</span>
                  <van-button class="btn" type="info" size="small" @click="download(item.url)">下载报告</van-button>
                </p>
              </van-col>
            </van-col>
            <van-field v-model="info.requirementdesc" name="requirementdesc" label="技术说明" readonly />
            <van-field v-model="info.expect" name="expect" label="商业预期" type="textarea" autosize rows="1" readonly />
            <van-field
              v-model="info.condition"
              name="condition"
              label="合作条件及要求(专利已实施状况，收费标准，合作期限等内容)"
              type="textarea"
              autosize
              rows="1"
              readonly
            />
            <van-field v-model="info.abstract" name="abstract" label="摘要" type="textarea" autosize rows="1" readonly />
          </van-form>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'info-1',
  props: {
    info: { type: Object },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    // 下载报告
    download(data) {
      if (data) {
        window.location.href = `${process.env.VUE_APP_HOST}${data}`;
      } else {
        this.$toast({ type: `fail`, message: `未上传文件` });
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.typeThr {
  padding: 10px;
  background-color: #fff;
  .title {
    text-align: center;
    font-weight: bold;
    margin: 0 0 15px 0;
  }
  .info {
    padding: 0 0 15px 0;
    line-height: 25px;
    border-bottom: 1px solid #ebedf0;
  }
}
.report {
  border-bottom: 1px solid #f1f1f1;
  margin: 0 10px;
  width: 95%;
  padding: 5px 0;
  .title {
    text-align: left;
    font-size: 14px;
    margin: 0 0 5px 0;
    padding: 0 0 0 7px;
    color: #666;
  }
  .info {
    .list {
      float: left;
      width: 100%;
      padding: 5px 0;
      span {
        float: left;
        padding: 7px 0;
        font-size: 14px;
      }
      .btn {
        float: right;
      }
    }
  }
}
</style>
