<!-- @desc:客户管理新建编辑  @auth:付斌  @time:2024/1/30 15:15 -->
<template>
  <div class="main-div">
    <DkCollapse @on-change="changeCollapse" ref="collapse">
      <DkPanel prop="essentialInformation">
        <!--  下拉区域  -->
        <DkForm slot="content" ref="formInline" v-model="formData" style="width: 95%" :labelMaxWords="7">
          <!--客户名称-->
          <DkFormItem prop="customerName" :required="true">
            <InputPop v-model="formData.customerName"/>
          </DkFormItem>
          <!--客户编码-->
          <DkFormItem prop="customerCode" :required="true">
            <InputPop v-model="formData.customerCode"/>
          </DkFormItem>
          <!--客户电话-->
          <DkFormItem prop="customerPhone" :required="true">
            <InputPop :telephone="true" v-model="formData.customerPhone" maxlength="11"/>
          </DkFormItem>
          <!--联系人-->
          <DkFormItem prop="contactName">
            <InputPop v-model="formData.contactName"/>
          </DkFormItem>
          <!--联系电话-->
          <DkFormItem prop="contactPhones">
            <InputPop :telephone="true" v-model="formData.contactPhones" maxlength="11"/>
          </DkFormItem>
          <!--行政区划-->
          <!--              <Col span="6">-->
          <!--                <DkFormItem prop="customerDistrict" required>-->
          <!--                  <RegionsChooseAmap v-model="regionData" :options="cityData" :default-value="formData.addressName"-->
          <!--                                     ref="customerDistrict" @on-choose="chooseAddress"></RegionsChooseAmap>-->

          <!--                </DkFormItem>-->
          <!--              </Col>-->
          <!--门牌号-->
          <DkFormItem :label="$t('addressNo')" prop="addressNo" required>
            <InputPop v-model="formData.addressNo" @input="setAddressFull"/>
          </DkFormItem>
          <!--详细地址-->
          <DkFormItem prop="addressFull" :required="true">
            <InputPop ref="addressCustomerFull" :readonly="true" v-model="formData.addressFull"/>
          </DkFormItem>
          <!--              &lt;!&ndash;小区档案&ndash;&gt;-->
          <!--                <DkFormItem prop="estateId">-->
          <!--                  <SelectMagnifier v-model="formData.estateId" :type="this.$config.MagnifierType.estate"-->
          <!--                                   searchType="S" :display-text="formData.estateName"/>-->
          <!--                </DkFormItem>-->
          <!--              &lt;!&ndash;业务员&ndash;&gt;-->
          <!--                <DkFormItem prop="reportUser" :required="true">-->
          <!--                  <SelectMagnifier v-model="formData.reportUser" searchType="S" @ok="changeReportUser"-->
          <!--                                   :type="this.$config.MagnifierType.user" :display-text="formData.reportUserName"/>-->
          <!--                </DkFormItem>-->
          <!--部门-->
          <DkFormItem prop="orgId" :required="true">
            <InputPop v-model="formData.orgName" readonly/>
          </DkFormItem>
          <!-- 分销商 -->
          <DkFormItem prop="fenXiaoShang">
            <InputPop v-model="formData.fenXiaoShangName" readonly/>
          </DkFormItem>
          <!-- 渠道 -->
          <DkFormItem prop="channel">
            <InputPop v-model="formData.channelName" readonly/>
          </DkFormItem>
          <!--客户分类-->
          <DkFormItem prop="customerClassified">
            <SelectPop v-model="formData.customerClassified" :options="customerClassifiedList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--客成状态-->
          <DkFormItem prop="saleStatus" :required="true">
            <SelectPop v-model="formData.saleStatus" :options="saleStatusList" :multiple="false"
                       :clearable="false"
                       label-key="dataName" value-key="dataCode" :disabled="type == 'edit'"/>
          </DkFormItem>
          <!--性别-->
          <DkFormItem prop="gender" required>
            <SelectPop v-model="formData.gender" :options="genderList" :multiple="false" :clearable="false"
                       label-key="dataName" value-key="dataCode"/>
          </DkFormItem>
          <!--客户来源-->
          <DkFormItem prop="customerFrom" required>
            <SelectPop v-model="formData.customerFrom" :options="customerFromList" :multiple="false"
                       :clearable="false"
                       label-key="fromName" value-key="fromId"/>
          </DkFormItem>
          <!--装修户型数-->
          <DkFormItem prop="toiletCount" required>
            <SelectPop v-model="formData.toiletCount" :options="toiletList" :multiple="false"
                       label-key="toiletsName" value-key="toiletsId"/>
          </DkFormItem>
          <!--装修类型-->
          <DkFormItem prop="fitupType" required>
            <SelectPop v-model="formData.fitupType" :options="fitupTypeList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--房屋类型-->
          <DkFormItem prop="houseType">
            <SelectPop v-model="formData.houseType" :options="houseTypeList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--装修风格-->
          <DkFormItem prop="fitupStyle">
            <SelectPop v-model="formData.fitupStyle" :options="fitupStyleList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--年龄构成-->
          <DkFormItem prop="ageComposition">
            <SelectPop v-model="formData.ageComposition" :options="ageCompositionList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--决策者-->
          <DkFormItem prop="decisionMaker">
            <SelectPop v-model="formData.decisionMaker" :options="decisionMakerList" :multiple="false"
                       label-key="dataValue" value-key="dataId"/>
          </DkFormItem>
          <!--备注-->
          <DkFormItem prop="remarks">
            <InputPop v-model="formData.remarks"/>
          </DkFormItem>
          <!--客户标签-->
          <DkFormItem prop="customerTags">
            <Tag v-for="(item, index) of formData.customerTagNames" :key="index">{{ item }}</Tag>
            <Button icon="ios-add" circle size="small" @click="customTagModal=true"></Button>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <DkPanel prop="invoiceInfo">
        <!--  下拉区域  -->
        <DkForm slot="content" ref="formInline" v-model="formData" style="width: 95%" :labelMaxWords="7">
          <!--开户账号-->
          <DkFormItem prop="bankAccount">
            <InputPop v-model="formData.bankAccount"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
    </DkCollapse>

    <!--  下部分按钮区域  -->
    <DkSaveButton ref="saveButton" :loading="loading" @save="submitForm" @close="btnGroupClick"></DkSaveButton>

    <!--    选择客户标签-->
    <Modal v-model="customTagModal" :title="$t('customerTags')">
      <Card v-for="(item, index) of customerTagList" :key="index" style="margin-bottom: 10px">
        <p slot="title">{{ item.tagName }}</p>
        <Tag v-for="(item2, index2) of item.tableTag" :key="index2" size="medium" :checked="item2.checked"
             color="primary" checkable @on-change="(checked)=>selectTag(checked, item2)">{{ item2.tagName }}
        </Tag>
      </Card>
      <div slot="footer">
      </div>
    </Modal>
  </div>
