<template>
  <div class="main_box">
    <div v-if="isShow == '1'">
      <navbar title="走访反馈" special @handleClickLeft="handleGoBefore"></navbar>
      <div class="wrapper">
        <div class="top">
          <div class="userMan_box">
            <img src="../../images/part_one/icon_company.png" alt="" />
          </div>
          <div class="top_name">{{ baseInfo.custName }}</div>
        </div>
        <div class="main">
          <van-form ref="baseForm">
            <div class="main_title">信息采集</div>
            <div class="feed_title"><span class="red">*</span>经营情况</div>
            <van-radio-group v-model="baseForm.statusFlag">
              <van-radio :name="true">正常经营</van-radio>
              <van-radio :name="false">实际无经营</van-radio>
            </van-radio-group>
            <div class="feed_title">
              <span class="red">*</span>实际经营地址与注册地址是否一致
            </div>
            <van-radio-group v-model="baseForm.addressConsist">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
            <div v-if="baseForm.addressConsist === false">
              <div class="feed_title">实际经营地址</div>
              <van-button
                type="text"
                @click="handleSelectAddress"
                v-if="showAddress == 'btn'"
                >点击跳转输入</van-button
              >
            </div>
            <div v-if="showAddress == 'text'">{{ baseForm.address }}</div>
            <div class="feed_title">
              <span class="red">*</span>实际经营范围是否一致
            </div>
            <van-radio-group v-model="baseForm.scopeConsist">
              <van-radio :name="true">是</van-radio>
              <van-radio :name="false">否</van-radio>
            </van-radio-group>
            <!-- <div v-if="!baseForm.scopeConsist">
              <div class="feed_title">
                <span class="red">*</span>实际经营范围
              </div>
              <div class="scope">
                <van-field
                  v-model="baseForm.scope"
                  name="scope"
                  placeholder="请输入"
                  type="textarea"
                  rows="2"
                  :rules="[{ required: true, message: '不能为空' }]"
                ></van-field>
              </div>
            </div> -->

            <div class="feed_title">关联人信息登记</div>
            <div class="glrBox" v-for="(item, index) in list" :key="index">
              <div class="glrBox_left">
                <div class="left_img_box">
                  <img
                    src="../../images/home/xkdjrw.png"
                    alt=""
                    style="width: 30px; height: 30px"
                  />
                </div>
                <div class="left_main_box">
                  <div class="left_main_box_top">{{ item.custName }}</div>
                  <div class="left_main_box_card">
                    手机号:{{ item.custPhone }}
                  </div>
                  <div class="left_main_box_card">
                    身份号:{{ item.custIdc }}
                  </div>
                </div>
              </div>
              <div class="glr_right">
                <div class="glr_right_edit" @click="handleEdit(item, index)">
                  编辑
                </div>
                <div class="glr_right_delete" @click="handleDelete(index)">
                  删除
                </div>
              </div>
            </div>
            <div class="addBtn" @click="handleAdd">
              <van-icon name="add"></van-icon>
              <span>添加关联人</span>
            </div>
            <div style="display: flex; align-items:center;">
            <van-field
              v-model="baseForm.clientSuggestion"
              label="信息反馈"
              name="clientSuggestion"
              placeholder="请输入"
              type="textarea"
              rows="10"
              required
              label-width="200px"
            ></van-field>
            <!-- <Record @trans-ready="handleUpdate"></Record> -->
            </div>
            <div class="main_title_two">客户标签</div>
            <div class="tag_box">
              <div>
                <span class="text_button" @click="goEditTag" style="margin-bottom: 20px"
                  >查看客户标签</span
                >
              </div>
              <div style="margin: 20px 0"></div>
              <div>
                <span class="text_button" @click="goEditTag1"
                  >编辑走访标签</span
                >
              </div>
            </div>
          </van-form>
        </div>
        <div class="footer_view">
          <van-button type="primary" @click="handleCommit">提交</van-button>
        </div>
      </div>
    </div>

    <div class="wrapper_two" v-if="isShow == '2'">
      <div class="navb" v-if="isShow == '2'">
        <div class="navLeft">
          <van-icon name="arrow-left"></van-icon>
          <span @click="handleAddCancle">返回</span>
        </div>
        <div class="navRight">添加关联人</div>
      </div>
      <van-form ref="addForm">
        <van-field
          v-model="addForm.custName"
          maxlength="18"
          label="关联人"
          name="custName"
          placeholder="请输入"
        ></van-field>
        <van-field
          v-model="addForm.custPhone"
          maxlength="18"
          label="手机号"
          name="custPhone"
          placeholder="请输入"
          class="required-field"
          :rules="[
            { required: true, message: '手机号不能为空' },
            { required: true, validator: addFormValidatePhone },
          ]"
        ></van-field>
        <van-field
          v-model="addForm.custIdc"
          maxlength="18"
          label="身份证号"
          name="custIdc"
          class="required-field"
          placeholder="请输入"
          :rules="[
            { required: true, message: '身份证号不能为空' },
            { required: true, validator: addFormValidateCustIdc },
          ]"
        ></van-field>
      </van-form>
      <div class="addFormBtn">
        <van-button plain color="#2372eb" @click="handleAddCancle" class="qx"
          >取消</van-button
        >
        <van-button type="primary" @click="handleAddSave">保存</van-button>
      </div>
    </div>
    <van-dialog
      v-model="show"
      title="客户位置定位打卡"
      :show-confirm-button="false"
    >
      <div class="top">
        <div class="userMan_box">
          <img src="../../images/part_one/icon_company.png" alt="" />
        </div>
        <div class="top_name">{{ dkInfo.custName }}</div>
      </div>
      <!-- {{ baseInfo.address }} -->
      <div class="adress">{{ dkInfo.address }}</div>
      <div class="adress">{{ `经度：${location.lng}, 纬度：${location.lat}` }}</div>
      <div class="cxdw" @click="handleCxdw">重新定位获取当前地址</div>
      <div class="dialog_main">
        <div class="item_title">省份</div>
        <van-field
          v-model="addressForm.sf"
          is-link
          readonly
          placeholder="请选择"
        ></van-field>

        <div class="item_title">市</div>
        <van-field
          v-model="addressForm.city"
          is-link
          readonly
          placeholder="请选择"
          @click="showCityPicker = true"
        ></van-field>
        <van-popup
          v-model="showCityPicker"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-picker
            show-toolbar
            :columns="cityList"
            :value-key="'label'"
            @cancle="showCityPicker = false"
            @confirm="onCityConfirm"
            @cancel="cancelCity"
          ></van-picker>
        </van-popup>
        <div class="item_title">区县</div>
        <van-field
          v-model="addressForm.xian"
          is-link
          readonly
          placeholder="请选择"
          @click="showXianPicker = true"
        ></van-field>
        <van-popup
          v-model="showXianPicker"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-picker
            show-toolbar
            :columns="xianList"
            :value-key="'label'"
            @cancle="showXianPicker = false"
            @confirm="onXianConfirm"
            @cancel="cancelXian"
          ></van-picker>
        </van-popup>
        <div class="item_title">详细地址</div>
        <van-field
          v-model="addressForm.detail"
          name="detail"
          placeholder="请输入"
          type="textarea"
        ></van-field>
        <div class="footer_btn">
          <div class="gb" @click="handleCancle">关闭</div>
          <div class="save" @click="handleSave">保存</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import { feedbackPublic, getFeedbackDetail } from "@/service/api/visiting";
