<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">查看宅基地使用流转权</p>
        </template>
      </van-nav-bar>
        <p class="main_title">转出方信息</p>
        <div class="main_box">
          <van-field
            readonly
            v-model="circulation.zjddm"
            label="宅基地代码"
            input-align="right"
          />

          <van-field
            readonly
            v-model="circulation.lzfs"
            label="流转方式"
            input-align="right"
          />

          <van-field
            readonly
            v-model="circulation.shyqrdm"
            label="转出方使用权人代码"
            label-width="auto"
            input-align="right"
          />
          <van-field
            readonly
            v-model="circulation.zcfsfbjtjjzzcy == 'Y' ? '是' : '否'"
            label="是否本集体经济组织成员"
            label-width="auto"
            input-align="right"

          />
        </div>

        <p class="main_title">流转信息</p>
        <div class="main_box">
          <van-field label="流转面积(㎡)" readonly v-model="circulation.lzmj" input-align="right" label-width="auto"/>
          <van-field label="流转单价(元)" readonly v-model="circulation.lzdj" input-align="right" label-width="auto"/>
          <van-field label="流转费用(元)" readonly v-model="circulation.lzfy" input-align="right" label-width="auto"/>
          <van-field
            readonly
            label="流转起始时间"
            input-align="right"
            v-model="circulation.lzqsrq"
          />

          <van-field
            readonly
            label="流转结束时间"
            input-align="right"
            v-model="circulation.lzjsrq"
          />

          <van-field
            readonly
            label="流转前房屋用途"
            input-align="right"
            label-width="auto"
            v-model="circulation.lzqfwyt"
          />

          <van-field
            readonly
            label="流转后房屋用途"
            input-align="right"
            label-width="auto"
            v-model="circulation.lzhfwyt"
          />
        </div>

        <p class="main_title">转入方信息</p>
        <div class="main_box">
          <van-field
            readonly
            label="转入方代表名称"
            label-width="auto"
            input-align="right"
            v-model="circulation.zrfdbmc"
          />

          <van-field
            readonly
            label="转入方代表证件类型"
            label-width="auto"
            input-align="right"
            v-model="circulation.zrfdbzjlx"
          />
          <van-field readonly label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" input-align="right" label-width="auto"/>
          <van-field readonly label="是否本集体经济组织成员" v-model="circulation.zrfsfbjtjjzzcy == 'Y' ? '是' : '否'" input-align="right" label-width="auto"/>
        </div>

        <p class="main_title">其他</p>
        <div class="main_box">
          <van-field readonly label="所有权人代表姓名" v-model="circulation.suyqrdbxm" input-align="right" label-width="auto"/>
          <van-field readonly label="所有权人意见" v-model="circulation.suyqryj" input-align="right" label-width="auto"/>
          <van-field readonly label="备注" v-model="circulation.bz" input-align="right" label-width="auto"/>
        </div>

      <!-- 审批 -->
      <template v-if="approval.type === 'todo'">
        <div class="main_box examine_box">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">审核<br/>意见</van-col>
            <van-col span="19">
              <van-field required :readonly="approval.type !== 'todo'" v-model="approval.comment" rows="2" autosize type="textarea" placeholder="审核意见"/>
            </van-col>
          </van-row>
        </div>

        <van-row style="margin-top: 0.2rem;">
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" class="submitButton" @click="complete(true)">同意</van-button>
          </van-col>
          <van-col span="12" align="center">
            <van-button type="danger" native-type="submit" class="submitButton" @click="complete(false)">驳回</van-button>
          </van-col>
        </van-row>
        <div class="clear"></div>
      </template>
    </div>
</template>

<script>
import { getLz } from "@/api/onlineHome/homestead/circulation";
import request from '@/utils/request';
import {Notify} from "vant";
export default {
    name: "circulationDetail",
  data() {
    return {
      value: '',
      circulation:[],
      houseApplyStatus:[],
      approval: {
        taskId: null,
        instanceId: null,
        type: null,
        id: null,
        comment: '',
      },
    };
  },
  created() {
    this.approval.id = this.$route.query.id;
    this.approval.instanceId = this.$route.query.instanceId;
    this.approval.type = this.$route.query.type;
    this.approval.taskId = this.$route.query.taskId;
    this.getDetail();
  },
  methods: {
    getDetail(){
      getLz(this.$route.query.id).then(response => {
        this.circulation = response.data;
        //流转方式
        this.houseGetDicts("lzfs").then((res) => {
          this.circulation.lzfs = this.selectDictLabel(res.data, response.data.lzfs);
        });
        //转入方证件类型
        this.houseGetDicts("zjlx").then((res) => {
          this.circulation.zrfdbzjlx = this.selectDictLabel(res.data, response.data.zrfdbzjlx);
        });
        //流转前房屋用途
        this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
          this.circulation.lzqfwyt = this.selectDictLabel(res.data, response.data.lzqfwyt);
          this.circulation.lzhfwyt = this.selectDictLabel(res.data, response.data.lzhfwyt);
        });
      });
    },
    complete(pass) {
      if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
      {
        console.error("无效操作");
        return false;
      }
      if(!this.approval.comment)
      {
        this.notify("请填写审批意见", 'danger');
        return false;
      }
      let data = {
        taskId: this.approval.taskId,
        instanceId: this.approval.instanceId,
        variables: JSON.stringify({
          pass: pass ? "true" : "false",
          comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
        }),
      };
      request({
        url: "/activiti/process/complete",
        method: "post",
        params: data,
      }).then((response) => {
        this.notify("操作成功", 'success');
        this.$router.back();
      }).catch(e => {
        this.notify("操作失败!", 'danger');
      });
      return true;
    },
    notify(message, type) {
      Notify.clear();
      Notify({ type: type || 'primary', message: message });
    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding-bottom: 5%;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    border-radius: 14px;
  }
  .examine_box{
    background-color: #1D6FE9!important;
    padding: 0.18rem!important;
    padding-left: 0!important;
    border-radius: 0.15rem!important;
    margin-top: 0.3rem!important;
    .van-col:first-child{
      color: #FFF!important;
      font-size: 0.45rem!important;
      text-align: center!important;
    }
    .van-col:last-child{
      background-color: #FFF!important;
      border-radius: 0.15rem!important;
      overflow: hidden!important;
      .van-radio-group--horizontal{
        padding: 0.2rem 0;
        border-bottom: 1px solid #eee;
      }
    }
  }
</style>
