<template>
  <div class="detail_main">
    <!-- <navbar :title="navTitle"></navbar> -->
    <div class="wrapper">
      <div class="wrapper_view" v-if="isView">
        <div class="view_item">
          <div class="view_item_left">企业名称</div>
          <div class="view_item_right">{{ baseInfo.custName }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">法人姓名</div>
          <div class="view_item_right">{{ baseInfo.lpName }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">性别</div>
          <div class="view_item_right">{{ baseInfo.custGender }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">年龄</div>
          <div class="view_item_right">{{ baseInfo.custAge }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">身份证号</div>
          <div class="view_item_right">{{ baseInfo.custIdc }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">法人联系方式</div>
          <div class="view_item_right">{{ baseInfo.custPhone }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">出生日期</div>
          <div class="view_item_right">{{ baseInfo.birthday }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">客户内码</div>
          <div class="view_item_right">{{ baseInfo.custIsn }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">客户号</div>
          <div class="view_item_right">{{ baseInfo.custId }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">统信码</div>
          <div class="view_item_right">{{ baseInfo.socialCreditCode }}</div>
        </div>
        <div class="view_item" v-if="radarCustFlag != '1'">
          <div class="view_item_left">行业名称</div>
          <div class="view_item_right">
            {{ initIndustryBusiStr(baseInfo.industry) }}
          </div>
        </div>
        <div class="view_item" v-if="radarCustFlag != '1'">
          <div class="view_item_left">经营状态</div>

          <div class="view_item_right">{{ initStatus(baseInfo.status) }}</div>
        </div>
        <div class="view_item" v-if="radarCustFlag == '1'">
          <div class="view_item_left">行业名称</div>
          <div class="view_item_right">{{ baseInfo.industry }}</div>
        </div>
        <div class="view_item" v-if="radarCustFlag == '1'">
          <div class="view_item_left">经营状态</div>

          <div class="view_item_right">{{ baseInfo.status }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">经营范围</div>
          <div class="view_item_right">{{ baseInfo.businessScope }}</div>
        </div>

        <div class="view_item">
          <div class="view_item_left">注册资本</div>
          <div class="view_item_right">{{ baseInfo.custCapital }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">联系方式</div>
          <div class="view_item_right">{{ baseInfo.tel }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">更新时间</div>
          <div class="view_item_right">{{ baseInfo.updateTime }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">资产情况</div>
          <div class="view_item_right">{{ baseInfo.asset }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">信用状况</div>
          <div class="view_item_right">{{ baseInfo.credit }}</div>
        </div>
        <div class="view_item">
          <div class="view_item_left">行政归属网格区划</div>
          <div class="view_item_right">{{ baseInfo.community }}</div>
        </div>
        <div class="view_item" v-if="!isHeadOps">
          <div class="view_item_left">行政网格客户经理(公司部)</div>
          <div class="view_item_right">{{ baseInfo.xzGsGridUserName }}</div>
        </div>
        <div class="view_item" v-if="!isHeadOps">
          <div class="view_item_left">行政归属网格(公司部)</div>
          <div class="view_item_right">{{ baseInfo.xzGsGridName }}</div>
        </div>
        <div class="view_item" v-if="!isPublic">
          <div class="view_item_left">行政网格客户经理(运管部)</div>
          <div class="view_item_right">{{ baseInfo.xzYgGridUserName }}</div>
        </div>
        <div class="view_item" v-if="!isPublic">
          <div class="view_item_left">行政归属网格(运管部)</div>
          <div class="view_item_right">{{ baseInfo.xzYgGridName }}</div>
        </div>
        <div class="view_item" v-for="(item, index) in cliList" :key="index">
          <div class="view_item_left" v-if="item.cmpmType == '贷款客户经理'">
            {{ item.cmpmType }}
          </div>
          <div class="view_item_right" v-if="item.cmpmType == '贷款客户经理'">
            {{ item.cmpmUserList }}
          </div>
        </div>
      </div>
      <div class="wrapper_edit" v-if="!isView">
        <van-form ref="form">
          <van-field
            v-model="baseform.custName"
            maxlength="18"
            label="企业名称"
            name="userName"
            placeholder="请输入企业名称"
          ></van-field>
          <van-field
            v-model="baseform.lpName"
            label="法人姓名"
            name="userName"
            maxlength="18"
            placeholder="请输入法人姓名"
          ></van-field>
          <van-field label="性别" name="gender">
            <template #input>
              <van-radio-group
                v-model="baseform.custGender"
                direction="horizontal"
              >
                <van-radio name="男">男</van-radio>
                <van-radio name="女">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="baseform.custAge"
            maxlength="3"
            label="年龄"
            name="age"
            placeholder="请输入年龄"
          ></van-field>
          <van-field
            v-model="baseform.custIdc"
            label="身份证号"
            name="custIdc"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.custPhone"
            label="法人联系方式"
            name="age"
            placeholder="请输入年龄"
          ></van-field>
          <van-field
            v-model="baseform.birthday"
            is-link
            readonly
            label="出生日期"
            name="birthday"
            placeholder="请选择日期"
            @click="showDatePicker = true"
          ></van-field>
          <van-popup v-model:show="showDatePicker" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              :min-date="minDate"
              :max-date="maxDate"
              type="date"
              title="选择日期"
              @confirm="onConfirmDate"
              @cancel="showDatePicker = false"
            ></van-datetime-picker>
          </van-popup>
          <van-field
            v-model="baseform.custIsn"
            label="客户内码"
            name="custIdc"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.custId"
            label="客户号"
            name="custIdc"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.socialCreditCode"
            label="统信码"
            name="custIdc"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="industryText"
            label="行业名称"
            is-link
            readonly
            placeholder="请选择"
            @click="showPickerBelonBusi = true"
          ></van-field>
          <van-popup
            v-model="showPickerBelonBusi"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              show-toolbar
              :columns="belonBusiList"
              cancel-button-text=""
              confirm-button-text=""
              @cancel="cancleBelonBusi"
              @confirm="changeBelonBusi"
            />
          </van-popup>

          <van-field
            v-model="statusText"
            label="经营状态"
            is-link
            readonly
            placeholder="请选择"
            @click="showPicker = true"
          ></van-field>
          <van-popup
            v-model="showPicker"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              show-toolbar
              :columns="statusList"
              @cancle="showPicker = false"
              :value-key="'label'"
              @confirm="onConfirm"
              @cancel="cancelStatus"
            ></van-picker>
          </van-popup>
          <van-field
            v-model="baseform.businessScope"
            label="经营范围"
            maxlength="18"
            name="custPhone"
            placeholder="请输入"
          ></van-field>
          <van-field
            v-model="baseform.custCapital"
            label="注册资本"
            maxlength="18"
            name="custPhone"
            placeholder="请输入"
          ></van-field>
          <van-field
            v-model="baseform.tel"
            label="联系方式"
            name="custPhone"
            placeholder="请输入联系方式"
          ></van-field>
          <van-field
            v-model="baseform.updateTime"
            label="更新时间"
            name="updateTime"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.asset"
            label="资产情况"
            name="asset"
            disabled
            class="label_color"
          />
          <van-field
            v-model="baseform.credit"
            label="信用状况"
            name="credit"
            disabled
            class="label_color"
          />
          <van-field
            v-model="baseform.community"
            label="行政归属网格区划"
            name="community"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.xzGsGridUserName"
            v-if="!isHeadOps"
            label="行政网格客户经理(公司部)"
            name="xzGsGridUserName"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.xzGsGridName"
            v-if="!isHeadOps"
            label="行政归属网格(公司部)"
            name="xzGsGridName"
            disabled
            class="label_color"
          ></van-field>

          <van-field
            v-model="baseform.xzYgGridUserName"
            v-if="!isPublic"
            label="行政网格客户经理(运管部)"
            name="xzYgGridUserName"
            disabled
            class="label_color"
          ></van-field>
          <van-field
            v-model="baseform.xzYgGridName"
            v-if="!isPublic"
            label="行政归属网格(运管部)"
            name="xzYgGridName"
            disabled
            class="label_color"
          ></van-field>
          <div v-for="(item, index) in cliList" :key="index">
            <van-field
              v-model="item.cmpmUserList"
              :label="item.cmpmType"
              :name="item.cmpmUserList"
              disabled
              v-if="item.cmpmType == '贷款客户经理'"
              class="label_color"
            ></van-field>
          </div>
        </van-form>
      </div>
    </div>
    <div class="footer_view" v-if="isView">
      <van-button type="primary" @click="handleEdit" v-if="radarCustFlag != '1'"
        >编辑</van-button
      >
    </div>
    <div class="footer_edit" v-if="!isView">
      <van-button plain color="#2372eb" @click="handleCancle" class="qx"
        >取消</van-button
      >
      <van-button type="primary" @click="handleSave">保存</van-button>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import {
  getBusinessInfo,
  getRegStatus,
  getIndustryTree,
  businessUpdate,
} from "@/service/api/custome";
import {
  Button,
  Form,
  Field,
  RadioGroup,
  Radio,
  Popup,
  DatetimePicker,
  Picker,
  Area,
  Cascader,
} from "vant";
export default {
  data() {
    return {
      navTitle: "",
      isView: true,
      statusText: "",
      industryText: "",
      baseInfo: {
        community: "",
        xzGsGridUserName: "",
        xzGsGridName: "",
        xzYgGridUserName: "",
        xzYgGridName: "",
      },
      baseform: {
        community: "",
        xzGsGridUserNameL: "",
        xzGsGridName: "",
        xzYgGridUserName: "",
        xzYgGridName: "",
      },
      currentDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      showDatePicker: false,
      statusList: [],
      showPicker: false,
      showPickerBelonBusi: false,
      belonBusiList: [],
      industryOptions: [],
      cliList: [],
      isHeadOps: false,
      isPublic: false,
      radarCustFlag: "",
    };
  },
  components: {
    navbar: navbar,
    VanButton: Button,
    VanForm: Form,
    VanField: Field,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanPopup: Popup,
    VanDatetimePicker: DatetimePicker,
    VanPicker: Picker,
    VanArea: Area,
    vanCascadePicker: Cascader,
  },
  created() {
    this.navTitle = sessionStorage.getItem("detailType");

    this.init();
  },
  methods: {
    init() {
      let custId = sessionStorage.getItem("custId");
      getBusinessInfo(custId).then((res) => {
        if (res.code == 200) {
          this.baseInfo = res.data.custInfoBusiness;
          this.cliList = res.data.cmpmUserLists;
          this.baseform = res.data.custInfoBusiness;
          this.initRegStatus();
          this.initIndustryTree();

          this.radarCustFlag = res.data.radarCustFlag;

          this.baseform.community = res.data.community;
          this.baseform.xzGsGridUserName = res.data.xzGsGridUserName;
          this.baseform.xzGsGridName = res.data.xzGsGridName;
          this.baseform.xzYgGridUserName = res.data.xzYgGridUserName;
          this.baseform.xzYgGridName = res.data.xzYgGridName;

          this.baseInfo.community = res.data.community;
          this.baseInfo.xzGsGridUserName = res.data.xzGsGridUserName;
          this.baseInfo.xzGsGridName = res.data.xzGsGridName;
          this.baseInfo.xzYgGridUserName = res.data.xzYgGridUserName;
          this.baseInfo.xzYgGridName = res.data.xzYgGridName;
        }
      });
    },
    initRegStatus() {
      getRegStatus().then((res) => {
        if (res.code == 200) {
          this.statusList = res.data.map((item) => {
            return {
              label: item.dictLabel,
              value: item.dictValue,
            };
          });
          this.statusText = this.initStatus(this.baseInfo.status);
        }
      });
    },
    initStatus(data) {
      let arr = this.statusList.filter((item) => item.value === data);
      if (arr && arr.length > 0) {
        return arr[0].label;
      }
    },
    initIndustryTree() {
      getIndustryTree().then((res) => {
        this.industryOptions = res.data.map((item) => {
          return {
            value: item.code,
            label: item.name,
            children: item.industryTrees,
          };
        });
        this.industryOptions.forEach((item) => {
          item.children.forEach((el) => {
            el.value = el.code;
            el.label = el.name;
          });
        });
        this.belonBusiList = res.data.map((item) => {
          return {
            text: item.name,
            id: item.code,
            children: item.industryTrees,
          };
        });
        this.belonBusiList.forEach((item) => {
          item.children.forEach((el) => {
            el.text = el.name;
            el.id = el.code;
          });
        });
        this.belonBusiList.forEach((item) => {
          item.children.unshift({
            text: "请选择",
            id: "",
          });
        });
        this.industryText = this.initIndustryBusiStr(this.baseInfo.industry);
      });
    },
    initIndustryBusiStr(data) {
      for (let i = 0; i < this.industryOptions.length; i++) {
        if (this.industryOptions[i].value == data) {
          return this.industryOptions[i].label;
        } else {
          for (let j = 0; j < this.industryOptions[i].children.length; j++) {
            if (this.industryOptions[i].children[j].value == data) {
              return this.industryOptions[i].children[j].label;
            }
          }
        }
      }
    },
    handleEdit() {
      this.isView = false;
    },
    handleCancle() {
      this.isView = true;
    },
    handleSave() {
      this.isView = true;
      console.log(this.baseform);
      businessUpdate(this.baseform).then((res) => {
        if (res.code == 200) {
          this.init();
        }
      });
    },
    onConfirmDate(value) {
      this.baseform.birthday = this.formatDate(value);
      const currentYear = new Date().getFullYear();
      const birthdayYear = Number(this.formatDate(value).slice(0, 4));
      this.baseform.custAge = currentYear - birthdayYear;
      this.showDatePicker = false;
    },
    formatDate(date) {
      if (date.getMonth() + 1 < 10) {
        return `${date.getYear() + 1900}-0${
          date.getMonth() + 1
        }-${date.getDate()}`;
      } else {
        return `${date.getYear() + 1900}-${
          date.getMonth() + 1
        }-${date.getDate()}`;
      }
    },
    onConfirm(value) {
      this.statusText = this.initStatus(value.value);
      this.baseform.status = value.value;
      this.showPicker = false;
    },
    cancelStatus() {
      this.showPicker = false;
    },
    changeBelonBusi(value) {
      let strOne = value[0];
      let strTwo = value[1];
      if (strTwo == "请选择") {
        let obj = this.belonBusiList.find((item) => item.text == strOne);
        this.baseform.industry = obj.id;
        this.industryText = obj.text;
      } else {
        let obj = {};
        for (let i = 0; i < this.belonBusiList.length; i++) {
          for (let j = 0; j < this.belonBusiList[i].children.length; j++) {
            if (strTwo == this.belonBusiList[i].children[j].text) {
              obj = this.belonBusiList[i].children[j];
            }
          }
        }
        this.baseform.industry = obj.id;
        this.industryText = obj.text;
      }
      this.showPickerBelonBusi = false;
    },
    cancleBelonBusi() {
      this.showPickerBelonBusi = false;
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  // padding-top: 46px;
  font-size: 14px;
  background-color: #fff;
}

.view_item {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid rgba(245, 245, 245, 1);
  padding: 0 20px;
}

.view_item_left {
  width: 40%;
  color: rgb(22, 13, 13);
}

.view_item_right {
  width: 55%;
  margin-left: 5%;
  color: rgb(22, 13, 13);
}

.footer_view {
  /deep/ .van-button {
    width: 100%;
  }
}

.footer_edit {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  /deep/ .van-button {
    width: 48%;
  }
}

.label_color {
  /deep/ .van-field__label {
    color: rgb(22, 13, 13);
  }
  /deep/.van-field__control:disabled{
    color: rgb(22, 13, 13);
    -webkit-text-fill-color:rgb(22, 13, 13);
  }
}
</style>
