<template>
  <div>
    <!--    跟进-->
    <DkModal v-model="visible" :title="$t('follow2')" width="1000px" ref="modal_follow"
             :loading="loading"
             @on-cancel="cancelFollow"
             @modalOk="submitFollow"
             @modalCancel="cancelFollow"
             :saveFlag="true"
    >
      <div style="height: 600px;overflow-y:auto;overflow-x:hidden;width: 100%;">
        <DkCollapse @on-change="changeCollapse" ref="collapse">
          <DkPanel prop="customerInfo">
            <DkForm slot="content" style="width:100%;" v-model="customerInfo" name="dk-form" ref="customerInfo">
              <!--客户名称-->
              <DkFormItem prop="customerName" :errorMessage="getErrMessage('customerName')" required>
                <InputPop v-model="customerInfo.customerName"/>
              </DkFormItem>
              <!--客户电话-->
              <DkFormItem prop="customerPhone" :errorMessage="getErrMessage('customerPhone')"
                          :required="!customerInfo.qvExternalUserid">
                <InputPop :telephone="true" v-model="customerInfo.customerPhone"/>
              </DkFormItem>
              <!--行政区划-->
              <!--                <DkFormItem prop="customerDistrict" :errorMessage="getErrMessage('customerDistrict')" >-->
              <!--                  &lt;!&ndash; 高德 &ndash;&gt;-->
              <!--                  <RegionsChooseAmap v-model="regionData" :options="cityData"-->
              <!--                                 :default-value="customerInfo.addressName" ref="customerDistrict"-->
              <!--                                 @on-choose="chooseAddress"></RegionsChooseAmap>-->
              <!--                </DkFormItem>-->
              <!--门牌号-->
              <DkFormItem :label="$t('addressNo')" prop="addressNo" :errorMessage="getErrMessage('addressNo')">
                <InputPop v-model="customerInfo.addressNo" @input="setAddressFull"/>
              </DkFormItem>
              <!--详细地址-->
              <DkFormItem :label="$t('addressFull2')" prop="addressFull" :errorMessage="getErrMessage('addressFull')">
                <InputPop v-model="customerInfo.addressFull" readonly/>
              </DkFormItem>
            </DkForm>
          </DkPanel>

          <Card class="follow-card">
            <p slot="title">
              {{ $t('followInfo') }}
            </p>
            <DkTabs v-model="followTab" :options="[
            { label: $t('followDaily'), name: '1' },
            { label: $t('followToStore'), name: '2' },
            { label: $t('followReserve'), name: '3' }
          ]">
              <template slot="1">
                <DkForm ref="formFollow1" style="width:100%;" name="dk-form" v-model="customerInfo1" :rules="rule1"
                        @onValidate="onValidate" :label-max-words="6">
                  <!--                客户意向-->
                  <DkFormItem prop="intention" :errorMessage="getErrMessage('intention')" required>
                    <SelectPop v-model="customerInfo1.intention" :options="intentionList" :multiple="false"
                               :clearable="false"
                               label-key="dataName" value-key="dataCode" transfer
                               @on-change="(val)=>cleanCompetitiveBrands(val, '1')"/>
                  </DkFormItem>
                  <!--                竞品品牌-->
                  <DkFormItem prop="competitiveBrands" :errorMessage="getErrMessage('competitiveBrands')">
                    <InputPop v-model="customerInfo1.competitiveBrands" maxlength="100"/>
                  </DkFormItem>
                  <!--流失原因-->
                  <DkFormItem prop="loseReasonIds" :errorMessage="getErrMessage('loseReasonIds')" required>
                    <SelectPop v-model="customerInfo1.loseReasonIds" :options="loseReasonList" multiple
                               :clearable="false"
                               label-key="dataValue" value-key="dataId" transfer @on-change="changeInviteResult"/>
                  </DkFormItem>
                  <!--                意向品类-->
                  <!--                    <DkFormItem prop="intentionInfo" :errorMessage="getErrMessage('intentionInfo')">-->
                  <!--                          <div>-->
                  <!--                              <Checkbox v-model="customerInfo1.intentionInfo[index].value" @on-change="selectIntentionInfo(customerInfo1.intentionInfo[index])"-->
                  <!--                              >{{ item.specsName }}</Checkbox>-->
                  <!--                              <InputNumberPop v-model="customerInfo1.intentionInfo[index].count" style="width: 100px"/>-->
                  <!--                          </div>-->
                  <!--                          <div>-->
                  <!--                              <Checkbox v-model="customerInfo1.intentionInfo[index].value" :disabled="!customerInfo1.intentionInfo[index].other">-->
                  <!--                              </Checkbox>-->
                  <!--                              <Poptip transfer width="500" placement="left">-->
                  <!--                                <a>{{item.specsName}}</a>-->
                  <!--                                <div slot="content">-->
                  <!--                                  <RadioGroup v-model="otherIntentionInfo" @on-change="radioChange('1')">-->
                  <!--                                      <radio :label="item2.specsId">{{item2.specsName}}</radio>-->
                  <!--                                  </RadioGroup>-->
                  <!--                                </div>-->
                  <!--                              </Poptip>-->
                  <!--                              <InputNumberPop v-model="customerInfo1.intentionInfo[index].count" style="width: 100px"/>-->
                  <!--                          </div>-->
                  <!--                    </DkFormItem>-->
                  <!--跟进内容-->
                  <DkFormItem prop="followData" :errorMessage="getErrMessage('followData')" required>
                    <InputPop textarea-flag v-model="customerInfo1.followData" maxlength="100"/>
                  </DkFormItem>
                  <!--下次跟进计划-->
                  <DkFormItem prop="nextFollowPlan" :errorMessage="getErrMessage('nextFollowPlan')">
                    <InputPop textarea-flag v-model="customerInfo1.nextFollowPlan" maxlength="100"/>
                  </DkFormItem>
                  <!--跟进方式-->
                  <DkFormItem prop="followType" :errorMessage="getErrMessage('followType')" required>
                    <SelectPop v-model="customerInfo1.followType" :options="followTypeList" :multiple="false"
                               :clearable="false"
                               label-key="dataName" value-key="dataCode" transfer/>
                  </DkFormItem>
                  <!--下次邀约时间（提醒时间）-->
                  <DkFormItem prop="nextFollowTime" :errorMessage="getErrMessage('nextFollowTime')">
                    <DatePickerPop type="datetime" v-model="customerInfo1.nextFollowTime" transfer
                                   format="yyyy-MM-dd HH:mm:ss"/>
                  </DkFormItem>
                </DkForm>
                <Card class="follow-card">
                  <p slot="title">
                    {{ $t('appendix') }}
                  </p>
                  <DkPicWall v-model="customerInfo1.annexPaths.annexPaths"
                             folder="t_csm_follow/annex_paths"></DkPicWall>
                </Card>
              </template>
              <template slot="2">
                <DkForm ref="formFollow2" style="width:100%;" name="dk-form" v-model="customerInfo2" :rules="rule2"
                        @onValidate="onValidate" :label-max-words="6">
                  <!--                客户意向-->
                  <DkFormItem prop="intention" :errorMessage="getErrMessage('intention')" required>
                    <SelectPop v-model="customerInfo2.intention" :options="intentionList" :multiple="false"
                               :clearable="false"
                               label-key="dataName" value-key="dataCode" transfer
                               @on-change="(val)=>cleanCompetitiveBrands(val, '2')"/>
                  </DkFormItem>
                  <!--                竞品品牌-->
                  <DkFormItem prop="competitiveBrands" :errorMessage="getErrMessage('competitiveBrands')">
                    <InputPop v-model="customerInfo2.competitiveBrands" maxlength="100"/>
                  </DkFormItem>
                  <!--流失原因-->
                  <DkFormItem prop="loseReasonIds" :errorMessage="getErrMessage('loseReasonIds')" required>
                    <SelectPop v-model="customerInfo2.loseReasonIds" :options="loseReasonList" multiple
                               :clearable="false"
                               label-key="dataValue" value-key="dataId" transfer @on-change="changeInviteResult"/>
                  </DkFormItem>
                  <!--邀约结果-->
                  <DkFormItem prop="inviteResult" :errorMessage="getErrMessage('inviteResult')" required>
                    <SelectPop v-model="customerInfo2.inviteResult" :options="inviteResultList" :multiple="false"
                               :clearable="false"
                               label-key="dataName" value-key="dataCode" transfer @on-change="changeInviteResult"/>
                  </DkFormItem>
                  <!--邀约时间-->
                  <DkFormItem ref="formFollow2_inviteTime" :label="$t('inviteTime2')" prop="inviteTime"
                              :errorMessage="getErrMessage('inviteTime')"
                  >
                    <DatePickerPop type="datetime" v-model="customerInfo2.inviteTime" transfer
                                   format="yyyy-MM-dd HH:mm:ss"/>
                  </DkFormItem>
                  <!--跟进内容-->
                  <DkFormItem ref="formFollow2_followData" prop="followData"
                              :errorMessage="getErrMessage('followData')">
                    <InputPop textarea-flag v-model="customerInfo2.followData" maxlength="100"/>
                  </DkFormItem>
                  <!--下次跟进计划-->
                  <DkFormItem prop="nextFollowPlan" :errorMessage="getErrMessage('nextFollowPlan')">
                    <InputPop textarea-flag v-model="customerInfo2.nextFollowPlan" maxlength="100"/>
                  </DkFormItem>
                  <!--下次邀约时间（提醒时间）-->
                  <DkFormItem :label="$t('nextFollowTime2')" prop="nextFollowTime"
                              :errorMessage="getErrMessage('nextFollowTime')">
                    <DatePickerPop type="datetime" v-model="customerInfo2.nextFollowTime" transfer
                                   format="yyyy-MM-dd HH:mm:ss"/>
                  </DkFormItem>
                </DkForm>
                <Card class="follow-card">
                  <p slot="title">
                    {{ $t('appendix') }}
                  </p>
                  <DkPicWall v-model="customerInfo2.annexPaths.annexPaths"
                             folder="t_csm_follow/annex_paths"></DkPicWall>
                </Card>
              </template>
              <template slot="3">
                <DkForm ref="formFollow3" style="width:100%;" name="dk-form" v-model="customerInfo3" :rules="rule3"
                        @onValidate="onValidate" :label-max-words="6">
                  <!--设计师-->
                  <DkFormItem prop="designUser" :errorMessage="getErrMessage('designUser')">
                    <SelectMagnifier v-model="customerInfo3.designUser" searchType="S"
                                     :other-condition="{jobIds: [-101, -102]}"
                                     :type="this.$config.MagnifierType.user"></SelectMagnifier>
                  </DkFormItem>
                  <!--邀约结果-->
                  <DkFormItem prop="inviteResult" :errorMessage="getErrMessage('inviteResult')" required>
                    <SelectPop v-model="customerInfo3.inviteResult" :options="inviteResultList" :multiple="false"
                               :clearable="false"
                               label-key="dataName" value-key="dataCode" transfer/>
                  </DkFormItem>
                  <!--邀约时间-->
                  <DkFormItem :label="$t('inviteTime3')" prop="inviteTime"
                              :errorMessage="getErrMessage('inviteTime')">
                    <DatePickerPop type="datetime" v-model="customerInfo3.inviteTime" transfer
                                   format="yyyy-MM-dd HH:mm:ss"
                                   :readonly="!customerInfo3.inviteResult || customerInfo3.inviteResult == $config.basicDataCode.inviteResult2"/>
                  </DkFormItem>
                  <!--跟进内容-->
                  <DkFormItem prop="followData" :errorMessage="getErrMessage('followData')">
                    <InputPop textarea-flag v-model="customerInfo3.followData" maxlength="100"/>
                  </DkFormItem>
                  <!--下次跟进计划-->
                  <DkFormItem prop="nextFollowPlan" :errorMessage="getErrMessage('nextFollowPlan')">
                    <InputPop textarea-flag v-model="customerInfo3.nextFollowPlan" maxlength="100"/>
                  </DkFormItem>
                  <!--下次邀约时间（提醒时间）-->
                  <DkFormItem :label="$t('nextFollowTime2')" prop="nextFollowTime"
                              :errorMessage="getErrMessage('nextFollowTime')">
                    <DatePickerPop type="datetime" v-model="customerInfo3.nextFollowTime" transfer
                                   format="yyyy-MM-dd HH:mm:ss"/>
                  </DkFormItem>
                </DkForm>
                <Card class="follow-card">
                  <p slot="title">
                    {{ $t('appendix') }}
                  </p>
                  <DkPicWall v-model="customerInfo3.annexPaths.annexPaths"
                             folder="t_csm_follow/annex_paths"></DkPicWall>
                </Card>
              </template>
            </DkTabs>
          </Card>
        </DkCollapse>
      </div>
    </DkModal>
  </div>
