<template>
  <div class="main_box">
    <navbar title="商户客户详情"></navbar>
    <div class="wrapper">
      <div class="wrapper_top">
        <div class="left_icon">
          <img
            src="../../images/home/sh.png"
            alt=""
            style="width: 45px; height: 45px"
          />
        </div>
        <div class="top_right">
          <div class="name_box">
            <div>{{ baseInfo.custName }}</div>
            <div class="isradarCust" v-if="radarCustFlag == '1'">
              非我行客户
            </div>
          </div>
          <div class="top_item">
            <span class="top_right_left">身份证号：</span>
            <span>{{ baseInfo.custIdc }}</span>
          </div>
          <div class="top_item">
            <span class="top_right_left">联系方式：</span>
            <span>{{ baseInfo.tel }}</span>
          </div>
          <div class="top_item">
            <span class="top_right_left">商铺地址：</span>
            <span>{{ baseInfo.custLocation }}</span>
          </div>
        </div>
      </div>
      <div class="home_main">
        <!-- <div
          class="home_main_item"
          v-for="(item, index) in dhList"
          @click="handleClickItem(item)"
        >
          <div class="main_left">
            <van-icon :name="item.icon" class="home_main_icon"></van-icon>
            <div class="main_title">{{ item.title }}</div>
          </div>
          <van-icon name="arrow" class="next_icon"></van-icon>
        </div> -->
        <van-collapse v-model="activeNames" accordion>
          <van-collapse-item v-for="(item, index) in dhList" :key="index" :title="item.title" :name="item.title">
            <commercial v-if="activeNames == '商户基本信息' && item.title == '商户基本信息'"></commercial>
            <address1 v-if="activeNames == '地址信息' && item.title == '地址信息'" addressType="0"></address1>
            <products v-if="activeNames == '签约产品' && item.title == '签约产品'" productType="3"></products>
            <selfremark v-if="activeNames == '自定义备注' && item.title == '自定义备注'" :speciallabel="baseInfo.label" :custId="baseInfo.custId" custType="1" @callFn="callFn"></selfremark>
            <remark v-if="activeNames == '省行客户标签' && item.title == '省行客户标签'" :flag="true" custType="ls"></remark>
            <special v-if="activeNames == '特色商户标签' && item.title == '特色商户标签' && userInfo.deptId && (userInfo.deptId+'').substring(0,3) == '932'" :flag="true"></special>
            <history v-if="activeNames == '走访记录' && item.title == '走访记录'" :socialCreditCode="baseInfo.socialCreditCode" historyType="1"></history>
            <commericalImage v-if="activeNames == '商户门头照' && item.title == '商户门头照'"></commericalImage>
          </van-collapse-item>
          <van-collapse-item 
              key="催收信息" 
              title="催收信息" 
              name="催收信息" 
              v-if="['932'].includes(orgNum)"
          >
              <speticaltag  
                  :dataSource="taskDetail" 
                  type="special"
              />
          </van-collapse-item>
        </van-collapse>
      </div>
      <!-- <div class="tjzf" @click="handleAddShow">添加走访</div> -->
    </div>
    <van-dialog
      v-model="show"
      title="添加走访"
      show-cancel-button
      @confirm="handleClickTjzf()"
    >
      <van-field
        readonly
        :value="value"
        is-link
        placeholder="请选择"
        @click="showPicker = true"
      ></van-field>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancle="showPicker = false"
        ></van-picker>
      </van-popup>
    </van-dialog>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import { getMerchantInfo } from "@/service/api/custome";