import { getIndicator } from "@/service/api/dzTree";
import { translateLocApi } from "@/service/api/myGrid.js";
import { audioUpload, audioGet } from "@/service/api/record.js";
import record from './recordComponent.vue'
import {
  Tab,
  Icon,
  Button,
  Field,
  Form,
  Toast,
  Radio,
  RadioGroup,
  Picker,
} from "vant";
export default {
  data() {
    return {
      isShow: "1",
      showAddress: "btn",
      baseForm: {
        statusFlag: true,
        clientSuggestion: "无",
        addressConsist: true,
        scopeConsist: true,
        scope: "",
        address: "",
      },

      baseInfo: {},
      list: [],
      addForm: {
        custName: "",
        custIdc: "",
        custPhone: "",
      },
      show: false,
      addressForm: {
        sf: "浙江省",
        city: "",
        xian: "",
        detail: "",
      },
      showCityPicker: false,
      cityList: [],
      showXianPicker: false,
      xianList: [],
      isBackFromEdit: false,
      dkInfo: {
        custName: "",
        custId: "",
        address: "",
      },
      location: {
        lat: 30.248307,
        lng: 120.25551,
      },
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanIcon: Icon,
    VanButton: Button,
    VanField: Field,
    VanForm: Form,
    VanToast: Toast,
    VanRadio: Radio,
    VanRadioGroup: RadioGroup,
    VanPicker: Picker,
    Record: record
  },
  activated() {
    if (!this.isBackFromEdit) {
      this.init();
    }
    this.isBackFromEdit = false;
  },
  deactivated() {
    this.isBackFromEdit = this.$router.currentRoute.name === "remark";
  },
  mounted() {
    this.checkCompatibility()
  },
  methods: {
    init() {
      this.baseInfo = JSON.parse(sessionStorage.getItem("baseInfo"));
      this.baseForm = {
        statusFlag: true,
        clientSuggestion: "无",
        addressConsist: true,
        scopeConsist: true,
        scope: "",
        address: "",
      };
      if (this.baseInfo.feedbackId) {
        this.initGetFeedbackDetail();
      }
    },
    goEditTag() {
      this.$router.push({
        path: "/remark",
        query: {
          from: "visitTask",
        },
      });
    },
    goEditTag1() {
      this.$router.push({
        path: "/remarkCustom",
        query: {
          from: "visitTask",
        },
      });
    },
    addFormValidateCustIdc(value) {
      const regex =
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!regex.test(value)) {
        // callback(new Error('请输入正确的身份证号码'))
        this.$toast("请输入正确的身份证号码");
        this.addForm.custIdc = "";
        return;
      } else {
        return;
      }
    },
    addFormValidatePhone(value) {
      const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/;
      if (!regExp.test(value)) {
        this.$toast("请输入正确的手机号码");
        this.addForm.custPhone = "";
        return;
      } else {
        return;
      }
    },
    initGetFeedbackDetail() {
      const params = {
        feedbackType: this.baseInfo.feedbackType,
        feedbackId: this.baseInfo.feedbackId,
      };
      getFeedbackDetail(params).then((res) => {
        if (res.code == 200) {
          this.baseForm = res.data;
          this.list = JSON.parse(res.data.relatePerson);
        }
      });
    },
    handleAdd() {
      this.isShow = "2";
      this.addOrEdit = "add";
      this.title = "添加关联人";
    },
    handleAddCancle() {
      this.isShow = "1";
      this.addOrEdit = "";
      this.title = "企业客户";
      this.addForm = {
        custName: "",
        custIdc: "",
        custPhone: "",
      };
    },
    handleAddSave() {
      console.log(this.addForm, "this.addForm");
      this.$refs.addForm
        .validate()
        .then(() => {
          if (this.addForm.custIdc == "" || this.addForm.custPhone == "") {
            this.$toast("请输入必填项");
          } else {
            this.isShow = "1";
            this.title = "企业客户";
            if (this.addOrEdit == "add") {
              this.list.push({
                custName: this.addForm.custName,
                custIdc: this.addForm.custIdc,
                custPhone: this.addForm.custPhone,
              });
              this.addForm = {
                custName: "",
                custIdc: "",
                custPhone: "",
              };
              this.addOrEdit = "";
            } else if (this.addOrEdit == "edit") {
              this.list.splice(this.editInddex, 1, {
                custName: this.addForm.custName,
                custIdc: this.addForm.custIdc,
                custPhone: this.addForm.custPhone,
              });
            }
          }
        })
        .catch(() => {
          this.$toast("请输入必填项");
        });
    },
    handleEdit(item, index) {
      this.isShow = "2";
      this.editInddex = index;
      this.addOrEdit = "edit";
      this.title = "添加关联人";
      this.addForm.custName = item.custName;
      this.addForm.custIdc = item.custIdc;
      this.addForm.custPhone = item.custPhone;
    },
    handleDelete(index) {
      this.list.splice(index, 1);
    },
    handleSelectAddress() {
      let that = this;
      if (window.wx) {
        wx.ready(() => {
          wx.getLocation({
            type: "gcj02",
            success: (res) => {
              that.translateLocation({
                lat: res.latitude,
                lng: res.longitude,
              });
            },
            fail: (err) => {
              console.error("错误码：", err);
            },
          });
        });
      } else {
        this.initMap();
      }
      this.dkInfo.custName = this.baseInfo.custName;
      this.dkInfo.address = this.baseInfo.address;
      this.dkInfo.custId = this.baseInfo.custId;
      this.show = true;
      this.initCity();
    },
    handleCxdw() {
      let that = this;
      wx.ready(() => {
        wx.getLocation({
          type: "gcj02",
          success: (res) => {
            that.translateLocation({
              lat: res.latitude,
              lng: res.longitude,
            });
          },
          fail: (err) => {
            console.error("错误码：", err);
          },
        });
      });
    },
    async translateLocation(params) {
      const res = await translateLocApi(params);
      if (res.code == 200) {
        this.location = {
          lat: res?.data[1],
          lng: res?.data[0],
        };
        this.initMap();
      }
    },
    // 初始化地图
    initMap() {
      let myGeo = new BMapGL.Geocoder();
      myGeo.getLocation(
        new BMapGL.Point(this.location.lng, this.location.lat),
        (res) => {
          if (res) {
            console.log(res, "resresresresres");
            this.addressForm.city = res.addressComponents.city;
            this.addressForm.xian = res.addressComponents.district;
            this.addressForm.detail = res.addressComponents.street;
          }
        }
      );
      this.mapLoading = false;
    },
    handleCommit() {
      this.$refs.baseForm
        .validate()
        .then(() => {
          const params = {
            clientSuggestion: this.baseForm.clientSuggestion,
            recordId: this.baseInfo.recordId,
            address: !this.baseForm.addressConsist ? this.baseForm.address : "",
            addressConsist: this.baseForm.addressConsist,
            relatePerson: this.list,
            scope: !this.baseForm.scopeConsist ? this.baseForm.scope : "",
            scopeConsist: this.baseForm.scopeConsist,
            statusFlag: this.baseForm.statusFlag,
          };
          feedbackPublic(params).then((res) => {
            if (res.code == 200) {
              Toast.success(res.msg);
              this.$router.push("/visitingTaskDetails");
            }
          });
        })
        .catch(() => {
          this.$toast("请输入必填项");
        });
    },
    initCity() {
      const query = {
        level: "1",
        code: 33,
      };
      getIndicator(query).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data.map((item) => {
            return {
              label: item.label,
              value: item.value,
            };
          });
        }
      });
    },
    initXian(value) {
      const query = {
        level: "2",
        code: value,
      };
      getIndicator(query).then((res) => {
        if (res.code == 200) {
          this.xianList = res.data.map((item) => {
            return {
              label: item.label,
              value: item.value,
            };
          });
        }
      });
    },
    onCityConfirm(value) {
      this.addressForm.city = value.label;
      this.showCityPicker = false;
      this.initXian(value.value);
    },
    cancelCity() {
      this.showCityPicker = false;
      this.addressForm.city = "";
    },
    onXianConfirm(value) {
      this.addressForm.xian = value.label;
      this.showXianPicker = false;
    },
    cancelXian() {
      this.showXianPicker = false;
      this.addressForm.xian = "";
    },
    handleCancle() {
      this.show = false;
      this.addressForm.city = "";
      this.addressForm.xian = "";
      this.addressForm.detail = "";
    },
    handleSave() {
      this.baseForm.address = `${this.addressForm.sf}${this.addressForm.city}${this.addressForm.xian}${this.addressForm.detail}`;
      this.showAddress = "text";
      this.show = false;
    },
    handleGoBefore() {
      this.$router.push("/visitingTaskHome");
    },
    handleUpdate(text) {
      this.baseForm.clientSuggestion = text
    }
  },
};
</script>
<style lang="less" scoped>
.tag_box {
  padding-top: 16px;
  border-bottom: 1px solid rgba(140, 140, 140, 0.1);
  padding-bottom: 20px;
}
.main_title_two {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
}