</template>

<script>
import {formMixin} from '@/mixins/form'

export default {
  components: {},
  mixins: [formMixin],
  name: 'customer-follow',
  model: {
    prop: 'value',
    event: 'close'
  },
  watch: {
    value(val) {
      this.visible = val
    },
    visible(val) {
      if (!val) {
        this.$emit('close', false)
      } else {
      }
    },
    goodsSpecsListBackUp() {
      //设置意向
      this.setGoodsSpecs()
    },
    customerData() {
      this.customerInfo = this.customerData
    },
    'customerInfo3.inviteResult'(val) {

    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    //  商品规格品类备份
    goodsSpecsListBackUp: {
      type: Array
    },
    customerData: {
      type: Object
    },
    intentionList: {
      type: Array
    },
    inviteResultList: {
      type: Array
    },
    followTypeList: {
      type: Array
    }
  },
  data() {
    let self = this
    return {
      cityData: [],
      customerInfo: self.customerData,
      // 客户信息 日常跟进
      customerInfo1: {
        followData: null,
        nextFollowPlan: null,
        followType: null,
        nextFollowTime: null,
        intention: null,
        competitiveBrands: null,
        intentionInfo: [],
        loseReasonIds: [],
        annexPaths: {
          annexPaths: []
        },
      },
      // 客户信息 邀约进店
      customerInfo2: {
        inviteResult: null,
        inviteTime: null,
        followData: null,
        nextFollowPlan: null,
        followType: null,
        nextFollowTime: null,
        intention: null,
        competitiveBrands: null,
        loseReasonIds: [],
        annexPaths: {
          annexPaths: []
        },
      },
      // 客户信息 预约量尺
      customerInfo3: {
        designUser: null,
        inviteResult: null,
        followData: null,
        nextFollowPlan: null,
        followType: null,
        nextFollowTime: null,
        annexPaths: {
          annexPaths: []
        },
      },
      custRules: {
        customerName: [
          {required: true, trigger: 'none'},
        ],
      },
      phoneRules: {
        customerPhone: [
          {required: true, trigger: 'none'},
          {
            required: true,
            trigger: 'none',
            max: 11,
            min: 11,
            message: self.$t('W_071', {'param': self.$t('customerPhone')})
          },
        ],
      },
      // 错误信息
      errMessage: {},
      // 跟进的tab切换
      followTab: '1',
      goodsSpecsList: [],
      loseReasonList: [],
      otherIntentionInfo: null,
      regionData: [],
      // 日常跟进校验
      rule1: {
        followData: [
          {required: true, trigger: 'none'},
        ],
        followType: [
          {required: true, trigger: 'none'},
        ],
        intention: [
          {required: true, trigger: 'none'},
        ],
        loseReasonIds: [
          {required: true, trigger: 'none', type: 'array'},
        ],
      },
      // 邀约进店校验
      rule2: {
        intention: [
          {required: true, trigger: 'none'},
        ],
        followData: [
          {required: true, trigger: 'none'},
        ],
        inviteResult: [
          {required: true, trigger: 'none'},
        ],
        inviteTime: [
          {required: true, trigger: 'none', type: 'date'},
        ],
        followType: [
          {required: true, trigger: 'none'},
        ],
        loseReasonIds: [
          {required: true, trigger: 'none', type: 'array'},
        ],
      },
      // 预约量尺校验
      rule3: {
        followData: [
          {required: true, trigger: 'none'},
        ],
        inviteResult: [
          {required: true, trigger: 'none'},
        ],
        inviteTime: [
          {required: true, trigger: 'none', type: 'date'},
        ],
        followType: [
          {required: true, trigger: 'none'},
        ],
      },
      visible: false,
      loading: false,
    }
  },
  methods: {
    /**
     * @desc   : checkBox修改意向品类
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    selectIntentionInfo(val) {
      if (val.value) {
        val.count = 1
      } else {
        val.count = 0
      }
    },
    /**
     * @desc   : 关闭跟进弹窗
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    cancelFollow() {
      this.visible = false
      this.$refs['formFollow' + this.followTab].$refs['dk-form'].resetFields()
      this.$refs.customerInfo.$refs['dk-form'].resetFields()
      this['customerInfo' + this.followTab].annexPaths.annexPaths = null
      // 清空客户区域
      if (this.$refs.customerDistrict) {
        this.$refs.customerDistrict.clear();
      }
      if (this.followTab == '1') {
        this.otherIntentionInfo = null
        //设置意向
        this.setGoodsSpecs()
      }
    },
    /**
     * @desc   : 改变邀约结果
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    changeInviteResult(val) {
      if (val == this.$config.basicDataCode.inviteResult1) {
        this.customerInfo2.nextFollowPlan = null
        this.customerInfo2.nextFollowTime = null
        this.customerInfo2.followData = ''
        this.$set(this, 'rule2', {
          intention: [
            {required: true, trigger: 'none'},
          ],
          followData: [
            {required: true, trigger: 'none'},
          ],
          inviteResult: [
            {required: true, trigger: 'none'},
          ],
          inviteTime: [
            {required: true, trigger: 'none', type: 'date'},
          ],
          followType: [
            {required: true, trigger: 'none'},
          ],
          loseReasonIds: [
            {required: true, trigger: 'none', type: 'array'},
          ],
        })
      } else {
        this.customerInfo2.inviteTime = null
        this.$set(this, 'rule2', {
          intention: [
            {required: true, trigger: 'none'},
          ],
          followData: [
            {required: false, trigger: 'none'},
          ],
          inviteResult: [
            {required: true, trigger: 'none'},
          ],
          inviteTime: [
            {required: false, trigger: 'none', type: 'date'},
          ],
          followType: [
            {required: true, trigger: 'none'},
          ],
          loseReasonIds: [
            {required: true, trigger: 'none', type: 'array'},
          ],
        })
        this.$refs['formFollow2_inviteTime'].$refs.formItem.resetField()
        // this.$refs['formFollow2_followData'].$refs.formItem.resetField()
        this.customerInfo2.followData = '拒绝邀约'
      }
    },
    /**
     * @desc   : 选择地址
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    chooseAddress(value) {
      this.customerInfo.customerDistrict = value;
      // 说明是清空
      if (!value) {
        this.customerInfo.addressName = null;
        this.customerInfo.addressFull = null;
        this.customerInfo.addressGcj02 = {};
        this.customerInfo.addressArea = {};
      } else {
        //按照title进行
        this.customerInfo.addressName = value.addressName;
        this.customerInfo.addressGcj02 = value.addressGcj02;
        this.customerInfo.addressArea = value.addressArea;
        this.customerInfo.addressFull = value.addressFull + (this.customerInfo.addressNo ? this.customerInfo.addressNo : '');
      }
    },
    /**
     * @desc   : 清除竞争品牌
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    cleanCompetitiveBrands(val, col) {

    },
    /**
     * @desc   : 校验
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    getErrMessage(prop) {
      return this.errMessage[prop]
    },
    /**
     * @desc   : 查询流失原因
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    getDictionaryData() {

    },
    /**
     * @desc   : 校验
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    onValidate({prop, status, error}) {
      this.$set(this.errMessage, prop, error)
    },
    /**
     * @desc   : 意向 其他分类选中事件
     * @author : 付斌
     * @date   : 2024-02-01 14:33
     */
    radioChange(val) {

    },
    /**
     * @desc   : 拼写详细地址
     * @author : 付斌
     * @date   : 2024-02-01 14:34
     */
    setAddressFull(e) {

    },
    /**
     * @desc   : 设置意向
     * @author : 付斌
     * @date   : 2024-02-01 14:34
     */
    setGoodsSpecs() {

    },
    /**
     * @desc   : 提交跟进
     * @author : 付斌
     * @date   : 2024-02-01 14:34
     */
    submitFollow() {

    },
    /**
     * @desc   : 上传文件
     * @author : 付斌
     * @date   : 2024-02-01 14:34
     */
    uploadFile(response, file, fileList) {
      if (response.code == 200) {
        if (!this['customerInfo' + this.followTab].files) {
          this['customerInfo' + this.followTab].files = []
        }
        this['customerInfo' + this.followTab].files.push(response.data)
      } else {
        this.$Message.error(response.message)
      }
    },
  },
  created() {
    if (this.customerInfo && this.customerInfo.addressFull) {
      // console.log('ttt',this.customerInfo)
      // 设置地址（不包括门牌号）
      this.customerInfo.customerDistrict = {}
      this.customerInfo.customerDistrict.addressFull = this.customerInfo.addressFull.replace(this.customerInfo.addressNo, '')
    }
    //设置意向
    this.setGoodsSpecs()
    // 查询流失原因
    this.getDictionaryData()
    //设置默认城市
    if (this.$store.state.user.cityName) {
      let city = this.$store.state.user.cityName;
      // 给城市赋值
      this.cityData.push({key: city, value: city})
    }
  }
}
</script>
