<template>
  <div class="wrapper">
    <NavHeader color="#0687D2" title="我的申报" @back="$router.go(-1)" />
    <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
        <div style="height: 20px"></div>
        <div class="card" v-for="record in list" :key="record.code" @click="jump(record)">
          <div class="title">
            <img src="@/assets/policy/matter_icon.png" alt="" />
            <p>{{ record.guideName }}</p>
          </div>
          <div class="cell">
            <p class="label">状态</p>
            <p class="value" :style="{ color: record.color }">
              {{ record.stateName }}
            </p>
          </div>
          <div class="cell">
            <p class="label">实施主体</p>
            <p class="value">{{ record.departmentName }}</p>
          </div>
          <div class="cell">
            <p class="label">申报时间</p>
            <p class="value">{{ record.createTime }}</p>
          </div>
          <div v-if="record.state == 6">
            <div class="cell">
              <p class="tips">
                您的申请信息已完成初步审核，请将有关材料送至镇江市人才服务窗口，地址：镇江市冠城路8号工人大厦一楼101-104号窗口
              </p>
            </div>
          </div>

          <!-- <div
            class="foot"
            v-if="
              record.state === 0 || record.state === 4 || record.state === 5
            "
          >
            <van-button
              size="small"
              color="#0687D2"
              plain
              style="width: 100px"
              @click.stop="update(record)"
              >修改</van-button
            >
            <van-button
              v-if="record.state === 0"
              size="small"
              color="#EB4E3F"
              plain
              style="width: 100px; margin-left: 10px"
              @click.stop="cancle(record)"
              >撤销</van-button
            >
          </div> -->
          <div class="foot" v-if="record.state === 4 || record.state === 5 || record.state == 6">
            <van-button v-if="record.state == 6" size="small" color="#0687D2" plain
              style="width: 100px;height:25px;line-height:25px" @click.stop="dowtemp(record.fileUrl)">下载申请表</van-button>
            <van-button v-if="record.state === 4 || record.state === 5" size="small" color="#0687D2" plain
              style="width: 100px" @click.stop="update(record)">修改</van-button>
            <van-button v-if="record.state === 4" size="small" color="#EB4E3F" plain
              style="width: 100px; margin-left: 10px" @click.stop="cancle(record)">撤销</van-button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import Vue from "vue";
import { Tab, Tabs, PullRefresh, List, Search, Button,Dialog } from "vant";
import { mattersHousingList, mattersHousingUpdateState } from "@/api/policy";
import { policyEnume } from "@/utils/utils";
import {queryUserApplyForRecord,queryApplyingDeedTaxInfo,idCardVerification} from '@/api/deedtax'
// import { decryptByDES } from "@/utils/utils";

Vue.use(Tab)
  .use(Tabs)
  .use(PullRefresh)
  .use(List)
  .use(Search)
  .use(Button)
  .use(Dialog);

