<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title">
      <van-icon slot="left" name="cross" size="20" />
    </title-bar>
    <div class="deal-with-top">
      <div class="deal-with-top-left">
        <div @click="goCompanyPage">
          <svg class="icon iconsex" aria-hidden="true">
            <use xlink:href="#icon-gongsimingcheng"></use>
          </svg>
        </div>
        <div @click="goCompanyPage">{{ cusInfo.cus_name }}</div>
        <div>任务编号：{{ cusInfo.task_no }}</div>
      </div>
    </div>
    <div class="deal-with-bottom">
      <tab-nav :tabList="tabList" @tabClick="tabClick" />
    </div>
    <div v-show="active == 0" class="h-scroller activedata">
      <div class="businessInfo-box">
        <div class="left-box">
          <div
            class="left-part"
            v-for="(item, index) in vedioInfoTitles"
            :key="index"
          >
            <div
              class="left-item"
              :class="{ changeStyle: index == activeVedio }"
              @click="activeVedio = index"
            >
              <div class="item-line-1">{{ item.name }}</div>
              <div class="item-line-2">{{ item.value }}</div>
            </div>
            <span
              v-show="index == activeVedio"
              class="iconfont icon-right-s icon-style"
            ></span>
          </div>
        </div>
        <div class="right-box2">
          <div class="right-title">
            影像采集{{ temp.length }}项
            <span class="iconfont upload-icon icon-pxshangchuan">批量上传</span>
          </div>
          <div class="right-scroller">
            <div v-show="activeVedio == 0">
              <div v-for="(item, index) in temp" :key="index">
                <div class="vedio-item-box">
                  <div class="vedio-left-box">
                    <span class="vedio-line1"
                      >{{ index + 1 }}、影像名字<span style="color: red"
                        >*</span
                      ></span
                    >
                    <span class="vedio-line2"
                      >（图片：0/0 视频：0/0 音频：0/0）</span
                    >
                  </div>
                  <div class="vedio-right-box">
                    <div class="takephoto">
                      <div>
                        <svg
                          style="width: 40px; height: 40px"
                          class="icon icon_paizhao"
                          aria-hidden="true"
                        >
                          <use xlink:href="#icon-prompt-info"></use>
                        </svg>
                      </div>
                      <div>提示信息</div>
                    </div>
                    <div class="reference-example">
                      <div>
                        <svg
                          style="width: 40px; height: 40px"
                          class="icon icon_paizhao"
                          aria-hidden="true"
                        >
                          <use xlink:href="#icon-icon_anliguanli"></use>
                        </svg>
                      </div>
                      <div>参考样例</div>
                    </div>
                    <div class="photograph">
                      <div>
                        <svg
                          style="width: 40px; height: 40px"
                          class="icon icon_paizhao"
                          aria-hidden="true"
                        >
                          <use xlink:href="#icon-a-02_paizhao"></use>
                        </svg>
                      </div>
                      <div>拍照</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="activeVedio == 1">
              <div class="vedio-item-box">
                <div class="vedio-left-box">
                  <span class="vedio-line1"
                    >1、影像名字<span style="color: red">*</span></span
                  >
                  <span class="vedio-line2"
                    >（图片：0/0 视频：0/0 音频：0/0）</span
                  >
                </div>
                <div class="vedio-right-box">
                  <div class="takephoto">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-prompt-info"></use>
                      </svg>
                    </div>
                    <div>提示信息</div>
                  </div>
                  <div class="reference-example">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-icon_anliguanli"></use>
                      </svg>
                    </div>
                    <div>参考样例</div>
                  </div>
                  <div class="photograph">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-a-02_paizhao"></use>
                      </svg>
                    </div>
                    <div>拍照</div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="activeVedio == 2">
              <div class="vedio-item-box">
                <div class="vedio-left-box">
                  <span class="vedio-line1"
                    >1、影像名字<span style="color: red">*</span></span
                  >
                  <span class="vedio-line2"
                    >（图片：0/0 视频：0/0 音频：0/0）</span
                  >
                </div>
                <div class="vedio-right-box">
                  <div class="takephoto">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-prompt-info"></use>
                      </svg>
                    </div>
                    <div>提示信息</div>
                  </div>
                  <div class="reference-example">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-icon_anliguanli"></use>
                      </svg>
                    </div>
                    <div>参考样例</div>
                  </div>
                  <div class="photograph">
                    <div>
                      <svg
                        style="width: 40px; height: 40px"
                        class="icon icon_paizhao"
                        aria-hidden="true"
                      >
                        <use xlink:href="#icon-a-02_paizhao"></use>
                      </svg>
                    </div>
                    <div>拍照</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-show="active == 1"
      class="information-container h-scroller flex-1-dhc activedata"
    >
      <van-index-bar highlight-color="#F79400" :index-list="indexListIOU">
        <div style="padding-bottom: 50px">
          <van-index-anchor index="基本信息">
            <sub-title>基本信息</sub-title>
          </van-index-anchor>
          <table-double-view
            :keyValue="companyBasicInfoKey"
            :data="companyBasicInfo"
          ></table-double-view>
          <van-index-anchor index="授信情况">
            <sub-title>授信情况</sub-title>
          </van-index-anchor>
          <div v-for="(item, index) in creditInfo" :key="index">
            <table-double-view
              :keyValue="keyValueBasic"
              :data="item"
            ></table-double-view>
            <div class="line-bottom"></div>
          </div>

          <van-index-anchor index="担保人">
            <sub-title>担保人</sub-title>
          </van-index-anchor>
          <div v-for="(item, index) in grtInfo" :key="index + 'a'">
            <table-double-view
              :keyValue="keyValueBasic2"
              :data="item"
            ></table-double-view>
            <div class="line-bottom"></div>
          </div>
          <van-index-anchor index="担保物">
            <sub-title>担保物</sub-title>
          </van-index-anchor>
          <div v-for="(item, index) in grtStaffInfo" :key="index + 'b'">
            <table-double-view
              :keyValue="keyValueBasic3"
              :data="item"
            ></table-double-view>
            <div class="line-bottom"></div>
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Tab, Tabs } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import { DatetimePicker } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import BasicInformation from "@/components/customer-information/business-information/overview/BasicInformation.vue";
import TableDoubleView from "@/public/TableDoubleView.vue";
import { TabData } from "@/model/entity/TabData";
import Public from "@/public/ts/Public";

