<template>
  <div id="trans-1">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one">
          <van-form @submit="onSubmit" label-width="5em">
            <van-field v-model="form.user_id" name="user_id" label="用户id" style="display: none" />
            <van-field v-model="form.user_name" name="user_name" label="用户姓名" style="display: none" />
            <van-field v-model="form.mech_id" name="mech_id" label="机构id" style="display: none" />
            <van-field v-model="form.mech_name" name="mech_name" label="机构姓名" style="display: none" />
            <van-field v-model="form.patent_id" name="patent_id" label="专利id" style="display: none" />
            <van-field v-model="form.patent_name" name="patent_name" label="专利名称" readonly />
            <van-field v-model="form.create_number" name="create_number" label="专利号" readonly />
            <van-field v-model="form.on_obligee" name="on_obligee" label="变更前权利人" readonly />
            <van-field v-model="form.contact" name="contact" label="联系人" placeholder="请输入联系人" :rules="[{ required: true, message: '请输入联系人' }]" />
            <van-field
              v-model="form.phone"
              name="phone"
              label="联系电话"
              placeholder="请输入联系电话"
              :rules="[{ required: true, message: '请输入联系电话' }]"
            />
            <van-field
              v-model="form.email"
              name="email"
              label="电子邮箱"
              placeholder="请输入电子邮箱"
              :rules="[{ required: true, message: '请输入电子邮箱' }]"
            />
            <van-field name="budgetType" label="价格类型">
              <template #input>
                <van-radio-group v-model="form.budget_type" direction="horizontal">
                  <van-radio name="1">面议</van-radio>
                  <van-radio name="2">金额区间(万元)</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="form.budget_min" name="budget_min" type="digit" label="最小价格" placeholder="请输入价格" v-if="form.budget_type == '2'" />
            <van-field v-model="form.budget_max" name="budget_max" type="digit" label="最大价格" placeholder="请输入价格" v-if="form.budget_type == '2'" />

            <van-field name="type" label="交易类型" :rules="[{ required: true, message: '交易类型' }]">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio name="转让">转让</van-radio>
                  <van-radio name="许可">许可</van-radio>
                  <van-radio name="免费许可">免费许可</van-radio>
                  <van-radio name="招商">招商</van-radio>
                  <van-radio name="质押">质押</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-col span="24" class="typeThr" v-if="form.type == '免费许可'">
              <van-col span="24" class="title"> 免费许可承诺书 </van-col>
              <van-col span="24" class="info">
                公开声明：【{{ form.patent_name }}】专利权人许可本专利在【
                <span @click.prevent="typeSelect('province')">{{ form.promise_file.province }}</span>
                】【
                <span @click.prevent="typeSelect('city')">{{ form.promise_file.city }}</span>
                】范围内免费使用，期限至【
                <span @click.prevent="typeSelect('end_date')">{{ form.promise_file.end_date }}</span>
                】止，被许可人需与许可人签订许可合同后方可使用。
              </van-col>
              <van-popup v-model="oneShow" position="bottom">
                <van-picker show-toolbar :columns="provinceList" @confirm="oneFirm" @cancel="oneShow = false" />
              </van-popup>
              <van-popup v-model="twoShow" position="bottom">
                <van-picker show-toolbar :columns="cityList" @confirm="twoFirm" @cancel="twoShow = false" />
              </van-popup>
              <van-calendar v-model="thrShow" @confirm="thrFirm" :min-date="minDate" :max-date="maxDate" />
            </van-col>
            <van-field name="is_report" label="评估报告">
              <template #input>
                <van-radio-group v-model="form.is_report" direction="horizontal">
                  <van-radio :name="true">有</van-radio>
                  <van-radio :name="false">无</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="report" label="备查文件">
              <template #input>
                <van-uploader
                  :fileList="form.report"
                  :max-count="3"
                  :after-read="(file) => toUpload(file, 'report')"
                  @delete="(file) => toDelete(file, 'report')"
                />
              </template>
            </van-field>
            <van-field v-model="form.abstract" name="abstract" label="摘要" placeholder="请输入摘要" type="textarea" autosize readonly />
            <van-field v-model="form.requirementdesc" name="requirementdesc" label="技术说明" placeholder="请输入技术说明" type="textarea" autosize />
            <van-field v-model="form.expect" name="expect" label="商业预期" placeholder="请输入商业预期" type="textarea" autosize />
            <van-field
              v-model="form.condition"
              name="condition"
              label="合作条件及要求(专利已实施状况，收费标准，合作期限等内容)"
              placeholder="请输入合作条件及要求"
              type="textarea"
              autosize
              :rules="[{ required: true, message: '请输入合作条件及要求' }]"
            />

            <van-col span="24" class="btn">
              <van-button type="info" size="small" native-type="submit">提交交易</van-button>
            </van-col>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: upload } = createNamespacedHelpers('upload');
const moment = require('moment');
export default {
  name: 'trans-1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      type: '',
      // 省份
      oneShow: false,
      provinceList: ['吉林省'],
      // 城市
      twoShow: false,
      cityList: ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '白城市', '延边州', '松原市', '长白山管委会'],
      // 截止日期
      thrShow: false,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2050, 1, 1),
    };
  },
  created() {},
  methods: {
    ...upload(['upload']),
    onSubmit(value) {
      if (value) this.$emit('onSubmit', { data: this.form });
    },
    // 承诺书信息
    typeSelect(type) {
      this.$set(this, `type`, type);
      if (type == 'province') this.oneShow = true;
      else if (type == 'city') this.twoShow = true;
      else if (type == 'end_date') this.thrShow = true;
    },
    // 确认选择省份
    oneFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, value);
      this.oneShow = false;
    },
    // 确认选择城市
    twoFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, value);
      this.twoShow = false;
    },
    // 确认选择日历
    thrFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, moment(value).format('YYYY-MM-DD'));
      this.thrShow = false;
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      let list = this.form[model];
      const res = await this.upload({ file, dir: 'file' });
      if (this.$checkRes(res)) {
        list.push({ name: res.name, url: res.uri });
        this.$set(this.form, model, list);
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
      this.form[model].splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .btn {
      text-align: center;
      margin: 10px 0;
    }
    .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;
        span {
          color: #409eff;
        }
        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