import { Tab, Tabs, Icon, Button, Search, Field, Popup, Picker, Collapse, CollapseItem } from "vant";
import commercial from "@/views/details/commercial.vue";
import speticalTag from "@/views/details/speticalTag.vue";
import address from "@/views/customer/address.vue";
import products from "@/views/customer/products.vue";
import remark from "@/views/customer/remark.vue";
import special from "@/views/customer/specialLabel.vue";
import selfremark from "@/views/customer/selfremark.vue";
import history from "@/views/customer/history.vue";
import commericalImage from "@/views/customer/commericalImage.vue";
import { mapMutations, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      activeNames:[],
      dhList: [
        { title: "商户基本信息" },
        { title: "地址信息" },
        { title: "签约产品" },
        { title: "自定义备注" },
        { title: "省行客户标签" },
        { title: "特色商户标签" },
        { title: "走访记录" },
        { title: "商户门头照" },
      ],
      show: false,
      value: "",
      showPicker: false,
      columns: [1, 2, 23, 4, 5],
      baseInfo: {},
      taskDetail: [],
      radarCustFlag: "",
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    VanButton: Button,
    VanSearch: Search,
    VanField: Field,
    VanPopup: Popup,
    VanPicker: Picker,
    VanCollapse: Collapse,
    VanCollapseItem: CollapseItem,
    commercial,
    address1:address,
    products,
    remark,
    history,
    commericalImage,
    selfremark,
    special,
    speticaltag: speticalTag
  },
  created() {
    this.init();
  },
  computed: {
    ...mapGetters(["userInfo"]),
    orgNum() {
        const { deptId = '' } = this.userInfo
        const str = String(deptId).substring(0,3)
        return str
    }
  },
  methods: {
    callFn(){
      this.init();
    },
    init() {
      let custId = sessionStorage.getItem("custId");
      getMerchantInfo(custId).then((res) => {
        if (res.code == 200) {
          this.baseInfo = res.data.custInfoMerchant;
          this.radarCustFlag = res.data.radarCustFlag;
          if (res.data.taskDetail.length > 0) {
              const taskDetail = res.data.taskDetail[0] || {}
              for (let i in taskDetail) {
                  if (i !== 'info') {
                      this.taskDetail.push({
                          value: i,
                          label: taskDetail[i],
                          isImage: i === '照片存放地址'
                      })
                  } else {
                      for (let j in taskDetail.info) {
                          this.taskDetail.push({
                              value: j,
                              label: taskDetail.info[j],
                              isImage: j === '照片存放地址'
                          })
                      }
                  }
              }
          } else {
            this.taskDetail = []
          }
        }
      });
    },
    handleClickItem(item) {
      if (item.title == "商户基本信息") {
        sessionStorage.setItem("detailType", item.title);
        this.$router.push("/commercial");
      } else if (item.title == "地址信息") {
        let addressType = "0";
        sessionStorage.setItem("addressType", addressType);
        this.$router.push("/address");
      } else if (item.title == "签约产品") {
        sessionStorage.setItem("productType", "3");
        this.$router.push("/products");
      } else if (item.title == "自定义备注") {
        sessionStorage.setItem("remarkType", "3");
        this.$router.push("/remark");
      } else if (item.title == "走访记录") {
        sessionStorage.setItem(
          "socialCreditCode",
          this.baseInfo.socialCreditCode
        );
        sessionStorage.setItem("historyType", "1");
        this.$router.push("/history");
      } else if (item.title === '商户门头照') {
        this.$router.push("/commericalImage");
      }
    },
    handleAddShow() {
      this.show = true;
    },
    onConfirm() {
      this.showPicker = false;
    },
    handleClickTjzf() {},
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.wrapper_top {
  background-color: #fff;
  padding: 15px 20px;
  display: flex;
}

.left_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
}

.top_right {
  margin-left: 15px;
  flex: 1;
}

.name_box {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
}
.isradarCust {
  text-align: end;
  color: red;
  line-height: 30px;
}
.top_item {
  font-size: 12px;
  margin-top: 10px;
}

.top_right_left {
  color: rgb(89, 89, 89);
}

.home_main {
  background-color: #ffffff;
  margin-top: 10px;
}

.home_main_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px 15px 0;
  border-bottom: 1px solid rgba(89, 89, 89, 0.1);
}

.main_left {
  display: flex;
  align-items: center;
}

.home_main_icon {
  font-size: 30px;
  color: rgb(98, 132, 221);
}

.main_title {
  margin-left: 15px;
  font-size: 14px;
}

.tjzf {
  width: 90%;
  height: 45px;
  background-color: rgb(57, 133, 218);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5%;
  margin-top: 30px;
  color: #fff;
}
</style>