</template>

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

export default {
  components: {},
  mixins: [formMixin],
  data() {
    let self = this
    return {
      // 是否是选择客户设置以及编辑时设置
      setCustomerFlag: false,
      //年龄构成list
      ageCompositionList: [],
      // 省市区list
      areaTreeList: [],
      // 客户标签list
      customerTagList: [],
      // 自定义标签弹窗
      customTagModal: false,
      // 客户来源list
      customerFromList: [],
      //决策者list
      decisionMakerList: [],
      // 装修类型list
      fitupTypeList: [],
      // 装修风格list
      fitupStyleList: [],
      // 性别list
      genderList: [],
      // 房屋类型
      houseTypeList: [],
      // 发票类型
      invoiceTypeList: [],
      // 客成状态list
      saleStatusList: [],
      // 装修户型数list
      toiletList: [],
      loading: false,
      errMessage: {},
      customerClassifiedList: [],
      formData: {
        customerId: null,
        customerName: null,
        customerCode: null,
        customerPhone: null,
        contactName: null,
        contactPhones: null,
        saleStatus: null,
        reportUser: self.$store.state.user.id,
        reportUserName: self.$store.state.user.userName,
        addressArea: null,
        addressName: null,
        addressNo: null,
        addressFull: null,
        customerDistrict: null,
        customerTags: [],
        customerTagNames: [],
        bankAccount: null,
        remarks: '',
        cpId: self.$store.state.user.cpId,
        orgId: self.$store.state.user.orgId,
        orgName: self.$store.state.user.orgName,
        gender: null,
        toiletCount: null,
        fitupType: null,
        houseType: null,
        fitupStyle: null,
        ageComposition: null,
        decisionMaker: null,
        customerClassified: null,
        fenXiaoShangName: self.$store.state.user.sale2Name,
        channelName: null
      },
      ruleInline: {
        customerName: [
          {required: true, trigger: 'none'},
        ],
        customerPhone: [
          {required: true, trigger: 'none'},
          {
            required: true,
            trigger: 'none',
            max: 11,
            min: 11,
            message: self.$t('W_071', {'param': self.$t('customerPhone')})
          },
        ],
        // 客户区域
        customerDistrict: [
          {required: true, trigger: 'none', type: 'object'}
        ],
        contactPhones: [
          {
            required: false,
            trigger: 'none',
            max: 11,
            min: 11,
            message: self.$t('W_071', {'param': self.$t('contactPhones')})
          },
        ],
        reportUser: [
          {required: true, trigger: 'none', type: 'number'}
        ],
        saleStatus: [
          {required: true, trigger: 'none'}
        ],
        addressName: [
          {required: true, trigger: 'none'},
        ],
        gender: [
          {required: true, trigger: 'none'},
        ],
        customerFrom: [
          {required: true, trigger: 'none', type: 'number'}
        ],
        toiletCount: [
          {required: true, trigger: 'none', type: 'number'}
        ],
        fitupType: [
          {required: true, trigger: 'none', type: 'number'}
        ],
        addressNo: [
          {required: true, trigger: 'none'},
        ],
      },
      //商品属性
      attributeList: [],
      //流通方式集合
      salesModeList: [],
      //计量标识
      flgEstimateList: [],
      //种类放大镜数据体
      valData: [],
      //计量单位
      goodsUnitList: [],
      //商品规格
      specificationList: [],
      //商品品牌
      goodsBrandList: [],
      //商品品种
      goodsVarietyList: [],
      //商品系列
      goodsSeriesList: [],
      //商品种类
      goodsCategoryList: [],
      //cpIds
      cpIds: [],

      estateData: [],//小区档案数据源
      regionData: [],
      cityData: [],
    }
  },
  methods: {
    /**
     * @desc   : 改变报备人事件
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    changeReportUser(val) {

    },
    /**
     * @desc   : 选择地址
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    chooseAddress(value) {

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

    },
    /**
     * @desc   : 保存的提交事件
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    submitForm() {

    },
    /**
     * @desc   : 新建完毕后清空窗体
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    clearForm() {

    },

    /**
     * @desc   : 保存
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    saveGoods(params) {

    },
    /**
     * @desc   : 通过id查询
     * @author : 付斌
     * @date   : 2024-02-01 14:30
     */
    detail(id) {

    },
    /**
     * @desc   : 返回一览页面
     * @author : 付斌
     * @date   : 2024-02-01 14:31
     */
    btnGroupClick() {
      this.formData = {}
      this.closeTag(this.$route)
    },
    /**
     * @desc   : 查询集团字典
     * @author : 付斌
     * @date   : 2024-02-01 14:31
     */
    getDictionaryData() {

    },
    /**
     * @desc   : 返回预览页面
     * @author : 付斌
     * @date   : 2024-02-01 14:31
     */
    returnUpperLevel() {
      this.$router.push('/sale/customer/index')
    },
    /**
     * @desc   : 选择标签
     * @author : 付斌
     * @date   : 2024-02-01 14:31
     */
    selectTag(checked, item) {

    },
  },
  created() {
    this.focusItem = 'customerName';    // 给第一个组件赋值，可以在混入中自动去聚焦
    this.primaryKey = 'customerId'  // 设置主键Id
    // 查询集团字典
    this.getDictionaryData()
  },
}
</script>