// import emUtil from '@/public/js/em.util';
// import WaterMarkImage from '@/public/components/WaterMarkImage';
// import mediaUtil from '@/public/media/MediaUtils';
// import SCENE from '@/constants/enum/scene.enum';
// import CATALOG from '@/constants/enum/catalog.enum';
// import OBJ_PREFIX from '@/constants/enum/obj.prefix';

Vue.use(DatetimePicker);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Tab);
Vue.use(Tabs);
/**
 * @Description 催收详情
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "LoanCheckDetailView",
  components: { TitleBar, BasicInformation, TableDoubleView },
})
export default class LoanCheckDetailView extends Vue {
  title = "定期检查"; // 页面标题
  // indexList = ["基本信息", "基本信息1"]; :load-data="onloaddata"  RiskWarning
  tabList = [
    { tabText: "影像上传", tabId: "1" },
    { tabText: "业务信息", tabId: "2" },
  ];
  businessTitles = [
    { name: "授信企业", value: "未采集" },
    { name: "担保人", value: "未采集" },
    { name: "担保物", value: "未采集" },
  ];
  vedioInfoTitles = [
    { name: "授信情况影像", value: "未采集" },
    { name: "担保人影像", value: "未采集" },
    { name: "担保物影像", value: "未采集" },
  ];
  indexListIOU = ["基本信息", "授信情况", "担保人", "担保物"];
  active = 0;
  activeInfo = 0;
  activeVedio = 0;
  cusInfo = this.$store.getters.getCtfInstNo; //传来的用户信息
  postloanObj = this.$store.getters.getCtfInstNo;
  keyValueBasic = {
    prd_name: "产品名称",
    amt: "贷款金额(元)",
    balance: "贷款余额(元)",
    cla_cnName: "风险等级",
    overdue_amt: "逾期本金(元)",
    delay_int_cumu1: "欠息金额(元)",
    loan_form_cnName: "贷款形式",
    assure_means_main_cnName: "担保方式",
    extension_times: "展期次数",
    start_date: "起始日",
    end_date: "到期日",
  };
  keyValueBasic2 = {
    guar_cont_no: "担保合同号",
    guar_name: "担保人",
    guar_cont_type_cnName: "担保合同类型",
    guar_way_cnName: "担保方式",
    guar_amt: "担保金额(元)",
  };
  keyValueBasic3 = {
    guar_cont_no: "担保合同号",
    guide_type_cnName: "抵质押品类型",
    book_amt: "押品价值(元)",
    addr: "抵质押物地址",
  };
  companyBasicInfoKey = {
    task_exe_name: "主管客户经理",
    help_name: "协办客户经理",
    check_time: "检查时间",
    gene_way_cnName: "检查方式",
    input_br_name: "填报机构",
    crt_date: "贷后任务产生时间",
  };
  // resultInfo: {}, //查询到的详情结果 检查时间、检查方式、填报机构、贷后任务生成时间：
  creditInfo: any[] = []; //企业信息
  grtInfo: any[] = []; //个人信息
  grtStaffInfo: any[] = []; //抵押物信息
  refreshing = false;
  companyInfo = {}; //存储公司信息
  companyBasicInfo = {}; //公司基本信息
  pullup = true;
  pulldown = true;
  nodata = true;
  temp = ["1", "2", "3", "4", "5"];
  cus_name: any = "";

  mounted() {
    this.selectDetail();
  }

  /**
   * @Description 标签切换
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:02
   */
  change() {
    if (this.active == 0) {
    } else if (this.active == 1) {
    } else if (this.active == 2) {
    }
  }
  /**
   * 贷后详情查询
   * wanghang
   * 2022年1月27日
   */
  selectDetail() {
    this.nodata = true;
    this.pullup = true;
    this.pulldown = true;
    let postloanObj = this.postloanObj;
    let params = {
      task_no: postloanObj.task_no,
      cus_id: postloanObj.cus_id,
      tc: nettyApi.TRADE_CODE.selectCompanylonaDetail,
    };
    // this.setPostLoanDetail({});
    NativeUI.showWaiting();
    return IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        //授信信息
        this.creditInfo = res.credit_list;
        this.grtInfo = res.grt_list;
        this.grtStaffInfo = res.grt_g_list;
        this.grtStaffInfo = this.grtStaffInfo.concat(res.grt_p_list);
        this.companyBasicInfo = res;
        //格式化金额
        for (let i = 0; i < this.grtStaffInfo.length; i++) {
          this.grtStaffInfo[i].book_amt = Public.formatMoney(
            this.grtStaffInfo[i].book_amt,
            ","
          );
        }
        for (let i = 0; i < this.grtInfo.length; i++) {
          this.grtInfo[i].guar_amt = Public.formatMoney(
            this.grtInfo[i].guar_amt,
            ","
          );
        }
        for (let i = 0; i < this.creditInfo.length; i++) {
          this.creditInfo[i].amt = Public.formatMoney(
            this.creditInfo[i].amt,
            ","
          );
          this.creditInfo[i].balance = Public.formatMoney(
            this.creditInfo[i].balance,
            ","
          );
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (res.creditInfo && res.creditInfo.length < 10) {
        this.pullup = false;
      }
      if (this.creditInfo.length == 0) {
        this.nodata = false;
        this.pulldown = false;
      }
    });
  }
  tabClick(item: TabData) {
    this.active = parseInt(item.tabId) - 1;
  }
  //影像资料查询
  activated() {
    this.cus_name = this.$route.query.cus_name;
    this.$router.beforeEach((to, from, next) => {
      if (from.path == "/UpcomingTask") {
        this.active = 0;
        this.selectDetail();
        // this.selectCollectStatus();
      }
      next();
    });
  }
  //上拉刷新
  onrefreshdata() {
    this.selectDetail();
  }
  //点击公司图片，去到公司主页
  goCompanyPage() {
    NativeUI.confirm("页面跳转", "去到公司详情页").then(() => {
      this.selectCustInfo();
    });
  }
  //查询客户信息
  selectCustInfo(pageNo = 1) {
    const param = {
      cus_status: "",
      cus_type: "",
      cus_name: this.cusInfo.cus_name,
      maxLine: "10",
      targetPage: pageNo,
      tc: nettyApi.TRADE_CODE.selectXDGSXX,
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (pageNo == 1) {
          if (res.CusComList.length == 0) {
            //查询不到客户
            NativeUI.toast("暂无客户信息");
          } else {
            this.companyInfo = res.CusComList[0];
            console.log(this.companyInfo);
            this.$store.commit("setEmpty");
            this.$store.commit("setCusInfo", this.companyInfo);
            this.$router.push({
              path: "/CompanyDetails",
            });
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  // /**
  //  * @Description 借款人信用状况调查
  //  * @Author JiangTao
  //  * @Date 2021-12-01 下午 04:47
  //  */
  // selectDHXQ() {
  //   let loanDetail = this.postloanObj;
  //   let credit_list = loanDetail.credit_list;
  //   this.itemData = credit_list;
  //   if (this.itemData && this.itemData.length > 0) {
  //     this.no_data = false;
  //   }
  // }
  /**
   * 查询文件数量
   */
  // selectFileCount(catalog) {
  //   mediaUtil
  //     .selectByCatalog({
  //       fileCatalog: catalog,
  //       ...this.pathMap,
  //     })
  //     .then((res) => {
  //       this.localFiles = res.localFiles.concat(res.storeFiles);
  //       this.serverFiles = res.serverFiles;
  //     });
  // }
  // /**
  //  * 水印
  //  */
  // setWaterMarkInfo() {
  //   const userInfo = this.getUserInfo();
  //   this.waterMarkInfo.user = userInfo.userName;
  //   emUtil.getLocation().then((address) => {
  //     this.waterMarkInfo.address = address;
  //   });
  // }
  /*
   * @Description 拍照
   * @Author JiangTao
   * @Date 2021-12-01 下午 04:47
   */
  // takePhoto(catalog) {
  //   this.setWaterMarkInfo();
  //   this.fileCatalog = catalog || this.fileCatalog;
  //   emUtil.captureImage().then((localData) => {
  //     this.imageData = localData;
  //     this.showModal = true;
  //   });
  // }
  // /**
  //  * 保存图片
  //  * @param dataURL
  //  * @param file
  //  */
  // saveImage(dataURL, file) {
  //   const cusInfo = this.getPostLoanInfObj();
  //   const media = mediaUtil.getMediaBean();
  //   media.fileName = file.name;
  //   media.fileSize = file.size;
  //   media.custId = cusInfo.cus_id;
  //   media.scene = this.pathMap.scene;
  //   media.objId = this.pathMap.objId;
  //   media.file = file;
  //   media.fileCatalog = this.fileCatalog;
  //   mediaUtil
  //     .add(media)
  //     .then((res) => {
  //       console.log("保存图片成功");
  //       console.log(res);
  //     })
  //     .catch((err) => {
  //       console.error(err);
  //     });
  // }
  // /**
  //  * 结束拍照
  //  */
  // takeFinish() {
  //   this.selectFileCount(CATALOG.HBCX.code);
  // }
  // /**
  //  * 浏览图片
  //  */
  // imageBrowser(catalog) {
  //   this.$router.push({
  //     path: "/mediabrowse",
  //     query: {
  //       fileCatalog: catalog,
  //       ...this.pathMap,
  //     },
  //   });
  // }
}
</script>

<style scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1% 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
  /* z-index: 700; */
}
.deal-with-top-left {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.deal-with-top-left > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  padding-top: 5px;
  font-size: 129%;
  line-height: 30px;
}
.deal-with-top-left > div:nth-child(3) {
}
.deal-with-top-left img {
  width: 2.42%;
  padding-top: -1%;
}
.deal-with-top-right {
  width: 9.51%;
}

.deal-with-top-right button {
  width: 100%;
  font-size: 115%;
  padding: 2.6% 0;
  background-color: white;
  border: 1px solid #fd5065;
  color: #fd5065;
  border-radius: 3px;
}
.label div {
  margin-right: 1%;
  background-color: white;
  border: 1px solid #999999;
  border-bottom: 0;
  font-size: 115%;
  padding: 0.58% 1.2%;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}
.deal-with-bottom {
  width: 92%;
  margin: 10px auto;
  position: relative;
  /* z-index: 9999; */
}
.iconsex {
  width: 35px;
  height: 35px;
}
::v-deep .van-tabs {
  width: 100%;
}
::v-deep .van-tab {
  margin: 0 10px;
  border: 1px solid #e1e2e3;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom: 0;
}
::v-deep .van-tab--active {
  border-color: #ff574c;
  border-bottom-color: white;
}
::v-deep .van-tabs__wrap {
  border-bottom: 1px solid #e1e2e3;
  padding-right: 75%;
}
::v-deep .van-tabs__line {
  margin-bottom: -2px;
  /* z-index: 99999999; */
}
::v-deep .information-container {
  padding-left: 10px !important;
}
.activedata {
  margin-left: 4%;
}
::v-deep .van-index-bar__sidebar {
  top: 60% !important;
}
.imagedata {
  width: 100%;
  height: 75px;
  border-bottom: 1px solid #e1e2e3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.round-point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
}
.businessInfo-box {
  width: 90%;
  margin: 40px 5%;
  display: flex;
}
.left-box {
  width: 20%;
  display: flex;
  flex-direction: column;
}
.left-item {
  width: 114px;
  height: 62px;
  margin-top: 20px;
  background-color: #fff8f9;
  color: #ff445b;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 220, 224, 1);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.changeStyle {
  color: #fff;
  background-color: #fd5065;
  font-weight: bold;
}
.item-line-1 {
  font-size: 16px;
}
.item-line-2 {
  font-size: 12px;
}
.right-box {
  width: 70%;
  height: 100%;
}
.right-box2 {
  width: 80%;
  height: 100%;
}
.error-info {
  color: #fd5065;
  font-size: 16px;
  font-weight: bold;
  margin: auto;
  display: flex;
  margin-left: 30px;
}
.right-title {
  font-size: 18px;
  display: flex;
  width: 100%;
  font-weight: bold;
}
.upload-icon {
  margin-left: auto;
  color: #ff6e0d;
  font-size: 14px;
  font-weight: normal;
}
.vedio-item-box {
  width: 100%;
  height: 105px;
  margin-top: 15px;
  background-color: rgba(255, 249, 239, 1);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(215, 215, 215, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 5px rgb(245 154 35 / 35%);
  display: flex;
  align-items: center;
}
.right-scroller {
  overflow-y: scroll;
}
.vedio-left-box {
  margin: 40px;
  /* width: 300px; */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.vedio-right-box {
  width: 300px;
  margin-left: 10%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vedio-line1 {
  font-size: 20px;
  font-weight: bold;
}
.vedio-line2 {
  margin-top: 10px;
  font-size: 14px;
  margin-left: 5px;
}
.reference-example,
.photograph,
.takephoto {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}
.left-part {
  display: flex;
  align-items: center;
}
.icon-style {
  margin-left: 0px;
  position: relative;
  color: #fd5065;
  left: -6px;
}
.activedata {
  margin-left: 4%;
}
.line-bottom {
  width: 100%;
  height: 1px;
  background: #e0e1e2;
}
</style>