<template>
  <div class="main_box">
    <navbar title="走访反馈" special @handleClickLeft="handleGoBefore"></navbar>
    <div class="wrapper">
      <div class="top">
        <div
          :class="baseInfo.custGender == '男' ? 'userMan_box' : 'userWoMan_box'"
        >
          <van-icon name="manager item_user"></van-icon>
        </div>
        <div class="top_name">{{ baseInfo.custName }}</div>
      </div>
      <div class="main">
        <van-form ref="form">
          <div class="main_title">信息反馈</div>
          <div class="feed_box">
            <van-field
              v-model="baseForm.clientSuggestion"
              label="客户意见,投诉"
              name="clientSuggestion"
              placeholder="请输入"
              type="textarea"
              rows="3"
              required
              label-width="200px"
              :rules="[{ required: true, message: '不能为空' }]"
            ></van-field>
          </div>
          <div class="main_title_two">营销成效</div>
          <div class="feed_box">
            <div class="feed_title"><span class="red">*</span>意向产品</div>
            <van-checkbox-group v-model="baseForm.intendProduct">
              <van-checkbox
                :name="item.productName"
                shape="square"
                v-for="(item, index) in productList"
                style="padding: 10px"
                :key="index"
                >{{ item.productName }}</van-checkbox
              >
            </van-checkbox-group>
          </div>
          <div class="feed_box">
            <van-field
              v-model="baseForm.otherIntend"
              label="其他存贷意向"
              name="otherIntend"
              placeholder="请输入"
              type="textarea"
              rows="3"
              required
              label-width="200px"
              :rules="[{ required: true, message: '不能为空' }]"
            ></van-field>
          </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>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import {
  feedbackPrivate,
  feedbackProduct,
  getFeedbackDetail,
} from "@/service/api/visiting";
import {
  Tab,
  Icon,
  Button,
  Field,
  Form,
  Toast,
  Checkbox,
  CheckboxGroup,
  Tag,
} from "vant";
export default {
  data() {
    return {
      baseForm: {
        clientSuggestion: "",
        intendProduct: [],
        otherIntend: "",
      },
      productList: [],
      baseInfo: {},
      isBackFromEdit: false,
    };
  },
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanIcon: Icon,
    VanButton: Button,
    VanField: Field,
    VanForm: Form,
    VanToast: Toast,
    VanCheckbox: Checkbox,
    VanCheckboxGroup: CheckboxGroup,
    VanTag: Tag,
  },
  activated() {
    if (!this.isBackFromEdit) {
        this.init()
    }
    this.isBackFromEdit = false
  },
  deactivated() {
    this.isBackFromEdit = this.$router.currentRoute.name === 'remark'
  },
  mounted() {},
  methods: {
    // getTagInfo() {
    //   const custId = sessionStorage.getItem("custId");
    //   getTagList(custId).then((res) => {
    //     if (res.code === 200) {
    //       this.tagsList = res.data || [];
    //     }
    //   });
    // },
    init() {
      this.baseInfo = JSON.parse(sessionStorage.getItem("baseInfo"));
      this.getFeedbackProduct();
      // this.getTagInfo();
      this.baseForm={
        clientSuggestion: "",
        intendProduct: [],
        otherIntend: "",
      }
      if (this.baseInfo.feedbackId) {
        this.initGetFeedbackDetail();
      }
    },
    goEditTag() {
      this.$router.push({
        path: "/remark",
        query: {
          from: "visitTask",
        },
      });
    },
    goEditTag1() {
      this.$router.push({
        path: "/remarkCustom",
        query: {
          from: "visitTask",
        },
      });
    },
    getFeedbackProduct() {
      feedbackProduct().then((res) => {
        if (res.code == 200) {
          this.productList = res.data;
        }
      });
    },
    initGetFeedbackDetail() {
      const params = {
        feedbackType: this.baseInfo.feedbackType,
        feedbackId: this.baseInfo.feedbackId,
      };
      getFeedbackDetail(params).then((res) => {
        if (res.code == 200) {
          if(res && res.data){
            this.baseForm = res.data;
          }else{
            this.baseForm={
              clientSuggestion: "",
              intendProduct: [],
              otherIntend: "",
            }
          }
        }
      });
    },
    handleCommit() {
      this.$refs.form
        .validate()
        .then(() => {
          const params = {
            clientSuggestion: this.baseForm.clientSuggestion,
            intendProduct: this.baseForm.intendProduct,
            otherIntend: this.baseForm.otherIntend,
            recordId: this.baseInfo.recordId,
          };
          feedbackPrivate(params).then((res) => {
            if (res.code == 200) {
              Toast.success(res.msg);
              this.$router.push("/visitingTaskDetails");
            }
          });
        })
        .catch(() => {
          this.$toast("请输入必填项");
        });
    },
    handleGoBefore() {
      this.$router.push("/visitingTaskHome");
    }
  },
};
</script>
<style lang="less" scoped>
.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;
}

.userWoMan_box {
  background-color: rgb(252, 123, 80);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
}

.item_user {
  font-size: 25px;
  color: #fff;
}

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

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

    .text_button {
    color: #1989fa;
    text-decoration: underline;
    }

.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%;
  }
}
.tag_box {
  padding-top: 16px;
  border-bottom: 1px solid rgba(140, 140, 140, 0.1);
  padding-bottom: 20px;
}
.feed_box {
  border-bottom: 1px solid rgba(140, 140, 140, 0.1);
  padding-bottom: 20px;
}
.main_title_two {
  margin-top: 15px;
}
.feed_title {
  font-size: 14px;
  color: #646566;
  margin-left: 7px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.red {
  color: red;
  margin-right: 3px;
}
/deep/ .van-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
/deep/ .van-checkbox {
  width: 50%;
  margin-bottom: 10px;
}
</style>
