<template>
  <div class="main_box">
    <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" v-if="isShow">
        <van-form ref="formRef">
          <div v-for="(item, index) in templateList" :key="index">
            <van-field
              v-if="item.type === 'input'"
              v-model="baseForm[item.model]"
              :placeholder="item.options.placeholder"
              :required="item.options.isRequired"
              :rules="[
                {
                  required: item.options.isRequired,
                  message: '该项数据必填',
                },
              ]"
              :name="item.model"
              :label="item.title"
            >
            </van-field>

            <van-field
              v-else-if="item.type === 'textarea'"
              v-model="baseForm[item.model]"
              :placeholder="item.options.placeholder"
              :required="item.options.isRequired"
              :rules="[
                {
                  required: item.options.isRequired,
                  message: '该项数据必填',
                },
              ]"
              type="textarea"
              :rows="item.options.rows"
              :maxlength="item.options.maxLength || 200"
              show-word-limit
              :name="item.model"
              :label="item.title"
            ></van-field>

            <van-field
              v-else-if="item.type === 'checkbox'"
              :required="item.options.isRequired"
              :rules="[
                {
                  required: item.options.isRequired,
                  message: '该项数据必填',
                },
              ]"
              :name="item.model"
              :label="item.title"
            >
              <template #input>
                <van-checkbox-group
                  v-model="baseForm[item.model]"
                  direction="horizontal"
                >
                  <van-checkbox
                    v-for="(_item, _index) in item.options.options"
                    :name="_item.value"
                    shape="square"
                    >{{ _item.label }}</van-checkbox
                  >
                </van-checkbox-group>
              </template>
            </van-field>

            <van-field
              v-else-if="item.type === 'radio'"
              :required="item.options.isRequired"
              :rules="[
                {
                  required: item.options.isRequired,
                  message: '该数据必填',
                },
              ]"
              :name="item.model"
              :label="item.title"
            >
              <template #input>
                <van-radio-group
                  v-model="baseForm[item.model]"
                  direction="horizontal"
                >
                  <van-radio
                    v-for="(_item, _index) in item.options.options"
                    :name="_item.value"
                    >{{ _item.label }}</van-radio
                  >
                </van-radio-group>
              </template>
            </van-field>

            <van-field
              v-else-if="item.type === 'select'"
              readonly
              clickable
              :name="item.model"
              :label="item.title"
              :value="baseForm[item.model]"
              :required="item.options.isRequired"
              :rules="[
                {
                  required: item.options.isRequired,
                  message: '该数据必填',
                },
              ]"
              :placeholder="item.options.placeholder"
              @click="handleClickPicker(item)"
            ></van-field>

            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="currentOptions"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              ></van-picker>
            </van-popup>
          </div>

          

          <van-field label="客户标签">
              <template #input>
                <div>
                <span class="text_button" @click="goEditTag"
                  >查看客户标签</span
                >
                <div style="margin: 20px 0"></div>
                <span class="text_button" @click="goEditTag1"
                  >编辑走访标签</span
                >
                </div>
              </template>
            </van-field>
        </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 {
  Field,
  Form,
  CheckboxGroup,
  Checkbox,
  RadioGroup,
  Radio,
  Popup,
  Picker,
  Button,
  Toast,
} from "vant";
import {
  getFeedbackDetail,
  feedbackCustom,
  getFeedbackTemplate,
} from "@/service/api/visiting";

export default {
  data() {
    return {
      isShow: false,
      baseInfo: {},
      baseForm: {},
      templateList: [],
      // 选择器对应
      showPicker: false,
      currentOptions: [],
      currentKey: "",
    };
  },
  components: {
    navbar: navbar,
    VanField: Field,
    VanForm: Form,
    VanCheckboxGroup: CheckboxGroup,
    VanCheckbox: Checkbox,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanPopup: Popup,
    VanPicker: Picker,
    VanButton: Button,
    VanToast: Toast,
  },
  activated() {
    if (!this.isBackFromEdit) {
      this.init();
    }
    this.isBackFromEdit = false;
  },
  deactivated() {
    this.isBackFromEdit = this.$router.currentRoute.name === "remark";
  },
  mounted() {},
  methods: {
    init() {
      this.baseInfo = JSON.parse(sessionStorage.getItem("baseInfo"));
      if (this.$route.query && Object.keys(this.$route.query).length !== 0) {
        this.getDetail();
        this.getTemplateInfo();
      }
    },
    goEditTag() {
      this.$router.push({
        path: "/remark",
        query: {
          from: "visitTask",
        },
      });
    },
    goEditTag1() {
      this.$router.push({
        path: "/remarkCustom",
        query: {
          from: "visitTask",
        },
      });
    },
    getDetail() {
      if (!this.$route.query.feedbackId) return;
      getFeedbackDetail({
        feedbackId: this.$route.query.feedbackId,
        feedbackType: "2",
      }).then((res) => {
        if (res.code == 200) {
          this.baseForm = res.data || {};
        }
      });
    },
    getTemplateInfo() {
      getFeedbackTemplate({
        feedbackTemplateId: this.$route.query.feedbackTemplateId,
      }).then((res) => {
        if (res.code == 200) {
          this.templateList = JSON.parse(res.data).map(item => {
            let newOptions = []
            if (item.type === "radio" || item.type === "select" || item.type === "checkbox") {
              newOptions = item.options.options.map(itm => {
                return {
                  ...itm,
                  value: `${itm.value}-${itm.label}`,
                }
              })
            }
            return {
              ...item,
              options: {
                ...item.options,
                options: newOptions
              }
            }
          });
          // console.log('JSON.parse(res.data)', JSON.parse(res.data), this.templateList)
          this.isShow = true;
        }
      });
    },
    handleClickPicker(val) {
      this.currentKey = val.model;
      this.currentOptions = val.options.options.map((item) => item.label);
      this.showPicker = true;
    },
    onConfirm(value) {
      this.baseForm[this.currentKey] = value;
      this.showPicker = false;
    },
    handleCommit() {
      this.$refs.formRef
        .validate()
        .then(() => {
          feedbackCustom({
            recordId: this.$route.query.recordId,
            feedback: this.baseForm,
          }).then((res) => {
            if (res.code == 200) {
              Toast.success(res.msg);
              this.$router.push("/visitingTaskDetails");
            }
          });
        })
        .catch((errors) => {
          console.log(errors);
        });
    },
    handleGoBefore() {
      this.$router.push("/visitingTaskHome");
    }
  },
};
</script>
<style lang="less" scoped>
.text_button {
  color: #1989fa;
  text-decoration: underline;
}
.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;
  margin-bottom: 8px;
  background-color: #fff;

  //   /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;
}

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

.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;
}

.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%;
  }
}
</style>