.text_button {
  color: #1989fa;
  text-decoration: underline;
  margin-bottom: 6px;
  display: inline-block;
}
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.userMan_box {
  background-color: rgb(35, 114, 235);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
  color: #fff;
}

.top {
  display: flex;
  background-color: #fff;
  align-items: center;
  padding: 15px;
}

.top_name {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
}

.main {
  margin-top: 5px;
  background-color: #fff;
  padding: 15px;

  /deep/ .van-cell {
    display: flex;
    flex-direction: column;
  }

  /deep/ .van-field__value {
    margin-top: 13px;
    background-color: rgba(140, 140, 140, 0.1);
  }
}

.main_title {
  font-size: 14px;
  font-weight: 600;
}

.footer_view {
  text-align: center;

  /deep/ .van-button {
    width: 90%;
  }
}
.red {
  color: red;
  margin-right: 3px;
}

/deep/ .van-radio-group {
  display: flex;

  padding: 5px 10px;
}

.feed_title {
  font-size: 14px;
  color: #646566;
  margin-left: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.scope {
  /deep/ .van-cell__value {
    margin-top: 0;
  }
}

.glrBox {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding: 15px;
}

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

.left_img_box {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgb(246, 249, 255);
}

.left_main_box {
  margin-left: 20px;
}

.left_main_box_top {
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}

.left_main_box_card {
  font-size: 12px;
  line-height: 25px;
  color: rgb(140, 140, 140);
}

.glr_right {
  display: flex;
  width: 30%;
}

.glr_right_edit {
  background-color: rgb(233, 241, 253);
  color: rgb(35, 114, 235);
  height: 33px;
  line-height: 33px;
  width: 60px;
  text-align: center;
  border-radius: 5px;
}

.glr_right_delete {
  background-color: rgb(253, 243, 234);
  color: rgb(238, 140, 21);
  height: 33px;
  line-height: 33px;
  width: 60px;
  text-align: center;
  border-radius: 5px;
  margin-left: 5px;
}

.addBtn {
  margin-top: 5px;
  line-height: 50px;
  background-color: rgb(233, 241, 253);
  color: rgb(35, 114, 235);
  text-align: center;
  border: 1px solid rgb(35, 114, 235);
}

.wrapper_two {
  min-height: 100vh;
  font-size: 16px;
  padding-bottom: 60px;
}

.navb {
  background-color: #fff;
  display: flex;
  line-height: 46px;
  padding-left: 16px;
}

.navLeft {
  color: #1989fa;
  width: 40%;
}

.gsjg {
  /deep/ .van-ellipsis {
    white-space: normal;
  }
}

.required-field {
  /deep/ .van-field__label::after {
    content: " *";
    color: red;
  }
}

.addFormBtn {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

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

/deep/ .van-dialog {
  width: 100%;
  border-radius: 0;
}

.adress {
  margin-left: 30px;
  font-size: 12px;
}

.cxdw {
  margin-left: 30px;
  font-size: 12px;
  margin-top: 20px;
  color: rgb(35, 114, 235);
}

.dialog_main {
  padding: 15px;

  /deep/ .van-cell {
    background-color: rgba(140, 140, 140, 0.1);
  }

  .item_title {
    margin: 15px 0 10px 0;
  }

  /deep/ .van-button {
    display: none;
  }
}

.footer_btn {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.gb {
  width: 43%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(140, 140, 140, 0.5);
}

.save {
  width: 43%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(140, 140, 140, 0.5);
  background-color: rgb(35, 114, 235);
  color: #fff;
}
</style>