export default {
  components: { NavHeader },
  data() {
    return {
      userInfo: {},
      refreshing: false,
      loading: false,
      pageNum: 1,
      finished: true,
      list: []
      // code: "",
    };
  },
  methods: {
    init(type) {
      let params = {
        appId: 1234,
        pageNo: type === "refresh" ? 1 : parseInt(this.pageNum) + 1,
        pageSize: 20,
        // userId: this.userInfo.userId
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      mattersHousingList(params).then(res => {
        console.log("列表值-------", res);
        this.$toast.clear();
        this.refreshing = false;
        this.loading = false;
        const current = res.data.pageNum;
        const records = res.data.list.map(item => {
          // this.code = item.code;
          let Obj = policyEnume(item.state);
          item.stateName = Obj.text;
          item.color = Obj.color;
          return item;
        });
        console.log("records---", records);
        if (current === 1 && records.length === 0) {
          this.list = records || [];
          this.pageNum = 1;
        } else {
          this.pageNum = current;
          this.finished = !res.data.hasNextPage;
          if (type === "refresh") this.list = records;
          else this.list = this.list.concat(records);
        }
      })
    },
    onRefresh() {
      this.init("refresh");
    },
    onLoad() {
      this.init("loading");
    },
    jump(record) {
      console.log(record);
      this.$router.push({
        name: "HousePurchase",
        query: {
          code: record.code,
          matterType: record.housingType === 2 ? 5 : 6,
          type: "view"
        }
      });
    },
    dowtemp(url) {
      console.log("url----", url);

      if (window.android !== undefined) {
        window.android.downLoadFile(url);
      } else {
        window.webkit &&
          window.webkit.messageHandlers.downLoadFile.postMessage(
            `${url}|showNav`
          );
      }
      console.log(2);
    },
    // 撤销
    cancle(record) {
      this.$dialog
        .confirm({
          message: "确认撤回该预约申报单吗？"
        })
        .then(() => {
          mattersHousingUpdateState({
            appId: 1234,
            code: record.code,
            name: this.userInfo.realName,
            state: 5
          }).then(res => {
            console.log(res);
            this.$toast("撤销成功");
            this.onRefresh();
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 修改
    update(record) {
      idCardVerification({idCard: this.userInfo.idCardNo}).then((res) => {
        if (res.data) {
          // let params = {
          //   // userId: this.userInfo.userId,
          //   // idCard: this.userInfo.idCardNo
          //   idCard: decryptByDES(this.userInfo.idCardNo, "MnuYbhGv")
          // }
          queryUserApplyForRecord({idCard: this.userInfo.idCardNo}).then((res) => {
            console.log(res)
            if (res.code == 200) {
              if (res.data.state == 0) {
                // 人才“镇兴”行动购住房契税补贴(住宅)||人才“镇兴”行动购住房契税补贴(商办)
                this.$router.push({
                  name: "HousePurchase",
                  query: {
                    code: record.code,
                    matterType: record.housingType === 2 ? 5 : 6,
                    type: "edit"
                  }
                });
              } else if (res.data.state == 1) {
                Dialog.confirm({
                  confirmButtonText: '查看',
                  message: res.data.msg || '您的申请已提交',
                }).then(() => {
                  queryApplyingDeedTaxInfo({
                    code: "",
                    idCard: this.userInfo.idCardNo,
                    name: "",
                    pageNum: 1,
                    pageSize: 10,
                    state: 0,
                    userId: ""
                  }).then((res) => {
                    console.log(res)
                    this.$router.push({ name: 'DeedtaxHandling', query: { code: res.data.code } })
                  })
                })
              } else if (res.data.state == 11) {
                console.log(111)
                Dialog.confirm({
                  // confirmButtonText: '查看',
                  showConfirmButton: false,
                  message: res.data.msg || '您的申请已提交',
                // }).then(() => {
                //   // this.$router.push({ name: 'PolicyReportTwo', query: { code: res.data.code } })
                //   this.$router.push({
                //     name: "HousePurchase",
                //     query: {
                //       code: record.code,
                //       matterType: record.housingType === 2 ? 5 : 6,
                //       type: "view"
                //     }
                //   });
                })
              }
            }
          })
        } else {
          Dialog.confirm({
            title: '提示',
            messageAlign: 'left',
            message: "经系统查询，您已享受过相关政策补贴 ，不能再次申报契税补贴政策。如有异议请联系市财政窗口，地址：镇江市政务服务中心（冠城路8号工人大厦）二楼市财政局窗口，联系电话：0511-89881850",
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChange(index) {
      this.currentPage = index;
      this.init(index, "refresh");
    }
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    this.init("refresh");
  }
};
</script>

<style lang="stylus" scoped>
.list {
  height: calc(100vh - 285px);
  overflow: auto;
  background: #F3F6F9;

  .card {
    margin: 0 30px 20px;
    padding: 30px;
    background: #fff;
    border-radius: 2px;

    .title {
      display: flex;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
        margin-right: 27px;
      }

      p {
        line-height: 45px;
        font-size: 32px;
        font-weight: 500;
        color: #333333;
      }
    }

    .cell {
      margin-top: 30px;
      display: flex;

      .label {
        width: 120px;
        margin-right: 30px;
        font-size: 28px;
        color: #999999;
        line-height: 40px;
      }

      .value {
        width: calc(100% - 210px);
        font-size: 28px;
        color: #333333;
        line-height: 40px;
      }
    }

    .foot {
      margin-top: 30px;
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px solid #C9C9C9;
    }
  }
}

.tips {
  display: inline-block;
  font-size: 30px;
  line-height: 50px;
  color: red;
}
</style>
